#2 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>

SCSS

$gray40: #666666;
$gray73: #bababa;
$gray93: #eeeeee;
$gray20: #333333;

body {
  padding: 0;
  margin: 0;
}

.container {
  width: 760px;
  margin: 10px auto;
  padding: 20px;
  background-color: $gray73;
  border-radius: 5px;
}

.header {
  width: 90%;
  padding: 15% 5% 5%;
  background-color: $gray40;
  color: $gray93;
  border-radius: 5px;
  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: $gray93;
  color: $gray40;
  padding: 7px 12px;
  border-radius: 5px;
  margin: 5px;
  font-weight: bold;
  font-size: 20px;
  text-shadow: 1px 1px 1px $gray20;
}

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

.content section {
  color: $gray20;
  font-weight: 800;
  letter-spacing: 0.07em;
  word-spacing: 0.1em;
}