Google Search Page

Before we create the navigation bar, let's adjust the default styles and set the background color (within a style tag):

<style>
body {
    margin: 0;
    font-family: sans-serif;
    background-color:#22242A;
}
</style>

Create the container for the navigation bar - <nav>, and create a space in between the tags:

<nav>
    
</nav>

Click on the space between the <nav> tags, then:

1. create a <div> with the class "nav-left"
2. add two anchor tags <a> inside it:
• About
• Store

<nav>    
    <div class="nav-left">
            <a class="nav-link" href="#">About</a>
            <a class="nav-link" href="#">Store</a>
    </div>
</nav>

Next, let's get rid of the default styling and style the "nav-link" class:

.nav-link {
    text-decoration: none;
    color: white;
}

We can easily space out the navigation links with:

.nav-left {
    display: flex;
    gap: 15px;
}

gap:15px; evenly spaces the links, this is very useful when you have multiple items.

Create the same thing for the right side, this will be located below the left side:

1. create a <div> with the class "nav-right"
2. add 4 <a> tags inside it:
• Gmail
• Images
• 3x3 dot grid icon
• Sign in button - give this the class "sign-in-button"

<nav> 
    <!-- Left side content from previous step -->
    <div class="nav-left">
        <a class="nav-link" href="#">About</a>
        <a class="nav-link" href="#">Store</a>
    </div>

    <!-- Right side content -->
    <div class="nav-right">
        <a class="nav-link" href="#">Gmail</a>
        <a class="nav-link" href="#">Images</a>
        <a class="nav-link" href="#">
            <img src="https://ssl.gstatic.com/gb/images/bar/al-icon.png" alt="" height="24" width="24" style="filter:invert(1);border:none;display:none \9">
        </a>
        <a class="nav-link" href="#"><button class="sign-in-button">Sign in</button></a>
    </div>
</nav>

We'll space out the links here as well, just like we did the left side:

.nav-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

Notice how the left side is above the right side, this is because <div> elements are block-level by default.

To fix this, we can use CSS to make the divs display side by side, as inline elements. We'll also do some other styling:

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;

    position: sticky;
    top: 0;
    z-index: 1000;
}

• display: flex; items are displayed in a row, side by side, or as inline elements.

• justify-content: space-between; items are distributed with equal space between them. And since there's only two divs, they will be pushed to the edges.

• align-items: center; centers items vertically.

• padding: 0 20px; adds horizontal padding to the navigation bar.

• position: sticky; makes the navigation bar stick to the top of the page when scrolling.

• top: 0; makes the navigation bar stick to the top of the page.

• z-index: 1000; makes sure the navigation bar is on top of other elements.

We can style the "Sign in" button to make it look more like the Google sign-in button:

.sign-in-button {
    background-color: #C2E7FF;
    border: none;
    padding: 12px 22px;
    border-radius: 999px;
    cursor: pointer;
}

• background-color: #C2E7FF;
• border: none; gets rid of the default border
• padding: 12px 22px;
• border-radius: 999px; makes the button rounded
• cursor: pointer; changes the cursor to a hand when hovering over the button

1. Create a new <section> below the navigation bar and name its class search-section.
2. Add the search <input> field to this container and name its class search-input.
3. Create another container for the two buttons at the bottom.

<section class="search-section">
    <h1 class="google-title">Google</h1>
    <input type="text" placeholder="Search" class="search-input">

    <div class="search-buttons">
    <button>I'm Feeling Lucky</button>
    <button>Google Search</button>
    </div>
</section>

We'll make the search section centered with the following:

.search-section {
    display: flex;
    align-items: center;
    padding: 20px;
    justify-content: center;
    flex-direction: column;
    height:600px;
}

Now, let's style the elements inside from top to bottom:

1. The Google title

.google-title{
    font-size: 85px;
    font-weight: 400;
    color: white;
    margin:25px 0px;
}

2. The search input field

.search-input {
    width: 50%;
    height:30px;
    padding:10px;
    margin-bottom: 25px;
    background-color: #4D5156;
    border: none;
    border-radius: 24px;
    outline: none;
    font-size: 17px;
    color: white;
}

3. The buttons

.search-buttons {
    display: flex;
    gap: 15px;
}
.search-buttons button {
    border-radius:8px;
    border:none;
    color:white;
    background-color:#303134;
    padding:10px 15px;
    font-weight:bold;
}

Great. Now we can move on to the last section - the footer!

We'll create a footer similar to the navigation bar - as you can see there are 3 sections:

• The left section containing links:
• Advertising
• Business
• How Search works
• The middle section:
• Build, create, and do more with AI tools from Google
• The right section containing links:
• Privacy
• Terms
• Settings

Firstly, let's create the footer container:

<footer>
</footer>

Next, let's create the 3 sections:

<footer>
    <div class="footer-left">
        <a class="footer-link" href="#">Advertising</a>
        <a class="footer-link" href="#">Business</a>
        <a class="footer-link" href="#">How Search works</a>
    </div>
    <div class="footer-middle">
        <a class="footer-link" href="#">Build, create, and do more with AI tools from Google</a>
    </div>
    <div class="footer-right">
        <a class="footer-link" href="#">Privacy</a>
        <a class="footer-link" href="#">Terms</a>
        <a class="footer-link" href="#">Settings</a>
    </div>
</footer>

Now, let's style the footer:

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #16171A;
    font-size:14px;
    position:fixed;
    bottom:0;
    left: 0;
    width: 100%;
    box-sizing:border-box;
}
.footer-left, .footer-middle, .footer-right {
    display: flex;
    gap: 15px;
}
.footer-link {
    text-decoration: none;
    color: white;
}
.footer-link:hover {
    text-decoration: underline;
}