<!-- First section -->
<header>
  <h1 class="animated bounceInDown">Animate.css</h1>
  <h2 class="animated bounceInDown">Level Up Your Websites with Animate.css</h2>
  <span class="animated bounce"></span>
</header>

/* General/reset styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  color: #333;
}

.new-section {
  padding-top: 50px;
  text-align: center;
  font-size: 4em;
  font-weight: 100;
}

/* Header styles */

header {
  position: relative;
  text-align: center;
  height: 100vh;
  background: linear-gradient(to right, #69bcf4, #30cc8b);
  color: #fff;
}

header h1 {
  padding-top: 100px;
  padding-top: -webkit-calc(50vh - 113px);
  padding-top: expression(50vh - 113px);
  padding-top: -moz-calc(50vh - 113px);
  padding-top: -o-calc(50vh - 113px);
  padding-top: calc(50vh - 113px);
  font-size: 7em;
  font-weight: 100;
}

header h2 {
  font-size: 2em;
}

header span.animated {
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
  bottom: 50px;
  height: 4px;
  width: 4px;
  border-radius: 2px;
  background: #fff;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

header span::before,
header span::after {
  position: absolute;
  top: -23px;
  content: "";
  height: 30px;
  width: 4px;
  border-radius: 2px;
  background: #fff;
}

header span::before {
  left: -10px;
  -webkit-transform: rotate(-45deg);
  -moz-transform:    rotate(-45deg);
  -ms-transform:     rotate(-45deg);
  -o-transform:      rotate(-45deg);
  transform:         rotate(-45deg);
}

header span::after {
  right: -10px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  transform:         rotate(45deg);
}

/* Media queries */

@media (max-width: 759px) {
  header h1 {
    font-size: 5em;
  }
  
  .new-section {
    font-size: 3em;
  }
  
  .scroll-animations {
    display: block;
  }
  
  .scroll-animations div {
    padding: 20px 80px;
  }
  
  .click-animations input,
  .click-animations textarea,
  .click-animations button {
    width: 80%;
  }
}

@media (max-width: 475px) {
  .new-section {
    font-size: 2.5em;
  } 
  
  header h1 {
    font-size: 3.2em;
  }
  
  header h2,
  .funky-animations h3 {
    font-size: 1.5em;
  }
  
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.