Skip to content

Commit

Permalink
tobe fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArnavK-09
ArnavK-09 committed Apr 22, 2024
1 parent 7601607 commit 00c8604
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 72 deletions.
54 changes: 47 additions & 7 deletions global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,24 @@

/* HTML css */
html {
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
font-family: Forager;
}

/* A11y */
::-moz-selection {
color: #eeeeee;
background: #052e16;
}
::selection {
color: #eeeeee;
background: #052e16;
}
::-webkit-scrollbar {
display: none;
}

/* Body base designs */
body {
overflow-x: hidden;
Expand Down Expand Up @@ -194,7 +208,7 @@ section:has(> article) {
font-family: CloudySunday;
font-weight: 870;
text-shadow: -4px 4px 0 #052e16, 4px 4px 0 #052e16, 4px -4px 0 #052e16,
-4px -4px 0 #052e16;
-4px -4px 0 #052e16;
color: #fff;
letter-spacing: 0.025em;
max-width: 95%;
Expand All @@ -209,12 +223,14 @@ section:has(> article) {

p {
text-align: center;
opacity: 0.9;
filter: contrast(1.3);
max-width: 90%;
text-align: justify;
margin: 2rem 0px;
color: #052e16;
font-size: 1rem;
letter-spacing: 0.025em;

@media (min-width: 768px) {
margin-top: 0.3rem;
font-size: 1.9rem;
Expand All @@ -228,11 +244,7 @@ section:has(> article) {
padding-left: 2.25rem;
padding-right: 2.25rem;
border-radius: 2.5rem;
background: linear-gradient(
137deg,
#052e16 0%,
#076e32 100%
);
background: linear-gradient(137deg, #052e16 0%, #076e32 100%);
color: white;
font-family: CloudySunday;
text-decoration: none;
Expand All @@ -247,3 +259,31 @@ section:has(> article) {
}
}
}

.testimonial {
min-height: 100vh;
display: grid;
place-items: center;
background: linear-gradient(
to top,
rgb(35, 116, 182) 0%,
rgb(19, 61, 139) 100%
);

h2 {
font-family: CloudySunday;
color: rgb(214, 214, 214);
text-align: center;
letter-spacing: 0.05em;
text-shadow: -2px 2px 0 #fff, 2px 2px 0 #fff, 2px -2px 0 #fff,
-2px -2px 0 #fff;
font-size: 2.25rem;

@media (min-width: 768px) {
font-size: 4.25rem;
line-height: 6rem;
max-width: 77%;
margin-bottom: 0.5em;
}
}
}
89 changes: 32 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,70 +19,45 @@
</head>
<body>
<header>
<h1>Welcome to Our Earth Day Celebration!</h1>
<h1>Welcome to Our Earth Day Celebration!</h1>
</header>
<section>
<article class="facts">
<h2>Did You Know?</h2>
<p>
Earth Day was first celebrated on April 22, 1970, and now includes a
wide range of events coordinated globally by EARTHDAY.ORG including 1
billion people in more than 193 countries.
</p>
</article>
<article>
<h2>Why Celebrate Earth Day?</h2>
<p>
Earth Day is more than just a single day — April 22. It's a day to
remind us to take action in our communities and beyond, to protect the
environment, restore damaged ecosystems, and live a more sustainable
life.
</p>
</article>
<article>
<h2>How You Can Help</h2>
<p>
Join us in making a difference! Here are some ways you can contribute
to preserving our planet:
</p>
<ul>
<li>Reduce, reuse, and recycle.</li>
<li>Volunteer for cleanups in your community.</li>
<li>Conserve water and electricity.</li>
<li>Plant a tree.</li>
<li>Educate others about environmental conservation.</li>
</ul>
</article>
<div class="action-call">
<h2>Take Action Now</h2>
<p>
Join our Earth Day quiz to test your knowledge and learn more about
what you can do to help our planet!
</p>
<a href="#">Start the Quiz!</a>
</div>
<article class="facts">
<h2>Did You Know?</h2>
<p>Earth Day was first celebrated on April 22, 1970, and now includes a wide range of events coordinated globally by EARTHDAY.ORG including 1 billion people in more than 193 countries.</p>
</article>
<article>
<h2>Why Celebrate Earth Day?</h2>
<p>Earth Day is more than just a single day — April 22. It's a day to remind us to take action in our communities and beyond, to protect the environment, restore damaged ecosystems, and live a more sustainable life.</p>
</article>
<article>
<h2>How You Can Help</h2>
<p>Join us in making a difference! Here are some ways you can contribute to preserving our planet:</p>
<ul>
<li>Reduce, reuse, and recycle.</li>
<li>Volunteer for cleanups in your community.</li>
<li>Conserve water and electricity.</li>
<li>Plant a tree.</li>
<li>Educate others about environmental conservation.</li>
</ul>
</article>
<div class="action-call">
<h2>Take Action Now</h2>
<p>Join our Earth Day quiz to test your knowledge and learn more about what you can do to help our planet!</p>
<a href="#">Start the Quiz!</a>
</div>
</section>
<div class="testimonial">
<h2>Inspiration Corner</h2>
<p>
"The Earth does not belong to us: we belong to the Earth." - Marlee
Matlin
</p>
<p>
This Earth Day, let's remember we are part of a larger ecosystem and our
actions have a profound impact on our planet.
</p>
<h2>Inspiration Corner</h2>
<p>"The Earth does not belong to us: we belong to the Earth." - Marlee Matlin</p>
<p>This Earth Day, let's remember we are part of a larger ecosystem and our actions have a profound impact on our planet.</p>
</div>
<div class="events">
<h2>Join an Event</h2>
<p>
Participate in local and global Earth Day events to take action towards
a sustainable future. Check out <a href="#">events near you</a>.
</p>
<h2>Join an Event</h2>
<p>Participate in local and global Earth Day events to take action towards a sustainable future. Check out <a href="#">events near you</a>.</p>
</div>
<footer>
<p>Happy Earth Day! Together, we can make a difference.</p>
<p>Happy Earth Day! Together, we can make a difference.</p>
</footer>
<script src="main.js"></script>
</body>
</body>
</html>
15 changes: 7 additions & 8 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,16 @@ const hero_text = hero.getElementsByTagName("h1")[0];
*/
{
const ground = document.createElement("section");
// for (let i = 5; i > 4; i++) {
// const plant = document.createElement("img");
// plant.src = "//fav.farm/🌵";
// plant.alt = "plant";
// plant.classList.add("plant");
// ground.append(plant)
// }
ground.setAttribute("data-aos", "fade-up");
ground.setAttribute("data-aos-duration", "200");
hero.append(ground);
for (let i = 0; i < 4; i++) {
const plant = document.createElement("img");
plant.src = "//fav.farm/🌵";
plant.alt = "plant";
plant.classList.add("plant");
ground.append(plant)
}
}

/**
Expand All @@ -39,4 +39,3 @@ const hero_text = hero.getElementsByTagName("h1")[0];
{
AOS.init();
}

0 comments on commit 00c8604

Please sign in to comment.