Skip to content

Commit 07db727

Browse files
codegenwebcodegenweb
authored
Add files via upload
1 parent f26f352 commit 07db727

File tree

12 files changed

+796
-0
lines changed

12 files changed

+796
-0
lines changed

‎animation.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@keyframes treeScale {
2+
50% {
3+
transform: scale(1.1);
4+
filter: drop-shadow(0 0 100px #8BC34A);
5+
}
6+
}
7+
8+
@keyframes bottomIn {
9+
from {
10+
transform: translateY(200px);
11+
}
12+
to {
13+
transform: translateY(0);
14+
opacity: 1;
15+
}
16+
}
17+
18+
.main-text, .section-title, .crd-1, #footer .social {
19+
animation: 1s bottomIn ease-out forwards;
20+
animation-delay: 0.2s;
21+
opacity: 0;
22+
}
23+
24+
.sub-text, .p1, .crd-2, #contact p, .copyright {
25+
animation: 1.2s bottomIn ease-out forwards;
26+
animation-delay: 0.4s;
27+
opacity: 0;
28+
}
29+
30+
.in-1 {
31+
animation: 1.1s bottomIn ease-out forwards;
32+
animation-delay: 0.3s;
33+
opacity: 0;
34+
}
35+
36+
.in-2 {
37+
animation: 1.3s bottomIn ease-out forwards;
38+
animation-delay: 0.5s;
39+
opacity: 0;
40+
}
41+
42+
43+
.hero-cta, .p2, .crd-3, textarea {
44+
animation: 1.6s bottomIn ease-out forwards;
45+
animation-delay: 0.6s;
46+
opacity: 0;
47+
}
48+
49+
.social, .section-btn, .crd-4, form button {
50+
animation: 1.8s bottomIn ease-out forwards;
51+
animation-delay: 0.6s;
52+
opacity: 0;
53+
}
54+
55+
@keyframes topIn {
56+
from {
57+
transform: translateY(-200px);
58+
}
59+
to {
60+
transform: translateY(0);
61+
opacity: 1;
62+
}
63+
}
64+
65+
@keyframes rightIn {
66+
from {
67+
transform: translateX(200px);
68+
}
69+
to {
70+
transform: translateX(0);
71+
opacity: 1;
72+
}
73+
}
74+
75+
@keyframes leftIn {
76+
from {
77+
transform: translateX(-200px);
78+
}
79+
to {
80+
transform: translateX(0);
81+
opacity: 1;
82+
}
83+
}
84+
.head-logo {
85+
animation: 1.2s leftIn ease-out forwards;
86+
animation-delay: 0.4s;
87+
opacity: 0;
88+
}
89+
90+
#contact .right {
91+
animation: 1.6s leftIn ease-out forwards;
92+
animation-delay: 0.4s;
93+
opacity: 0;
94+
}
95+
96+
nav {
97+
animation: 1.2s topIn ease-out forwards;
98+
animation-delay: 0.4s;
99+
opacity: 0;
100+
}
101+
102+
.head-cta {
103+
animation: 1.2s rightIn ease-out forwards;
104+
animation-delay: 0.4s;
105+
opacity: 0;
106+
}
107+
108+
109+
110+
.right {
111+
animation: 1.6s rightIn ease-out forwards;
112+
animation-delay: 0.4s;
113+
opacity: 0;
114+
}

‎images/bac.jpg‎

1.75 MB
Loading

‎images/grass.png‎

6.38 MB
Loading

‎images/p1.jpg‎

836 KB
Loading

‎images/p2.jpg‎

749 KB
Loading

‎images/p3.jpeg‎

1.37 MB
Loading

‎images/p4.jpg‎

781 KB
Loading

‎images/tr1.png‎

7.62 MB
Loading

‎images/tr2.png‎

11.2 MB
Loading

