Landscapes icons (Only CSS)

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; }
JAVASCRIPT
Expand for more options Login