Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<script src="https://kit.fontawesome.com/76e9f55137.js" crossorigin="anonymous"></script>
<style>
*{
padding:0px;
margin:0px;
box-sizing:border-box;
}
.header{
display:flex;
justify-content:space-between;
padding:15px;
}
#icon{
width:27px;
}
#acc{
width:45px;
}.left{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
}
.right{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
}.header a{
color:black;
text-decoration:none;
font-size:20px;
}.header a:hover{
text-decoration:underline;
}
.main{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
width:630px;
height:500px;
margin:auto;
gap:30px;
}
.search-bar{
border-radius:20px;
display:flex;
gap:10px;
padding:15px;
}
.box{
width:400px;
border:none;
}
.links{
display:flex;
gap:10px;
}.search-bar:hover{
border:1px solid gray;
}
.footer{
margin-top:170px;
display:flex;
justify-content:space-between;
padding:20px;
}p{
font-size:20px;
}.footer a{
color:black;
text-decoration:none;
font-size:20px;
padding:10px;
}.footer a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<div class="header">
<div class="left">
<a href="">About</a>
<a href="">Store</a>
</div>
<div class="right">
<a href="">Gmail</a>
<a href="">Images</a>
<img id="icon" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABsbGxscGx4hIR4qLSgtKj04MzM4PV1CR0JHQl2NWGdYWGdYjX2Xe3N7l33gsJycsOD/2c7Z//////////////8BGxsbGxwbHiEhHiotKC0qPTgzMzg9XUJHQkdCXY1YZ1hYZ1iNfZd7c3uXfeCwnJyw4P/Zztn////////////////CABEIAIAAdwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQCB//aAAgBAQAAAACygAAAAcVQXHrqsPP2OOqO+471XgU/P0E+i1CJWefRNPXGUo3HJXSCq3q7dxzOl44+7Lk2bzEAnvUfEzPbrgN84V2trNOfP/O6/wBWg1tmVcriyTvz/Gz6DVYRbJp4rqx+ouIm5DVXN9gyaG9jj7MubZtIqnrlJUfilLlB1X3du1V4FPz9BPotQiVnn3FTc3LsqcNP2aNqG66bwAAAAP/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAKAgIQAxAAAAAAAAAAAAAAAAAAAAAAAAAA/8QALhAAAgICAgEDAwIFBQAAAAAAAQIDBAARBRAxEiFRE0JxIEEUIzNSYUBQYnKB/9oACAEBAAE/AP8AX3ri04fWRtj7IuT3bVltyTN+PAyC7arNuOVvwfdcpW0uQCRfY+GXq/y0ru0ddysY+4eWwSyhvUJHB+dnOM5V3kWCy29+yP1yN8UohoAyv4ya1YnYtLM7HK3I2qrD0yFl/dGytOlmFJU8N3z5P14F+Iu+AYiWwvygy2xWpZZfIhfvZHuDojASQCfjOaYm+w+ETvgGP0bK/Dr3y1JrUKvGNyJhBBIPkYASQACSfAziaTVIGL+zyYwDKykbBBB/By7TkpzFGG0+x+uNovbmViv8pDtj1zNF5gs8S7ZBpx0iNI6oilmPgDOPqfwdYIfdydv+ialVsHcsKschp1a53FCqnt0SRSrqGU/sRsYOLoBt/wAOuKqqAqgADwB3NQpzt6pIEJyGrXr/ANKJV/QzKiM7MFVRsk5PzyA6gh3/AJbIOeRjqeH0f5XFZXUMpBUjYI6uclBTPpO3f+wYOfffvWTKd+C4p9B048oepZY4Y2kkYKi+TkvP/tFB/wCucrc5DIwWZPp/o56dgIYB/wB274Gdik0B8Lp1yaT6UMsv9iFsd3kdnc7ZjsnqvO9aZJk8qc8gHOdnLTpB9qL3wk7S1SjeYm75+FtwT/lD3wMLATzfhFyeP60E0X96MuMrKxVhpgdEdQwtPKkSeXOsA0AM5yEpaWX7XTvg4SlV5D979yRpKjI6hlYaIOT8C+yYJhr4fIOBbe55R+ExESNFRFCqo0AOr3Fw2yXB9EuDgbW/eWLKPHQ0gSCXc+X6ngisRNFIu1OS8DMD/JmQjK3BBWDWXDf8FwAAAAaAGgP0TWq0HtLOiHIbVaf+lMj9syoCzsFUeSToYORoltCzHgIYAggg+CO5blSBvTJOitkU8E43FKj/AIP6OWutUhVUOpJMJJJJOyfJwEqQQSCPBGcXdNuAh/6qYSFBJOgBsnL16S7KWJ0n2J1xl96syozbhc9cxeeBVgiOncbY9RyPE6ujFWHgjKFsXKyv949n758H68B+Yu+AB+tY+PQMthmqWgvkwv3on2GDYAB86zmgRfb/ACid8AD9Gz8F17v01uQejw490bJ6s9dissTLkFSxZYCKJjlGmtOAIDtidser/EyxO7wIXi+B5TArFvSFYn41nF8W4lSeddBfdE65KgLsYK6EqZLBNAxWWNlOVqNm0wCRkL+7nxlaulWBIU8L/sH/xAAUEQEAAAAAAAAAAAAAAAAAAABg/9oACAECAQE/AAH/xAAUEQEAAAAAAAAAAAAAAAAAAABg/9oACAEDAQE/AAH/2Q==" alt="">
<img id="acc" src="images/Screenshot.png" alt="">
</div>
</div>
<div class="main">
<img src="https://th.bing.com/th/id/OIP.TqcnDevHeoB21zEWeNC8AwHaE8?w=260&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
<div class="search-bar">
<i class="fa-solid fa-plus"></i>
<input class="box" type="text">
<i class="fa-solid fa-microphone"></i>
<i class="fa-regular fa-camera"></i>
<div class="ai">
<i class="fa-solid fa-magnifying-glass"></i>
<span>Ai mode</span>
</div>
</div>
<div class="button">
<button>Google search</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="links">
<p>Google offered in:</p>
<a href="">தமிழ்</a><a href=""> हिन्दी</a><a href="">తెలుగు</a><a href="">മലയാളം</a><a href=""> मराठी</a>
</div>
</div>
<div class="footer">
<p>India</p>
<div class="terms">
<a href="">Privacy</a>
<a href="">Terms</a>
<a href="">Settings</a>
</div>
</div>
</body>
</html>
Output
Top comments (0)