Navigator with buttons and title

by Sergio

HTML

<div class="container"><h1>Title</h1></div>

<div class="block">
  <div id="block-inside">
    Option 1
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 2
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 3
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 4
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 5
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 6
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 7
  </div>
</div>
<div class="block">
  <div id="block-inside">
    Option 8
  </div>
</div>

CSS

html, body { height: 100%; padding: 0; margin: 0; background: #FFF;}
.block { 
  background: #DDD; 
  width: 25%; 
  height: 100px; 
  float: left; 
  box-sizing: border-box;
  border: 5px solid #fff; 
  display:table;
  padding:0px;
}
  
#block-inside { 
  background: #ccc; 
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid #aaa;
  color: #444;
}

.container {
  overflow: hidden;
  text-align: center;
}
h1 {
  font-family: arial, verdana;
  font-size: 20px;
  display: inline-block;
  padding: 0 15px;
  position: relative;
  color: #444;
}

h1:before,
h1:after {
  background: #ddd;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
    top: 50%;
  width: 200%;
}
h1:before {
  right: 100%;
}
h1:after {
  left: 100%;
}