Make Google Clone
In this tutorial I will show you how to clone google or make your own google.
Lets start =>
First of all copy this HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google</title>
<script src="https://kit.fontawesome.com/82ae1f0515.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="google.png" type="image/png">
</head>
<body id="body1">
<center id="colorh">
<div class="imag">
<a href="https://www.google.com/" target="_blank"><img src="download-.png" alt="Google"></a>
</div>
<div class="container">
<div class="search">
<form action="https://www.google.com/search" method="get">
<i class="fa-solid myiconh fa-magnifying-glass"></i></div> <input id="containerh" class="input" type="text" name="q" value=""><i class="fa-solid myiconha fa-microphone"></i>
</form>
</div>
<div class="btns" >
<button id="containerh" class="btn1">Google Search</button>
<a href="https://www.google.com/doodles"><button id="containerh" class="btn2">I'm Feeling Lucky</button></a>
</div>
</div>
<div class="btnn">
<button class="btnh" id="dark">Dark</button>
</div>
</center>
<script src="script.js"></script>
</body>
</html>
then copy CSS code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
i{
color: black;
}
.container {
display: flex;
margin: -30px auto;
text-align: center;
justify-content: center;
align-items: center;
}
.imag {
display: block;
margin: 70px auto 0 auto;
justify-content: center;
align-items: center;
text-align: center;
}
.imag img {
background: transparent !important;
}
.myiconh{
display: flex;
position: relative;
left: 30px;
cursor: pointer;
}
.myiconha{
display: flex;
position: relative;
right: 30px;
cursor: pointer;
}
.container .input {
width: 40vw;
height: 5vh;
border-radius: 15px;
border: 1px solid gray;
background: transparent;
outline: none;
padding: 18px 35px;
font-size: 16.7px;
}
.container .input::placeholder {
color: black;
}
.btn {
display: inline;
position: relative;
right: 75px;
margin: 10px auto;
padding: 5px 7px;
border-radius: 5px;
outline: none;
border: 1.6px solid black;
cursor: pointer;
font-size: 16px;
}
.btns {
display: inline-block;
text-align: center;
justify-content: center;
align-items: center;
margin: 40px -28px 0 -28px;
}
.btn1,
.btn2 {
margin-right: 10px;
padding: 7px 10px;
cursor: pointer;
background:transparent;
border: 1px solid #f8f9fa;
border-radius: 5px;
}
.btnh {
border: 2px solid #d4d8db;
border: none;
outline: none;
color: whitesmoke;
border-radius: 50%;
height: 40px;
cursor: pointer;
width: 40px;
}
.btnn {
display: flex;
margin: 156px 0;
position: sticky;
justify-content: flex-end;
top: 0;
}
@media screen and (max-width: 348px) {
.imag img {
width: 60%;
margin-bottom: 20px;
}
}
Then Copy JavaScript Code :
const inputhello = document.querySelectorAll('.colorh');
const body = document.getElementById('body1');
const darkbtn = document.getElementById('dark');
darkbtn.addEventListener('click', () => {
if (body.style.background == "lightgray") {
body.style.background = "white"
darkbtn.innerHTML = "Dark"
darkbtn.style.background = "gray"
darkbtn.style.color = "white"
} else {
body.style.background = "lightgray"
darkbtn.innerHTML = "Light"
darkbtn.style.background = "white"
darkbtn.style.color = "black"
};
if(inputhello.style.color == "black"){
inputhello.style.color = "white"
}else{
inputhello.style.color = "black"
};
});
Then Run Your Code in your browser and enjoy your own Google Chrome.
Download Source-Codes & Other Utility Files Here
awesome
ReplyDelete