Below code is demonstrated in this video: https://youtu.be/DCicOGDkJ_I
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google homepage</title>
<style>
.navbar{
display: flex;
justify-content: right;
}
.nav_link{
margin-top: 5px;
margin-right: 8px;
color: black;
text-decoration: none;
}
.nav_link:hover{
text-decoration: underline;
}
.h_image{
display: flex;
justify-content: center;
padding-top: 200px;
}
.h_input{
display: flex;
justify-content: center;
margin-top: 25px;
}
.input_search{
width: 582px;
height: 44px;
border-radius: 24px;
background-image: url("https://i.ibb.co/bQdYRGf/s.png");
background-repeat: no-repeat;
background-position: 5px 10px;
padding-left: 40px;
font-size: 16px;
}
.search_btns{
display: flex;
justify-content: center;
margin-top: 25px;
}
.s_btn{
margin-right: 5px;
padding: 8px;
cursor: pointer;
background-color: #f8f9fa;
}
.language_links{
display: flex;
justify-content: center;
margin-top: 25px;
}
.l_link{
margin-right: 7px;
text-decoration: none;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#" class="nav_link">Gmail</a>
<a href="#" class="nav_link">Images</a>
</nav>
<section class="h_image">
<img src="https://i.ibb.co/MGRsw3h/g.png" width="272px">
</section>
<section class="h_input">
<input type="text" class="input_search">
</section>
<section class="search_btns">
<button class="s_btn">Google Search</button>
<button class="s_btn">I'm Feeling Lucky</button>
</section>
<section class="language_links">
Google offered in:
<a href="#" class="l_link">हिन्दी</a>
<a href="#"class="l_link" >বাংলা</a>
<a href="#"class="l_link" >తెలుగు</a>
<a href="#" class="l_link">मराठी</a>
<a href="#" class="l_link">தமிழ்</a>
</section>
</body>
</html>