-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
75 lines (71 loc) · 3.03 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
<!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>Tilting Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<!-- Contains another div having 2 buttons. Each button has an icon -->
<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>Florin Pop</small>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium
quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam
dolor omnis atque fuga labore modi veritatis porro laborum minus,
illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur
mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem
provident natus veritatis molestiae cumque quod voluptates ab non,
tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium
iure aliquam rerum sint nam quas dolor dignissimos in error placeat
quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe
voluptates laudantium. Ducimus consequuntur perferendis consequatur
nobis exercitationem molestias fugiat commodi omnis. Asperiores quia
tenetur nemo ipsa.
</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. Sit libero
deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam
facere earum unde harum. Ea culpa veritatis magnam at aliquid.
Perferendis totam placeat molestias illo laudantium? Minus id minima
doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet
temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores
explicabo provident. Voluptates sint, neque fuga cum illum, tempore
autem maxime similique laborum odio, magnam esse. Aperiam?
</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>