Design a Google Chrome Page Template using HTML and CSS

Last Updated : 22 Jan, 2024

Google Chrome Page Template is a replica of Google Chrome Page which can be built with the help of HTML and CSS. This project has fundamental features and design elements, a search option, along with using the FontAwsome Icons, and various CSS styling, which offer you hands-on experience in web design.

Preview

Approach

Create the structure of the web page using different elements of HTML and link the external stylesheet to the HTML document. We have used various font awesome icons, integrated via the CDN link.
The element <nav> consists of navigation links a sign-in button and the semantic element <main> Includes an image, search input section, buttons section, and a customization element.
The Universal Selector removes text decoration for all elements. To style the header use various CSS properties like flex layout and adjusts the appearance of navigation links and sign-in buttons. Style the search input container, including the search bar and microphone icon.
Use Font awesome icons to give the original touch to the template website project and apply CSS styling to make it visually appealing.
Position the Customize Chrome button at the bottom-right corner of the webpage using position: absolute, adjusting the distances with bottom and right properties.

Example: Illustration of the Google Chrome Page Template using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> Google Chrome Template </title> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> 
</head> 
  
<body> 
  
    <!-- Navigation Section -->
    <nav class="site-navigation"> 
        <div class="header-container"> 
            <a href="#" class="nav-link"> 
                Gmail 
            </a> 
            <a href="#" class="nav-link"> 
                Images 
            </a> 
            <a href=""> 
                <i class=" fa fa-solid fa-flask myflask"></i> 
            </a> 
            <button class="sign-in-btn"> 
                Sign in 
            </button> 
        </div> 
    </nav> 
  
    <!-- Main Content Section -->
    <main> 
        <img id="google_image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240120152553/social-(1).png"> 
  
        <!-- Search Input Section -->
        <section class="search-input-section"> 
            <div class="search-input-container"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240122040847/search.png"
                     alt="google-search-btn"
                     class="gsb"> 
                <input type="text" 
                       placeholder="Search Google or type a URL" 
                       class="search-input"> 
            </div> 
  
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20240120153531/google-voice.png"
                 alt="Google Mic" 
                 class="mic-icon"> 
        </section> 
  
        <!-- Buttons Section -->
        <section class="buttons-section"> 
            <button class="google-search-btn"> 
                Google Search 
            </button> 
            <button class="feeling-lucky-btn"> 
                I'm Feeling Lucky 
            </button> 
        </section> 
  
        <div class="customize_size"> 
            <i class="fa fa-solid fa-pen"></i> 
            Customize Chrome 
        </div> 
    </main> 
</body> 
  
</html>

CSS

/* style.css */
* { 
    text-decoration: none; 
} 
  
/* Reset and general styling */
body { 
    margin: 0; 
    padding: 0; 
    font-family: 'Arial', sans-serif; 
    background-color: #fff; 
} 
  
.myflask { 
    margin-left: 2px; 
} 
  
/* Navigation styling */
.site-navigation { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 100%; 
    padding: 10px 10px; 
    justify-content: space-between; 
    background-color: transparent; 
    position: fixed; 
    font-size: 15px; 
} 
  
#google_image { 
    height: 250px; 
} 
  
.header-container { 
    width: 90vw; 
    display: flex; 
    justify-content: flex-end; 
    padding: 10px 10px; 
    align-items: center; 
    gap: 10px; 
} 
  
.nav-link:hover { 
    text-decoration: underline; 
} 
  
.sign-in-btn { 
    padding: 10px 25px; 
    margin-left: 10px; 
    font-size: 15px; 
    background-color: rgb(67, 132, 244); 
    color: white; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
} 
  
.sign-in-btn:hover { 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
    background-color: rgb(35, 113, 249); 
    text-decoration: none; 
} 
  
/* Main section styling */
main { 
    padding: 10px; 
    height: 80vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    background-position: center; 
    background-repeat: no-repeat; 
    color: #fff; 
} 
  
/* Search Input Section styling */
.search-input-section { 
    border: 1px solid rgb(200, 200, 200); 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
    align-items: center; 
    width: 40vw; 
    background-color: white; 
    margin-top: -20px; 
    margin-bottom: 30px; 
    border-radius: 30px; 
    padding: 5px 10px; 
    height: 37px; 
    box-shadow: 0 4px 3px rgba(197, 197, 197, 0.3); 
} 
  
.mic-icon { 
    height: 30px; 
} 
  
.search-input { 
    border: none; 
    font-size: 20px; 
    width: 100%; 
} 
  
.search-input:focus { 
    outline: none; 
} 
  
.search-input-container { 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
} 
  
.search-input-container input { 
    margin-left: 10px; 
} 
  
/* Buttons Section styling */
.buttons-section { 
    display: flex; 
    flex-direction: row; 
    gap: 10px; 
} 
  
.google-search-btn, 
.feeling-lucky-btn { 
    font-size: 1rem; 
    color: #5c5c5c; 
    font-weight: 100; 
    padding: 10px 20px; 
    background-color: white; 
    border: none; 
} 
  
.google-search-btn:hover, 
.feeling-lucky-btn:hover { 
    border: 1px solid rgb(214, 214, 214); 
    box-shadow: 0 2px 2px rgba(162, 162, 162, 0.3); 
    border-radius: 5px; 
} 
  
.customize_size { 
    position: absolute; 
    top: 93vh; 
    left: 87vw; 
    background-color: rgb(191, 212, 250); 
    padding: 10px; 
    border-radius: 30px; 
    color: black; 
    font-size: 13px; 
} 
  
i { 
    margin-right: 2px; 
} 
  
.gsb { 
    height: 20px; 
}