Hey, developer today is Day 78 of our 90Projects in 90Days. And today in this challenge, we are going to Create a Responsive Google Homepage Clone HTML and CSS code
To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.
Preview
Image Resources: Download Now
HTML Code
index.html
<!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">
<title> Google Home Page Clone </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="google-main-container">
<div class="top-nav">
<ul>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
<li id="google-apps"><a href="#"></a></li>
<li id="user-profile"></li>
</ul>
</div>
<div class="main">
<div class="logo-container">
<div class="logo"> <img src="google-logo.png"> </div>
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
<input type="text" name="search" id=""> <img id="microphone" src="mic.png"> </input>
</div>
<div class="buttons">
<button id="main-btn">Google Search</button>
<button id="sec-btn">I'm Feeling Lucky</button>
</div>
<div class="languages">
<span> Google offered in: <div class="lang">
<span><a href="#"> हिन्दी </a></span>
<span><a href="#"> বাংলা </a></span>
<span><a href="#"> à°¤ెà°²ుà°—ు </a></span>
<span><a href="#"> मराठी </a></span>
<span><a href="#"> தமிà®´் </a></span>
<span><a href="#"> ગુજરાતી </a></span>
<span><a href="#"> ಕನ್ನಡ </a></span>
<span><a href="#"> മലയാà´³ം </a></span>
<span><a href="#"> ਪੰਜਾਬੀ </a></span>
</div>
</span>
</div>
</div>
</div>
<div class="footer">
<ul class="left-footer">
<li><a href="#">About</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#"> How Search Works </a></li>
</ul>
<ul class="right-footer">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: arial, sans-serif;
}
.google-main-container {
padding-top: 20px;
position: relative;
margin: 0 auto;
}
.top-nav ul {
float: right;
padding: 0 30px;
}
.top-nav ul li {
margin: 2px 10px;
display: inline-block;
vertical-align: middle;
}
.top-nav ul li a {
text-decoration: none;
color: black;
}
.top-nav ul li a:hover {
text-decoration: underline;
}
#google-apps {
background-image: url("./993522.avif");
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 15px;
width: 15px;
}
#user-profile {
width: 32px;
height: 32px;
background-image: url("./user.png");
background-size: contain;
border-radius: 50%;
}
.main {
width: 80%;
margin: 0 auto;
}
.logo-container {
padding-top: 100px;
}
.logo img {
display: block;
margin: 0 auto;
width: 250px;
}
.search {
width: 80%;
border: 1px solid rgb(184, 163, 163);
display: flex;
padding: 4px 20px;
align-items: center;
margin: 2rem auto;
border-radius: 50px;
}
.search input {
width: 100%;
outline: none;
border: none;
padding: 10px;
}
.search img {
width: 15px;
}
.buttons {
width: 300px;
margin: 20px auto;
}
button {
border: 1px solid white;
color: #757575;
font-weight: bold;
padding: 15px;
cursor: pointer;
}
button:hover {
border: 1px solid #b8b8b8;
}
.languages {
width: 80%;
margin: 10px auto;
}
.languages a {
text-decoration: none;
margin: 5px 10px;
}
.languages .lang {
display: inline;
text-align: center;
margin-bottom: 1rem;
}
.footer {
width: 100%;
position: fixed;
bottom: 0;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
left: 0;
border-top: 1px solid #ccc;
padding: 20px 0;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
color: #666;
}
.footer a {
text-decoration: none;
color: #666666;
font-size: 15px;
height: 40px;
}
.left-footer {
float: left;
}
.right-footer {
float: right;
}
a:hover {
text-decoration: underline;
}
@media screen and (max-width: 573px) {
.logo img {
width: 80%;
margin: 0 auto;
}
.main {
width: 100%;
}
.footer {
flex-direction: column;
justify-content: center;
row-gap: 20px;
}
}
@media screen and (max-width: 346px) {
.buttons {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.left-footer {
text-align: center;
}
}
