HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Figma logo using HTML and CSS</title> </head> <body> <div class="container"> <div class="sm-container"> <div class="dot-area red-area"></div> <div class="dot-area violet-area"></div> <div class="dot-area green-area"></div> </div> <div class="sm-container"> <div class="dot-area pale-red-area"></div> <div class="dot-area blue-area"></div> </div> </div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; background: #000; } .container { display: flex; } .sm-container { display: flex; flex-direction: column; align-items: center; } .dot-area { width: 50px; height: 50px; } .red-area { background-color: #e64a1c; border-radius: 25px 0 0 25px; } .violet-area { background-color: #9a54f2; border-radius: 25px 0 0 25px; } .green-area { background-color: #09c47c; border-radius: 25px 0 25px 25px; } /* right side */ .pale-red-area { background-color: #f26c5d; border-radius: 0 25px 25px 0; } .blue-area { background-color: #19b2f1; border-radius: 25px; }
JS
Figma logo using HTML and CSS