HTML
<div class="container">
<ul>
<li><div class="sky"></div><div class="acantilado"></div><div class="faro"><span class="far"></span><div></li>
<li><div class="sky3"></div><div class="acantilado3"></div><div class="cascada"><span class="espuma"></span><div></li>
<li><div class="sol"></div><div class="mountains"></div><span class="mount"></span><div class="nubes"></div></li>
<li><div class="sol3"></div><div class="acant"></div><span class="acanti"></span><div class="cactus"><span class="cact"></span></div></div></li>
</ul>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#121212;
margin:132px auto;
}
ul{
position:absolute;
width:900px;
height: 500px;
list-style:none;
margin: 75px auto;
}
ul li{
width:212px;
height:212px;
display:inline-block;
margin-left:90px;
overflow:hidden;
position:relative;
border:6px solid white;
transform:scale(.9)
}
ul li:nth-child(1){background:#004058;}
.sky{
position:absolute;
width:212px;
height:102px;
background:#132E3A;
}
.sky::before{
content:"";
display:block;
width:30px;
height:30px;
border-radius:100%;
background:white;
margin: 60px 21px;
}
.acantilado{
position:absolute;
width:132px;
height: 50px;
background:#00a07b;
margin:95px 90px;
border-radius:70px 0 0 0;
}
.acantilado::before{
content:"";
display:block;
width:1232px;
height: 30px;
background:#006864;
margin:30px -30px;
border-radius:70px 0 0 0;
}
.faro{
position:absolute;
border-bottom: 50px solid #ccc;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 9px;
margin:45px 132px;
}
.faro::before{
content:"";
display:block;
width:17px;
height:3px;
background:#ff340f;
margin:0px -3px;
}
.faro::after{
content:"";
display:block;
width:13px;
height:9px;
background:#ff340f;
margin:-9px -1px;
}
.far{
position:absolute;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #ff340f;
margin:-19px -3px;
}
.far::before{
content:"";
display:block;
width:8px;
height:7px;
background:yellow;
margin: 9px -5px;
}
.far::after{
content:"";
display:block;
border-bottom: 90px solid rgba(255, 255, 255, .3);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
width: 9px;
transform: rotate(90deg);
margin:-57px -63px;
}
ul li:nth-child(2){background:#00b69c;}
.sky3{
position:absolute;
width:212px;
height:102px;
background:#7deeea;
}
.sky3::before{
content:"";
display:block;
width:35px;
height:35px;
border-radius:100%;
background:#FFEAA0;
margin: 21px 90px;
}
.acantilado3{
position:absolute;
width:90px;
height: 90px;
background:#00a07b;
margin:60px 0px;
border-radius:0px 30px 0 0;
}
.acantilado3::before{
content:"";
display:block;
width:90px;
height: 90px;
background:#00a07b;
margin:0px 123px;
border-radius:30px 0px 0 0;
}
.acantilado3::after{
content:"";
display:block;
width:33px;
height: 70px;
background:white;
margin:-60px 90px;
}
.cascada{
position:absolute;
width:9px;
height: 70px;
background:#eee;
margin:90px 90px;
}
.cascada::before{
content:"";
display:block;
width:3px;
height: 60px;
background:#eee;
margin:9px 14px;
}
.cascada::after{
content:"";
display:block;
width:9px;
height: 50px;
background:#eee;
margin:-73px 23px;
}
.espuma{
position:absolute;
width:50px;
height:12px;
border-radius:100%;
background:rgba(255, 255, 255, .3);
margin:-9px;
}
.espuma::before{
content:"";
display:block;
width:80px;
height: 95px;
background:#006864;
border-radius: 50px 50px 0 0;
margin: -33px -90px;
}
.espuma::after{
content:"";
display:block;
width:80px;
height: 40px;
background:#006864;
border-radius: 50px 50px 0 0;
margin: -90px 70px;
}
ul li:nth-child(3){background:#ff9663;}
.mountains{
position:absolute;
width: 0;
height: 0;
border-left: 192px solid transparent;
border-right: 192px solid transparent;
border-bottom: 300px solid #00a07b;
margin: 70px -132px;
z-index:3;
}
.mountains::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 192px solid transparent;
border-right: 162px solid transparent;
border-bottom: 212px solid #00a07b;
margin: 35px -98px
}
.sol{
position:absolute;
width:90px;
height:70px;
border-radius:100%;
background:#ff5030;
margin: 90px 70px;
}
.mount{
position:absolute;
width: 0;
height: 0;
border-left: 121px solid transparent;
border-right: 121px solid transparent;
border-bottom: 212px solid #006864;
margin: 70px -65px;
z-index:3;
}
.mount::before{
content:"";
display:block;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 121px solid transparent;
border-bottom: 212px solid #00a07b;
margin: 50px -45px;
z-index:3;
}
.mount::after{
content:"";
display:block;
width: 0;
height: 0;
border-left: 121px solid transparent;
border-right: 112px solid transparent;
border-bottom: 121px solid #006864;
margin: -271px -30px;
z-index:3;
}
.nubes{
position:absolute;
width: 30px;
height:30px;
background:rgba(255, 255, 255, .8);;
border-radius:100%;
margin: 21px 121px;
}
.nubes::before{
content:"";
display:block;
width: 30px;
height:30px;
background:rgba(255, 255, 255, .7);
border-radius:100%;
margin: 9px 16px;
}
.nubes::after{
content:"";
display:block;
width: 30px;
height:30px;
background:rgba(255, 255, 255, .7);
border-radius:100%;
margin: -35px -9px;
}
ul li:nth-child(4){background:#ccc;}
.sol3{
position:absolute;
width:231px;
height:121px;
background:#ffa000;
margin: 121px 0px;
}
.sol3::before{
content:"";
display:block;
width:35px;
height:35px;
border-radius:100%;
background:#ED885A;
margin: -90px 30px;
}
.acant{
position:absolute;
width:30px;
height:12px;
background:#ff9500;
margin:112px 53px;
}
.acant::before{
content:"";
display:block;
border-bottom: 30px solid #ff8a00;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 30px;
margin:-19px 12px;
}
.acant::after{
content:"";
display:block;
width:30px;
height:30px;
background:#ff8a00;
margin:112px 21px;
margin:-40px 50px;
}
.acanti{
position:absolute;
width:60px;
height:21px;
background:#ff8a00;
margin:102px 121px;
}
.acanti::before{
content:"";
display:block;
border-bottom: 30px solid #ff8a00;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 30px;
margin:-9px -21px;
}
.acanti::after{
content:"";
display:block;
width:50px;
height:12px;
background:#ff8a00;
margin:-30px -0px;
}
.cactus{
position: absolute;
width:9px;
height:60px;
background:#00a380;
border-radius:6px;
margin: 121px 95px;
}
.cactus::before{
content:"";
display:block;
width: 21px;
height:6px;
background:#00a380;
border-radius:3px;
margin:21px -21px;
}
.cactus::after{
content:"";
display:block;
width: 6px;
height:21px;
background:#00a380;
border-radius:3px;
margin:-45px -21px;
}
.cact{
position: absolute;
width: 21px;
height:6px;
background:#00a380;
border-radius:3px;
margin:-12px 9px;
}
.cact::before{
content:"";
display:block;
width: 6px;
height:21px;
background:#00a380;
border-radius:3px;
margin:-16px 16px;
}
