Glam Up My Markup: Earth Day Celebration Landing Page

HTML

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

CSS

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

JS

              
                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}%`;
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions