Google Homepage HTML and CSS code

Hey, developer today is Day 78 of our 90Projects in 90Days. And today in this challenge, we are going to Create a Responsive Google Homepage Clone HTML and CSS code

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

Google Homepage HTML and CSS code, raju webdev, geeks help, google search page html code,google homepage clone, HTML code for Google search page


Image Resources: Download Now

HTML Code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Google Home Page Clone </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="google-main-container">
        <div class="top-nav">
            <ul>
                <li><a href="#">Gmail</a></li>
                <li><a href="#">Images</a></li>
                <li id="google-apps"><a href="#"></a></li>
                <li id="user-profile"></li>
            </ul>
        </div>
        <div class="main">
            <div class="logo-container">
                <div class="logo"> <img src="google-logo.png"> </div>
                <div class="search">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input type="text" name="search" id=""> <img id="microphone" src="mic.png"> </input>
                </div>
                <div class="buttons">
                    <button id="main-btn">Google Search</button>
                    <button id="sec-btn">I'm Feeling Lucky</button>
                </div>
                <div class="languages">
                    <span> Google offered in: <div class="lang">
                            <span><a href="#"> हिन्दी </a></span>
                            <span><a href="#"> বাংলা </a></span>
                            <span><a href="#"> à°¤ెà°²ుà°—ు </a></span>
                            <span><a href="#"> मराठी </a></span>
                            <span><a href="#"> தமிà®´் </a></span>
                            <span><a href="#"> ગુજરાતી </a></span>
                            <span><a href="#"> ಕನ್ನಡ </a></span>
                            <span><a href="#"> മലയാà´³ം </a></span>
                            <span><a href="#"> ਪੰਜਾਬੀ </a></span>
                        </div>
                    </span>
                </div>
            </div>
        </div>
        <div class="footer">
            <ul class="left-footer">
                <li><a href="#">About</a></li>
                <li><a href="#">Advertising</a></li>
                <li><a href="#">Business</a></li>
                <li><a href="#"> How Search Works </a></li>
            </ul>
            <ul class="right-footer">
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Terms</a></li>
                <li><a href="#">Settings</a></li>
            </ul>
        </div>
    </div>

</body>

</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: arial, sans-serif;
}

.google-main-container {
    padding-top: 20px;
    position: relative;
    margin: 0 auto;
}

.top-nav ul {
    float: right;
    padding: 0 30px;
}

.top-nav ul li {
    margin: 2px 10px;
    display: inline-block;
    vertical-align: middle;
}

.top-nav ul li a {
    text-decoration: none;
    color: black;
}

.top-nav ul li a:hover {
    text-decoration: underline;
}

#google-apps {
    background-image: url("./993522.avif");
    background-repeat: no-repeat;
    background-size: contain;
    color: white;
    height: 15px;
    width: 15px;
}

#user-profile {
    width: 32px;
    height: 32px;
    background-image: url("./user.png");
    background-size: contain;
    border-radius: 50%;
}

.main {
    width: 80%;
    margin: 0 auto;
}

.logo-container {
    padding-top: 100px;
}

.logo img {
    display: block;
    margin: 0 auto;
    width: 250px;
}

.search {
    width: 80%;
    border: 1px solid rgb(184, 163, 163);
    display: flex;
    padding: 4px 20px;
    align-items: center;
    margin: 2rem auto;
    border-radius: 50px;
}

.search input {
    width: 100%;
    outline: none;
    border: none;
    padding: 10px;
}


.search img {
    width: 15px;
}

.buttons {
    width: 300px;
    margin: 20px auto;
}

button {
    border: 1px solid white;
    color: #757575;
    font-weight: bold;
    padding: 15px;
    cursor: pointer;
}

button:hover {
    border: 1px solid #b8b8b8;
}

.languages {
    width: 80%;
    margin: 10px auto;
}

.languages a {
    text-decoration: none;
    margin: 5px 10px;
}

.languages .lang {
    display: inline;
    text-align: center;
    margin-bottom: 1rem;
}

.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 0;
    border-top: 1px solid #ccc;
    padding: 20px 0;
}


.footer ul li {
    display: inline-block;
    padding: 0 15px;
    color: #666;
}

.footer a {
    text-decoration: none;
    color: #666666;
    font-size: 15px;
    height: 40px;
}

.left-footer {
    float: left;
}

.right-footer {
    float: right;
}

a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 573px) {
    .logo img {
        width: 80%;
        margin: 0 auto;
    }

    .main {
        width: 100%;
    }

    .footer {
        flex-direction: column;
        justify-content: center;
        row-gap: 20px;
    }
}

@media screen and (max-width: 346px) {
    .buttons {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .left-footer {
        text-align: center;
    }
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad