DEV Community

Cover image for Making Functional Google Search Page Clone in HTML and CSS
Dhairya Shah
Dhairya Shah

Posted on

Making Functional Google Search Page Clone in HTML and CSS

Hello πŸ‘‹, I am here again with a new amazing article on the Making of Google Search Page Clone

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>
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

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)