About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
Safety Design #1
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="slogan"> <div class="sec"> <div class="round round-1"> <p>think safety</p> </div> </div> <div class="sec"> <div class="round round-2"> <p>act safely</p> </div> </div> <div class="sec"> <div class="round round-3"> <p>stay safe</p> </div> </div> </div> </body> </html>
.slogan { display: flex; justify-content: center; align-items: center; margin: auto; } p { text-transform: uppercase; font-family: sans-serif; margin-top: 45px; font-weight: bolder; font-size: 20px; } .sec { display: flex; margin-top: 50px; } .round { border-radius: 50%; width: 130px; height: 130px; margin-bottom: 10px; color: white; text-transform: uppercase; text-align: center; margin-right: 20px; } .round-1 { background-color: #f7e23e; color: black; border: 8px solid black; } .round-2 { background-color: #3483eb; } .round-2 p { margin-top: 55px; } .round-3 { background-color: #12b812; } .round-3 p { margin-top: 55px; }
About
Explore
Events & Classes
Support Us
Join
Sign In
.png)