<body>
<div id="wrap">
<header id="header">
<div class="container"></div>
</header>
<nav id="nav">
<div class="container"></div>
</nav>
<main id="main">
<div class="contents container">
<div class="cont1"></div>
<div class="cont2"></div>
<div class="cont3"></div>
<div class="cont4"></div>
</div>
</main>
<footer id="footer">
<div class="container"></div>
</footer>
</div>
</body>
<style>
*{
margin: 0;
}
#wrap {
}
#header {
height: 100px;
background-color: #EEEBE9;
}
#nav {
height: 100px;
background-color: #B9AAA5;
}
#main {
height: 780px;
background-color: #886F65;
}
#footer {
height: 100px;
background-color: #4E342E;
}
.container{
width: 1200px;
height: inherit;
margin: 0 auto;
background-color: rgba(0,0,0,0.3);
}
.contents{
display: grid;
grid-template-areas:
"cont1 cont1"
"cont2 cont2"
"cont3 cont4"
;
grid-template-columns: 50% 50% ;
grid-template-rows: 100px 200px 480px ;
}
.contents .cont1{
background-color: #74574A;
grid-area: cont1;
}
.contents .cont2{
background-color: #684D43;
grid-area: cont2;
}
.contents .cont3{
background-color: #594139;
grid-area: cont3;
}
.contents .cont4{
background-color: #4A352F;
grid-area: cont4;
}
</style>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.