-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (42 loc) · 2.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/995ae9f187.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous"></link>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js" defer></script>
<title>Rotating Nav</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>Text</h1>
<small>another text</small>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat accusamus sapiente dicta ipsa blanditiis mollitia inventore rerum. Quis, optio recusandae. A omnis doloribus itaque quo consequatur sapiente iste est blanditiis animi dolor, deleniti illum perspiciatis assumenda quia aliquam laboriosam praesentium. Quae aut magnam dolorem sed nobis, iste iure quaerat a suscipit eius neque dolore voluptate natus nostrum beatae rem quos alias. Ab non perferendis soluta iusto dignissimos laudantium quasi maiores facere nobis ipsam praesentium ex in, eum asperiores harum voluptas autem, nulla necessitatibus beatae distinctio ea! Numquam, modi est. Itaque excepturi sit labore impedit est maiores nesciunt esse tenetur cupiditate.</p>
<h3>the sky</h3>
<img src="https://images.unsplash.com/photo-1608844211215-fd6bdb370432?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="sky">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At dicta quibusdam quam officiis iure, porro fuga ipsa consequatur ea sunt voluptatibus rerum quis! Atque nisi earum, at nesciunt reprehenderit unde libero, recusandae quisquam voluptates quis magni sit voluptatum voluptas soluta. Laudantium doloribus quia similique aliquam velit vitae maxime praesentium dolores.</p>
</div>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home">Home</i></li>
<li><i class="fas fa-user-alt">About</i></li>
<li><i class="fas fa-envelope">Contact</i></li>
</ul>
</nav>
</body>
</html>