rmJqJK

index.html

<header class="header">
  <div>
     <h1>An interesting title</h1>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque rerum voluptates perferendis, perspiciatis minima sed odit quam illum eligendi corporis.</p>
  </div>
  
</header>
<main class="main">
  <section>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto modi, officia ex quasi repudiandae animi fugit. Sunt atque, libero minima veniam velit dolor asperiores veritatis. Officiis vero similique sunt iure!</p>
  </section>
  <hr>
  <section>
    <h2>Heading</h2>
    <p>Fugiat perferendis cupiditate sunt in minima beatae quod ducimus sed amet. Optio necessitatibus expedita inventore eligendi, doloremque numquam dicta vero rem ipsa, exercitationem dolorem impedit explicabo voluptatem hic. Quisquam, in.</p>
  </section>
  <hr>
  <section>
    <h2>Heading</h2>
    <p>Alias, sunt! Voluptas omnis quasi molestiae ipsum facere nisi neque quibusdam ducimus! Ipsum vel eum ad fuga quam. Maxime non odit deserunt unde ea ipsam ipsa facilis! Quasi, doloribus nihil.</p>
  </section>
</main>
<footer class="footer">
  Footer Text
</footer>

rmjqjk.markdown

rmJqJK

A Pen by Charles Ojukwu on CodePen.

License.

style.scss

$primary: #d46;
$secondary: #75b;
$bg-gradient: linear-gradient(to bottom right, rgba($primary,0.8), rgba($secondary,0.8));
$blend-height: 200px;

@function ease-gradient($dir,$col1,$col2) {
  @return linear-gradient($dir,
      $col1,
      mix($col1,$col2,99.3) 5%,
      mix($col1,$col2,98) 10%,
      mix($col1,$col2,95.5) 15%,
      mix($col1,$col2,92) 20%,
      mix($col1,$col2,86.5) 25%,
      mix($col1,$col2,80) 30%,
      mix($col1,$col2,20) 70%,
      mix($col1,$col2,13.5) 75%,
      mix($col1,$col2,8) 80%,
      mix($col1,$col2,4.5) 85%,
      mix($col1,$col2,2) 90%,
      mix($col1,$col2,0.7) 95%,
      $col2);
}

*,*:before,*:after {
  box-sizing: border-box;
}

html {
  font-family: "Open Sans", Helvetica, Arial, Sans-serif;
  font-size: 16px;
  color: #333;
}

body {
  background-image: $bg-gradient, url(http://unsplash.it/1280/722);
  //background-blend-mode: luminosity;
  background-size: cover;
  background-attachment: fixed;
}

p {
  line-height: 1.6;
}

h2 {
  font-size: 2.5rem;
  margin-bottom: 1em;
}

.header {
  color: #fff;
  height: 100vh;
  padding: 4rem;
  display: table;
  div {
    display: table-cell;
    vertical-align: middle;
  }
  h1 {
    font-size: 4rem;
    font-family: "Montserrat";
    font-weight: 600;
  }
  hr {
    height: 2px;
    border: none;
    background: #fff;
    width: 50%;
    text-align: left;
    margin: 1rem 0;
  }
}

.main {
  background: #fff;
  position: relative;
  min-height: 400px;
  section {
    padding: 4rem;
  }
  hr {
    border: none;
    height: 1px;
    background: #ddd;
  }
  &:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -$blend-height;
    height: $blend-height;
    width: 100%;
    background: ease-gradient(to bottom,white,transparent);
  }
}

.footer {
  margin-top: $blend-height;
  min-height: 200px;
  color: #fff;
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans:300,400,600" rel="stylesheet" />