Hello guys in this tutorial we will create Google Ads 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 lang="en">
<head>
<meta charset="UTF-8">
<title>Google Ads Logo</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="logo-outer">
<div class="google-ads">
<span></span>
<span></span>
<span></span>
</div>
</div>
<h1>Google Ads</h1>
</body>
</html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0px;
margin: 0px;
font-family: 'Roboto', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo-outer .google-ads {
width: 65px;
height: 100px;
position: relative;
transform: scale(0);
animation: scale 0.6s linear forwards;
}
.google-ads span {
position: absolute;
width: 30px;
height: 100%;
display: inline-block;
}
.google-ads span:nth-child(1) {
background: #fabd00;
border-radius: 50px;
left: 0;
transform: rotate(30deg);
}
.google-ads span:nth-child(3) {
background: #398cba;
border-radius: 50px;
right: 0;
transform: rotate(-30deg);
}
.google-ads span:nth-child(2) {
width: 30px;
height: 30px;
background: #31aa51;
border-radius: 50px;
left: 0;
bottom: 0;
transform: translate(-18px, -4px);
}
h1 {
color: #767676;
margin-left: 30px;
font-size: 40px;
}
@keyframes scale {
0% {
transform: scale(0);
}
50% {
transform: scale(1.6);
}
100% {
transform: scale(1);
}
}