In this tutorial, we will learn How to make a Google Home page using HTML and CSS.
This project has basic principles and designs some elements, a search option, and various CSS styling, which offer you hands-on experience in web design.
I try to explain things most simply so you can understand them easily.
Preview:
Which technology is used to create a Google Home Page?
Mainly we used HTML(Hypertext Markup Language) and CSS(Cascading Style Sheets)to create a Google Home page.
- HTML: Used for designing the interface.
- CSS: It is used for styling.
Creating Google Home page:
Step 1:Setting Up the HTML Structure
First, we will set up the basic HTML structure. This includes the Header with navigation links, the Google logo, the search bar, and the footer.
HTML 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>
<link rel="stylesheet" href="style.css"><!--Linked with css file-->
</head>
<body><!--Website's Body part start-->
<section>
<header>
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
</ul>
<ul class="nav2">
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li><img src="img/labs.png" alt=""></li>
<li><img src="img/bars.png" alt=""></li>
<li><img src="img/GAcct img.png" alt=""></li>
</ul>
</header>
<div class="main">
<img src="img/google.png" alt="Error">
<div class="search_box"><!--Search Bar-->
<input type="text" class="search">
<div class="icons">
<div><img src="img/search.png" alt="Error"></div>
<div><img src="img/mic.png" alt="Error"></div>
</div>
</div>
<div class="buttons">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
<ul class="languages"><!-- Selection for Prefered language-->
<li>Google offered in:</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>
<li><a href="#">ਪੰਜਾਬੀ</a></li>
</ul>
</div>
<div class="footer">
<div class="row row1">
<p class="country">India</p>
</div>
<div class="row row2" >
<ul>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search Works</a></li>
</ul>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
Step 2: Styling with CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
section{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
section header{
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: flex-end;
padding: 20px;
}
section header ul {
display: flex;
justify-content: space-between;
align-items: center;
}
section header ul li{
list-style: none;
margin-left: 20px;
justify-content: space-between;
}
section header ul li a{
color: #111;
text-decoration: none;
font-size: 13px;
}
section header ul li img{
cursor: pointer;
}
section .main{
width: 580px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
section .main .search_box{
position: relative;
width: 100%;
margin-top: 20px;
}
section .main .search_box .search{
width: 100%;
padding: 13px;
padding-left: 45px;
padding-right: 60px;
border-radius: 60px;
border: 1px solid #ccc;
outline: none;
font-size: 16px;
}
section .main .search_box .icons{
position: absolute;
top: 0;
width: 100%;
display: flex;
padding: 12px 20px;
justify-content: space-between;
align-items: center;
pointer-events: none;
}
section .main .buttons{
margin-top: 20px;
}
section .main .buttons button{
margin: 0 5px;
padding: 12px 20px;
color: #555;
font-size: 14px;
border: none;
cursor: pointer;
border-radius: 4px;
border: 1px solid transparent;
outline: none;
}
section .main .buttons button:hover{
border: 1px solid #ccc;
}
section .main .languages{
display: flex;
margin-top: 30px;
list-style: none;
}
section .main .languages li a{
text-decoration: none;
color: #1a0dab;
}
section .main .languages li a:hover{
text-decoration: underline;
}
section .footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #f2f2f2;
}
section .footer .row{
padding: 15px 20px;
border-top: 1px solid rgba(0,0,0,0.05);
}
section .footer .row.row2{
display: flex;
justify-content: space-between;
}
section .footer .row.row2 ul{
display: flex;
}
section .footer .row.row2 ul li{
list-style: none;
}
section .footer .row.row2 ul li a{
text-decoration: none;
font-size: 14px;
color: #5f6368;
margin-right: 25px;
}
section .footer .row.row2 ul:nth-child(2) li a{
text-decoration: none;
font-size: 14px;
color: #5f6368;
margin-right: 25px;
}
Explanation:
HTML structure:
- Header: Contains two sets of navigation links: “.left_link“(for the “About” and “Store”) and “.right_link“(for the “Gmail” and “Images”, search labs, along with the apps and user icons).
- Google logo: Display the Google logo.
- Search bar: Contains Search input box.
- Search buttons: Contains the search buttons (“Google Search” and “I’m Feeling Lucky“).
- Footer: Contains footer links.
CSS Styling:
- General style: Styles the overall layout,box-sizing, and fonts.
- Header: Styles the header, positioning navigation links.
- Search containers: Styles the search input box and buttons, including the ‘search by voice’ and ‘search by image’ icons.
- Footer: Styles the footer with links.
Following these steps, you can create a simple replica of the Google home page. This exercise is a great way to practice your HTML and CSS skills and understand how to structure and style a webpage effectively.