<div class="top-section">
  <h1>Welcome To This Sass Demo</h1>
  <button>Cool Story Bro</button>
  <button>Great Demo Bud</button>  
</div>
<div class="bottom-section">
  <h2>Common CSS Preprocessors</h2>
  <div class="cards">
    <div class="card">
      <img src="http://sass-lang.com/assets/img/styleguide/color-1c4aab2b.png"/>
      <p>SASS, stands for Syntactically Awesome Style Sheets and it is the CSS preprocessor that is being used for this demo. Learn more about it <a href="http://sass-lang.com/">here</a>.
    </div>
    <div class="card">
      <img src="https://prepros.io/img/less-logo.png"/>
      <p>LESS drew its inspiration from SASS and I personally have no idea how to use it. I should probably take time to read its <a href="http://lesscss.org/">documentation</a>.
    </div>
    <div class="card">
      <img src="http://stylus-lang.com/img/stylus-logo.svg"/>
      <p>Aparrently Stylus is another good CSS preprocessor to use. It has some nicely styled documentation, which you can <a href="http://stylus-lang.com/">read up on</a> to learn more about it.
    </div>
  </div>
</div>
$primary-color: #0B5351;
$secondary-color: #6B8F71;
// $primary-color: #052F5F;
// $secondary-color: #D5C67A;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Nunito';
}

h1, h2 {
  margin-top: 0;
}

a {
  color: $primary-color;
  font-weight: bold;
  &:hover {
    color: lighten($primary-color, 10);
  }
}

.top-section {
  background-color: $primary-color;
  text-align: center;
  padding: 80px 0;
  color: #fff;
  border: 10px dashed $secondary-color;
  border-right: 0;
  border-left: 0;
}

button {
  border: 0;
  padding: 10px;
  background-color: $secondary-color;
  color: darken($primary-color, 20);
  border-radius: 5px;
  margin: 0 10px;
  text-transform: uppercase;
  font-weight: bold;
  &:hover {
    cursor:pointer;
    background-color: lighten($secondary-color, 10);
  }
}

.bottom-section {
  text-align: center;
  background-color: lighten($secondary-color, 20);
  padding: 40px 0;
  h2 {
    border-bottom: 4px solid $primary-color;
    display: inline-block;
    padding: 0 40px;
    margin-bottom: 40px;
  }
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  width: calc(50% - 20px);
  margin: 0 10px;
  margin-bottom: 20px;
  border: 4px solid $primary-color;
  img {
    width: 150px;
  }
} 

External CSS

  1. https://fonts.googleapis.com/css?family=Nunito

External JavaScript

This Pen doesn't use any external JavaScript resources.