Day2 - 30day30sites

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html,
    body {
      height: 100%;
      color: white;
      box-sizing: border-box;
      margin: 0;
    }

.nav {
      padding: 10px;
      background-color: #FCB64E;
    }

.nav a {
      font-size: 1.1em;
      margin: 12px;
      text-decoration: none;
      color: #231942;
    }
    .showbar{
      position: fixed;
      box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
      width: 100%;
      color: black;
      top: 0;
      z-index: 10;
      animation:animatetop 0.4s;
    }

.season {
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

.spring {
      background-image: url('https://wallpaperget.com/images/spring-hd-wallpaper-15.jpg');
      min-height: 100%;
      position: relative;
    }

.summer {
      background-image: url('https://wallpaperget.com/images/summer-wallpaper-hd-13.jpg');
      min-height: 90%;
      position: relative;
    }

.autumn {
      background-image: url('https://wallpaperget.com/images/autumn-wallpaper-1.jpg');
      min-height: 100%;
      position: relative;
    }

.winter {
      background-image: url('https://wallpaperget.com/images/winter-images-2.jpg');
      min-height: 100%;
      position: relative;
    }

.mid-title {
      position: absolute;
      top: 40%;
      bottom: 50%;
    }
    .spring>.mid-title{
      transform: translate(180%, 50%);
    }
    .summer>.mid-title{
      transform: translate(900%, 10%);
    }
    .autumn>.mid-title{
      transform: translate(240%,10%);
    }
    .winter>.mid-title{
      transform: translate(50%,300%);
    }
    h1 {
      text-align: center;
      font-size: 3.4em;
    }

.spring-artical, .summer-artical, .autumn-artical, .winter-artical {
      color: black;
      padding: 20px 60px;
    }
    footer{
      background: #424140;
      padding:50px;
      text-align: center;
    }
    footer p{
      font-size: 1.2em;

}
    .smallsize{
      font-size: 0.8em;
    }
  </style>
</head>

<body>
  <div class="nav" id="navBar">
    <a href="#home">HOME</a>
    <a href="#spring">SPRING</a>
    <a href="#summer">SUMMER</a>
    <a href="#autumn">AUTUMN</a>
    <a href="#winter">WINTER</a>
  </div>
  <div class="season spring" id="home">
    <div class="mid-title">
      <h1>Seasons</h1>
    </div>
  </div>
  <div class="spring-artical" id="spring">
    <h2>Spring</h2>
    <p>Spring the most pleasant season in India. In this season everybody feel happy after the intense cold of winter. We all take interest in outdoor life. The whole earth wears a green dress and comes to life again.
    </p>
    <p>In the spring season nature is kind. It gives us pleasure and joy. The trees once more look refresh and lovely. They regain their lost leaves. The birds were silent in winter, now they sing songs. They thank god with their lovely notes. Nature gives
      a grand feast to our hungry eyes. It invites us to come out and take part in the joy of the world. It presents a lovely sight for our hungry eyes. We get new strength in the spring season. The cool breeze invites us to come into the open. Buds of
      flowers peep to see the beautiful sight of nature. Flowers spread their sweet smell in all directions. They fill us with pleasure. It is season of marriages and feasts. It is this when this earth was honored by the birth of Shri Ram Chandra. It
      was again in spring that the coronation of Ramji actually took place. Hence the spring season may be called the kind of season.
    </p>
  </div>
  <div class="season summer">
    <div class="mid-title">
      <h1>Fresh</h1>
    </div>
  </div>
  <div class="summer-artical" id="summer">
    <h2>Summer</h2>
    <p>My favorite season of the year is summer because of the warm weather, the school vacation, and the endless fun. I really enjoy the warm weather because it’s the perfect atmosphere to do outdoor activities. My favorite part about summer has to be the
      fact that school is closed for two months. During summer, you’re free to do whatever you want, not worrying about curfew or waking up early for school. Summer time is a great time to relax with friends and family by soaking up the sun at a beach
      or simply having dinner together.
    </p>
    <p>Summer season is the best time for festivals and activities. You can never get bored on a summer day or night. During the day, there are fun activities such as: swimming, sports, picnics, and barbeques. Friends and family spend a lot of time together
      during the summer time. There is a lot of good food, drinks, and fun music. Everyone is laughing and having a good time. Summer evenings are the best time for concerts, movies, parties, and relaxing with friends. The summer evenings are beautiful
      because of the sparkly and glittery city lights. One of the best events of the year, July Fourth, happens during summer. The celebration of July fourth is very extravagant and glamorous. People gather around to celebrate and watch the display of
      fireworks. The vibrant colors and the loud sound of the fireworks are amazing.
    </p>
  </div>
  <div class="season autumn">
    <div class="mid-title">
      <h1>Full of colors</h1>
    </div>
  </div>
  <div class="autumn-artical" id="autumn">
    <h2>Autumn</h2>
    <p>Summer season is the best time for festivals and activities. You can never get bored on a summer day or night. During the day, there are fun activities such as: swimming, sports, picnics, and barbeques. Friends and family spend a lot of time together
      during the summer time. There is a lot of good food, drinks, and fun music. Everyone is laughing and having a good time. Summer evenings are the best time for concerts, movies, parties, and relaxing with friends. The summer evenings are beautiful
      because of the sparkly and glittery city lights. One of the best events of the year, July Fourth, happens during summer. The celebration of July fourth is very extravagant and glamorous. People gather around to celebrate and watch the display of
      fireworks. The vibrant colors and the loud sound of the fireworks are amazing.
    </p>
  </div>
  <div class="season winter">
    <div class="mid-title">
      <h1>Peaceful mind</h1>
    </div>
  </div>
  <div class="winter-artical" id="winter">
    <h2>Winter</h2>
    <p>My favorite season of the year is summer because of the warm weather, the school vacation, and the endless fun. I really enjoy the warm weather because it’s the perfect atmosphere to do outdoor activities. My favorite part about summer has to be the
      fact that school is closed for two months. During summer, you’re free to do whatever you want, not worrying about curfew or waking up early for school. Summer time is a great time to relax with friends and family by soaking up the sun at a beach
      or simply having dinner together.
    </p>

</div>
  <footer>
    <p>30 Day 30 sites - Day 2</p>
    <div class="smallsize">@2017</div>
  </footer>

</html>