#1 Design with SCSS

by jshacker

HTML

<div class="container">
  <div class="header">
    <div class="navigation">
      <nav>
        <ul>
          <li><a href="#home">home</a></li>
          <li><a href="#about">about</a></li>
          <li><a href="#contact">contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="content">
    <section>
      And it befalls...
    </section>
  </div>
</div>

CSS

body {
  padding: 0;
  margin: 0;
}

.container {
  padding-bottom: 1rem;
  background-color: #BABABA;
}

.header {
  padding: 40vh 5vw 10vh;
  background-color: #666;
  color: #EEE;
  text-align: right;
}

.header .navigation nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header .navigation nav ul li {
  display: inline;
}

.header .navigation nav ul li a {
  text-decoration: none;
  background-color: #EEE;
  color: #666666;
  padding: 7px 12px;
  margin: 5px;
  font-weight: bold;
  font-size: 20px;
}

.content {
  width: 720px;
  margin: 40px auto;
}

.content section {
  color: #333;
  font-weight: 800;
  letter-spacing: .07em;
  word-spacing: .1em;
}