Hello, guys today we will learn how to create a Google logo with HTML and CSS?
First we need to create two files index.html and Style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Google Logo With Single DIV</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo"></div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.logo {
position: relative;
width: 22rem;
height: 22rem;
border-radius: 50%;
border-left: 40px solid #FBBC05;
border-right: 40px solid #4385F6;
border-top: 40px solid #EC4336;
border-bottom: 40px solid #34A856;
}
.logo:before {
content: '';
position: absolute;
top: -150px;
right: -150px;
border-top: 110px solid transparent;
border-right: 110px solid #fff;
border-bottom: 110px solid transparent;
border-left: 100px solid transparent;
transform: rotate(90deg);
}
.logo:after {
content: '';
position: absolute;
top: 50%;
right: -45px;
width: 110px;
height: 40px;
background: #4385F6;
transform: translate(-5px, -20px);
border-bottom-right-radius: 15px;
}
very useless website my dear brother you need to improve it, hope you will don’t mind may Allah Blessed you.
Have a nice day.
Thank You