CodePen Embed - Glam Up My Markup: 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>

@import url("https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: "Antonio", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}
header {
  height: calc(100vh - 32px);
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  text-align: center;
  border-radius: 1.3vw;
  margin: 1rem;
  filter: contrast(1) brightness(0.8);
  -webkit-filter: contrast(1) brightness(0.8);
  background-image: url(https://static.vecteezy.com/system/resources/previews/010/377/369/large_2x/beautiful-view-on-planet-earth-from-space-at-night-with-city-light-fantasy-and-futuristic-digital-art-style-background-wallpaper-free-photo.jpg);
  background-size: 150%;
  background-repeat: no-repeat;
  background-position: 50% 20%;
}
header h1 {
  display: flex;
  align-items: center;
  color: rgba(240, 240, 240, 0);
  font-size: 5.625vw;
  line-height: 1.1;
  letter-spacing: -5px;
  font-weight: 700;
  width: 30%;
  height: calc(100% - 50px);
  position: relative;
  padding-block: 3rem;
  padding-inline: 1rem;
  text-transform: uppercase;
  z-index: 999;
  background: rgba(0, 100, 0, 0.3);
  -webkit-mask-clip: text;
  -webkit-mask-image: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 1)
  );
  backdrop-filter: blur(15px) saturate(2) brightness(0.7);
  -webkit-backdrop-filter: blur(15px) saturate(2) brightness(0.7);
  mix-blend-mode: luminosity;
  -webkit-text-stroke-width: 0.8px;
  -webkit-text-stroke-color: rgba(0, 255, 0, 1);
  animation: revealTitle 2s ease forwards;
}
article,
.testimonial,
.events,
.action-call {
  scale: 0;
  padding: 1.25vw;
  animation: reveal 1s ease forwards;
}
article h2,
.testimonial h2,
.events h2,
.action-call h2 {
  font-size: 1.3542vw;
  font-weight: 700;
  color: rgba(240, 240, 240, 1);
  margin-bottom: 1.25vw;
  text-decoration: underline;
}
article p,
.testimonial p,
.events p,
.action-call p,
article ul {
  color: #fff;
  font-weight: 100;
  font-size: 0.833vw;
}
article ul {
  margin-left: calc(1.25vw);
}
section {
  width: 40%;
  height: calc(100vh - 6rem);
  position: absolute;
  top: 2rem;
  right: calc(25% + 3rem + 0.833vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  gap: 0.833vw;
  grid-template-areas:
    "left1 right1"
    "left2 right1"
    "left2 right2"
    "left2 right2";
}
section article {
  position: relative;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  outline: 1px solid rgba(240, 240, 240, 0.3);
  z-index: 10;
}
section article::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  border-radius: 7px;
  backdrop-filter: blur(10px) saturate(2) brightness(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.1);
  mask: url(https://cdn-icons-png.flaticon.com/512/14266/14266085.png),
    linear-gradient(
      45deg,
      #fff calc(100% - 120px),
      transparent calc(100% - 70px)
    ),
    radial-gradient(transparent 1px, #444cf7 2px);
  mask-size: 60px 60px, 100% 100%, 12px 12px;
  mask-repeat: no-repeat, no-repeat, repeat;
  mask-position: calc(100% - 1px) 10px, center, center;
  mask-composite: exclude, intersect, add;
}
section article:first-child {
  grid-area: left1;
}
section article:nth-child(2) {
  grid-area: right1;
  animation-delay: 0.5s;
}
section article:nth-child(2)::after {
  mask: url(https://cdn-icons-png.flaticon.com/512/2824/2824549.png),
    linear-gradient(
      45deg,
      #fff calc(100% - 120px),
      transparent calc(100% - 70px)
    ),
    radial-gradient(transparent 1px, #444cf7 2px);
  mask-size: 60px 60px, 100% 100%, 12px 12px;
  mask-repeat: no-repeat, no-repeat, repeat;
  mask-position: calc(100% - 10px) 10px, center, center;
  mask-composite: exclude, intersect, add;
}
section article:nth-child(3) {
  grid-area: left2;
  animation-delay: 1s;
}
section article:nth-child(3)::after {
  mask: url(https://cdn-icons-png.flaticon.com/512/3166/3166003.png),
    linear-gradient(
      45deg,
      #fff calc(100% - 120px),
      transparent calc(100% - 70px)
    ),
    radial-gradient(transparent 1px, #444cf7 2px);
  mask-size: 60px 60px, 100% 100%, 12px 12px;
  mask-repeat: no-repeat, no-repeat, repeat;
  mask-position: calc(100% - 10px) 10px, center, center;
  mask-composite: exclude, intersect, add;
}
.action-call {
  background-color: rgba(52, 199, 89, 0.1);
  text-align: center;
  border-radius: 7px;
  outline: 1px solid rgba(52, 199, 89, 0.3);
  position: relative;
  grid-area: right2;
  animation-delay: 1.5s;
}
.action-call::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  border-radius: 7px;
  backdrop-filter: blur(10px) saturate(2) brightness(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.1);
  mask: url(https://cdn-icons-png.flaticon.com/512/2602/2602340.png),
    linear-gradient(
      45deg,
      #fff calc(100% - 120px),
      transparent calc(100% - 70px)
    ),
    radial-gradient(transparent 1px, #444cf7 2px);
  mask-size: 60px 60px, 100% 100%, 12px 12px;
  mask-repeat: no-repeat, no-repeat, repeat;
  mask-position: calc(100% - 9px) 10px, center, center;
  mask-composite: exclude, intersect, add;
}
.action-call p {
  margin-bottom: 1.5rem;
}
.action-call a {
  background-color: #fff;
  color: #34c759;
  border: none;
  padding: 10px 30px;
  font-size: 0.9vw;
  cursor: pointer;
  display: block;
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.5s;
}
.action-call a:hover {
  background-color: #34c759;
  color: #f0f0f0;
}
.testimonial {
  width: 25%;
  min-height: calc(100% - 4rem - 0.833vw - 10vw);
  position: absolute;
  top: calc(2rem + 10vw + 0.833vw);
  right: 3rem;
  background: rgba(240, 240, 240, 0.8);
  outline: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px) saturate(2) brightness(1.5);
  -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.5);
  border-radius: 7px;
  animation-delay: 2s;
}
.testimonial h2 {
  color: #333;
}
.testimonial p:nth-child(2) {
  color: black;
  font-size: 3.125vw;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -3px;
}
.testimonial p:nth-child(3) {
  color: #333;
  position: absolute;
  letter-spacing: -0.5px;
  font-weight: 300;
  bottom: 1.5rem;
  font-size: 0.75vw;
  line-height: 1.2;
  text-align: center;
  right: 1.5rem;
  left: 1.5rem;
}
.events {
  width: 25%;
  min-height: 10vw;
  top: 2rem;
  right: 3rem;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  outline: 1px solid rgba(240, 240, 240, 0.3);
  animation-delay: 2.5s;
}
.events::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  border-radius: 7px;
  backdrop-filter: blur(10px) saturate(2) brightness(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(2) brightness(1.1);
  mask: url(https://cdn-icons-png.flaticon.com/512/3857/3857838.png),
    linear-gradient(
      45deg,
      #fff calc(100% - 120px),
      transparent calc(100% - 70px)
    ),
    radial-gradient(transparent 1px, #444cf7 2px);
  mask-size: 60px 60px, 100% 100%, 12px 12px;
  mask-repeat: no-repeat, no-repeat, repeat;
  mask-position: calc(100% - 7px) 5px, center, center;
  mask-composite: exclude, intersect, add;
}
.events a {
  color: rgba(124, 252, 0, 1);
  transition: color 0.5s;
}
.events a:hover {
  color: white;
}
footer {
  color: #333;
  background-color: #f0f0f0;
  padding: 10px;
  font-size: 0.85vw;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(100vh - 50px - 2rem);
  left: 1rem;
  border-top-right-radius: 1.3vw;
  width: calc(30% - 1rem);
}
footer::before,
footer::after {
  content: "";
  width: 1.3vw;
  height: 1.3vw;
  position: absolute;
  right: -1.3vw;
  bottom: 0;
  background-color: #f0f0f0;
  mask-image: radial-gradient(circle at 100% 0%, transparent 1.26vw, red 1.3vw);
  mask-position: bottom left;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
footer::after {
  left: 0px;
  top: -1.3vw;
}

@keyframes reveal {
  from {
    scale: 0.5;
  }
  to {
    scale: 1;
  }
}

@keyframes revealTitle {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

@media screen and (max-width: 992px) {
  header {
    height: calc(100vh - 2rem);
    justify-content: center;
    background-size: 700%;
  }
  header h1 {
    height: 50%;
    font-size: 15vw;
    width: 90%;
  }
  article h2,
  .testimonial h2,
  .events h2,
  .action-call h2 {
    font-size: 1.5rem;
  }
  article p,
  .testimonial p,
  .events p,
  .action-call p,
  article ul {
    font-size: 0.8rem;
  }
  section {
    width: calc(50% - 2rem - 0.833vw);
    height: calc(100% - 1rem - 50px - 50%);
    top: 50%;
    right: calc(50% + 0.833vw);
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "left1"
      "right1"
      "left2"
      "right2";
  }

  .events {
    width: calc(50% - 2rem);
    height: 130px;
    top: 50%;
    right: 2rem;
  }
  .testimonial {
    width: calc(50% - 2rem);
    min-height: calc(100% - 50% - 130px - 1rem - 0.883vw - 50px);
    top: calc(50% + 130px + 0.833vw);
    right: 2rem;
  }
  .testimonial p:nth-child(2) {
    font-size: 5vw;
  }
  .testimonial p:nth-child(3) {
    font-size: 0.75rem;
  }

  footer {
    width: calc(100% - 8rem);
    border-top-left-radius: 1.3vw;
    left: 4rem;
  }

  footer::after {
    left: -1.3vw;
    top: auto;
    mask-image: radial-gradient(circle at 0 0%, transparent 1.2vw, red 1.3vw);
  }
}

const header = document.querySelector("header");

const backgroundImageUrls = [
  "https://i.imgur.com/IwO6Xmp.jpeg",
  "https://static.vecteezy.com/system/resources/previews/010/377/369/large_2x/beautiful-view-on-planet-earth-from-space-at-night-with-city-light-fantasy-and-futuristic-digital-art-style-background-wallpaper-free-photo.jpg",
  "https://static.vecteezy.com/system/resources/previews/010/377/431/non_2x/beautiful-view-on-planet-earth-from-space-at-night-with-city-light-fantasy-and-futuristic-digital-art-style-background-wallpaper-free-photo.jpg",
  "https://i.imgur.com/eBh7MiM.jpeg"
];

const changeInterval = 5000;

header.style.backgroundImage = `url(${backgroundImageUrls[0]})`;
header.style.transition = "background-image 1s";

setInterval(() => {
  const currentIndex = backgroundImageUrls.indexOf(
    header.style.backgroundImage.split('"')[1]
  );

  const newIndex = (currentIndex + 1) % backgroundImageUrls.length;

  header.style.backgroundImage = `url(${backgroundImageUrls[newIndex]})`;
}, changeInterval);

document.addEventListener("mousemove", function (e) {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;
  const deltaX = (mouseX - centerX) / centerX;
  const deltaY = (mouseY - centerY) / centerY;
  const backgroundImagePositionX = 50 + deltaX * 2;
  const backgroundImagePositionY = 40 + deltaY * 2;
  header.style.backgroundPosition = `${backgroundImagePositionX}% ${backgroundImagePositionY}%`;
});

This Pen is owned by Ibinceanu Eduard-Constantin on CodePen.

See more by @ieduard on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js