-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (113 loc) · 5.15 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
<title>Rotating Menu</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>
<!-- First Article -->
<div class="content">
<h1>Article 1</h1>
<small>Author</small>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam,
neque reiciendis officiis nostrum ab voluptatem laboriosam rem vero
esse cumque ipsum corporis ratione accusamus nobis deserunt voluptatum
quisquam odio ipsam, atque quis laudantium, aliquam qui a!
Perspiciatis neque adipisci qui! Minima incidunt debitis dolores
tempora, odit pariatur sed assumenda exercitationem aliquam neque
harum veniam officiis id aut, ipsam nemo consequatur, nulla optio
illum quae dolorum sit. Eum quos voluptatum, assumenda nostrum minus
ab provident dignissimos expedita consequuntur? Asperiores maxime
commodi qui similique dolorem sed quam. Pariatur eius repudiandae
dolorum quibusdam esse, culpa, odio, suscipit repellendus distinctio
blanditiis in inventore maiores.
</p>
<h3>My Parrot</h3>
<img
src="https://images.unsplash.com/photo-1589792351116-53074a88aabe?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8cGFycm90fGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt=""
/>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias autem
veritatis non animi sint dolores quia perferendis neque quod
provident! Ipsa repudiandae quaerat voluptates cum dolor! Impedit
obcaecati minima vel, optio porro sequi eius eveniet cupiditate totam!
Perspiciatis alias ex facilis quo nostrum non soluta doloremque
suscipit. Autem non praesentium rerum placeat numquam quisquam
reiciendis quibusdam facere vel alias natus laborum iste, fugit
perferendis aperiam iusto ipsam obcaecati, consectetur mollitia! Ab
ipsum nostrum aut quam quia veritatis aperiam qui explicabo!
</p>
</div>
<!-- Second Article -->
<div class="content">
<h1>Article 2</h1>
<small>Author</small>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam,
neque reiciendis officiis nostrum ab voluptatem laboriosam rem vero
esse cumque ipsum corporis ratione accusamus nobis deserunt voluptatum
quisquam odio ipsam, atque quis laudantium, aliquam qui a!
Perspiciatis neque adipisci qui! Minima incidunt debitis dolores
tempora, odit pariatur sed assumenda exercitationem aliquam neque
harum veniam officiis id aut, ipsam nemo consequatur, nulla optio
illum quae dolorum sit. Eum quos voluptatum, assumenda nostrum minus
ab provident dignissimos expedita consequuntur? Asperiores maxime
commodi qui similique dolorem sed quam. Pariatur eius repudiandae
dolorum quibusdam esse, culpa, odio, suscipit repellendus distinctio
blanditiis in inventore maiores.
</p>
<h3>My Cat</h3>
<img
src="https://images.unsplash.com/photo-1579202673506-ca3ce28943ef?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NTh8fGN1dGUlMjBjYXR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
alt=""
/>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alias autem
veritatis non animi sint dolores quia perferendis neque quod
provident! Ipsa repudiandae quaerat voluptates cum dolor! Impedit
obcaecati minima vel, optio porro sequi eius eveniet cupiditate totam!
Perspiciatis alias ex facilis quo nostrum non soluta doloremque
suscipit. Autem non praesentium rerum placeat numquam quisquam
reiciendis quibusdam facere vel alias natus laborum iste, fugit
perferendis aperiam iusto ipsam obcaecati, consectetur mollitia! Ab
ipsum nostrum aut quam quia veritatis aperiam qui explicabo!
</p>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i> <a href="./home.html"> Home</a></li>
<li>
<i class="fas fa-user-alt"></i> <a href="./about.html">About</a>
</li>
<li>
<i class="fas fa-envelope"></i>
<a href="./contacts.html"> Contacts</a>
</li>
</ul>
</nav>
<script src="./script.js"></script>
</body>
</html>