-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
44 lines (42 loc) · 2.65 KB
/
index.html
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
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
<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>Read it with joy!</small>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex ullam ratione totam molestiae voluptates non facere asperiores nam earum, minima quae reiciendis labore repellat, similique recusandae deserunt ad dolorem sunt maiores velit nostrum odio illo! Eligendi eveniet rem sed, accusantium, iste molestiae quibusdam amet alias mollitia cupiditate impedit ab. Vel repudiandae eos totam enim, similique a et recusandae. Delectus, eum non? Ut consequuntur maiores alias vel, aut ad id, veniam ex inventore nihil accusamus consequatur iste repudiandae enim laboriosam perferendis minima aspernatur? Deleniti temporibus sapiente nemo aliquid, expedita ratione, recusandae itaque dolore doloremque sequi amet nesciunt placeat nulla, illum quae?</p>
<h3>A Dog</h3>
<img src="https://www.grunge.com/img/gallery/the-dumbest-dog-breed-in-the-world/intro-1575488712.jpg" alt="doggo">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Expedita error rem consectetur ipsam recusandae mollitia necessitatibus quasi, sapiente minima laboriosam exercitationem ea corrupti adipisci laudantium quibusdam nam illo harum laborum fugit doloremque quis. Labore vel soluta doloremque dolorem, veniam vitae repudiandae totam quia error ipsa, laudantium assumenda corrupti voluptatem eius facilis. Nobis assumenda, praesentium reiciendis tempora quaerat aliquid, similique ipsum ratione explicabo dignissimos ad dolorem quod voluptas error animi, expedita provident necessitatibus illo in nisi?</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>