Java Full Stack Training Google Page Cloning

#css #html

In Google Cloning i can learn about deep concept of <div> tag and display and its function

New tool i learned in this section Font awesome to import the icons in web page

Ex:

<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-microphone"></i>
<i class="fa-solid fa-camera-rotate"></i>
<i class="fa-brands fa-searchengin"></i>

Output:

Code:

<!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/28de7e0ce8.js" crossorigin="anonymous"></script>
    <style>
        .header {
            display: flex;
            justify-content: space-between;
        }

        .header ul {
            display: flex;
            list-style-type: none;
            gap: 15px;
            justify-content: center;
            align-items: center;
            /* color: black; */
            font-size: 13px;

        }

        .header a:hover{
            text-decoration: underline;
        }

        .header a {
            text-decoration: none;
            color: black;
        }

        .profile {
            border-radius: 20px;
        }

        .main{
            display: flex;
            justify-content: center;
            align-content: center;
        }





        .footer {
            display: flex;
            justify-content: space-between;
            background-color:#f3f5f6;
            padding: 5px 20px;
        }

        .footer ul {
            display: flex;
            list-style-type: none;
            gap: 25px;
            justify-content: center;
            align-items: center;
            /* color: black; */
            font-size: 13px;


            /* border: 1px solid;  */
        }

        .footer a {
            text-decoration: none;
            color: black;
        }

        .footer a:hover{
            text-decoration: underline;
        }
        .india{
            font-size: 15px;
            font-family: Arial, sans-serif;
            background-color:#f3f5f6;
            border: 2px solid rgb(226, 218, 218);
            padding: 15px 30px;

        }



           .main{
            height: 60vh;
            /* border: 1px solid; */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
           }  

           .searchbox input{
            border: none;
            width: 400px;
            outline: none;
           }


        .searchbox{
            border: 1px solid;
            border-radius: 25px;
            padding: 10px;
            display: flex;
            /* flex-direction: column; */
            justify-content: center;
            align-items: center;
            display: inline;
            width: fit-content;
            gap: 10px;
        }

        .aimode{
            display: inline;
            padding: 0 5px;
            border-radius: 25px;
            background-color:rgb(242, 241, 241);
        }



    </style>
</head>

<body>
    <div class="header">
        <div class="left">
            <ul>
                <li><a href="">About</a></li>
                <li><a href="">Store</a></li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li><a href="">Gmail</a></li>
                <li><a href="">Images</a></li>
                <li><img src="https://ssl.gstatic.com/gb/images/bar/al-icon.png" alt=""></li>
                <li><img class="profile" src="https://lh3.google.com/u/0/ogw/AF2bZyioFP6amijTdUjVrsfzRwpj6cZG5vo85-kWhwq144Rj8Q=s32-c-mo" alt=""></li>
            </ul>
        </div>
    </div>
    <div class="main">
        <img src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg" alt="">
        <div class="searchbox">

            <i class="fa-solid fa-magnifying-glass"></i>
            <input type="text" placeholder="search">
            <i class="fa-solid fa-microphone"></i>
            <i class="fa-solid fa-camera-rotate"></i>
            <div class="aimode">
                <i class="fa-brands fa-searchengin"></i>
                AI mode
            </div>
        </div>   
    </div>
    <div class="india">India</div>
    <div class="footer">
        <div class="left">
            <ul>
                <li><a href="">Advertsing</a></li>
                <li><a href="">Business</a></li>
                <li><a href="">How Search works</a></li>
            </ul>

        </div>
        <div class="right">
            <ul>
                <li><a href="">Privacy</a></li>
                <li><a href="">Terms</a></li>
                <li><a href="">Settings</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

Output:

Top comments (1)

Vijay Kumar • Aug 3

Great work, keep doing 🙌