Hello 👋, I am here again with a new amazing article on the Making of Google Search Page Clone
Can you guess, is this Real or Clone page? (Comment down🙂)
So, let's gets started 🥳
- In index.html
<div class="container">
<center>
<div class="content">
<img src="assets/logo.png" alt="Google Logo" class="img-fluid google-logo">
<div class="search-bar shadow-sm mt-4">
<i class="fas fa-search icon"></i>
<input class="input" type="text"></div>
</div>
<div class="buttons"><br>
<button class="gBtn">Google Search</button>
<button class="gBtn">I'm Feeling Luck</button>
</div>
<div class="languages mt-4">
<span class="langText">Google offered in: </span>
<ul>
<li class="languagesInList"><a href="/">English</a></li>
<li class="languagesInList"><a href="/">Spanish</a></li>
<li class="languagesInList"><a href="/">French</a></li>
<li class="languagesInList"><a href="/">عربي</a></li>
</ul>
</div>
</div>
</center>
</div>
This was the skeleton structure of the page; It's time to style it 🏳️🌈
- In style.css
body{
font-family: arial,sans-serif;
}
.content{
margin-top: 150px;
}
[contenteditable] {
outline: 0px solid transparent;
}
.google-logo{
width: 270px;
}
.search-bar{
border: 1px solid #e3e3e3;
border-radius: 30px;
display: flex;
justify-content: space-between;
height: 50px;
width: 900px;
}
.icon{
position: relative;
left: 15px;
top: 15px;
color: #9aa0a6;
font-weight: 100;
font-size: 20px;
}
.input{
background-color: transparent;
border: none;
margin-top: 8px;
margin-left: 25px;
padding: 0;
color: rgba(0,0,0,.87);
word-wrap: break-word;
outline: none;
display: flex;
flex: 100%;
height: 34px;
font-size: 16px;
width: 80%;
}
/* .... */
/* Whole code at https://github.com/snowbit-coderboi/Google-Search-Page-Clone */
- For JavaScript code - Visit the GitHub Repository
And this is it; You have just made clone of Google Search Page 🎉
Check out demo: https://snowbit-coderboi.github.io/Google-Search-Page-Clone
This page might get updated when you visit the project, so make sure to check out GitHub Repository and star it to save
GitHub Repository: snowbit-coderboi/Google-Search-Page-Clone
This was it; Once again congrats for making Google Search Page Clone
Top comments (0)