Celebrate Earth Day by being aware of it's importance.

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

I've built a Landing Page for Earth Day Celebration using HTML, CSS & Javascript in Brackets editor

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Celebrate Earth Day - Protect Our Planet!</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <section class="hero">
    <img src="earth-day-image.jpeg" alt="Earth Day Image" style="width: 100%;">
    <div class="hero-content">
      <h1 style="color: #006400; font-size: 2.5em; text-shadow: 1px 1px 1px #32994e; background-image: url(light-blue-texture.jpeg); background-size: cover; background-position: center;">
  <img src="earth-icon.png" alt="Earth Day Icon" style="width: 40px; margin-right: 10px;">
  Celebrate Earth Day!
</h1>
<p style="color: #006400; font-size: 2.5em; text-shadow: 1px 1px 1px #32994e; background-image: url(light-blue-texture.jpeg); background-size: cover; background-position: center;">Take action and protect our planet.</p>
    </div>
  </section>

  <header>
    <h1>Welcome to Our Earth Day Celebration!</h1>
  </header>
  <section id="main-content" style="background-color: #d0f0ff; border: 1px solid #006400; padding: 1rem;">
    <article class="facts">
      <h2><img src="earth-icon.png" alt="Earth Icon" style="width: 20px; margin-right: 5px;"> Did You Know?</h2>
      <p style="color: #006400;">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>
    <hr style="border: 1px solid #006400; margin: 1rem 0;">
    <article class="facts">
      <h2><img src="earth-icon.png" alt="Earth Icon" style="width: 20px; margin-right: 5px;"> Why Celebrate Earth Day?</h2>
      <p style="color: #006400;">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>
      <a href="https://www.who.int/teams/environment-climate-change-and-health/call-for-climate-action" class="cta-button">Learn More</a>
    </article>
  </section>
  </body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #2c9bff;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  font-size: 2em;
  margin: 0;
}

section {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.hero img {
  width: 100%; /* Fills the entire width of the container (optional) */
  max-height: 400px; /* Sets a maximum height */
  object-fit: cover; /* Ensures image covers the entire container while maintaining aspect ratio */
}
article,
.action-call,
.testimonial,
.events {
  flex: 1 1 300px;
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: all 0.2s ease-in-out;
}
.facts article { /* Styles for all articles */
  cursor: pointer;
  background-color: #e0e0e0;
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  transition: background-color 0.2s ease-in-out;
}

.facts article:hover { /* Hover effect for all articles */
  background-color: #d0d0d0;
}

/* Target specific articles for animations */
.facts article:nth-child(1):hover { /* "Did You Know?" animation */
  animation: pulsate 0.5s ease-in-out infinite alternate;
}

.facts article:nth-child(2):hover { /* "Why Celebrate Earth Day?" animation */
  animation: shake 0.3s ease-in-out infinite alternate;
}


@keyframes pulsate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}

article h2,
.action-call h2,
.testimonial h2,
.events h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
}

article p,
.action-call p,
.testimonial p,
.events p {
  line-height: 1.5;
}

.facts p {
  font-style: italic;
}

.action-call a {
  background-color: #2c9bff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.action-call a:hover {
  background-color: #1a759b;
}

/* Accordion Styles (assuming content paragraphs have class 'hidden') */
article p.hidden {
  display: none;
}

article h2.active {
  /* Style for active accordion titles (e.g., font-weight: bold) */
}

/* Image Slider Styles (assuming slider container has class 'image-slider' and images have class 'active') */
.image-slider {
  width: 100%;
  overflow: hidden;
}

.image-slider img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0; /* Initially hide all images */
  transition: opacity 0.5s ease-in-out;
}

.image-slider .active {
  opacity: 1; /* Show the active image */
}

/* Animation Styles (assuming class 'fade-in' is used for animation) */
.fade-in {
  opacity: 1;
  animation: fade-in 1s ease-in-out forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

script.js:

const sections = document.querySelectorAll('section, .testimonial + section, .events + section');


// Accordion functionality for articles
const articles = document.querySelectorAll('article');
articles.forEach(article => {
    const content = article.querySelector('p');
    const title = article.querySelector('h2');
    title.addEventListener('click', () => {
        content.classList.toggle('hidden'); // Toggle visibility on click
        title.classList.toggle('active'); // Add/remove active class for styling
    });
});

// Image slider functionality (assuming images are within a container with class 'image-slider')
const sliderContainer = document.querySelector('.image-slider');
if (sliderContainer) { // Check if slider container exists
    const images = sliderContainer.querySelectorAll('img');
    let currentImage = 0;

    // Function to display the current image
    const showImage = (index) => {
        images.forEach(img => img.classList.remove('active'));
        images[index].classList.add('active');
    };

    // Display first image initially
    showImage(currentImage);

    // Add functionality for next/previous buttons (assuming buttons have classes 'next' and 'prev')
    const nextButton = document.querySelector('.next');
    const prevButton = document.querySelector('.prev');
    if (nextButton && prevButton) { // Check if buttons exist
        nextButton.addEventListener('click', () => {
            currentImage = (currentImage + 1) % images.length;
            showImage(currentImage);
        });
        prevButton.addEventListener('click', () => {
            currentImage = (currentImage - 1 + images.length) % images.length; // Handle negative index
            showImage(currentImage);
        });
    }
}

// Animations for smoother transitions (using CSS classes)
sections.forEach(section => {
    section.classList.add('fade-in'); // Add initial fade-in class
});

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('fade-in'); // Add animation class on intersection
        } else {
            entry.target.classList.remove('fade-in'); // Remove animation class on non-intersection
        }
    });
});

observer.observe(sections[0]); // Start observing the first section initially
window.addEventListener('scroll', () => observer.observe(sections[0])); // Observe subsequent sections on scroll

const didYouKnowText = document.querySelector('.facts article:nth-child(1) p'); // Select first article's paragraph
const whyCelebrateText = document.querySelector('.facts article:nth-child(2) p'); // Select second article's paragraph

didYouKnowText.addEventListener('click', () => {
  // Implement your logic to display "Did You Know" information
  didYouKnowText.textContent = 'Read interesting Earth Day facts!'; // Example change
});

whyCelebrateText.addEventListener('click', () => {
  // Implement your logic to display "Why Celebrate Earth Day" information
  didYouKnowText.textContent = 'Discover the importance of Earth Day!'; // Example change (fix typo)
});

This isn't the first time I'm building something using HTML, CSS & Javascript but yet I learned some ways to build something once again from a criteria.
I look forward to participate in more challenges as it's pretty fun, challenging a lot and that helps to stay in the loop with computers.
Nonetheless, it got the job done.
And good luck to everyone who's trying whatever they can to participate and give a shot in this challenge.

Blog

Celebrate Earth Day by being aware of it's importance.

HarishPrabhu-02

Join Our Newsletter. No Spam, Only the good stuff.

Related