Witam. to oczywiście bardzo poglądowy kod.
<div class="container">
<div class="a">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="a">
<div class="b1"></div>
<div class="b2"></div>
</div>
<div class="e"></div>
</div>
body{
background-color: grey;
}
.container{
width: 80%;
margin: 0 auto;
box-shadow: 0 0 1em black;
}
.a,.e{
width: 100%;
}
.a1,.a2,.a3,.b1,.b2{
float: left;
}
.a::after {
content: "";
clear: both;
display: table;
} /*czyszczenie przepływu float:left*/
.a1{
width: 20%;
height: 400px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
background-size: cover;
background-position: center;
}
.a2{
width: 70%;
height: 400px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
background-size: cover;
background-position: center;
}
.a3{
width: 10%;
height: 400px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
background-size: cover;
background-position: center;
}
.b1,.b2{
width: 50%;
height: 400px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
background-size: cover;
background-position: center;
}
.e{
height: 400px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
background-size: cover;
background-position: center;
}