Scroll & Reveal Some Facts of Earth Day By This Program

Ticker

10/recent/ticker-posts

Scroll & Reveal Some Facts of Earth Day By This Program

AK Creative 4/22/2021 10:50:00 PM

 Scroll & Reveal Facts of International Earth Day


HTML Code

<!DOCTYPE html>

<html lang="en" dir="ltr">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Maa Blogger</title>

    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <section>

      <center><h1>11 FACTS ABOUT EARTH DAY<br><br><br><br>

It’s estimated that over a billion people participate in Earth Day every year.</h1></center>

    </section>

    <section>

      <div class="container reveal">

        <h2>Earth Day Facts</h2>

        <div class="cards">

          <div class="text-card">

            <h3>FIRST</h3>

            <p>US Senator Gaylord Nelson founded Earth Day after witnessing a massive oil spill that leaked millions of gallons of oil off the coast of Santa Barbara in 1969.</p>

          </div>

          <div class="text-card">

            <h3>SECOND</h3>

            <p>The first Earth Day was celebrated on April 22, 1970. Sen. Nelson chose this day because it fell between most students’ spring break and final exams, and he wanted to encourage young people specifically to participate.</p>

          </div>

          <div class="text-card">

            <h3>THIRD</h3>

            <p>The very first Earth Day sparked an environmental movement and led to the creation of the National Oceanic and Atmospheric Administration (NOAA) and the US Environmental Protection Agency (EPA) later that year.</p>

          </div>

        </div>

      </div>

    </section>

    <section>

      <div class="container reveal">

        <h2>Earth Day Facts</h2>

        <div class="cards">

          <div class="text-card">

            <h3>FOUR</h3>

            <p>Earth Day was also influential in passing environmental legislation like the Clean Air Act, Clean Water Act, Endangered Species Act, National Environmental Education Act, and more.</p>

</div>

<div class="text-card">

            <h3>FIVE</h3>

            <p>On the very first Earth Day, more than 2,000 colleges and universities, 10,000 public schools, and 20 million citizens participated -- which was about 10% of the US population at the time.</p>

</div>

<div class="text-card">

            <h3>SIX</h3>

            <p>Earth Day originated in the US but became recognized worldwide by 1990.</p>

          </div>

        </div>

      </div>

    </section>

    <section>

      <div class="container reveal">

        <h2>Earth Day Facts</h2>

        <div class="cards">

          <div class="text-card">

            <h3>SEVEN</h3>

            <p>In 2009, the UN designated April 22 as International Mother Earth Day.</p>

</div>

<div class="text-card">

            <h3>EIGHT</h3>

            <p>It’s estimated that over a billion people participate in Earth Day every year, making it the largest secular observance in the world.</p>

</div>

<div class="text-card">

            <h3>NINE</h3>

            <p>Over 95% of primary and secondary schools in the US and millions of schools globally observe Earth Day each year.</p>

          </div>

        </div>

      </div>

    </section>

<section>

      <div class="container reveal">

        <h2>Earth Day Facts</h2>

        <div class="cards">

          <div class="text-card">

            <h3>TEN</h3>

            <p>On Earth Day 2012, more than 100,000 people rode bikes in China to reduce CO2 emissions and save fuel.</p>

</div>

<div class="text-card">

            <h3>ELEVEN</h3>

            <p>On Earth Day 2020, 20 million people worldwide tuned into the 12-hour Earth Day Live event, hosted remotely due to the coronavirus pandemic.</p>

</div>

        </div>

      </div>

    </section>

    <script type="text/javascript">

    window.addEventListener('scroll', reveal);

    function reveal(){

      var reveals = document.querySelectorAll('.reveal');

      for(var i = 0; i < reveals.length; i++){

        var windowheight = window.innerHeight;

        var revealtop = reveals[i].getBoundingClientRect().top;

        var revealpoint = 150;

        if(revealtop < windowheight - revealpoint){

          reveals[i].classList.add('active');

        }

        else{

          reveals[i].classList.remove('active');

        }

      }

    }

    </script>

  </body>

</html>


CSS Code

*{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: "Goudy Old Style";

}

body{

  background: url(https://wallpaperaccess.com/full/2171089.jpg);

}

section{

  min-height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

}

section:nth-child(1){

  color: #f5f5f5;

}

section:nth-child(2){

  color: #800080;

  background: #f5f5f5;

}

section:nth-child(3){

  color: #f5f5f5;

}

section:nth-child(4){

  color: #800080;

  background: #f5f5f5;

}

section .container{

  margin: 100px;

}

section h1{

  font-size: 60px;

}

section h2{

  font-size: 40px;

  text-align: center;

  text-transform: uppercase;

}

section .cards{

  display: flex;

}

section .cards .text-card{

  background: #66cdaa;

  margin: 20px;

  padding: 20px;

}

section .cards .text-card h3{

  font-size: 30px;

  text-align: center;

  text-transform: uppercase;

  margin-bottom: 10px;

}

@media (max-width: 900px){

  section h1{

    font-size: 40px;

  }

  section .cards{

    flex-direction: column;

  }

}

.reveal{

  position: relative;

  transform: translateY(150px);

  opacity: 0;

  transition: all 2s ease;

}

.reveal.active{

  transform: translateY(0px);

  opacity: 1;

}

OUTPUT SCREEN





Tags:

Post a Comment

15 Comments