Build a Google Search Engine Results Layout Landing Page in HTML5 & CSS3

Welcome folks today in this blog post we will be building a google search engine results layout landing page in html5 and css3. All the full source code is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the below code

 

 

index.html

 

 

First of all we will breakdown the whole layout of landing page of google search engine results. First of all we will design the header section of this landing page which includes the google company logo on the left side and also the input field side by side where the search icon will also be there. Now we will write the html code for this

 

 

 

 

As you can see we have given some custom css classes that we will define inside the style.css file which we will create in the next step. Basically we have the parent div called wrapper and inside we have header section which includes two sections one for logo and second for the input field where the user will search for the favourite topic on google search engine. Now we will write the css code

 

style.css

 

 

 

 

Basically first of all we need to write some base css styles which is removing margin and padding of all elements and setting it to 0 and also changing font-family of all elements to arial and also the text color.

 

 

Styling the Parent div

 

 

 

 

Now as you can see we are targeting the parent div wrapper and changing the display to flex and changing min-height to 100%.

 

 

Styling the Input Field and Form

 

 

Now we will style the input field which is there inside the form section of the main content section. The css styles are as follows

 

 

 

 

 

As you can see we have a material like input field which has some box shadow attached to it and also on the right hand side we have the search icon placed in a perfect position.

 

 

Styling the Google Company Logo

 

 

Now we will be styling the company logo inside this header section in the left hand side. The css styles are as follows

 

 

 

 

 

 

Styling the Tabs UI Section

 

 

Now we will write the tabs section html code which are as follows.

 

 

 

As you can see inside this html code we have two tabs namely All and Images. These filters are really helpful when differentiating the results based on text and images

 

 

Now we will write the css code for styling these tabs

 

 

 

 

 

 

Styling Search Results Pages and Hyperlinks

 

 

Now we will add the html code for storing all the search results and hyperlinks. First of all inside this div we have the section which represents the total number of results which are returned after searching it will get displayed

 

 

 

 

Now we need to style this 24 results value in css as shown below

 

 

 

 

 

 

Now we add the different serp’s html where each page will contain the hyperlink and title and description as well. Each serp will have a common class called resultContainer. The html code is as shown below

 

 

 

 

Now we will add the custom css styles for styling these serp’s in google search engine

 

 

 

 

 

 

 

FULL SOURCE CODE

 

 

Now wrapping it all just copy all the html and css code for this awesome layout

 

 

 

 

style.css