Creating Google Homepage Clone

For the last few days, I am learning concepts of web development, and now it's time to apply what I have learned, So I decided to make a clone of the Google Homepage.

Step 1. Identifying elements: A web page is made by a combination of different HTML elements. So the first step in building a clone is to identify these elements. From the picture, it is clear that the page is divided into 2 parts top-nav-bar says header, and the main search field say main-body

First start with the header:

The header is made from 2 anchor tags referencing Gmail and Google Images and the other two elements are buttons for 'Apps' and 'Sign in'. So first put these elements in the body inside the header div and give each element an id or class.

<body>
    <div id="header">
        <a class="top" href="https://mail.google.com/mail/&ogbl" >Gmail</a>
        <a class="top" href="https://www.google.co.in/imghp?hl=en&ogbl">Images</a>
        <button id="app" >:::</button>
        <button id="sign-in-btn" >Sign in</button>
    </div>     
</body>

Now it's time for styling. First, let's shift elements towards the right end and give some suitable space around them.

#header{
     display: flex;
     justify-content: end;
     padding: 5px;
   }

For 'Gmail' and 'Images' tags, it is needed to change the color and family of the font as well as to remove the underline below the text and also add a suitable margin around it.

.top{
     margin: 16px 10px 5px 10px;
     color: black;
     text-decoration: none;
     font-family: sans-serif;
   }

Styling properties for the app button are,

   #app{
    margin: 10px;
    padding: 8px 10px 8px 10px;
    border-radius: 50%;
    border: none;
    font-weight: bolder;
   }
   button{
    margin: 10px;
    padding: 8px 17px 8px 17px;
    border: none;
    background-color: #fafafa;
   }

For 'Sign in' button is :

   #sign-in-btn{
     background-color: rgba(1, 98, 255, 0.8);
     color: #ffffff;
     border: none;
     border-radius: 2px;

   }

Now it's time for main-body. Main-body has one image i.e. Google logo, one input field for the user to enter a text, and 2 buttons for search.

    <div id="main-body">
        <img id="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/220px-Google_2015_logo.svg.png">
        <input id="search-bar" type="text" placeholder="Search Google or Type a URL"> 
        <div id="search-btn">
            <button>Google Search</button>
            <button>I'm Feeling Luck</button>    
        </div>
      </div>

Main-body Styling:

For the logo and search bar we need to convert inline elements into block elements so that they can stack upon each other and adjust it to the center.

#logo, #search-bar{
  display: block;
  width: 350px;
  margin: 20px auto 10px auto;               
}

Now style the search-bar according to the image.

#search-bar{
  width: 400px;
  padding: 9px 0px 9px 20px;
  border-radius:20px ;
  border: none;
  box-shadow: 0px 0px 2px ;
}

For search buttons:

#search-btn{
  text-align: center;
}

One thing to notice is that there is a shadow effect on buttons whenever the cursor is hover over them.

 button:hover{
  box-shadow:  0px 0px 2px ;
 }

Google homepage is now almost ready only one element remaining which is the functioning of the app button. This will be covered in the next blog..

Repository for the project. samyakvaidya10.github.io/Google-Homepage-Cl..

Samyak Vaidya

Samyak Vaidya

Creating Google Homepage Clone