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 {

    positionrelative;

    border-top50px solid #EA4335;

    border-right50px solid #4285F4;

    border-bottom50px solid #34A853;

    border-left50px solid #FBBC05;

    border-radius50%;

    background-color#FFFFFF;

    width150px;

    height150px;

    padding0;

    margin10vh 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-index100;

    positionabsolute;

    top50%;

    right-42.5px;

    transformtranslateY(-50%);

    width122.5px;

    height:50px;

    background#4285F4;

  }

  

 #google-logo::after {

    content"";

    z-index105;

    positionabsolute;

    border-top:46px solid transparent;

    border-right:105px solid #fff;

   top-27px;

    right-47px;

    width90px;

    height31px;

}



The final output of the Google logo looking like -