<!DOCTYPE html>
<html>
<head>
<style>
body, ul{
margin: 0; /* Geen wit rand om site */
}
.container{
background-color: #030d31; /* Blauwe achtergrond kleur divs */
color: #fff; /* tekstkleur wit */
}
.inner{
width: 960px; /* breedte site */
margin: 0px auto; /* zorgt er voor dat de .inner in het midde van de pagina staat */
padding: 20px; /* ruimte aan de binnen kant van div */
}
nav.inner{
padding: 0; /* haalt padding weg */
}
li{
list-style-type: none; /* haalt het bolletje voor de list weg */
background-color: #f92900; /* rode achtergrond kleur */
width: 100px; /* breedte home button */
text-align: center; /* tekst horizontaal in het midden */
color: #fff; /* tekst kleur wit */
line-height: 50px; /* tekst verticaal in het midden */
}
div.container{
background-color: #f92900; /* rode achtergrond kleur */
width: 100%; /* 100% breedte */
height: 50px; /* hoogte balk */
}
footer .inner{
-moz-column-count:3; /* 3 colomen in firefox */
-webkit-column-count:3; /* 3 colomen in Chrome & Safari */
column-count:3; /* 3 colomen */
}
</style>
</head>
<body>
<header class="container">
<div class="inner">
<h1>Header</h1>
</div>
</header>
<nav class="inner">
<ul>
<li>Home</li>
</ul>
</nav>
<div class="container"></div>
<section class="inner">
<h3>Content</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<footer class="container">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</footer>
</body>
</html>