‎index.html‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Font Awesome CDN -->
9+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
10+
11+
<link rel="stylesheet" href="styles.css">
12+
<link rel="stylesheet" href="animation.css">
13+
<link rel="stylesheet" href="responsive-css.css">
14+
15+
<title>Greenfuture</title>
16+
</head>
17+
18+
<body>
19+
<section id="hero">
20+
<div class="section-wrap">
21+
<header>
22+
<a class="head-logo"><span>green</span>future</a>
23+
24+
<nav>
25+
<a class="nav-items">Home</a>
26+
<a class="nav-items">About</a>
27+
<a class="nav-items">Projects</a>
28+
<a class="nav-items">Blog</a>
29+
<a class="nav-items">Contact</a>
30+
</nav>
31+
32+
<div class="head-cta">
33+
<button class="header-cta-btn">Login</button>
34+
<button class="header-cta-btn">Be a Partner</button>
35+
</div>
36+
</header>
37+
38+
<div class="hero-content">
39+
<div class="left">
40+
<h1 class="main-text">Plant <span>a Tree,</span> Save <span> a Life!</span></h1>
41+
42+
<h2 class="sub-text">Join us in creating a greener tomorrow, one tree at a time.</h2>
43+
44+
<div class="hero-cta">
45+
<button class="hero-cta-btn btn1">Plant a tree</button>
46+
<button class="hero-cta-btn btn2">Learn more</button>
47+
</div>
48+
</div>
49+
50+
<div class="right">
51+
<img src="images/tr1.png" alt="big-tree-image">
52+
</div>
53+
</div>
54+
55+
<div class="social">
56+
<i class="fa-brands fa-facebook-f"></i>
57+
<i class="fa-brands fa-twitter"></i>
58+
<i class="fa-brands fa-linkedin-in"></i>
59+
<i class="fa-brands fa-youtube"></i>
60+
</div>
61+
62+
</div>
63+
</section>
64+
65+
<section id="about">
66+
<div class="section-wrap">
67+
<h3 class="section-title"><span>About </span>us</h3>
68+
<p class="p1">
69+
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.
70+
</p>
71+
72+
<p class="p2">
73+
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.
74+
</p>
75+
<button class="section-btn">Learn more</button>
76+
77+
<img src="images/grass.png" />
78+
</div>
79+
</section>
80+
81+
<section id="project">
82+
<div class="section-wrap">
83+
<h3 class="section-title"><span>our </span>project</h3>
84+
85+
<div class="project-grid">
86+
87+
<div class="card crd-1">
88+
<img src="images/p1.jpg">
89+
<h4 class="card-title">Greening Urban Spaces</h4>
90+
</div>
91+
<div class="card crd-2">
92+
<img src="images/p2.jpg">
93+
<h4 class="card-title">Reforesting Degraded Lands</h4>
94+
</div>
95+
<div class="card crd-3">
96+
<img src="images/p3.jpeg">
97+
<h4 class="card-title">School Green Initiatives</h4>
98+
</div>
99+
<div class="card crd-4">
100+
<img src="images/p4.jpg">
101+
<h4 class="card-title">Climate Action Drives</h4>
102+
</div>
103+
104+
</div>
105+
106+
<button class="section-btn">See all</button>
107+
</div>
108+
</section>
109+
110+
<section id="contact">
111+
<div class="section-wrap">
112+
<div class="contact-grid">
113+
<div class="right">
114+
<img src="images/tr2.png" alt="">
115+
</div>
116+
117+
<div class="left">
118+
<h3 class="section-title"><span>get in </span> touch</h3>
119+
120+
<p>Let’s create something amazing together. Send us a message now!</p>
121+
122+
<form>
123+
<input class="in-1" type="text" placeholder="Your name" spellcheck="false">
124+
125+
<input class="in-2" type="text" placeholder="Your email" spellcheck="false">
126+
127+
<textarea placeholder="Your message"></textarea>
128+
129+
<button>Send</button>
130+
131+
</form>
132+
</div>
133+
</div>
134+
</div>
135+
</section>
136+
137+
<section id="footer">
138+
<div class="section-wrap">
139+
<div class="social">
140+
<i class="fa-brands fa-facebook-f"></i>
141+
<i class="fa-brands fa-twitter"></i>
142+
<i class="fa-brands fa-linkedin-in"></i>
143+
<i class="fa-brands fa-youtube"></i>
144+
</div>
145+
146+
<p class="copyright">© CodeGenWeb 2024</p>
147+
</div>
148+
</section>
149+
150+
</body>
151+
152+
</html>

0 commit comments

Comments
 (0)