-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (40 loc) · 2.79 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" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<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>Sample Text</h1>
<small>John Doe</small>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur suscipit ipsum nisi commodi mollitia. Vero, ipsam quasi! Repudiandae perferendis mollitia aliquam quibusdam atque numquam vel exercitationem porro repellat molestiae? Cupiditate perferendis officia nihil corrupti iste incidunt dolorem suscipit quibusdam, alias sed voluptatem quisquam harum deserunt laudantium, quasi numquam ratione provident quas itaque? Autem, debitis ad. Voluptatem excepturi deserunt enim exercitationem nulla, laboriosam culpa consequuntur facere voluptas cupiditate sunt reiciendis fuga nobis ipsum nesciunt eaque itaque voluptates esse vel. Itaque impedit corporis iusto aliquid qui maiores blanditiis, totam magni esse dolorem, tempore excepturi nemo libero, animi adipisci officiis voluptas! Doloribus, fuga?</p>
<h3>My Dog</h3>
<img src="https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80" alt="dog">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis qui, laboriosam nihil itaque cum asperiores facilis laudantium ex illum, consequatur perspiciatis ratione earum repellendus quia minus ad impedit id corrupti, reiciendis veniam nobis provident? Commodi totam libero nam officia! Dolorum rem eaque aperiam soluta nulla! Doloremque facilis veritatis distinctio voluptas, labore recusandae aperiam! Libero, maiores. Distinctio hic explicabo asperiores magnam, rerum est eligendi placeat veritatis quas quod aliquid, dolorum ipsa assumenda ratione! Ipsam, beatae dolore!</p>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i><a href="#"> Home</a></li>
<li><i class="fas fa-user-alt"></i><a href="#"> About</a></li>
<li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>