Follow us on instagram: https://www.instagram.com/webstreet_code/
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Clone</title>
<!-- Updated Font Awesome CDN for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Background and centering */
body {
background-color: #202124;
color: #e8eaed;
display: flex;
align-items: center;
min-height: 100vh;
flex-direction: column;
}
/* Logo styling */
.logo {
font-size: 7rem;
font-weight: bold;
color: white;
}
/* Search bar styling */
.search-bar {
display: flex;
align-items: center;
margin-top: 20px;
background-color: #434346;
border-radius: 24px;
padding: 10px;
width: 100%;
max-width: 560px;
gap: 10px;
}
.search-bar input {
flex: 1;
padding: 10px;
background: transparent;
border: none;
outline: none;
color: #e8eaed;
font-size: 1rem;
}
/* Icon color styling */
.search-icons2 {
background: linear-gradient(90deg, red, rgb(5, 74, 96));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.5rem; /* Adjust size if needed */
}
/* Button styling */
.buttons {
margin-top: 20px;
display: flex;
gap: 10px;
}
.buttons button {
padding: 10px 20px;
font-size: 1rem;
background-color: #303134;
color: #e8eaed;
border: none;
border-radius: 4px;
cursor: pointer;
}
.buttons button:hover {
background-color: #5f6368;
}
/* Language links styling */
.language {
margin-top: 20px;
font-size: 0.9rem;
color: #8ab4f8;
text-align: center;
}
/* Navbar and footer styling */
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
padding: 10px 20px;
background-color: #202124;
}
.navitems {
display: flex;
gap: 20px;
}
.navitems h4 {
cursor: pointer;
font-size: 0.9rem;
font-weight: lighter;
}
.blackbox {
background: black;
position: fixed;
bottom: 8px;
width: 100%;
}
.ind{
padding: 10px 15px;
font-weight: lighter;
border-bottom: 1px solid #393939;
}
.footer {
padding: 10px 15px;
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
color: white;
text-align: center;
}
.footer a {
margin-left: 40px;
font-size:small;
text-decoration: none;
color: white;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="navbar">
<div class="navitems">
<h4>About</h4>
<h4>Store</h4>
</div>
<div class="navitems">
<h4>Gmail</h4>
<h4>Images</h4>
<h4><i class="fa-solid fa-flask"></i></h4>
<h4><i class="fa-regular fa-user"></i></h4>
</div>
</div>
<div class="logo">Google</div>
<div class="search-bar">
<div class="search-icons">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Search Google or type a URL">
<div class="search-icons2">
<i class="fa-solid fa-microphone"></i>
</div>
<div class="search-icons2">
<i class="fa-solid fa-camera-retro"></i>
</div>
</div>
<div class="buttons">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="language">
<span style="color: #8e9194;">Google offered in:</span>
<span style="font-weight: lighter;">
हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ
</span>
</div>
<div class="blackbox">
<div class="ind">
<h4>India</h4>
</div>
<div class="footer">
<div>
<a href="#">Advertising</a>
<a href="#">Business</a>
<a href="#">How Search works</a>
</div>
<div>
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Settings</a>
</div>
</div>
</div>
</body>
</html>
Top comments (0)