<header>

  <h2>Desarrollo Web con Kiko Palomares</h2>

</header>

​

<section>

  <nav>

    <ul>

      <li><a href="#">HTML</a></li>

      <li><a href="#">CSS</a></li>

      <li><a href="#">JavaScript</a></li>

    </ul>

  </nav>

  <article>

    <h1>HTML</h1>

    <p>Duis vitae massa nulla. Fusce velit enim, vulputate vestibulum fermentum in, ultricies sit amet leo. Sed sit amet gravida felis, at porttitor urna. Integer pretium urna lorem, vel gravida felis luctus efficitur. Nullam placerat est velit, vel bibendum nisl viverra ut. Donec euismod pharetra malesuada.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at libero pellentesque, imperdiet mi varius, sodales lorem. Aenean id finibus dui.</p>

  </article>

</section>

​

<footer>

  <p>&copy Kiko Palomares</p>

</footer>

* {

  box-sizing: border-box;

}

​

body {

  font-family: Arial, Helvetica, sans-serif;

}

​

header {

  background-color: #666;

  padding: 30px;

  text-align: center;

  font-size: 35px;

  color: white;

}

​

nav {

  float: left;

  width: 30%;

  height: 300px;

  background: #ccc;

  padding: 20px;

}

​

nav ul {

  list-style-type: none;

  padding: 0;

}

​

article {

  float: left;

  padding: 20px;

  width: 70%;

  background-color: #f1f1f1;

  height: 300px;

}

​

section:after {

  content: "";

  display: table;

  clear: both;

}

​

footer {

  background-color: #777;

  padding: 10px;

  text-align: center;

  color: white;

}

​

@media (max-width: 600px) {

  nav, article {

    width: 100%;

    height: auto;

  }

}