Google Home Page Code using HTML and CSS (Project-2)
Project Based on the Html and Css for the Google home page (Project-2)
It will Cover the entire process that how to build the Google home page using Html and Css
<!Doctype html>
<html>
<head>
<title>Google Home Page</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="nav"> <!--id1-->
<a class="top-link">Gmail</a>
<a class="top-link"> Images</a>
<a class="top-image"></a>
</div>
<div id="middle"> <!--id2-->
</div>
<div id="logo"> <!--id3-->
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div id="searchbarcontainer">
<input id="searchbar" type="text">
<!--id5-->
</div>
<div id="buttons"> <!--id6-->
<div class="button">
Google Search</div>
<div class="button">
I'm Feeling Lucky</div>
</div>
<div id="links">
Google offered In : <a href="">Telugu</a> <a href="">Tamil</a> <a href="">Hindi</a> <a href="">kannada</a>
</div>
<div id="footer">
</div>
</body>
</html>
<style>
body{
margin: 0;
}
#nav {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
#nav a {
margin-right: 20px;
}
#nav a.top-image{
width:20px;
height:20px;
margin-top:3px;
background-color:red;
border-radius:50px;
}
#middle{
margin-top:150px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
#logo{
text-align:center;
}
#searchbarcontainer{
text-align: center;
margin-top:20px;
}
#searchbar{
padding-top: 10px;
padding-bottom: 10px;
outline:0px;
width:500px;
border-radius:15px;
border:1px solid #c4c4c4;
}
#searchbar:hover{
box-shadow: 0 0 10px 20px rgb (233, 233,233);
}
#buttons{
display:flex;
margin-top:15px;
justify-content: center;
}
.button{
margin-left:10px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
border-radius:2px;
background:rgb(230, 230, 230)
}
#links{
text-align:center;
margin-top: 20px;
}
</style>
