Google Logo code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Google Logo</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo"></div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 130px; height: 130px; border-radius: 50%; border-top: 50px solid red; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid gold; } .logo::before { content: ''; position: absolute; top: -155px; right: -155px; border-top: 100px solid transparent; border-right: 100px solid white; border-bottom: 100px solid transparent; border-left: 100px solid transparent; transform: rotate(90deg); } .logo::after { content: ''; position: absolute; top: 50%; right: -50%; width: 100px; height: 50px; background: blue; transform: translate(-22px, -21px); }
