About
Explore
Events & Classes
Support Us
Join
Sign In
JUSTCodaborate
View Project Page
Run
Fullscreen
Emoji
HTML
CSS
JS
<div class="emoji"> <div class="eye"> <div class="pupil"></div> </div> <div class="eye"> <div class="pupil"></div> </div> <div class="mouth"></div> </div>
.emoji { border-radius: 50%; background-color: gold; width: 100px; height: 100px; } .eye { border-radius: 50%; background-color: white; width: 30px; height: 30px; color: white; position: absolute; top: 30px; left: 20px; justify-content: center; align-items: center; } .eye:nth-of-type(2) { left: 70px; } .pupil { border-radius: 50%; background-color: black; width: 10px; height: 10px; color: black; position: absolute; top: 10px; padding-top: 0; text-align: center; padding-bottom: 4px; justify-content: center; align-items: center; left: 10px; } .mouth { width: 60px; height: 10px; background-color: #fce879; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; border-top-left-radius: 0px; border-top-right-radius: 0px; position: absolute; top: 80px; justify-content: center; align-items: center; left: 30px; color: gold; }