TECH PIXEL

"Tech Pixel": Clearly mentions the site name. "Your go-to source for the latest tech news, reviews, and tutorials": Summarizes what the site offers. "Stay updated with the newest trends in technology": Highlights the value of staying current with tech trends. "Enhance your skills with our expert guides": Emphasizes the practical benefits and expertise available on the site.

HTML/CSS: Style the Nav bar using flex box:

Arooj Amina August 11, 2024

 HTML/CSS

Style the Nav bar using flex box:

What is flex box in css?

Flexbox is a powerful CSS tool that makes it easier to design flexible and responsive layouts. By defining a flex container and using various Flexbox properties, you can control the alignment, spacing, and distribution of elements within that container, making your web design more adaptable and efficient.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Navbar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">
            <a href="#">LOGO</a>
        </div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Page</a></li>
            <li><a href="#">Catalog</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div class="search-box">
            <input type="text" placeholder="Search" />
            <button type="submit">🔍</button>
        </div>
    </nav>
</body>
</html>

CSS CODE:

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

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2c3e50; /* Dark blue background */
    padding: 10px 20px;
}

.logo a {
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin: 0 15px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.nav-links a:hover {
    color: #f39c12;
}

.search-box {
    display: flex;
    align-items: center;
}

.search-box input[type="text"] {
    padding: 5px;
    border: none;
    border-radius: 3px 0 0 3px;
    outline: none;
}

.search-box button {
    padding: 5px 10px;
    background-color: #ADD8E6;
    border: none;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    color: white;
}

.search-box button:hover {
    background-color: #ADD8E6;
}





Explanation: how its work:

 Let's break down the components and the styling of the navbar step by step:

  1. Navbar Structure:

    • The navbar is divided into three main sections: the logo, the navigation links, and a search box.
    • The logo is placed on the left side, the navigation links are in the center, and the search box is on the right side. This layout is achieved using a technique called Flexbox, which allows for easy alignment and spacing of items in a row.

  2. Logo:

    • The logo is simply a text link, styled to appear bold and white. It's located on the far left of the navbar, serving as a clickable item that could link back to the homepage or any desired location.

  3. Navigation Links:

    • The navigation links are presented as a list of items (like "Home", "About", "Services", "Contact"). Each of these items is styled to appear as white text.
    • To give the navbar a polished look, the links are spaced evenly apart, and a hover effect is added. When a user hovers over a link, the text color changes to a different shade (like a soft yellow) to indicate interactivity.

  4. Search Box:

    • On the far right side of the navbar, there's a search box, which includes an input field where users can type their search query and a button with a search icon.
    • The input field is styled with some padding and slightly rounded corners to make it look neat. The button next to it has a matching design and changes color when hovered over, signaling that it’s clickable.

  5. Styling and Colors:

    • The entire navbar is given a dark blue background to make the white text and elements stand out. The search button is designed in a contrasting color, like orange, to draw attention to it.
    • The overall styling uses padding and spacing to ensure that each element in the navbar is well-aligned and visually balanced.

  6. Responsive Design:

    • The layout is designed to be responsive, meaning it adjusts well on different screen sizes. This ensures that the navbar looks good on both desktop and mobile devices.

This explanation covers how the navbar is structured and styled without delving into the specific code. Each element is positioned and styled with simplicity and functionality in mind, making it suitable for beginner.

Tags:

Post a Comment

0 Comments