How to Create a Google Logo using HTML and CSS

AuthorHariom Prajapati

Pubish Date26 Jun 2022

categoryHTML

In this tutorial, we will see that how to create a Google logo using HTML and CSS.

 

How to Create a Google Logo using HTML and CSS

You can also see other logos here https://www.teknowize.com/code-snipits/logo

 

How to create a google logo using HTML and CSS

So let's follow all the steps to create logo using HTML and CSS.

 

Step 1 - Create a div with an id of google-logo in your HTML.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to Create a Google Logo using HTML and CSS</title>
</head>

<body>
    <div id="google-logo">
    </div>
</body>

</html>

 

Step 2 - Now paste the below code in your CSS.

#google-logo {
    position: relative;
    border-top: 50px solid #EA4335;
    border-right: 50px solid #4285F4;
    border-bottom: 50px solid #34A853;
    border-left: 50px solid #FBBC05;
    border-radius: 50%;
    background-color: #FFFFFF;
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 10vh auto 0;
    }

After pasting the code inside your CSS the logo looking like -

 

Step 7 - Also paste the below code in your CSS.

#google-logo::before {
    content: "";
    z-index: 100;
    position: absolute;
    top: 50%;
    right: -42.5px;
    transform: translateY(-50%);
    width: 122.5px;
    height:50px;
    background: #4285F4;
  }  

 #google-logo::after {
    content: "";
    z-index: 105;
    position: absolute;
    border-top:46px solid transparent;
    border-right:105px solid #fff;
   top: -27px;
    right: -47px;
    width: 90px;
    height: 31px;
}

 

Here we combined HTML and CSS code together. (You can also use external CSS file according to your needs)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>How to Create a Google Logo using HTML and CSS</title>

    <style>
        #google-logo {
            position: relative;
            border-top: 50px solid #EA4335;
            border-right: 50px solid #4285F4;
            border-bottom: 50px solid #34A853;
            border-left: 50px solid #FBBC05;
            border-radius: 50%;
            background-color: #FFFFFF;
            width: 150px;
            height: 150px;
            padding: 0;
            margin: 10vh auto 0;
        }

        #google-logo::before {
            content: "";
            z-index: 100;
            position: absolute;
            top: 50%;
            right: -42.5px;
            transform: translateY(-50%);
            width: 122.5px;
            height: 50px;
            background: #4285F4;
        }

        #google-logo::after {
            content: "";
            z-index: 105;
            position: absolute;
            border-top: 46px solid transparent;
            border-right: 105px solid #fff;
            top: -27px;
            right: -47px;
            width: 90px;
            height: 31px;
        }
    </style>
</head>

<body>
    <div id="google-logo">
    </div>
</body>

</html>

 

The final output of the Google logo looking like -

 

Others Logos 

  1. Whatsap Logo
  2. Youtube Logo
  3. Tiktok Logo
  4. Instagram Logo
  5. Adidas Logo
  6. Android Logo
  7. Microsoft Logo
  8. Figma Logo
  9. Google Ads Logo
  10. Twitter Logo
  11. Google Pay Logo
  12. Google Loading Logo
  13. Google Chrome Logo
  14. Google Logo

 

Comments 0

Leave a comment