Curs HTML LabMedia - part 2

by Angel Ordax

HTML

<body>
    <!-- Navegation -->
  <nav>
    <img src="http://placehold.it/140x30" alt="">
  </nav>

  <!-- Cover Image -->
  <header>
    <img src="http://placeimg.com/960/200/any" alt="">
  </header>

  <!-- Side Menu -->
  <sidebar>
Link 1
<br>
Link 2
<br>
Link 3
<br>
Link 4
  </sidebar>

  <!-- Content -->
  <main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, nobis distinctio magni quasi. Ea, in. Impedit unde rerum ipsa voluptate nam quos, dicta, incidunt, tenetur qui a voluptas dignissimos ad.
  </main>

  <!-- Footer -->
  <footer>
   <i>This website is build by someone</i>
  </footer>
  
</body>

CSS

body {
  background: #f2f2f2;
  display: block;
  width: 960px;
  height: 540px;
  margin: 0 auto;
}

nav {
  background: salmon;
  display: block;
  width: 100%;
  height: 40px;
  float: left;
  padding: 5px 24px;
  box-sizing: border-box;
  text-align: center;
}

header {
  background: lightblue;
  display: block;
  width: 100%;
  height: 200px;
  float: left;
}

sidebar {
  background: lightgray;
  display: inline-block;
  width: 30%;
  height: 400px;
  float: left;
  padding: 24px;
  box-sizing: border-box;
}

main {
  background: white;
  display: inline-block;
  width: 70%;
  height: 400px;
  float: left;
  padding: 24px;
  box-sizing: border-box;
}

footer {
  background: darkgray;
  display: block;
  width: 100%;
  height: 140px;
  float: left;
}