ADVERTISEMENT

Google Homepage Clone HTML and CSS Code

Telegram Group Join Now

ADVERTISEMENT

Google Homepage Clone using HTML and CSS

Google Homepage Clone using HTML,CSS and JavaScript
Google Homepage Clone using HTML,CSS and JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to the Codewithrandom blog. In this blog, We learn how to Create a Google HomePage Clone. We use Html and Css Code for google homepage and use JavaScript for this Google Search Functionality in google homepage.

I hope you enjoy our blog so let’s start with a basic HTML structure for a Google HomePage.

ADVERTISEMENT

Google Homepage Html Code

<body>
<ul class="nav nav-pills">
<li><a target='_blank' href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.co.uk/%3Fgws_rd%3Dssl" class="colorfix"><button class="btn" role="button">Sign in</button></a></li>
<li>
<a target='_blank' title="Google apps" class="firstsbuttons" href="#"><img class="quad" src="#" height="22" width="22"></a>
</li>
<li><a target='_blank' class="firstsbuttons" href="#">Images</a></li>
<li><a target='_blank' class="firstsbuttons" href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>
</ul>
<div class="page">
<img class="logo" src="https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<br><input id="searchme" class="search" title="Search" type="text"><br>
<div class="Bcontainer">
<div class="button left">Google Search</div>
<div class="button right">I'm Feeling Lucky</div>
</div>
</div>
<footer class="nav nav-tabs">
<ul class="bottomone rightone">
<li><a target="blank" href="#">Settings</a></li>
<li><a target="blank" href="#">Terms</a></li>
<li><a target="blank" href="#">Privacy</a></li>
</ul>
<ul class="leftone bottomone">
<li><a target="blank" href="#">About</a></li>
<li><a target="blank" href="#">Business</a></li>
<li><a target="blank" href="#">Advertising</a></li>
</ul>
</footer>
</body>

There is all Html Code for the Google HomePage Clone. Now, you can see output without Css and JavaScript. Then we write Css for styling the Google homepage and use JavaScript for search bar functionality in Google HomePage Clone.

ADVERTISEMENT

5+ HTML CSS Projects With Source Code

Only Html Code Output

Google Homepage Clone using HTML,CSS and JavaScript
Google Homepage Clone using HTML,CSS and JavaScript

Google Homepage Html Css Code

Add This Link As Cdn In Your Html File>> Use Link Tag In Html And Link This Cdn Otherwise Your Project Not Run.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

Now Add this Code In Your Css File

ADVERTISEMENT

body {
font-size: 13px;
}
.page {
padding-top: 20vh;
text-align: center;
padding-bottom: 20px;
margin-bottom: 25vh;
}
.logo {
padding-bottom: 15px;
}
.search {
width: 45vw;
padding: 8px;
border: 1px solid #d9d9d9;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat;
background-position: 98.5%;
background-size: 1.5em;
}
.search:hover {
border: 1px solid #b9b9b9;
border-top-color: #a0a0a0;
}
.search:focus {
outline: none;
border: 1px solid #4d90fe;
}
.Bcontainer {
text-align: center;
margin: 0 auto;
width: 270px;
padding-top: 20px;
}
.button {
display: inline-block;
background: #f2f2f2;
padding: 8px 12px;
font-weight: 700;
font-size: 13px;
border: 1px solid #f2f2f2;
border-radius: 2px;
color: #757575;
font-family: arial, sans-serif;
}
.button:hover {
border: 1px solid #c6c6c6;
color: #222;
cursor: default;
}
.left {
float: left;
}
.nav > li > a {
padding: 0;
color: #000;
opacity: .75;
}
.nav > li > .colorfix {
opacity: 1;
}
.nav>li>a:hover,
.nav>li>a:visited,
.nav>li>a:focus {
background-color: white;
text-decoration: underline;
}
.nav-pills {
margin: 15px 5px;
}
.nav li {
float: right;
margin-right: 15px;
}
.firstsbuttons {
margin-top: 4.5px;
}
.btn,
.btn:active {
color: white;
font-weight: 700;
background: -webkit-linear-gradient(top, #4387fd, #4683ea);
padding: 4px 10.5px;
border: 1px solid #4285f4;
border-radius: 2px;
font-size: 13px;
}
.btn.focus,
.btn:focus,
.btn:hover,
.btn:visited,
.btn:active {
color: white;
cursor: default;
}
.nav>li>a>img {
opacity: .75;
}
.nav>li>a>img:hover {
opacity: 1;
cursor: default;
}
footer {
background: #f2f2f2;
border-top: 1px solid #e4e4e4;
max-height: 40px;
width: 100%;
padding: 15px 20px 5px 10px;
margin-bottom: 0;
clear: both;
position:absolute;
bottom:0;
}
.bottomone {
display: inline-block;
padding: 0 10px;
margin-bottom: 0;
}
.bottomone li a {
color: #666;
letter-spacing: 0.2px;
}
.bottomone li {
margin-right: 27px;
list-style-type: none;
}
.leftone {
float: left;
}
.rightone {
float: right;
padding-right: 0;
}

Now we have completed our Css Code For the Google HomePage Clone section. Here is our updated output Css.

50+ Html ,Css & Javascript Projects With Source Code

Html + Css Output

ADVERTISEMENT

Google Homepage Clone using HTML,CSS and JavaScript
Google Homepage Clone using HTML,CSS and JavaScript

JavaScript Code For Google HomePage Clone

Add This Link As Cdn In Your Html File>> Use Script Tag In Html And Link This Cdn Otherwise Your Project Not Run.
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

Now Add this Code In Your JavaScript File

ADVERTISEMENT

$(document).ready(function() {
var gsearch = function() {
var url = 'https://www.google.com/search?q=' + document.getElementById('searchme').value;
window.open(url, 'google');
};
var glucky = function() {
var url = 'https://www.google.com/search?q=' + document.getElementById('searchme').value + '&btnI';
window.open(url, 'google');
};
$(".left").click(gsearch);
$(".right").click(glucky);
$("#searchme").keypress(function(e) {
if (e.which == 13) {
gsearch();
}
});
});

Ecommerce Website Using Html Css And Javascript Source Code

Final Output Of Google Clone Using Html ,Css And JavaScript

 

Google Homepage Clone using HTML,CSS and JavaScript
Google Homepage Clone using HTML,CSS and JavaScript

 

 

Now we have completed our Google HomePage Clone.  Here is our updated output with Html, Css, and JavaScript. I hope you like the Google HomePage Clone Using Html and Css. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

ADVERTISEMENT

Thank you!

ADVERTISEMENT

In this post, we learn how to create a Google HomePage Clone Using Html, Css, And JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

Code by – Francesco Agnoletto

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Google Homepage Clone HTML and CSS Code”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT