About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
Happy Famz Design
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> <h1>happy famz!</h1> <div class="fam"> <div class="mem"> <div class="head size-1"></div> <div class="body body-1"></div> </div> <div class="mem"> <div class="head size-2"></div> <div class="body body-2"></div> </div> <div class="mem"> <div class="head size-3"></div> <div class="body body-3"></div> </div> <div class="mem"> <div class="head size-4"></div> <div class="body body-4"></div> </div> </div> </body> </html>
body { justify-content: center; text-align: center; align-items: center; background-color: #14b398; } h1 { font-size: 80px; text-transform: uppercase; font-family: sans-serif; color: #fcba03; margin-top: 0; margin-bottom: 0; } .fam { margin: auto auto auto 0; display: flex; } .mem { margin-right: 10px; } .head { background-color: #f7ef77; border: 4px solid black; border-radius: 50%; } .size-1 { margin-left: 160px; width: 100px; height: 100px; } .size-2 { width: 90px; height: 90px; margin-top: 20px; margin-left: -5px; } .size-3 { width: 80px; height: 80px; margin-top: 40px; } .size-4 { width: 70px; height: 70px; margin-top: 60px; } .body { border-left: 4px solid black; border-top-left-radius: 50%; border-top-right-radius: 50%; border-right: 4px solid black; border-top: 4px solid black; } .body-1 { background-color: #ff4242; width: 100px; height: 100px; margin-left: 160px; margin-top: 0; } .body-2 { background-color: #4eed4e; width: 100px; height: 90px; margin-top: 0; margin-left: -10px; } .body-3 { background-color: #3286ed; width: 100px; height: 80px; margin-top: 0; margin-left: -10px; } .body-4 { background-color: #d942ff; width: 100px; height: 70px; margin-top: 0; margin-left: -15px; }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)