<div class="page-wrapper">
  <div class="head-wrapper">
    <div class="background">
      <img src="http://i.giphy.com/11QY4zzd3mqHe.gif" alt="" class="bg-img" />
      <div class="bg-filter"></div>
    </div>
    <div class="title-wrapper">
      <div class="title">
        <div class='yeah'>Yeah</div>
      </div>
    </div>
    <div class="button-wrapper">
      <a href="#content"><i class="fa fa-angle-down" aria-hidden="true"></i></a></div>
  </div>
  <div class="content-wrapper">
    <a data-scroll name="content"></a>
    <h1 class="text-center">Intro</h1>
<div class='text-block'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At <br /> <br />Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <br />
    <br />
    <h1 class="text-center">Work</h1>
    <div class="work-tiles-wrapper">
      <div class="tile">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg" alt="" />
        <h3 class="text-center">one</h3>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</div>
      </div>
      <div class="tile">
        <img src="http://cbsnews3.cbsistatic.com/hub/i/r/2016/03/23/38e32f54-b910-4612-8852-be9e0fbdbf73/thumbnail/620x350/440a1273973991f75a0ac768f554e37c/cat-istock.jpg" alt="" />
        <h3 class="text-center">two</h3>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</div>
      </div>
    </div>
    <br />
    <br />
    <h1 class="text-center">Outro</h1>
    <div class='text-block'>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
      takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
      et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    

  </div>
  <div class="footer">
    <div><i class="fa fa-twitter" aria-hidden="true"></i> Follow me on twitter.</div>
    <div><i class="fa fa-picture-o" aria-hidden="true"></i> Gif found <a href="http://gph.is/1g3UvXu">HERE</a>.</div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Bangers);
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
body {
  margin: 0;
  .page-wrapper {
    font-family: 'Open Sans Condensed', sans-serif;
    .head-wrapper {
      height: 100vh;
      .title-wrapper {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 2;
        width: 100%;
        height: 100%;
        .title {
          color: white;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          height: 100%;
          font-size: 2vw;
          .yeah {
            font-family: 'Bangers', cursive;
            font-size: 20vw;
          }
        }
      }
      .button-wrapper {
        text-align: center;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 2;
        width: 100%;
        a {
          color: white;
          font-size: 100px;
        }
      }
      .background {
        position: relative;
        height: 100%;
        width: 100%;
        .bg-img {
          position: absolute;
          height: 100%;
          width: 100%;
          object-fit: cover;
          z-index: 0;
        }
        .bg-filter {
          position: absolute;
          top: 0px;
          left: 0px;
          min-height: 1px;
          height: 100%;
          width: 100%;
          background-color: #FF5722;
          z-index: 1;
          opacity: 0.75;
        }
      }
    }
    .content-wrapper {
      margin:50px 0 100px 0;
      padding: 16px;
      h1,
      h2,
      h3,
      h4 {
        font-family: 'Bangers', cursive;
      }
      .work-tiles-wrapper {
        display: flex;
        justify-content: center;
        .tile {
          padding: 16px;
          //border: 2px solid #FF5722;
          width: 50%;
          text-align: justify;
          margin: 10px;
          img {
            opacity: 0.75;
            width: 20vw;
            height: 20vw;
            object-fit: cover;
            border-radius: 50%;
            display: block;
            margin: 0 auto;
            max-width: 160px;
              max-height: 160px;
          }
        }
      }
      @media screen and (max-width: 450px) {
        .work-tiles-wrapper {
          display: block;
          .tile {
            width: 100%;
            margin: 0;
            padding: 0 0 32px 0;
            img {
              width: 30vw;
              height: 30vw;
            }
            div {
              padding: 0 32px;
            }
          }
        }
      }
    }
    .footer {
      opacity: 0.9;
      font-size:80%;
      padding: 32px;
      color: white;
      background-color: #FF5722;
      a {
        color: white;
        font-family: 'Bangers', cursive;
        text-decoration: none;
      }
    }
    .text-center {
      text-align: center;
    }
    .text-block {
      text-align: justify;
    }
    
    @media screen and (min-width: 1000px) {
      .content-wrapper{
        padding: 0 20vw 0 20vw;
      }
    }
    
  }
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js