HTML
<div class="wrapper">
<div class="column-1"></div>
<div class="column-2"></div>
<div class="column-3"></div>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
</div>
CSS
body {
margin: 0;
background: #62306D;
}
.wrapper {
height: 100%;
margin: 50px;
position: relative;
}
.column-1 {
position: absolute;
left: 0;
bottom:0;
width: 33.3%;
height: 50%;
background: #F7EC7D;
}
.circle-1 {
position: absolute;
left: 0;
bottom:33.5%;
width: 100px;
height: 100px;
background: #AA445F;
border-radius: 50%;
}
.circle-1:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
background: #E38F66;
border-radius: 50%;
}
.circle-3 {
position: absolute;
right: 0;
bottom:33.5%;
width: 100px;
height: 100px;
background: #AA445F;
border-radius: 50%;
}
.circle-3:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
background: #E38F66;
border-radius: 50%;
}
.circle-2 {
position: absolute;
left: 33.3%;
top: -0.15%;
bottom:33.5%;
width: 100px;
height: 100px;
background: #E38F66;
border-radius: 50%;
}
.circle-2:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60px;
height: 60px;
background: #AA445F;
border-radius: 50%;
}
.column-2 {
position: absolute;
left: 33.3%;
bottom:0;
width: 33.4%;
height: 82.5%;
background: #F7EC7D;
}
.column-3 {
position: absolute;
right: 0;
bottom:0;
width: 33.3%;
height: 50%;
background: #F7EC7D;
}
Top comments (0)