Linux Logo Flat

HTML
<!-- Linux logo flat --> <div class="con"> <div class="linux-body"> <!-- hand --> <div class="hand"></div> <!-- eye --> <div class="eye"></div> <div class="eye eye-r"></div> <!-- nose --> <div class="nose"></div> <div class="nose nose-r"></div> <!-- mouth --> <div class="mouth"></div> <div class="lips"></div> <!-- Belly --> <div class="belly"></div> <!-- Foot --> <div class="foot"></div> <div class="foot foot-r"></div> </div> </div>
CSS
/* Fonts */ @import url('https://fonts.googleapis.com/css?family=Comfortaa'); body{ background: #073B4C; } .con { margin: auto; margin-top: 5%; width: 400px; height: 400px; background: #06D6A0; border: 5px solid #E76F51; border-radius: 50%; } .linux-body { position: relative; width: 200px; height: 300px; background: #2C3D50; border-radius: 60% 60% 50% 50% / 90% 90% 40% 40%; margin: auto; top: 10%; } .linux-body > div { position: absolute; /* top:; left:; */ } /* hand */ /* .hand { width: 10%; height: 50%; background: #203040; border-radius: 30% / 5%; top: 20%; left: 0%; transform: ; } */ .eye { width: 15px; height: 25px; background: #2C3D50; top: 10%; left: 30%; border-radius: 60%; border: 10px solid #FFCC00; } .eye-r { left: 50%; } .eye, .eye-r { animation: mvr 1s linear 1s infinite alternate; } @keyframes mvr { 0% { opacity: 50%} 100% { transform: scale(1.5,1.5) } } /* nose */ .nose { width: 1.3%; height: 1.3%; background: #2C3D50; top: 23%; left: 45%; z-index: 7; border-radius: 50%; } .nose-r {left: 50%;} /* mouth */ .mouth { width: 50px; height: 50px; background: #FFCC00; border: 2px solid #2C3D50; top: 18%; left: 36%; transform: rotate(45deg); border-radius: 50% 20% 50% 20% / 50% 20% 50% 20%; z-index: 3; } /* lips */ .lips { width: 20%; height: .50%; background: #2C3D50; border-radius: 10%; top: 29%; left: 40%; z-index: 5; } /* belly */ .belly { width: 70%; height: 60%; background: #EAF2BB; top: 30%; left: 15%; border-radius: 80% 80% 40% 40% / 100% 100% 50% 50%; z-index: 2; } /* foot */ .foot { width: 32%; height: 22%; background: #FFCC00; top: 80%; z-index: 4; border: 3px solid #2C3D50; border-radius: 80% 80% 40% 40% / 100% 100% 50% 50%; } .foot-r {left: 65%;} /* .foot:after, .foot:before { content: ' '; position: absolute; background: #FFCC00; width: 60%; height: 40%; border: 3px solid #2C3D50; border-radius: 80% 80% 40% 40% / 100% 100% 50% 50%; border-bottom: none; /* border-left: none; */ /* transform: rotate(-25deg); top: -11px; left: -15%; } .foot:before { left: 45%; top:; transform: rotate(25deg); } */ h1{ font-family: 'Comfortaa', cursive; font-size: 220%; letter-spacing: 20px; color: #2C3D50; /* text-shadow: 0px 0px 1px #2C3D50; */ }
JAVASCRIPT
Expand for more options Login