You are currently viewing Google Homepage Clone using HTML,CSS and JavaScript

Google Homepage Clone using HTML,CSS and JavaScript

Google Homepage Clone using HTML,CSS and JavaScript

Google Homepage Clone using HTML,CSS and JavaScript
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

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

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

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

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

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

This Post Has 0 Comments

  1. Unknown

    what the mean of add this link as cdn? im indonesian

Leave a Reply