Converting Search Engine Figma Design to HTML and CSS Codes.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Google Search Clone</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="top-bar">
<div class="sign-in">
<span class="hover-effect">Gmail</span>
<span class="hover-effect">Images</span>
<div class="profile-pic">
<!-- Replace the src with the path to your custom image -->
<img src="guy.jpeg" alt="Custom Profile Image">
</div>
</div>
<div class="sign-in-box">
<p>Sign in to Google</p>
<p>Save your passwords securely with your Google Account</p>
<button>No thanks</button>
<button class="sign-in-btn">Sign in</button>
</div>
</div>
<div class="google-container">
<div class="google-logo">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo">
</div>
<div class="search-box">
<input type="text" placeholder="Search Google or type a URL" class="search-input">
</div>
<div class="buttons">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<footer>
<div class="footer-top">
<p>Nigeria</p>
</div>
<div class="footer-bottom">
<div class="left-links">
<a href="#" class="hover-effect">About</a>
<a href="#" class="hover-effect">Advertising</a>
<a href="#" class="hover-effect">Business</a>
<a href="#" class="hover-effect">How Search Works</a>
</div>
<div class="right-links">
<a href="#" class="hover-effect">Privacy</a>
<a href="#" class="hover-effect">Terms</a>
<a href="#" class="hover-effect">Settings</a>
</div>
</div>
</footer>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.top-bar {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding: 10px 20px;
}
.sign-in {
display: flex;
gap: 20px;
font-size: 14px;
align-items: center;
}
.sign-in .profile-pic img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover; /* Ensures the custom image fits properly */
}
.sign-in-box {
position: absolute;
right: 20px;
top: 50px;
width: 200px;
border: 1px solid #ccc;
padding: 15px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-size: 14px;
text-align: left;
}
.sign-in-box p {
margin-bottom: 10px;
vertical-align: 20px;
}
.sign-in-box button {
padding: 6px 10px;
margin-right: 6px;
font-size: 14px;
cursor: pointer;
}
.sign-in-btn {
background-color: #1a73e8;
color: white;
border: none;
border-radius: 4px;
vertical-align: 5px;
}
.google-container {
text-align: center;
}
.google-logo img {
width: 272px;
height: 92px;
object-fit: contain;
}
.search-box {
margin: 20px 0;
}
.search-input {
width: 400px;
padding: 10px;
border: 1px solid #dfe1e5;
border-radius: 24px;
font-size: 16px;
outline: none;
transition: box-shadow 0.2s;
}
.search-input:focus {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.buttons {
margin: 20px 0;
}
.buttons button {
background-color: #f8f9fa;
border: 1px solid #dadce0;
color: #3c4043;
font-size: 14px;
padding: 10px 20px;
margin: 0 6px;
border-radius: 4px;
cursor: pointer;
}
.buttons button:hover {
border-color: #c6c6c6;
}
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
.footer-top p {
color: #5f6368;
font-size: 14px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
padding: 10px 50px;
font-size: 14px;
color: #5f6368;
}
.footer-bottom .left-links a,
.footer-bottom .right-links a {
margin-right: 20px;
color: #5f6368;
text-decoration: none;
}
.footer-bottom .right-links a:last-child {
margin-right: 0;
}
.hover-effect:hover {
color: #1a73e8;
text-decoration: underline;
cursor: pointer;
}