<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,700i,800,800i&amp;subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://e-aydin.com/files/mozaik/css/mozaik.min.css">

<div id="body">
  <div class="sira container">
    <!-- header -->
    <header class="sutun-12">
      header .sutun-12
      <div class="sira">
        <div class="sutun-2">logo .sutun-2</div>
        <!-- menu -->
        <div class="sutun-7">menü .sutun-8</div>
        <!-- arama -->
        <div class="sutun-3">arama .sutun-2</div>
      </div>
    </header>
  </div>
</div>
body{margin:0; padding:0;background: #e1dbbb;}
#body{
    color:#555;
    padding:50px;
    font-family: 'Lato', arial;
    font-size:16px;
  }
  .container{
    width:600px !important;
  }
  [class*='sutun-'] {
  	overflow-x: hidden;
    text-align: center;
  	color: #fff;
    border:3px solid #e1dbbb;
  	border-radius: 5px;
    background: #000;
    font-size:11px;
  	font-weight: 600;
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.