CodePen Embed - Earth Day Celebration Landing Page

 <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 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>
</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>
</div>
<footer>
<p>Happy Earth Day! Together, we can make a difference.</p>
</footer>
</body>

:root {
  --body-padding: 1rem;
  --quote-border-colour: #5079b2;  
  --quote-border-thickness: 5px;
  --quote-padding: 8px;
  --quote-border-transition-time: 0ms;
}

@media screen and (prefers-reduced-motion: no-preference) { 
  :root {
    --quote-border-transition-time: 250ms;
  }
}

*:focus-visible {
  outline: 2px solid #2e401c;
  outline-offset: 2px;
}

body {
  font-family: Roboto, sans;
  font-size: 1rem;
  color: #000000;
  background-color: #fefae0;
  margin: 0;
}

section,
.testimonial,
.events {
  padding-inline: var(--body-padding);
  max-width: 70ch;
  margin-inline: auto;
}

article,
div {
  margin-top: 4rem;
}

h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #7b4618;
  margin-top: 0;
}

a {
  color: #647332;
  text-decoration-thickness: 1px;
  transition: color 250ms ease-out, text-decoration-thickness 250ms ease-out;
}

a:hover,
a:focus,
a:active {
  color: #a4b75c;
  text-decoration-thickness: 3px;
}

li {
  font-size: 1.125rem;
  padding-bottom: 0.5rem;
}

li::marker {
  color: #647332;
}

header {
  background-color: #035e7b;
  color: #ffffff;
  padding: 20px 50px;
}

.facts + article h2 {
  position: relative;
  display: inline-block;
}

.facts + article h2::before,
.facts + article h2::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background-color: #647332;
}

.facts + article h2::before {
  left: 0;
  translate: -150% -50%;
}

.facts + article h2::after {
  right: 0;
  translate: 150% -50%;
}

.action-call {
  background-color: #fff4ac;
  padding: 2rem;
}

.action-call p {
  margin-bottom: 2rem;
}

.action-call a {
  background-color: #496231;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: background-color 250ms ease-out;
}

.action-call a:hover,
.action-call a:focus,
.action-call a:active {
  background-color: #80914b;
}

.testimonial p:first-of-type {
  font-size: 1.5rem;
  font-weight: 600;
  color: #072768;
  text-align: center;
  position: relative;
  padding: var(--quote-padding);
  margin-bottom: 3rem;
}

.testimonial p:first-of-type::before,
.testimonial p:first-of-type::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.testimonial p:first-of-type::before {
  top: calc(var(--quote-padding) * -1);
  left: calc(var(--quote-padding) * -1);
  border-top: 0px solid var(--quote-border-colour);
  border-right: 0px solid var(--quote-border-colour);
  transition: width var(--quote-border-transition-time) linear, height var(--quote-border-transition-time) linear calc(var(--quote-border-transition-time) * 2);
}

.testimonial p:first-of-type::after {
  right: calc(var(--quote-padding) * -1);
  bottom: calc(var(--quote-padding) * -1 - var(--quote-border-thickness));
  border-bottom: 0px solid var(--quote-border-colour);
  border-left: 0px solid var(--quote-border-colour);
  transition: width var(--quote-border-transition-time) linear calc(var(--quote-border-transition-time) * 3), height var(--quote-border-transition-time) linear calc(var(--quote-border-transition-time) * 4);
}

.testimonial.showing p:first-of-type::before,
.testimonial.showing p:first-of-type::after {
  width: calc(100% + var(--quote-padding) * 2);
  height: calc(100% + var(--quote-padding) * 2);
  border-width: var(--quote-border-thickness) !important;
}

.events {
  position: relative;
}

.events::before {
  content: '';
  position: absolute;
  left: calc(var(--body-padding) * -1);
  top: -15%;
  width: calc(100% + var(--body-padding));
  height: 2px;
  background-color: #3e4c22;
  rotate: 1deg;
}

footer {
  margin-top: 3rem;
  padding: 20px 50px;
  background: #3e4c22;
  text-align: center;
  font-size: 2rem;
  color: #ffffff;
}

article:nth-of-type(odd) {
  padding-left: 10%;
}

article:nth-of-type(even) {
  padding-right: 10%;
}

const testimonial = document.querySelector('.testimonial');
let options = {
  threshold: 1.0,
};

const observer = new IntersectionObserver((entries, options) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      entry.target.classList.add('showing');
    }
  });
});

observer.observe(testimonial);

This Pen is owned by Nic on CodePen.

See more by @nicm42 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.