Hello everyone, you can learn how to create a Google Home Page using HTML and CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Google Home Page
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/favicon" href="images/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Google</title>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#">Gamil</a></li>
<li><a href="#">Images</a></li>
</ul>
<div class="images">
<a href="#"><img src="images/dots.png" alt=""></a>
<a href="#"><img src="images/account-logo.jpg" alt=""></a>
</div>
</nav>
<div class="google">
<img src="images/google.png" alt="">
</div>
<div class="search">
<div class="input">
<i class="fa fa-search"></i>
<input type="text">
<i class="fa fa-microphone"></i>
<div class="buttons">
<button><a href="#">Google Search</a></button>
<button><a href="#">I'm Feeling Lucky</a></button>
</div>
</div>
</div>
<div class="languages">
<p>Google offered in:</p>
<ul>
<li><a href="#">हिन्दी</a></li>
<li><a href="#">বাংলা</a></li>
<li><a href="#">తెలుగు</a></li>
<li><a href="#">मराठी</a></li>
<li><a href="#">தமிழ்</a></li>
<li><a href="#">ગુજરાતી</a></li>
<li><a href="#">ಕನ್ನಡ</a></li>
<li><a href="#">മലയാളം</a></li>
<li><a href="#">ਪੰਜਾਬੀ</a></li>
</ul>
</div>
</body>
</html>Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: arial,sans-serif;
}
body{
width: 100%;
}
.navbar{
width: 100%;
height: 60px;
padding: 5px;
color: white;
float: right;
position: relative;
}
.navbar ul{
display: flex;
position: absolute;
right: 100px;
line-height: 30px;
}
.navbar ul li{
list-style: none;
margin: auto 0;
margin-right: 12px;
}
.navbar ul li a{
text-decoration: none;
color: black;
font-size: 12px;
}
.navbar ul li a:hover{
text-decoration: underline;
}
.navbar .images{
display: flex;
height: 30px;
float: right;
position: absolute;
right: 10px;
}
.navbar .images a{
margin-right: 15px;
align-items: center;
justify-content: center;
display: flex;
}
.navbar .images a img{
display: block;
height: 30px;
margin: auto 0;
line-height: 60px;
}
.navbar .images a:nth-child(1) img{
height: 15px;
opacity: 0.6;
}
.google{
margin-top: 5px;
width: 100%;
}
.google img{
height: 83px;
line-height: 91px;
display: block;
margin: 0 auto;
}
.search{
width: 550px;
height: 45px;
display: block;
margin: 0 auto;
margin-top: 25px;
}
.search .input{
height: 45px;
position: relative;
}
.search .input input{
width: 100%;
display: block;
margin: 0 auto;
height: 45px;
border-radius: 24px;
outline: none;
border: 1px solid #dfe1e5;
padding: 0 45px;
font-size: 15px;
}
.search .input input:hover{
box-shadow: 2px 1px 2px rgba(0, 0, 0, 0.3);
}
.search .input .fa-search{
font-size: 15px;
position: absolute;
left: 17px;
top: 16px;
color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.search .input .fa-microphone{
font-size: 15px;
position: absolute;
right: 17px;
top: 16px;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.buttons{
display: block;
text-align: center;
margin-top: 20px;
}
.buttons button{
min-width: 54px;
height: 35px;
padding: 0 16px;
margin: 11px 4px;
border: none;
background: #f8f9fa;
}
.buttons button:hover{
color: #202124;
border: 1px solid #dadce0;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, /10%);
}
.buttons button a{
text-decoration: none;
color: black;
}
.languages{
width: 470px;
margin: 0 auto;
margin-top: 80px;
display: flex;
font-size: 12px;
line-height: 12px;
}
.languages ul{
display: flex;
margin-left: 5px;
}
.languages ul li{
list-style: none;
margin-right: 5px;
}
.languages ul li a{
text-decoration: none;
}
.languages ul li a:hover{
text-decoration: underline;
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
