Website-Template/Rotating sidebar/index.html at main · Diptenusarkar/Website-Template · 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
<!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="./style.css">
    <title>Rotating Navigation</title>
</head>
<body>
    <div class="container  ">
        <div class="circle-container">
            <div class="circle">
                <button class="close" id="close">
                    <i class="fas fa-times">C</i>
                </button>
                <button class="open" id="open">
                    <i class="fas fa-bars">h</i>
                </button>

            </div>
        </div>
        <div class="content">
            <h1>Amazing Author</h1>
            <small>Sanil</small>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo error similique quo, nam, doloribus corrupti aspernatur quae laboriosam repellat reiciendis molestias, libero perspiciatis quas necessitatibus dolorem at consequuntur. Consequuntur ipsa unde libero natus cum voluptates tempore expedita enim eaque. Debitis facilis tempore quia eius, vel nemo maiores aperiam temporibus? Necessitatibus perspiciatis debitis amet aspernatur, commodi quis quisquam rem ipsam! Labore voluptas consectetur sint eligendi cumque cum dignissimos nihil eius iusto vitae corrupti in, unde sequi, expedita voluptatibus numquam, doloribus ipsum voluptatum repellat animi a deserunt rerum. Quisquam sequi neque eligendi, laborum debitis veritatis animi ex atque consectetur, eveniet repellendus! Ratione.</p>
            <h3>My Dog</h3>
            <img src="https://source.unsplash.com/Sg3XwuEpybU" alt="Unsplash computer image with cat">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque maxime dicta obcaecati architecto deserunt aliquid amet, odit illum earum harum, officia dolorum dolor facere, reiciendis aspernatur dolorem. Doloribus sapiente mollitia ducimus. Corrupti minus culpa tempore tenetur libero reprehenderit qui sed perferendis recusandae sapiente dolores, blanditiis laudantium molestias quaerat. Corrupti, similique?</p>
        </div>
    </div>
    <nav>
        <ul>
            <li><i class="fas fa-home">Home</i></li>
            <li><i class="fas fa-home">About</i></li>
            <li><i class="fas fa-home">Contact</i></li>
        </ul>
    </nav>
    <script src="script.js" ></script>
</body>
</html>