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>Adidas logo using HTML and CSS</title> </head> <body> <div class="adidas"> <div class="logo-shape shape-1"></div> <div class="logo-shape shape-2"></div> <div class="logo-shape shape-3"></div> </div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; } .adidas { width: 206px; height: 120px; position: relative; overflow: hidden; } .logo-shape { width: 46px; height: 150px; background-color: #111; position: absolute; transform: rotate(-31deg); } .shape-1 { top: 86px; left: 36px; } .shape-2 { top: 45px; left: 82px; } .shape-3 { top: 4px; left: 128px; }
JS
Adidas logo using HTML and CSS