Mon -
Sun 8.00 AM - 8.00 PM
HTML
)
In this tutorial, we will see that 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 - 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 -
Others Logos
1) Whatsap Logo
2) Youtube Logo
3) Tiktok Logo
5) Adidas Logo
6) Android Logo
8) Figma Logo
10) Twitter Logo
11) Google Pay Logo
14) Google Logo