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

Can you guess, is this Real or Clone page? (Comment down🙂)

So, let's gets started 🥳

  • In index.html
<div class="container">
            <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 class="buttons"><br>
                    <button class="gBtn">Google Search</button>
                    <button class="gBtn">I'm Feeling Luck</button>
                <div class="languages mt-4">
                    <span class="langText">Google offered in: </span>
                        <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>

Enter fullscreen mode Exit fullscreen mode

This was the skeleton structure of the page; It's time to style it 🏳️‍🌈

  • In style.css
    font-family: arial,sans-serif;
    margin-top: 150px;

[contenteditable] {
    outline: 0px solid transparent;
    width: 270px;
    border: 1px solid #e3e3e3;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
    height: 50px;
    width: 900px;
    position: relative;
    left: 15px;
    top: 15px;
    color: #9aa0a6;
    font-weight: 100;
    font-size: 20px;
    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 */
Enter fullscreen mode Exit fullscreen mode

And this is it; You have just made clone of Google Search Page 🎉

Check out demo:

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)