JavaScript51/03-Rotating_Navigation/index.html at main · anshulontech/JavaScript51 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rotating Navigation...</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
</head>

<body>
    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button id="close"> <i class="fas fa-times"></i>
                </button>
                <button id="open"> <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>

        <div class="content">
            <h1>Great Article on Dogs</h1>
            <small>Anshul Sharma</small>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, culpa! Est vel perferendis unde blanditiis, minus saepe voluptatibus veritatis itaque, quam, tempore explicabo voluptatem distinctio dolore autem voluptatum eum harum! Reiciendis
                dolor quos facilis inventore nisi exercitationem, velit maiores. Reprehenderit perferendis iusto dolore neque molestiae est dolorem esse, tempora unde quos labore consequatur ipsa voluptatem ipsum hic sapiente et rerum? Itaque non distinctio
                eligendi quas at tempora molestias ad. Architecto, deleniti totam? Dolores, quo, alias architecto culpa facilis natus, ab nesciunt dicta facere error quam odit nam necessitatibus eius laborum!</p>

            <h3>My Dog</h3>

            <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Puppy" />

            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae iure consectetur eaque, tempore exercitationem possimus inventore sit eveniet saepe, fugiat veritatis impedit repellendus cum vel explicabo laboriosam quis nulla sunt.Consequuntur
                molestiae similique labore optio, tenetur adipisci exercitationem veritatis aperiam ullam perspiciatis veniam blanditiis numquam a beatae officia, est, ut eveniet excepturi fugiat deleniti. Quo ipsum natus architecto perferendis corporis?</p>
        </div>
    </div>

    <nav>
        <ul>
            <li><i class="fas fa-home"></i>Home</li>
            <li><i class="fas fa-user-alt"></i>About</li>
            <li><i class="fas fa-envelope"></i>Contact</li>
        </ul>
    </nav>

</body>

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

</html>