About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
Emojis CSS 2
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Emojis</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="grin"></div> </div> </body> </html>
body { display: flex; justify-content: center; vertical-align: middle; align-items: center; flex-wrap: wrap; } .row { display: flex; flex-wrap: wrap; } .emoji { margin-right: 15px; vertical-align: middle; background: linear-gradient(to bottom, yellow, gold, goldenrod); border-radius: 50%; width: 70px; height: 70px; justify-content: center; align-items: center; margin-bottom: 30px; } .eye { background-color: black; border-radius: 50%; width: 10px; margin: auto; margin-top: 20px; height: 10px; } .round-mouth { border-radius: 50%; background-color: black; width: 30px; height: 30px; margin: auto; margin-top: 5px; } .grin { border: 6px solid transparent; border-bottom: 5px solid black; width: 20px; height: 50px; margin: auto; margin-top: -30px!important; border-radius: 50%; }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)