Replicating Google home page using HTML CSS

By /
Views: 17

In this tutorial ,we will learn how to create a Google home page with the help of HTML and CSS.

Setting up the HTML structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"/>
</head>
<body>
    <nav>
        <a href="" class="ntext">Gmail</a>
        <a href="" class="ntext">Images</a>
        <span class="material-symbols-outlined app">apps</span>
        <img src="image/avatar.jpg" alt="" class="avatar">
    </nav>
    <div class="google">
        <img src="image/google-logo.jpg" alt="" class="image">
        <div class="search">
            <span class="material-symbols-outlined searchicon">search</span>
            <input type="text" name="" placeholder="Search Google or type a URL">
            <img src="image/mike.jpg" alt="" class="mic">
        </div>
        <div class="button">
            <input type="button" value="Google Search">
            <input type="button" value="I'm feeling Lucky">
        </div>

    </div>
</body>
</html>

Explanation the HTML code

  • <!DOCTYPE html>:Specifies that this is an HTML file .
  • <html lang=”en”>:Specifies that the language of the file that is English.
  • <head>:contains meta information and links to external resources.
  • <meta charset=”UTF-8″>:Sets the character encoding to UTF-8.
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>:Makes the pages responsive to different screen sizes.
  • <title>Google</title>:Sets the title of the page as ‘Google’.
  • <link rel=”stylesheet” href=”style.css”>:links the  external CSS file that is ‘style.css’.
  • <link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined”/>:This line includes a link to a Google Fonts Stylesheet, which includes the “Material Symbol Outlined” icon set.
  • <body> :Body section that contains the content of web page that is displayed.
  • <nav> :This section creates a navigation bar at the top of the page.
  • <a href=”” class=”ntext”>Gmail</a>:A link(anchor tag) labeled “Gmail”.The href=” ” attribute is empty,so it doesn’t link anywhere for now. The class=”ntext” is for the styling the  text link.
  • <a href=”” class=”ntext”>Images</a>:Another link labeled “images” ,similar to the first one.
  • <span class=”material-symbols-outlined app”>apps</span>: This displays and “apps” icon using the Materials symbols font.  The class =”app” is for additional styling.
  • <img src=”image/avatar.jpg” alt=”” class=”avatar”> : An image representing the user’s avatar. The src=” image / avatar .JPG” specifies the image file’s location.The alt=”” attribute is empty ,meaning no alternative text will be displayed if the image can’t be loaded .The class=”avatar” is for styling.
  • <div class=”google”>:This container holds the Google logo, search bar and buttons.
  • <img src=”image/google-logo.jpg” alt=”” class=”image”>:
  • <div class=”search”> :This container holds the search bar.
  • <span class=”material-symbols-outlined searchicon”>search</span>:Displays a search icon inside the search bar using the material symbol font. The ‘class=”searchicon”‘ is for additional styling.
  • <input type=”text” name=”” placeholder=”Search Google or type a URL”>:This creates a text input field where users can type their search query or url.
  • <img src=”image/mike.jpg” alt=”” class=”mic”>:This displays a microphone image, which likely represents voice search functionality .The class=”mic” is for styling.
  • <div class=”button”>:This section contains the search buttons.
  • <input type=”button” value=”Google Search”>:A button labeled “Google search”.
  • <input type=”button” value=”I’m feeling Lucky”>:A button labeled “I’m feeling Lucky”.

Output:

Adding CSS styles

body{
margin: 0;
padding: 0;
background:#fff ;
}
.google{
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-100%);
}
.image{
    position: relative;
    width:380px;
    top: 30px;
}
.search{
    width: 500px;
    height: 45px;
    position: absolute;
     transform: translate(-23%,50%); 
}
.search input{
    position: absolute;
    width: 100%;
    height:100%;
    border:1px solid #0000008f;
    left:0;
    border-radius: 40px;
    padding: 0 40px 0 45px;
    outline: none;
    box-shadow: 0 2px 10px -5px;
    font-size: 16px; 
}
.searchicon{
    position: absolute;
    z-index: 1;
    font-size: 21px;
    top:13px;
    left:18px;
    color:#777;

}
.mic{
    position: absolute;
    width: 25px;
    right: -65px;
    top: 13px;
}
.button{
    position: relative;
    top: 100px;
    text-align: center;
}
.button input{
    background: #d9d9d9;
    border:none;
    padding:8px 20px ;
    margin:10px;
    color:#000000; 
    border-radius: 5px;
    outline:none;

}
.button input:hover{
    cursor: pointer;
    background: #ede8e8;
    color: #000;
    box-shadow: 0 0 2px #000;
}
nav{
    float: right;
    font-family: Arial;
    font-size: 15px;
}
.avatar{
    width: 35px;
    border-radius: 50%;
    margin: 10px 20px 0 0;
}
.ntext{
    color: #444;
    text-decoration: none;
    top: -12px;
    position: relative;
    margin: 5px;
}
.ntext:hover{
    text-decoration: underline;
}
.app{
    position: relative;
    margin:10px;
    top:-6px;
    color:#555;
    cursor:pointer;
}

Explanation

  • ‘body’
    • Sets the margin and padding to zero to remove extra space around the page and applies a white background color.
  • ‘.google’
    • Centers the Google section both horizontally and vertically on the page. Uses ‘transform: translate(-50%, -100%);’ to fine-tune the position, moving it slightly upwards.
  • ‘.image’
    • Sets the Google logo image to 380 pixels wide and positions it slightly below its container using ‘top: 30px;.’
  • ‘.search’
    • Sizes the search bar to 500 pixels wide and 45 pixels tall. Positions it within the ‘.google’ section and adjusts its position slightly left and down with ‘transform: translate(-23%, -50%);’.
  • ‘.search input’
    • Applies a border with rounded corners to the input field, adds padding for text positioning, and includes a subtle shadow for emphasis. Sets the font size to 16 pixels.
  • ‘.searchicon’
    • Place the search icon inside the input field on the left side. Style it with a smaller size and gray color to blend subtly.
  • ‘.mic’
    • Position the mic icon (for voice search) on the right side of the search bar.
  • ‘.button’
    • Place the buttons below the search bar and center them horizontally.
  • ‘.button input’
    • Buttons have a light gray background, round corners and a slight shadow.The change color slightly when hovered over to indicate interactivity.
  • ‘nav’
    • Align the Gmail, images, and app icons to the right of the page.
  • ‘.avatar’
    • Display the user’s avatar image as a small circle (35px wide) with rounded corners, positioned on the right side.
  • ‘.ntext’
    • The links have a dark gray color and  no underline default. On hover ,they get underlined to that they are clickable.
  • ‘.app’
    • Align the app icon with the text links and make it change appearance slightly when hovered over.

Output

 

Conclusion

The HTML and CSS code collaboratively create a simplified Google homepage replica. The HTML structures the page with navigation links, a Google logo, a search bar, and buttons, while the CSS styles these elements for a clean, centered, and visually familiar layout. Together, they provide an intuitive user interface that mimics the look and functionality of the actual Google homepage.

Have a happy and great coding!

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top