JavaScript/rotating-nav-animation/index.html at master · sekuretto/JavaScript · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/a96490c3a3.js" crossorigin="anonymous"></script>
  <title>Rotating Navigation</title>
</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>Amazing Article</h1>
      <small>Marja Jämbeck</small>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam, eveniet blanditiis possimus doloribus, rerum
        alias nobis excepturi aliquid consectetur perferendis cum! Enim ut quod eius praesentium atque, sit illo totam
        blanditiis possimus magni autem dolorem necessitatibus nam similique fugiat consequatur repellat ipsam labore
        qui cumque eaque sunt? Beatae eos voluptate dolorum, quas temporibus rerum explicabo? Exercitationem ullam, unde
        natus accusantium voluptatum fugiat voluptatibus voluptas dolore cumque sit qui fuga harum cupiditate nemo,
        minus quisquam dolores soluta corrupti beatae iure veritatis laudantium porro dicta. Animi voluptas, ducimus
        magnam aperiam nulla illum quos odio tempore placeat error, asperiores voluptates facere similique labore!</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="doggy" />
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim rem suscipit, fugiat iusto doloremque commodi
        corporis minima esse architecto odit animi fuga corrupti magnam veritatis sequi ullam ratione reiciendis beatae
        hic libero itaque ducimus recusandae! Maiores, ipsam? Facere accusantium tempora accusamus expedita, sint
        placeat dolores optio perferendis dolorum distinctio? Ad magni ipsa molestias explicabo impedit quae nam
        delectus voluptas dolor beatae temporibus accusamus minus optio non officia necessitatibus, nobis repellat,
        culpa doloremque quia nemo accusantium!</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>

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

</html>