-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path05-links.html
211 lines (194 loc) · 12.7 KB
/
05-links.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!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">
<title>Links</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
nav ul {
list-style-type: none;
padding-left: 0;
}
nav ul li {
display: inline-block;
}
nav a {
background-color: darkblue;
color: white;
text-decoration: none;
padding: 10px;
text-transform: uppercase;
text-align: center;
margin-bottom: 2px;
border-radius: 4px;
display: inline-block;
}
/* ------ pseudo classes ------ */
/* :link - styling a link when it is not visited */
nav a:link {
background-color: rgb(0, 0, 194);
color: color;
}
/* :visited - styling a link when it is visited */
nav a:visited {
color: lightgrey;
}
/* :hover - styling an item when mouse hover */
nav a:hover {
background-color: rgb(0, 0, 85);
box-shadow: 2px 2px 10px rgb(131, 131, 131);
cursor: pointer;
}
/* :active - styling an item when it's clicked */
nav a:active {
/* font-size: 1.2em; */
font-weight: bold;
}
</style>
</head>
<body>
<h2>Navigation Block</h2>
<nav>
<ul>
<li>
<!-- Go to external resource -->
<a href="https://google.com.uae">Google</a>
</li>
<li>
<!-- Open page in a new tab -->
<a href="https://facebook.com" target="_blank">
<img src="./images/ukraine.png" alt="Ukraine">
Facebook
</a>
</li>
<li>
<!-- Go to internal resource -->
<a href="./03-lists.html">Lists example</a>
</li>
<li>
<!-- Scroll to a page section -->
<a href="#last-title">Scroll to the End</a>
</li>
</ul>
</nav>
<h3>Contact Me</h3>
<nav>
<a href="mailto:[email protected]">Mail Me</a>
<a href="tel:0442557777">Tel Me</a>
</nav>
<h1 id="first-title">Working with Links</h1>
<p>Lorem ipsum dolor sit amet consectetur adiisicing elit. Odio vero aperiam aut eum consequatur, nihil saepe
praesentium quis quibusdam quia, amet distinctio labore fugiat modi eveniet. Voluptate quasi fuga dignissimos.
</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nemo laboriosam cupiditate necessitatibus placeat
commodi facilis, porro delectus voluptate reiciendis magni nihil ex, veniam dolorum facere aspernatur illum iure
quos? Quo minus magni iure reiciendis quia in atque cum assumenda omnis soluta non provident sed velit,
perspiciatis recusandae saepe voluptatem optio repudiandae necessitatibus ratione, autem nisi sequi! At
obcaecati harum incidunt molestiae maiores beatae quam magni nihil sint officia tempora consequuntur debitis
perferendis adipisci odio deserunt rerum voluptatum, et fugiat ducimus libero omnis tenetur voluptate? Sunt
veniam vero impedit perferendis nam possimus iusto eligendi fuga ipsam est in, reprehenderit quisquam odit?</p>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam porro ullam labore quod, consectetur qui
atque mollitia reprehenderit accusantium repudiandae similique. Earum, totam necessitatibus culpa facilis
harum officiis doloribus nemo.</li>
<li>Excepturi hic voluptatibus pariatur nisi voluptatum quidem harum consequuntur culpa nulla modi, natus earum
accusamus repudiandae dolorum temporibus beatae perferendis nostrum vel recusandae, delectus possimus autem
debitis nam placeat? Maxime?</li>
<li>Quam, numquam. Possimus placeat rerum officia, fuga omnis quas quos ipsam repudiandae nihil iste dicta
perspiciatis nobis molestias expedita fugit veritatis, sequi obcaecati! Fugit, et aliquam quaerat culpa hic
beatae.</li>
<li>Quas inventore magni dicta totam beatae velit quaerat dolores voluptates, culpa necessitatibus similique
quidem autem tenetur qui veniam impedit corrupti! Quis corporis fuga ab distinctio vero vel quibusdam, quasi
porro!</li>
<li>Consequatur corrupti fuga temporibus at doloremque dolorem optio rerum? Eaque ipsum, quidem, sapiente soluta
quia sunt ipsam voluptatum minus quisquam necessitatibus earum. Nulla, obcaecati qui placeat illo possimus
ea reprehenderit.</li>
<li>Modi, nesciunt! Similique neque dolorem quos, doloribus harum modi aspernatur maxime earum, ab animi nam
nisi quasi tempore sed at eius ea cumque explicabo vero sunt ex. Corporis, pariatur optio.</li>
<li>Dicta excepturi exercitationem quos nulla provident, animi labore molestiae, est itaque quibusdam cumque
maxime velit. Fuga accusantium reprehenderit ad rerum, ex provident molestias laborum illum dolorem,
cupiditate dolore. Impedit, ab?</li>
<li>Itaque illum consectetur possimus aliquam corrupti ipsum consequatur deserunt laboriosam excepturi minima
quasi labore laudantium quaerat earum molestias voluptate, ratione odit atque minus nihil. Aut iste
asperiores doloribus quasi delectus?</li>
<li>Iure nostrum similique odit, minus excepturi eaque exercitationem ea voluptatibus non quod id hic, vero
libero ipsa numquam adipisci tempora ullam quidem neque quisquam dicta quia. Delectus aliquid nesciunt
assumenda.</li>
<li>Ea laborum esse quia distinctio ex ipsam nam quis dolorum iste ullam labore maiores accusantium facere
quibusdam, voluptatem dolorem a voluptate sapiente accusamus veritatis libero architecto, molestias ab
dolore? Voluptatem.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ducimus, quam iste, quaerat corrupti in
repellat saepe sapiente exercitationem repudiandae assumenda eligendi impedit non? Error quo voluptate ad
vel libero.</p>
<p>Similique numquam velit vero eaque fugit. Rem numquam voluptas magni libero quibusdam adipisci! Enim
similique consectetur temporibus qui hic voluptatibus explicabo quasi harum? Eos facere beatae fugit
exercitationem unde id!</p>
<p>Corporis in aperiam molestias quae modi, eos dolore magnam officiis voluptatibus qui, quod impedit aliquid
voluptate provident atque ex tenetur sapiente harum fuga! Possimus fugiat laborum molestias voluptatum
maiores iste?</p>
<h2 id="last-title">Last Title</h2>
<p>Perspiciatis, facilis, eveniet provident cumque accusamus nostrum aut at atque sint voluptatem explicabo
recusandae quibusdam natus veritatis et sit laborum voluptas amet consectetur! Reprehenderit aperiam
suscipit voluptates non. Eaque, esse?</p>
<p>Molestiae, nam illum? Dolor, laboriosam laborum quo libero ipsam maiores excepturi nulla natus alias, ipsum
et commodi tenetur accusantium saepe amet voluptatum illo! Quod recusandae ea voluptatum esse illum quam.
</p>
<p>Illo quia minima quod ut, ea amet, recusandae repellendus aspernatur expedita, explicabo autem laudantium
voluptate voluptatibus cum iusto est pariatur debitis eius vitae maxime aliquid obcaecati incidunt dicta
non. Id.</p>
<p>Sequi neque veritatis assumenda sed eos ipsum, sunt animi repellat natus quisquam? Rerum itaque culpa nihil
deserunt maiores, molestias amet, odio dolore odit adipisci nisi dolorum aspernatur dignissimos magnam sed?
</p>
<p>Debitis, dolores distinctio. Aut quis mollitia amet quam aliquid ipsam molestias inventore perferendis
quisquam fugit id modi laboriosam, eos deserunt temporibus praesentium in, deleniti esse harum! Dolores
placeat libero itaque!</p>
<p>Maiores eveniet ipsa, quia culpa, suscipit nobis cumque possimus iusto, recusandae asperiores perspiciatis
animi itaque? Consequatur corrupti facere nemo tempore excepturi dolore earum quidem odio ipsum, magnam qui!
Voluptate, maxime!</p>
<p>Nulla error nostrum veritatis. Repellendus debitis nesciunt aspernatur, hic dignissimos soluta eius
voluptatem laboriosam, similique dicta esse id obcaecati dolor provident magni sit minus consectetur quod
nihil animi optio. Cupiditate.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, nulla quos autem necessitatibus magni
voluptate amet eius voluptas, nobis culpa fuga quae, quis aliquam quo molestiae soluta ullam assumenda?
Doloremque qui reiciendis mollitia error nisi beatae placeat voluptatem sequi, recusandae numquam ad expedita
facilis enim, cupiditate quod exercitationem non? Voluptas est enim, ipsa reprehenderit corporis impedit iusto
cum officiis inventore nesciunt animi facere mollitia aperiam, quas temporibus facilis provident natus
doloremque fugit quis vitae dolore! Deserunt, debitis quibusdam soluta alias ut perferendis aut optio corrupti
nulla veritatis illum, non adipisci minus fuga fugiat quaerat, amet totam autem ratione in. Vel consequuntur
laboriosam doloribus iure atque dolor blanditiis ipsam assumenda doloremque? Tempora, atque expedita autem
magnam sapiente doloribus cumque! Ipsam vitae deleniti pariatur voluptatibus dignissimos officiis corporis optio
dicta totam quidem nisi, sequi, magnam libero, molestiae accusantium laborum. Voluptatum, expedita nesciunt
quidem fuga molestiae consequuntur voluptates rem tempore earum dolorum eligendi omnis suscipit, in, officiis
animi labore architecto doloribus. Debitis qui nam nesciunt fugit nemo inventore omnis vero voluptates eius
explicabo veniam nulla numquam eum, placeat tenetur quaerat maiores! Officiis in eaque at consequuntur saepe,
autem atque repudiandae incidunt deserunt. Nam temporibus accusantium suscipit similique consectetur nobis ipsam
distinctio molestiae sed ipsum ab omnis quae ipsa eaque, ratione laborum cupiditate saepe facilis impedit! Id
distinctio dicta eligendi sit veritatis dolorum architecto eveniet. Et molestiae assumenda iure, libero error
voluptatibus, voluptatem cumque at rem asperiores distinctio porro quos facilis expedita laboriosam mollitia sit
consequatur sint! Repudiandae tempore, quod inventore odit eos alias quia, deleniti laboriosam ullam quis,
quidem esse. Quidem repellendus tempora accusantium voluptatum alias est sit, praesentium minima quis recusandae
debitis! Odit sunt unde consequuntur quasi aut animi neque non eos distinctio nihil voluptatum corrupti
perferendis sit dolore ducimus doloribus, repellat nam numquam. Eos veritatis odit dignissimos, quibusdam,
maiores molestias, minus quia maxime obcaecati suscipit amet est repudiandae doloribus iste quisquam voluptatum?
Tempora reiciendis officia est vel numquam et adipisci ipsum nihil recusandae error quo, labore, ad corrupti, ea
asperiores. Nisi non itaque expedita magnam hic rerum dolor eveniet sit quis debitis inventore atque, dolorum
amet similique nesciunt illum quo voluptatem ab, quos alias reprehenderit? Est cupiditate totam dolorum! Nihil
eius, quos harum, a recusandae, odio quis corporis obcaecati voluptates ut aut eveniet laboriosam. Ipsam quod
dolores cupiditate enim maxime saepe minima dignissimos id quisquam, facere ratione voluptatibus repellendus
impedit alias. Architecto hic necessitatibus sint voluptatum eaque accusantium sapiente temporibus autem
deserunt? Nulla eligendi ipsum odio dolor qui voluptatum distinctio necessitatibus illo hic. Officia
exercitationem placeat obcaecati sit repudiandae perspiciatis unde dolorum vel, reiciendis, ut delectus. Ducimus
tempora sit quo commodi sequi accusamus, nam perferendis cumque atque alias repellendus hic. Unde sint debitis
impedit pariatur, accusamus voluptates accusantium facilis fuga dolorem est nobis praesentium assumenda ipsum
aperiam asperiores? Id ad rem ut totam eius recusandae dolore ratione quas. Itaque iure doloribus ex, odio,
repellendus quidem fuga consectetur laborum laudantium, repudiandae vero esse quae. Suscipit reprehenderit
voluptate tempora harum ipsam amet ratione repellat reiciendis excepturi. Omnis eaque officiis quo, provident ad
enim!</p>
<a href="#top">Go Top</a>
</body>
</html>