Green-Future/index.html at main · codegenweb/Green-Future · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Font Awesome CDN -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="animation.css">
  <link rel="stylesheet" href="responsive-css.css">

  <title>Greenfuture</title>
</head>

<body>
  <section id="hero">
    <div class="section-wrap">
      <header>
        <a class="head-logo"><span>green</span>future</a>

        <nav>
          <a class="nav-items">Home</a>
          <a class="nav-items">About</a>
          <a class="nav-items">Projects</a>
          <a class="nav-items">Blog</a>
          <a class="nav-items">Contact</a>
        </nav>

        <div class="head-cta">
          <button class="header-cta-btn">Login</button>
          <button class="header-cta-btn">Be a Partner</button>
        </div>
      </header>

      <div class="hero-content">
        <div class="left">
          <h1 class="main-text">Plant <span>a Tree,</span> Save <span> a Life!</span></h1>

          <h2 class="sub-text">Join us in creating a greener tomorrow, one tree at a time.</h2>

          <div class="hero-cta">
            <button class="hero-cta-btn btn1">Plant a tree</button>
            <button class="hero-cta-btn btn2">Learn more</button>
          </div>
        </div>

        <div class="right">
          <img src="images/tr1.png" alt="big-tree-image">
        </div>
      </div>

      <div class="social">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-linkedin-in"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>

    </div>
  </section>

  <section id="about">
    <div class="section-wrap">
      <h3 class="section-title"><span>About </span>us</h3>
      <p class="p1">
        Welcome to our initiative, "Plant Trees, Save the Life!" We are dedicated to creating a greener, healthier planet for everyone. Our mission is to combat climate change, preserve biodiversity, and promote sustainable living by inspiring individuals and communities to plant trees. Trees play a vital role in improving air quality, conserving water, supporting wildlife, and mitigating the effects of global warming.
      </p>

      <p class="p2">
        At Green Future Project, we organize tree-planting campaigns, collaborate with local communities, and educate people about the importance of sustainability. Together, we can build a future where nature thrives, and every action we take today creates a better tomorrow. Whether by planting trees, spreading awareness, or supporting our efforts, you can make a meaningful difference. Join us in this journey to protect our planet and secure a brighter future for generations to come.
      </p>
      <button class="section-btn">Learn more</button>

      <img src="images/grass.png" />
    </div>
  </section>

  <section id="project">
    <div class="section-wrap">
      <h3 class="section-title"><span>our </span>project</h3>

      <div class="project-grid">

        <div class="card crd-1">
          <img src="images/p1.jpg">
          <h4 class="card-title">Greening Urban Spaces</h4>
        </div>
        <div class="card crd-2">
          <img src="images/p2.jpg">
          <h4 class="card-title">Reforesting Degraded Lands</h4>
        </div>
        <div class="card crd-3">
          <img src="images/p3.jpeg">
          <h4 class="card-title">School Green Initiatives</h4>
        </div>
        <div class="card crd-4">
          <img src="images/p4.jpg">
          <h4 class="card-title">Climate Action Drives</h4>
        </div>

      </div>

      <button class="section-btn">See all</button>
    </div>
  </section>

  <section id="contact">
    <div class="section-wrap">
      <div class="contact-grid">
        <div class="right">
          <img src="images/tr2.png" alt="">
        </div>

        <div class="left">
          <h3 class="section-title"><span>get in </span> touch</h3>

          <p>Let’s create something amazing together. Send us a message now!</p>

          <form>
            <input class="in-1" type="text" placeholder="Your name" spellcheck="false">

            <input class="in-2" type="text" placeholder="Your email" spellcheck="false">

            <textarea placeholder="Your message"></textarea>

            <button>Send</button>

          </form>
        </div>
      </div>
    </div>
  </section>

  <section id="footer">
    <div class="section-wrap">
      <div class="social">
        <i class="fa-brands fa-facebook-f"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-linkedin-in"></i>
        <i class="fa-brands fa-youtube"></i>
      </div>

      <p class="copyright">© CodeGenWeb 2024</p>
    </div>
  </section>

</body>

</html>