Google Homepage Clone using HTML,CSS and JavaScript

Welcome to Code With Random blog. In this blog, we learn how to Create a Google HomePage Clone. We use Html, Css, and JavaScript for this Google HomePage Clone.

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

HTML Code For Google HomePage Clone

Table of Contents

<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 and JavaScript for Google HomePage Clone.

5+ HTML CSS Projects With Source Code

Only Html Code Output

CSS Code For Google HomePage Clone

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

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

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

$(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

<br /> See the Pen <a href="https://codepen.io/Kornil/pen/VaPbog" rel="nofollow noopener" target="_blank"><br /> Google Clone</a> by Francesco Agnoletto (<a href="https://codepen.io/Kornil" rel="nofollow noopener" target="_blank">@Kornil</a>)<br /> on <a href="https://codepen.io" rel="nofollow noopener" target="_blank">CodePen</a>.<br />

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.

Portfolio Website using HTML and CSS (Source Code)

Thank you!

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.

Written by – Code With Random/Anki

Code by – Francesco Agnoletto