About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
ENDLESS EMOJIS! AARGHH!
HTML
CSS
JS
<!-- Created by purple_ghost, subject to copyright. --> <!DOCTYPE HTML> <html> <head> <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 class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></div> </div> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="round-mouth"></div> <div class="puke"></div> </div> <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> <div class="emoji"> <div class="row"> <div class="eye"></div> <div class="eye"></div> </div> <div class="row"> <div class="tears"></div> <div class="tears"></div> </div> <div class="sad"></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; } .puke { background: linear-gradient(to bottom, #89a203, #677a00, green); width: 25px; height: 50px; margin-top: -20px!important; margin: auto; border-radius: 5px; } .grin { border: 6px solid transparent; border-bottom: 5px solid black; width: 20px; height: 50px; margin: auto; margin-top: -30px!important; border-radius: 50%; } .tears { background: linear-gradient(to bottom, #72c1e0, #65ACC7, #4e869c); height: 50px; width: 20px; margin-left: 7px; border-radius: 5px; } .tears:nth-of-type(2) { margin-left: 15px; } .sad { border: 6px solid transparent; border-top: 10px solid black; width: 20px; height: 50px; margin: auto; z-index: 1000; margin-top: -30px!important; border-radius: 50%; }