JavaScript
CSS
jQuery
MySQL
PHP
Laravel
Python
HTML Course Code
CSS Minifier
Gradient Generator
PX ⇄ REM Converter
PX ⇄ EM Converter
WEBP Converter
PDF to Text Converter
Text Converter
Age Calculator
Pincode Details Finder
White Board
Coding Ground
Resume Builder
Sumit Sarkar
02 Dec 2024
CSSIn this tutorial, we will learn how to create google logo using HTML and CSS.
Google logo is known for colorfull and payfull design. The letter of GOOGLE is fill with different color which represent company's products and services.
Here we will create google logo using HTML and CSS.
Create HTML structure for google logo
In this we will take a <div> tag and add attribute of ID 'google-logo-div'.
<!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">
</div>
</body>
</html>Styling HTML structure with CSS to create google logo
In this we will add css properties to ID 'google-logo-div'.
#google-logo-div {
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-div::before {
content: "";
z-index: 100;
position: absolute;
top: 50%;
right: -42.5px;
transform: translateY(-50%);
width: 122.5px;
height:50px;
background: #4285F4;
}
#google-logo-div::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;
}Output
Leave a comment