clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How to create a Google logo using HTML and CSS

  Hariom Prajapati
  19 Aug 2022
  HTML
Imperial Advance Hero Image

How to create a Google logo using HTML and CSS

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

So let's start

Step 1 - Open your code editor ( The code editor you are using )

 

Step 2 - Now create a new file and save it with .html extension to write HTML code inside it.

 

Step 3 - Create another new file and save it without .css extension to write CSS code inside it.

 

Step 4 - Now link the .css file with .html file .

 

Step 5 - Now created a div in your .html file with an "id" (you can choose any ID name but here we choosed Google-logo ).

Code

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


 

Step 6 - Then go to .css file and paste the below code.

Code

#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 the .css file the logo looking like -

Step 7 - Paste the below code in .css file.

Code

#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;
}


 

The final output of the Google logo looking like -