How to create a Google logo using html and css 😎
FOLLOW OUR INSTAGRAM PAGE FOR MORE : - CODING.BATCH
<!DOCTYPE html>
<html>
<head>
<title>CSS Only Logos</title>
<style>
body{
background-color: #ED1B24;
}
.container{
width: 500px;
height: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 250px);
border: 5px #FEF200 solid;
z-index: 2;
}
.half-elipse1{
display: inline-block;
clip: rect(0px,90px,190px,0px);
position: absolute;
left: 167px;
top: 60px;
width: 90px;
height: 380px;
background-color: #FEF200;
border-radius: 50% 50% 0 0;
}
.half-elipse2{
display: inline-block;
clip: rect(0px,90px,190px,0px);
position: absolute;
right: 167px;
top: 60px;
width: 90px;
height: 380px;
background-color: #FEF200;
border-radius: 50% 50% 0 0;
}
.half-elipse3{
display: inline-block;
clip: rect(0px,90px,190px,0px);
position: absolute;
left: 182px;
top: 80px;
width: 60px;
height: 380px;
background-color: #ED1B24;
border-radius: 50% 50% 0 0;
}
.half-elipse4{
display: inline-block;
clip: rect(0px,90px,190px,0px);
position: absolute;
right: 182px;
top: 80px;
width: 60px;
height: 380px;
background-color: #ED1B24;
border-radius: 50% 50% 0 0;
}
.cut{
width: 50px;
height: 30px;
position: absolute;
left: 225px;
top: 225px;
background-color: #ED1B24;
}
</style>
</head>
<body>
<div class="container">
<div class="half-elipse1"></div>
<div class="half-elipse2"></div>
<div class="half-elipse3"></div>
<div class="half-elipse4"></div>
<div class="cut"></div>
</div>
</body>
</html>
FOLLOW ME ON INSTAGRAM PAGE : - CODING.BATCH
Comments
Post a Comment