<body>
<header>
<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 <a href="https://www.earthday.org/">EarthDay.org</a> 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><span>Reduce, reuse, and recycle.</span></li>
<li><span>Volunteer for cleanups in your community.</span></li>
<li><span>Conserve water and electricity.</span></li>
<li><span>Plant a tree.</span></li>
<li><span>Educate others about environmental conservation.</span></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="https://www.earthday.org/earth-day-quizzes/">Start the Quiz!</a>
</div>
</section>
<div class="testimonial">
<h2>Inspiration Corner</h2>
<blockquote>
<p>"The Earth does not belong to us: we belong to the Earth."<sub> - Marlee Matlin</sub></p>
</blockquote>
<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="https://www.earthday.org/earth-day-2024/#map">events near you</a>.</p>
</div>
<footer>
<p>Happy Earth Day! Together, we can make a difference.</p>
</footer>
</body>
body {
background: linear-gradient(#4981b3, rgb(72,61,139));
color: white;
padding-left: 6px;
}
p {
text-indent: 16px;
}
a {
color: tan;
}
a:hover, a:focus {
font-size: 1.25em;
color: yellow;
}
blockquote{
background: navy;
padding: 8px;
filter: drop-shadow(0 0 1.0rem white);
border-radius: 42%;
}
ul,li {
list-style-type: none;
}
ul, li {
list-style-position: outside;
list-style-image: url("https://img.icons8.com/emoji/36/globe-showing-americas-emoji.png");
font-size: 24px;
}
li > span {
top: -12px; position:relative;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.