Very basic site header

So basic, it doesn’t even have links in the navigation! This version uses traditional HTML element and classes.

HTML

<div class="header"> 
  <h1>A wonderful web site</h1> 

  <ul class="navigation"> 
    <li>Some page</li> 
    <li>Another page</li> 
  </ul> 
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

html {
  font: 62.5% "segoe ui", helvetica, arial, sans-serif;
  background-color: #fff;
}

body {
  font-size: 1.6rem;
}

.header {
  background: #466368;
  background: linear-gradient(#648880, #293f50);
  border-radius: 6px;
  height: 120px;
}

.navigation {
  margin-top: 2rem;
}

.navigation li {
  display: inline-block;
  margin-right: 1rem;
}