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!