Google Clone html css javascript | Google Clone code – codewithrandom

Google Clone html css javascript | Google Clone code – codewithrandom

 Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a Google Clone. We use HTML, Css, and javascript for this Google Clone. Hope you enjoy our blog so let’s start with a basic HTML structure for a Google Clone.

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 Clone. Now, you can see output without CSS, then we write css & javascript for Google Clone.

output

Google Clone html css javascript | Google Clone code - codewithrandom

CSS Code

Add this link as CDN

 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
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 section,  Here is our updated output CSS.

output

Google Clone html css javascript | Google Clone code - codewithrandom

Javascript code 

Add this link as CDN

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
 $(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();
}
});
});

Final output

Google Clone html css javascript | Google Clone code - codewithrandom


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Google Clone. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Google Clone javascript using simple HTML & CSS, and javascript. 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 – Francesco Agnoletto

Share on:

0 thoughts on “Google Clone html css javascript | Google Clone code – codewithrandom”

Leave a Comment