<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; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.