-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (99 loc) · 3.72 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
<!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" />
<!-- ---Fonts--- -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lato&display=swap"
rel="stylesheet"
/>
<!-- ---Icons--- -->
<link rel="stylesheet" href="assets/style.css" />
<!-- ---Style--- -->
<link rel="stylesheet" href="style.css" />
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<!-- ---Top Menu--- -->
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="icon-x"></i>
</button>
<button id="open">
<i class="icon-menu"></i>
</button>
</div>
</div>
<!-- ---Content Home--- -->
<div class="content home">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam earum
corporis saepe placeat minima ipsa voluptatum doloribus tempore id
velit eveniet voluptatem unde laudantium, numquam eum facere pariatur
aut similique natus molestiae. Magnam, officiis? Natus modi, facere
tenetur ex qui doloribus necessitatibus deserunt reprehenderit
excepturi optio obcaecati. Atque architecto facilis harum placeat
consequatur amet optio, saepe quae deleniti ad magni ut sapiente ea
iure provident doloremque quasi dignissimos qui delectus praesentium
fugit ratione. A aspernatur eos sint, optio quos nihil ullam labore
ratione iste ipsum, neque quis quas nemo quia dolores porro libero
ipsam ipsa architecto. Nostrum minima autem nam.
</p>
<h3>My Dog</h3>
<img src="assets/img/Luna.jpeg" alt="Foto de meu cachorro" />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut delectus
maiores, voluptate magni aliquid consequatur nesciunt itaque placeat
voluptas aliquam ipsa exercitationem. Dolore quas quidem temporibus
maiores tempore voluptates nulla asperiores iste, quo ab eligendi
aspernatur excepturi nam dolores culpa eos distinctio dignissimos
harum sunt id repellendus adipisci eaque dolor laboriosam! Quasi
dignissimos fuga ipsam dolorum ipsa maxime dicta sunt similique
eveniet voluptates, quidem soluta quo pariatur quaerat amet assumenda,
aspernatur nulla fugiat eaque. Consequatur!
</p>
<footer id="about">
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus
voluptas, nulla ratione eligendi repellat sed mollitia earum maxime
dolores accusamus non asperiores, placeat omnis fugit repellendus
enim, commodi voluptate veritatis.
</p>
</footer>
</div>
</div>
<!-- ---Side Menu--- -->
<nav>
<ul>
<li>
<a href="#home"><i class="icon-home"></i>Home</a>
</li>
<li>
<a
href="https://www.instagram.com/valdineidepaulajunior/"
target="_blank"
>
<i class="icon-instagram"></i>Instagram</a
>
</li>
<li>
<a href="mailto:valdineidepaulajunior"
><i class="icon-mail"></i>Contact</a
>
</li>
</ul>
</nav>
<!-- ---Script--- -->
<script src="script.js"></script>
</body>
)
</html>