-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintex.html
320 lines (262 loc) · 13 KB
/
intex.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
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!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">
<meta name="description" content="Top Ten Rabbit Breeds">
<meta name="keywords" content="Rabbits, Pets, Breeds">
<meta name="author" content="Stanislav Donev">
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" href="./styles/index.css">
<script src="https://kit.fontawesome.com/d8ed34b0e6.js" crossorigin="anonymous"></script>
<title>Rabbit Breeds</title>
</head>
<body>
<div id="container">
<!-- Header -->
<header>
<!-- Title -->
<div id="title">
<h1>Top 10 Popular Rabbit Breeds</h1>
<div id="hr"></div>
</div>
<div id="nav-notes">
<!-- Navigation -->
<nav>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li>
Rabbit Breeds:
<ol>
<li><a href="#holland_lop" accesskey="1">Holland Lop</a></li>
<li><a href="#mini_lop" accesskey="2">Mini Lop</a></li>
<li><a href="#dutch" accesskey="3">Dutch</a></li>
<li><a href="#lionhead" accesskey="4">Lionhead</a></li>
<li><a href="#french_lop" accesskey="5">French Lop</a></li>
<li><a href="#californian" accesskey="6">Californian</a></li>
<li><a href="#dwarf_papillon" accesskey="7">Dwarf Papillon</a></li>
<li><a href="#netherland_dwarf" accesskey="8">Netherland Dwarf</a></li>
<li><a href="#mini_rex" accesskey="9">Mini Rex</a></li>
<li><a href="#flemish_giant" accesskey="0">Flemish Giant</a></li>
</ol>
</li>
<li>Summary</li>
</ul>
</nav>
<!-- Notes -->
<div id="notes">
<dl>
<dt>
<!-- dt is said to be displayed as a block so it should be fine to put heading inside -->
<h3><i class="fa-solid fa-note-sticky"></i> Notes: </h3>
</dt>
<dd>📒As simple as this web page is - it should be fully responsive thanks to <a
href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/"
target="_blank">flexbox</a> with combination of media queries.</dd>
</dl>
</div>
</div>
</header>
<!-- Main -->
<main>
<article id="introduction">
<h2>Introduction</h2>
<p>
Are you looking to add a big-eared, hay-munching member to your family? While they require more
care
than many people would think, rabbits make great pets. Unlike dogs, they’re quiet and won’t bark
at
the
slightest noise. Unlike cats, they won’t wake you up at 6 a.m. demanding to be fed. Rabbits can
be
trained to do tricks and use the litter box, they know how to keep themselves clean, and they’re
affectionate little critters. In other words, rabbits are pawsome! There are several breeds of
rabbits,
each with their own endearing characteristics. Here are 10 of the most popular to help you find
your
new
adorable companion!
</p>
</article>
<article id="holland_lop" class="dark">
<div class="img-container">
<img src="./images/holland_lop.jpg" alt="Holland Lop">
</div>
<div class="info-container">
<h2>
Holland Lop
</h2>
<p>
The Holland Lop, developed in the Netherlands as a smaller version of the French Lop,
sports
cute
floppy ears that frame their large head. Add a friendly personality to the mix, and
you’ve
got a
breed that’s a sure winner! It’s easy to see why this breed, which comes in more than 30
colors,
is
one of the most popular around the world.
</p>
</div>
</article>
<article id="mini_lop">
<div class="info-container">
<h2>
Mini Lop
</h2>
<p>
Though a relatively small breed, the Mini Lop is actually larger than the Holland Lop. With
their stocky body, softball-sized head, and delightful lopped ears, there’s nothing small
about the appeal of this breed. The Mini Lop is as cuddly and as affectionate as they look,
making them a joy to have around the house.
</p>
</div>
<div class="img-container">
<img src="./images/mini_lop.jpg" alt="Holland Lop">
</div>
</article>
<article id="dutch" class="dark">
<div class="img-container">
<img src="./images/dutch.jpg" alt="Holland Lop">
</div>
<div class="info-container">
<h2>
Dutch
</h2>
<p>
Easily recognizable by their distinctive markings, the Dutch rabbit looks like they’re
wearing a white shirt and dark pants. Despite their name, this popular breed was actually
developed in England during the 1830s. Gentle and easygoing, the Dutch makes a wonderful
addition to the family for both first-time and experienced rabbit parents.
</p>
</div>
</article>
<article id="lionhead">
<div class="info-container">
<h2>
Lionhead
</h2>
<p>
With a magnificent mane around their head, the Lionhead rabbit is definitely hard to miss
despite their small size. The Lionhead only became an officially recognized breed in the US
in 2014, but their popularity has grown steadily thanks to their eye-catching looks and
lovable personality. Though energetic and playful, this breed will also accompany you while
you’re watching TV or reading a book.
</p>
</div>
<div class="img-container">
<img src="./images/lionhead.jpg" alt="Holland Lop">
</div>
</article>
<article id="french_lop" class="dark">
<div class="img-container">
<img src="./images/french_lop.jpg" alt="Holland Lop">
</div>
<div class="info-container">
<h2>
French Lop
</h2>
<p>
First introduced to the US in 1971, the French Lop is a large rabbit breed with long ears,
chubby cheeks, and a wide forehead. This heavy-boned breed typically weighs 5-6 kg at
adulthood, but don’t be intimidated by their massive size—the French Lop is known for being
a calm and good-natured breed.
</p>
</div>
</article>
<article id="californian">
<div class="info-container">
<h2>
Californian
</h2>
<p>
If you’re looking for a breed that loves to play, then the Californian is a furrific choice.
Though they may seem shy at first, this breed is a “people rabbit” whose personality will
shine with proper socialization. Almost completely white except for black markings on the
nose, ears, feet, and tail, the Californian enjoys both playtime and cuddle time.
</p>
</div>
<div class="img-container">
<img src="./images/californian.jpeg" alt="Holland Lop">
</div>
</article>
<article id="dwarf_papillon" class="dark">
<div class="img-container">
<img src="./images/dward_papillon.jpeg" alt="Holland Lop">
</div>
<div class="info-container">
<h2>
Dwarf Papillon
</h2>
<p>
“Papillon” means butterfly in French, and you’ll know a Dwarf Papillon when you see one
thanks to the butterfly marking on their nose. The Dwarf Papillon also has ears that
adorably stick up in the shape of a V and a spine marking that runs along their back. For a
leporine companion that’s strikingly cute, you can’t go wrong with this breed!
</p>
</div>
</article>
<article id="netherland_dwarf">
<div class="info-container">
<h2>
Netherland Dwarf
</h2>
<p>
Weighing in at only 2.5 lbs, the Netherland Dwarf is one of the smallest rabbit breeds. With
a brachycephalic head, short ears, and large eyes, there’s no dispute about their cuteness.
The Netherland Dwarf can be skittish, however, so they’re not recommended for young
children. But with the right family, this sweet little bunny will come out of their shell.
</p>
</div>
<div class="img-container">
<img src="./images/netherland_dwarf.jpg" alt="Holland Lop">
</div>
</article>
<article id="mini_rex" class="dark">
<div class="img-container">
<img src="./images/mini_rex.jpg" alt="Holland Lop">
</div>
<div class="info-container">
<h2>
Mini Rex
</h2>
<p>
Developed as a smaller version of the standard Rex, the Mini Rex is known for their plush
fur, just like their larger counterpart. It is said that petting a Mini Rex feels like
touching velvet; fortunately, their luxurious coat does not require a lot of maintenance!
Calm and friendly, this breed does well with children and retirees.
</p>
</div>
</article>
<article id="flemish_giant">
<div class="info-container">
<h2>
Flemish Giant
</h2>
<p>
The gentle giant of the rabbit world, the Flemish Giant is the one of the largest and oldest
recognized breeds. They can weigh up to 20 lbs, but as their nickname implies, they are
laid-back and well-mannered. Thus, despite their huge size, the Flemish Giant makes a
wonderful companion for first-time rabbit parents as well as families with kids of any age.
</p>
</div>
<div class="img-container">
<img src="./images/flemish_giant.jpg" alt="Holland Lop">
</div>
</article>
<!-- Back to top Image -->
<div id="back-to-top-div">
<a href="#container">
<img src="./images/backToTop.png" alt="Back to top icon" />
</a>
</div>
</main>
<!-- Footer -->
<footer>
Created by: Stanislav Donev ©
</footer>
</div>
</body>
</html>