<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
    </header>
    <!-- sidebar -->
    <sidebar class="sutun-4">
      sidebar
    </sidebar>
    <!-- content -->
    <section class="sutun-8">
      content
    </section>
    <!-- footer -->
    <footer class="sutun-12">
      footer
    </footer>
  </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.