DEV Community

vishwa v
vishwa v

Posted on

Google (project-4)

Introduction
I wanted to recreate the familiar Google homepage using HTML and CSS. This project helped me practice layout design, flexbox, and styling while making something instantly recognizable.

Implementation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/f5e58ab8a1.js" crossorigin="anonymous"></script>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
         header{
            /* border:1px solid; */
            display: flex;
            justify-content: space-between;
            padding:  15px;

         }
         .left {
            /* border: 1px solid; */
            display: flex;
            justify-content: center;
            align-items: center;
            gap:15px;
         }
         .right{
            /* border:1px solid; */
            display: flex;
            justify-content: center;
            align-items: center;
            gap:15px;
         }
         .right img{
            width:30px;
            border-radius: 50px;
         }
         a{
            text-decoration: none;
            color:black;

         }
         a:hover{
            text-decoration: underline;
         }
        .log{
            display: flex;
            justify-content: center;
            align-items: center;
            gap:15px;
            border:1px solid;
            width:fit-content;
            margin: auto;
            border-radius: 25px;

        }
        input{
            font-size: 40px;
            border-radius: 25px;
            width: 500px;
            border:none;
            outline: none;
        }
        main{
            text-align: center; 
        }
        .href{
            margin-top: 70px;
        }
        .href a{
            color:blue
        }


    </style>
</head>
<body>
    <header>
        <div class="left">
            <a href="">About</a>
            <a href="">Store</a>
        </div>
        <div class="right">
            <a href="">Gmail</a>
            <a href="">Images</a>
            <i class="fa-solid fa-bars"></i>
            <img src="https://lh3.googleusercontent.com/rd-ogw/AF2bZyj93g37Pnrqm5Ph6BUvduyQUCqExXB8SAAzEveU_SmiQIiZsfWpln4wivwFPa6XCfKMuHPlXPoGM7tkGBrfSFl-s948ekV6Wzy037FW_2ignP_bD8IkEv6Kk8G290Gj2dCIq3Np2XWQAu0HR7ghF0umvEJaWrJjMcaz14LPH7Wa66Fbm9YSC1AjO_UabT56Qj58mV8kSsaXR1NlpA4Cp-clQL7fL3GDHCUzQrFFd9jTwTM0oxftXbwgle4-SqQpJjOyTM9BDDuMPseHJMxY_zmVJER7Np9gmU5pv2TfOqPLwAWc1IS3EN78W7iSTyNGEXFod-o1BxTM7hmFVu5ae1ElR5x34Sr0khbGP5JMT7HFBtTaMUx8HRW3Y8rvsJr1cUJJnDIgo_m1cMAm6yzgLYHaZiaJA0mqxDkHfyedR81-s3xT7MsYBN1beKuSTM8CZVVUzInB76w3W3jgTAOSMvkiI61hBbNDPwaYwBloETeTRrqBeZIy5p9aUv46MsyJSKT8rarPWQd24G_0MncaOlpyOXO3tbT5RjruvSLhp_scAzpPFssgWooIvITltYoYPzqbbA5xp_Ovw3RW3J0Le7wz8dtbKG0FEgNuDTECWqlGeUwK3bBZED6ji7ggnEwswnNgPGAyn5wrqp2Y0oxHiY_iAL46dK89fJAD0bUrZolYRhWUBUMCIYcLVZD-jIXMziXIvklWW7NZnaZ0XH2W2Fedfdcanvf32DtU4Fp0ptJ-ER8S0VWwaVHOsCTlmIK41vLaBj_-jmh3bzOVX6iOwpo-DpkQdkqSE3w82KUFjU3OH9JP6861Rf0sqADg1iSpCRC7icGvFmbd5A_PqocCOmm0cnGnkmoAYudv9G4HOnbztjBXan5s_Cqd-vrOeto6mydoGskyPByqQxlavrbRUPp4uafI_hhXuDqBjyHpaRsO3P8CIfXeK7T9yE2G0EU2dpz_8V00dqQvLhuYmAd1FUwH7j_SjgoOks-0KjgFwa5kdGx3kPyJNwzs3LPdf_sHtagUtdqWfojpYGa9B-bCORgI5mg6sT6PEvrBQF1GLg=s64-c" alt="vv">
        </div>
    </header>
    <main>
        <img src="https://www.google.com/logos/doodles/2026/world-cup-2026-the-art-of-the-save-619-6753651837111121-law.gif" alt="gg">
        <div class="log">
            <i class="fa-solid fa-plus"></i>
            <input type="text">
            <i class="fa-solid fa-microphone"></i>
            <i class="fa-solid fa-camera"></i>
            <div class="Ai">
            <i class="fa-brands fa-searchengin"></i>
            <span>Ai Mode</span>
            </div>
        </div>
        <p class="href">Google offered in: <a href="">हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം ਪੰਜਾਬੀ</a></p>
    </main>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Header Section
Describe how you built the navigation bar.

Used <header> with two divisions: .left and .right.

Applied flexbox for spacing and alignment.

Added links like About, Store, Gmail, Images.

Included a profile image and a menu icon using Font Awesome.

Main Section
Highlight the central part of the page.

Added the Google doodle image.

Created a search bar (.log) with icons for plus, microphone, camera, and AI mode.

Styled the input box with rounded corners and large font size.

Language Links
Explain the footer-like section.

Used a<p> with class .href.

Added multiple language options as clickable links.

Styled them in blue to resemble Google’s design.

CSS Styling
Talk about the techniques you used.

Universal selector * for margin/padding reset.

Flexbox for layout.

Hover effects on links.

Rounded borders for input and profile image.

Output

Top comments (0)