Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Maquetacion</title>
  <link rel="stylesheet" href="css/estilos.css">
<style id="jsbin-css">
*{
  margin:0px;
  padding:0px;
  }

body {
  background:#444;
  color:#fff;
  }

#contenedor{
  width:960px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #000;
}

header{
  height:150px;
  background: #000;
  }

header h1 {
  font-size: 50px;
  text-align: center;
  line-height:150px;
 }

section {
  width: 700px;
  height: 500px;
  float: left;
  background: blue;
  margin-top: 10px;
  margin-right; 10px;
  }


aside {
  width: 50px;
  height:50px;
  background: green;
  margin-top: 10px;
  float: right;
  }

aside h2  {
  width: 40px;
  height:50px;
  background: green;
  margin-top: 10px;
  float: right;
  }

footer{
  background: black;
  clear: both;
  }
footer h2 {
  font size:40px;

}
</style>
</head>
<body>
  <header>
    <h1>Encabezado</h1>
  </header>

  <aside>
    <h2>Lateral</h2>
      </aside>
  <aside>
    <h2>Lateral</h2>
      </aside>

    <section>
       <h2>Seccion</h2>
    </section>
    <aside>
      <h2>Lateral</h2>
      </aside>
    <aside>
      <h2>Lateral</h2>
      </aside>

  <footer>
    <h2>Pie de pagina</h2>
    </footer>


<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Maquetacion</title>
  <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <header>
    <h1>Encabezado</h1>
  </header>

  <aside>
    <h2>Lateral</h2>
      </aside>
  <aside>
    <h2>Lateral</h2>
      </aside>

    <section>
       <h2>Seccion</h2>
    </section>
    <aside>
      <h2>Lateral</h2>
      </aside>
    <aside>
      <h2>Lateral</h2>
      </aside>

  <footer>
    <h2>Pie de pagina</h2>
    </footer>

  </body>
</html>


</script>

<script id="jsbin-source-css" type="text/css">*{
  margin:0px;
  padding:0px;
  }

body {
  background:#444;
  color:#fff;
  }

#contenedor{
  width:960px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  background: #000;
}

header{
  height:150px;
  background: #000;
  }

header h1 {
  font-size: 50px;
  text-align: center;
  line-height:150px;
 }

section {
  width: 700px;
  height: 500px;
  float: left;
  background: blue;
  margin-top: 10px;
  margin-right; 10px;
  }


aside {
  width: 50px;
  height:50px;
  background: green;
  margin-top: 10px;
  float: right;
  }

aside h2  {
  width: 40px;
  height:50px;
  background: green;
  margin-top: 10px;
  float: right;
  }

footer{
  background: black;
  clear: both;
  }
footer h2 {
  font size:40px;

}


</script>
</body>
</html>