console
<!DOCTYPE html>
<html>
<head>
<style>
*{
color:white;
text-align:center;
}
.header {
height:100px;
width:417px;
}
.header div{
width:24%;
height:100px;
float:left;
}
.header .one{
background-color:#74787a;
}
.header .two{
background-color:#5e7987;
}
.header .three{
background-color:#2486b9;
}
.header .four{
background-color:#1177b0;
}
.nav {
height:100px;
width:417px;
}
.nav div{
width:24%;
height:100px;
float:left;
}
.nav .one{
background-color:#8076a3;
}
.nav .two{
background-color:#806d9e;
}
.nav .three{
background-color:#74759b;
}
.nav .four{
background-color:#525288;
}
#r1c1 {
background-color:#856d72;
height:100px;
width:100px;
float:left;
}
#r2c2 {
background-color:#b598a1;
height:100px;
width:100px;
float:left;
}
#r3c3{
background-color:#7a7374;
height:100px;
width:100px;
float:left;
}
#r4c4{
background-color:#73575c;
height:100px;
width:100px;
float:left;
}
.footer {
height:100px;
width:417px;
}
.footer div{
width:24%;
height:100px;
float:left;
}
.footer .one{
background-color:#61ac85;
}
.footer .two{
background-color:#55bb8a;
}
.footer .three{
background-color:#20a162;
}
.footer .four{
background-color:#5bae23;
}
</style>
</head>
<body>
<div class="header">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
<div id="r1c1"></div>
<div id="r2c2"></div>
<div id="r3c3"></div>
<div id="r4c4"></div>
<div class="footer">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
</html>