CSS-MasterClass-RoadMap/Navigation_Bar_Using Float.html at master · Pritam-s/CSS-MasterClass-RoadMap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!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" />

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;700&display=swap" rel="stylesheet" />
    <title>Navigation Bar</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: "Inter", sans-serif;
            /* Google Fonts */
        }

        .navbar {
            background-color: rgb(24, 24, 24);
            border-radius: 5px;
        }

        .navbar ul {
            overflow: auto;
            /* When an Element is floated.(here the navbar list is floated to left) It moves out of the parent element. hence we had to use overflow property in the parent element and set it to auto. */
        }

        .navbar li {
            float: left;
            list-style-type: none;
            margin: 20px;
        }

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

        .navbar li a:hover {
            color: rgb(27, 175, 185);
        }

        .searchbox {
            display: inline-block;
            margin: 18px;
            float: right;
            /* Notice this property */
        }

        .navbar div input {
            border-radius: 5px;
        }
    </style>
</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</a></li>

                <div class="searchbox">
                    <input type="text" name="searchbox" id="searchbox" placeholder="Search" />
                </div>
            </ul>
        </nav>
    </header>
</body>

</html>