Sun w/ Pyramids

HTML
<div class="layout"> <div class="night"></div> <div class="sun"></div> <div class="pyramid"> <div class="p1"><div class="shadow"></div></div> <div class="p2"><div class="shadow"></div></div> <div class="p3"><div class="shadow"></div></div> </div> <div class="ground"></div> </div>
LESS
*{margin:0px;padding:0px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;cursor: default;} body{background: #4FC3F7;} div{display: block;position: absolute;} .layout{ width: 100vw; height: 100vh; left: 0px; top: 0px; overflow: hidden; } .night{ width: 100%; height: 200%; left: 0px; top: 0px; transition: 0.5s; background: #4FC3F7; background: linear-gradient(to top, #4FC3F7, #333); } .ground{ width: 100vw; height: 30vh; left: 0px; bottom: 0px; background: #F4511E; z-index: 10; } .sun{ width: 600px; height: 600px; background: #FFF; border-radius: 50%; bottom: 35vh; left: 50%; transform: translate(-50%,0px); z-index: 1; transition: 0.5s; } .shadow{ width: 100%; height: 100%; top: 8%; left: -50%; background: #333; transform: rotate(30deg); } .pyramid{ width: 1000px; height: 50vw; left: 50%; bottom:30vh; transform: translate(-50%,0px); z-index: 2; .p1,.p2,.p3{ background: #F4511E; overflow: hidden; transform: rotate(45deg) translate(50%,50%); } .p1{ width: 500px; height: 500px; bottom: 30px; left: 20%; z-index: 2; } .p2{ width: 400px; height: 400px; bottom: 0px; right: 20px; z-index: 3; } .p6{ /* IMPORTANT - DO NOT DELETE .p3 CODE! */ } .p3{ width: 200px; height: 200px; bottom: 0px; left: 30px; z-index: 4; } } @media screen and (max-device-width: 900px), only screen and (max-width: 900px){ .pyramid{width: 100vw;} }
JAVASCRIPT
Expand for more options Login