-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
345 lines (291 loc) · 15.5 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
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
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cozy House</title>
<meta name="description" content="Shelter for pets in Boston">
<link rel="apple-touch-icon" sizes="180x180" href="icons/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon/favicon-16x16.png">
<link rel="manifest" href="icons/favicon/site.webmanifest">
<!-- <link rel="stylesheet" href="node_modules/modern-normalize/modern-normalize.css"> -->
<link rel="stylesheet" href="css/style.css">
<script defer src="./js/burger.js"></script>
<script defer src="./js/slider.js"></script>
<!-- <script defer src="./js/modal.js"></script> -->
</head>
<body class="main_page">
<header class="header">
<div class="container">
<div class="header-wrapper">
<a class="header-logo">
<h1 class="header-logo_title header-logo_title__main">Cozy House</h1>
<div class="header-logo_subtitle header-logo_subtitle__main">Shelter for pets in Boston</div>
</a>
<div class="header-burger burger">
<span></span><span></span><span></span>
</div>
<ul class="header-menu">
<li class="header-menu_item header-menu_item__inactive"><a class="header-menu_link">About the
shelter</a></li>
<li class="header-menu_item"><a href="./pets.html" class="header-menu_link">Our pets</a></li>
<li class="header-menu_item"><a href="#help" class="header-menu_link">Help the shelter</a></li>
<li class="header-menu_item"><a href="#footer" class="header-menu_link">Contacts</a></li>
</ul>
</div>
</div>
</header>
<main>
<section class="start" id="start">
<div class="container start-container">
<div class="start-wrapper">
<div class="start-content">
<h2 class="start-heading">Not only people<br>need a house
</h2>
<div class="start-descr">We offer to give a chance to a little and nice puppy with an extremely wide and
open
heart. He or she will love you more
than anybody else in the world, you will see!</div>
<a class="start-button" href="#pets">Make a friend</a>
</div>
<img src="./img/bg/start-screen-puppy.png" alt="puppy" class="start-bg">
</div>
</div>
</section>
<section class="about" id="about">
<div class="container">
<div class="about-wrapper">
<div class="about-content">
<h2 class="about-heading">About the shelter<br>“Cozy House”</h2>
<div class="about-article">
<p>Currently we have 121 dogs and 342 cats on our hands and statistics show that only 20% of them will
find a family. The
others will continue to live with us and will be waiting for a lucky chance to become dearly loved.</p>
<p>We feed our wards with the best food and make sure that they do not get sick, feel comfortable
(including
psychologically) and well. We are supported by 87 volunteers and 28 employees of various skill levels.
About 12% of the
animals are taken by the shelter staff. Taking care of the animals, they become attached to the pets and
would hardly
ever leave them alone.</p>
</div>
</div>
<img src="./img/bg/about-pets.png" alt="cat and dog" class="about-image">
</div>
</div>
</section>
<section class="pets" id="pets">
<div class="container pets-container">
<h2 class="pets-heading">Our friends who
<br>
are looking for a house
</h2>
<div class="pets-slider slider">
<div class="slider_arrow slider_arrow__left slider_arrow__active">
<svg width="14" height="6" viewbox="0 0 14 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2V4H3V6L0 3L3 0V2H14Z" fill="#292929" />
</svg>
</div>
<div class="slider-wrapper">
<!-- <div class="slider-item slider-item_01 slider-item_active">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-katrine-01.png" alt="katrine">
<div class="slider-item_name slider-item_element">katrine</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_02 slider-item_active">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-jennifer-02.png" alt="jennifer">
<div class="slider-item_name slider-item_element">jennifer</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_03 slider-item_active">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-woody-03.png" alt="woody">
<div class="slider-item_name slider-item_element">woody</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_04 slider-item_active">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-sophia-04.png" alt="sophia">
<div class="slider-item_name slider-item_element">sophia</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_05 slider-item_active">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-timmy-05.png" alt="timmy">
<div class="slider-item_name slider-item_element">timmy</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_06 slider-item_active">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-charly-06.png" alt="charly">
<div class="slider-item_name slider-item_element">charly</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_07">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-scarlet-07.png" alt="scarlet">
<div class="slider-item_name slider-item_element">scarlett</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div>
<div class="slider-item slider-item_08">
<img class="slider-item_img slider-item_element" src="./img/pets/pets-freddie-08.png" alt="freddie">
<div class="slider-item_name slider-item_element">freddie</div>
<a class="slider-item_button slider-item_element" href="#">Learn more</a>
</div> -->
</div>
<div class="slider_arrow slider_arrow__rigth slider_arrow__active">
<svg width="14" height="6" viewbox="0 0 14 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 4V2L11 2V0L14 3L11 6V4L0 4Z" fill="#292929" />
</svg>
</div>
</div>
<a class="pets-button" href="./pets.html">
Get to know the rest
</a>
</div>
</section>
<section class="help" id="help">
<div class="container help-container">
<h2 class="help-heading">How you can help
<br>
our shelter
</h2>
<div class="help-wrapper">
<div class="help-item help-item_01">
<img class="help-item_icon help-item_element" src="./icons/help/icon-pet-food-01.svg" alt="pet food">
<div class="help-item_title help-item_element">Pet food</div>
</div>
<div class="help-item help-item_02">
<img class="help-item_icon help-item_element" src="./icons/help/icon-transportation-02.svg"
alt="Transportation">
<div class="help-item_title help-item_element">Transportation</div>
</div>
<div class="help-item help-item_03">
<img class="help-item_icon help-item_element" src="./icons/help/icon-toys-03.svg" alt="Toys">
<div class="help-item_title help-item_element">Toys</div>
</div>
<div class="help-item help-item_04">
<img class="help-item_icon help-item_element" src="./icons/help/icon-bowls-and-cups-04.svg"
alt="Bowls and cups">
<div class="help-item_title help-item_element">Bowls and cups</div>
</div>
<div class="help-item help-item_05">
<img class="help-item_icon help-item_element" src="./icons/help/icon-shampoos-05.svg" alt="Shampoos">
<div class="help-item_title help-item_element">Shampoos</div>
</div>
<div class="help-item help-item_06">
<img class="help-item_icon help-item_element" src="./icons/help/icon-vitamins-06.svg" alt="vitamins">
<div class="help-item_title help-item_element">Vitamins</div>
</div>
<div class="help-item help-item_07">
<img class="help-item_icon help-item_element" src="./icons/help/icon-medicines-07.svg" alt="Medicines">
<div class="help-item_title help-item_element">Medicines</div>
</div>
<div class="help-item help-item_08">
<img class="help-item_icon help-item_element" src="./icons/help/icon-collars-leashes-08.svg" alt="Collars">
<div class="help-item_title help-item_element">Collars / leashes</div>
</div>
<div class="help-item help-item_09">
<img class="help-item_icon help-item_element" src="./icons/help/icon-sleeping-area-09.svg"
alt="Sleeping areas">
<div class="help-item_title help-item_element">Sleeping areas</div>
</div>
</div>
</div>
</section>
<section class="donation" id="donation">
<div class="container donation-container">
<div class="donation-content">
<h2 class="donation-heading">You can also
<br>
make a donation
</h2>
<h3 class="donation-subtitle">Name of the bank / Type of bank account</h3>
<div class="donation-card">
<img src="./icons/basic/credit-card.svg" alt="credit card icon" class="donation-card_icon">
<a class="donation-card_number">8380 2880 8028 8791 7435</a>
</div>
<div class="donation-descr">Legal information and lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas a ipsum at libero sagittis
dignissim sed ac diam. Praesent ultrices maximus tortor et vulputate. Interdum et malesuada fames ac ante
ipsum primis
in faucibus.</div>
</div>
<img src="./img/bg/donation-dog.png" alt="puppy" class="donation-img">
</div>
</section>
</main>
<footer class="footer" id="footer">
<div class="container footer-container">
<div class="footer-contentbox footer-contentbox_1">
<h3 class="footer-contentbox_heading">For questions and suggestions</h3>
<a class="footer-contentbox_line" href="mailto:[email protected]" target="_blank">
<img src="./icons/basic/icon-email.svg" alt="e-mail icon" class="footer-contentbox_img">
<div class="footer-contentbox_descr">[email protected]</div>
</a>
<a class="footer-contentbox_line" href="tel:+136745677554" target="_blank">
<img src="./icons/basic/icon-phone.svg" alt="phone icon" class="footer-contentbox_img">
<div class="footer-contentbox_descr">+13 674 567 75 54</div>
</a>
</div>
<div class="footer-contentbox footer-contentbox_2">
<h3 class="footer-contentbox_heading">We are waiting for your visit</h3>
<a class="footer-contentbox_line" href="https://maps.app.goo.gl/6k7sxaMmxZqAUymcA" target="_blank"
rel="noopener noreferrer">
<img src="./icons/basic/pin.svg" alt="pin icon" class="footer-contentbox_img">
<div class="footer-contentbox_descr">1 Central Street, Boston
<br>
(entrance from the store)
</div>
</a>
<a class="footer-contentbox_line" href="https://maps.app.goo.gl/6k7sxaMmxZqAUymcA" target="_blank"
rel="noopener noreferrer">
<img src="./icons/basic/pin.svg" alt="pin icon" class="footer-contentbox_img">
<div class="footer-contentbox_descr">18 South Park, London</div>
</a>
</div>
<img src="./img/bg/footer-puppy.png" alt="puppy" class="footer-img">
</div>
</footer>
<aside id="burgerMenu" class="">
<div class="burger-menu-overlay"></div>
<div class="burger-menu">
<ul class="burger-menu-list">
<li class="burger-menu-item burger-menu-item__inactive"><a class="burger-menu_link">About the
shelter</a></li>
<li class="burger-menu-item"><a href="./pets.html" class="burger-menu_link">Our pets</a></li>
<li class="burger-menu-item"><a href="#help" class="burger-menu_link">Help the shelter</a></li>
<li class="burger-menu-item "><a href="#footer" class="burger-menu_link">Contacts</a></li>
</ul>
</div>
</aside>
<!-- <div class="modal">
<div class="modal-window">
<div class="modal-close"><svg width="52" height="52" viewbox="0 0 52 52" fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="50" height="50" rx="25" stroke="#F1CDB3" stroke-width="2" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M27.4262 26L31.7046 21.7216C32.0985 21.3277 32.0985 20.6892 31.7046 20.2954C31.3108 19.9016 30.6723 19.9016 30.2785 20.2954L26 24.5739L21.7215 20.2954C21.3276 19.9015 20.6892 19.9015 20.2953 20.2954C19.9016 20.6892 19.9016 21.3277 20.2953 21.7215L24.5738 26L20.2953 30.2785C19.9016 30.6723 19.9016 31.3108 20.2953 31.7046C20.6892 32.0985 21.3276 32.0985 21.7215 31.7046L26 27.4261L30.2785 31.7046C30.6723 32.0985 31.3108 32.0985 31.7046 31.7046C32.0985 31.3108 32.0985 30.6723 31.7046 30.2785L27.4262 26Z"
fill="#292929" />
</svg></div>
<div class="modal-wrapper">
<img src="./img/pets/pets-freddie.png" alt="freddie" class="modal-img">
<div class="modal-content">
<h3 class="modal-content_header">freddie</h3>
<div class="modal-content_subheader">
<span class="modal-content_type">Dog</span>
<span class="modal-content_dash"> - </span>
<span class="modal-content_breed">Labrador</span>
</div>
<div class="modal-content_descr">Jennifer is a sweet 2 months old Labrador that is patiently waiting to find
a new forever home. This girl really enjoys
being able to go outside to run and play, but won't hesitate to play up a storm in the house if she has
all of her
favorite toys.</div>
<div class="modal-content_additional">Age: <span>2 months</span></div>
<div class="modal-content_additional">Inoculations: <span>none</span></div>
<div class="modal-content_additional">Diseasese: <span>none</span></div>
<div class="modal-content_additional">Parasites: <span>none</span></div>
</div>
</div>
</div>
</div> -->
<div></div>
</body>
</html>