Creating a Navigation Menu in CSS

 <!DOCTYPE html>

<html lang="en">
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navigation Menu</title>
    <link rel="stylesheet" href="CSS/styleNine.css">
</head>

<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact us</a></li>
                <div class="search">
                    <input type="text" name="search" id="search" placeholder="Search here...">
                </div>
            </ul>
        </nav>
    </header>
</body>

</html>






Below is styleNine.css File
.navbar {
    background-color: #000000;
    border-radius: 30px;
}

.navbar ul {
    overflow: auto;
}

.navbar li {
    float: left;
    list-style: none;
    margin: 13px 20px;
    padding-top: 3px;
}

.navbar li a {
    padding: 3px 3px;
    text-decoration: none;
    color: #ffffff;
}

.navbar li a:hover {
    color: #ff0000;
}

.search {
    float: right;
    color: #ffffff;
    padding: 12px 75px;
}

.navbar input {
    border: 2px solid #000000;
    border-radius: 14px;
    padding: 5px 17px;
    width: 129px;
}






Comments

Post a Comment