Hello guys in this tutorial we will create Google chrome logo using 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>Chrome icon using html css</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="icon-outer">
<div class="logo chrome">
<div class="part-1"></div>
<div class="part-2"></div>
<div class="part-3"></div>
<div class="center-circle"></div>
</div>
</div>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
margin: 0;
padding: 0;
}
.icon-outer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo.chrome {
width: 210px;
height: 210px;
border-radius: 50%;
z-index: 1;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
animation: spin 0.8s linear forwards;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.logo.chrome .center-circle {
border-radius: 50%;
background: #0d6cac;
background: -webkit-gradient(linear, 50% 0%, 50% 100%,
color-stop(0%, #91c1e7),
color-stop(100%, #0d6cac));
position: absolute;
height: 80px;
width: 80px;
border: 8px solid #fff;
z-index: 10;
}
.part-1 {
background: #e93c35;
position: absolute;
top: 0;
left: 34px;
width: 200px;
height: 60px;
}
.part-1:after {
transform: rotate(60deg);
content: " ";
background: #e93c35;
position: absolute;
top: 0;
left: -91px;
width: 200px;
height: 58px;
}
.part-2 {
transform: rotate(120deg);
background: #fdd901;
position: absolute;
top: 131px;
left: 56px;
width: 200px;
height: 65px;
}
.part-2:after {
transform: rotate(60deg);
content: " ";
background: #fdd901;
position: absolute;
top: 0;
left: -91px;
width: 200px;
height: 58px;
}
.part-3 {
transform: rotate(-120deg);
background: #5bc15b;
position: absolute;
top: 88px;
left: -74px;
width: 200px;
height: 65px;
}
.part-3:after {
transform: rotate(60deg);
content: " ";
background: #5bc15b;
position: absolute;
top: 0;
left: -91px;
width: 200px;
height: 58px;
}