Google Search Bar Clone | Search Bar Html Css – Codewithrandom







Google Search Bar Clone | Search Bar Html Css – Codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Google Search Bar Clone. We use HTML & CSS  for Google Search Bar Clone. Hope you enjoy our blog so let’s start with a basic HTML structure for the Google Search Bar Clone. 

HTML code

 <!DOCTYPE html>  
<html>
<center>
<header>
<ul>
<li><a class="links" href="#user"><button class="signbutton" type="button">Sign in</button></a></li>
<li><a href="#grid"><img class="grid" src="https://cdn3.iconfinder.com/data/icons/navigation-and-settings/24/Material_icons-01-11-512.png" title="Google apps"></a></li>
<li><a href="#images">Images</a></li>
<li><a href="#gmail">Gmail</a></li>
</ul>
</header>
<div class="logo">
<img alt="Google" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</div>
<div class="bar">
<input class="searchbar" type="text" title="Search">
<a href="#"> <img class="voice" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/716px-Google_mic.svg.png" title="Search by Voice"></a>
</div>
<div class="buttons">
<button class="button" type="button">Google Search</button>
<button class="button" type="button">I'm Feeling Lucky</button>
</div>
</body>

There is all HTML code for the Google Search Bar Clone. Now, you can see output without CSS, then we write CSS for the Google Search Bar Clone.

Output

Google Search Bar Clone | Search Bar Html Css - Codewithrandom

Google Search Bar Clone | Search Bar Html Css - Codewithrandom

CSS code

 ul {  
list-style-type: none;
overflow: hidden;
}
li {
float: right;
}
li a {
color: #000;
display: block;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size:14px;
}
li a:hover {
text-decoration: underline;
}
.grid{
height:23px;
position:relative;
bottom:4px;
}
.signbutton{
background-color: #4885ed;
color: #fff;
border:none;
border-radius:3px;
padding:7px 10px;
position:relative;
bottom:7px;
font-weight:bold;
}
.logo{
margin-top:200px;
margin-bottom:20px;
}
.bar{
margin:0 auto;
width:575px;
border-radius:30px;
border:1px solid #dcdcdc;
}
.bar:hover{
box-shadow: 1px 1px 8px 1px #dcdcdc;
}
.bar:focus-within{
box-shadow: 1px 1px 8px 1px #dcdcdc;
outline:none;
}
.searchbar{
height:45px;
border:none;
width:500px;
font-size:16px;
outline: none;
}
.voice{
height:20px;
position:relative;
top:5px;
left:10px;
}
.buttons{
margin-top:30px;
}
.button{
background-color: #f5f5f5;
border:none;
color:#707070;
font-size:15px;
padding: 10px 20px;
margin:5px;
border-radius:4px;
outline:none;
}
.button:hover{
border: 1px solid #c8c8c8;
padding: 9px 19px;
color:#808080;
}
.button:focus{
border:1px solid #4885ed;
padding: 9px 19px;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Google Search Bar Clone | Search Bar Html Css - Codewithrandom

We have completed our CSS section,  Here is our updated output with CSSHope you like the Google Search Bar Clone, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a Google Search Bar Clone using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – mutedblues

Check out more…..



Share on:

Leave a Comment