About
Explore
Events & Classes
Support Us
Join
Sign In
Coding with Rumaysa
View Project Page
Run
Fullscreen
Android Logo (Pure CSS!)
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width"> </head> <body> <div class="head"> <div class="eyes one"></div> <div class="eyes two"></div> </div> </body> </html>
.head { background-color: #3ddc84; border-top-right-radius: 225px; border-top-left-radius: 225px; border-bottom: 0; width: 450px; height: 225px; left: 50%; top: 50%; position: absolute; transform: translate(-50%,-50%); } .head::before { content: ''; background-color: #3ddc84; height: 210px; width: 5px; top: -20%; left: 21%; transform: rotate(-25deg); position: absolute; border-radius: 25px; border: 5px solid #3ddc84; } .head::after { content: ''; background-color: #3ddc84; height: 210px; width: 4px; top: -20%; left: 71%; z-index: -1; transform: rotate(25deg); position: absolute; border-radius: 25px; border: 5px solid #3ddc84; } .eyes { width: 36px; height: 36px; border-radius: 50%; background-color: white; top: 50%; position: absolute; } .eyes.one { left: 24%; } .eyes.two { left: 65%; }