Sticky-Navbar/index.html at main · 50-Days-50-Projects/Sticky-Navbar · 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
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
    <title> Sticky Navbar</title>
</head>

<body>
    <nav class="nav ">
        <div class="container">
            <h1 class="logo"><a href="/index.html">My Website</a></h1>
            <ul>
                <li><a href="#" class="current">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>

            </ul>
        </div>
    </nav>
    <div class="hero">
        <div class="container">
            <h1>Welcome To My Website</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Accusamus, maiores.</p>
        </div>
    </div>
    <section class="container content">
        <h2>Content One</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, aperiam suscipit fugiat atque illum distinctio
            delectus minus aliquam voluptates excepturi qui itaque harum sapiente repudiandae rem. Facere, ad ipsum?
            Natus ipsum commodi, quos, quidem, cumque rem maxime alias amet totam excepturi optio aliquid dolor officiis
            impedit sit odit ratione facilis! Magnam enim necessitatibus dolor explicabo, rerum animi pariatur cumque
            est sapiente corrupti consequuntur autem vel expedita ad exercitationem. Molestias provident dignissimos ex,
            nobis facilis itaque inventore nam ducimus saepe nostrum expedita autem sit nemo neque. Ut soluta rerum
            magnam atque totam ab illo quis ea. Inventore id nesciunt praesentium voluptatibus!</p>
        <h3>Content Two</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam laboriosam non ipsum quo minima rerum vitae
            optio laborum totam magnam harum aperiam eius tenetur illum in nihil similique delectus, consequuntur velit.
            Iure dolorum nostrum vitae ratione quas labore itaque, temporibus deserunt, praesentium hic ipsam, rerum
            minus ab quasi illo dignissimos.</p>
    </section>


    <script src="js/script.js"></script>
</body>

</html>