You are currently viewing Google Search Bar Using HTML And CSS (Source Code)

Google Search Bar Using HTML And CSS (Source Code)

Telegram Group Join Now

Google Search Bar Using HTML And CSS

 
Google Search Bar Using HTML And CSS
Google Search Bar Using HTML And CSS

 

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Google Search Bar Using Html and Css. We Design the Same Google Search bar and Google logo and Some links on pages like the google search bar clone page.

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Google Search Bar Clone.

Preview Of Google Search Bar Html and Css

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

 

Code by mutedblues
Project Download Link Available Below
Language used HTML and CSS
External link / Dependencies No
Responsive No
Google Search Bar Table

HTML Code For Google Search Bar

<!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 the 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.

Restaurant Website Using HTML and CSS

Html Output

 
 
 
Google Search Bar Using HTML And CSS
Google Search Bar Using HTML And CSS
 
Google Search Bar Using HTML And CSS
Google Search Bar Using HTML And CSS
 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS Code For Google Search Bar

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;
}

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

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

Final Output Google Search Bar Using HTML And CSS

 
Google Search Bar Using HTML And CSS
Google Search Bar Using HTML And CSS

 

Gym Website Using HTML and CSS With Source Code

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

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.

Thank you And Keep Learning!!!

Written by – Code With Random/Anki
code by – mutedblues

 

Which code editor do you use for Google Search Bar coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

is this project responsive or not?

No! this is Not a responsive project

Do you use any external links to create this project?

No!

Telegram Group Join Now

Leave a Reply