-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
327 lines (306 loc) · 12.2 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
<!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" />
<link rel="stylesheet" href="normalize.css" />
<link rel="stylesheet" href="main-page-style.css" />
<link rel="stylesheet" href="./pages/style.css" />
<title>SHELTER</title>
</head>
<body>
<div class="container">
<div class="bg-container">
<header>
<div class="header">
<a href="#">
<div class="logo">
<h1 class="logo-title">Cozy House</h1>
<span class="logo-subtitle">Shelter for pets in Boston</span>
</div>
</a>
<nav class="nav hide">
<ul class="nav-list">
<li class="nav-item">
<a href="#about" class="nav-link active">About the shelter</a>
</li>
<li class="nav-item">
<a href="./pages/pets/index.html" class="nav-link"
>Our pets</a
>
</li>
<li class="nav-item">
<a href="#help" class="nav-link">Help the shelter</a>
</li>
<li class="nav-item nav-item-contacts">
<a href="#contacts" class="nav-link">Contacts</a>
</li>
</ul>
</nav>
<div class="hamburger">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
</div>
</header>
<section class="start-screen">
<div class="start-screen-content">
<div class="start-screen-text-button">
<h2 class="start-screen-text">Not only people need a house</h2>
<p class="paragraph start-screen-subtext">
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!
</p>
<button
class="start-screen-button"
onclick="window.location.href = '#pets';"
>
Make a friend
</button>
</div>
</div>
<div class="start-screen-puppy">
<img
src="../../assets/images/start-screen-puppy.png"
class="img-puppy"
alt="Puppy"
/>
</div>
</section>
</div>
<main>
<section class="about">
<div class="about-content">
<div class="image-about-pets"></div>
<div class="about-text">
<h3 class="about-h3">About the shelter “Cozy House”</h3>
<p class="paragraph about-p-1">
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 class="paragraph about-p-2">
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>
</section>
<section id="pets" class="pets">
<div class="pets-content">
<h3 class="pets-heading">
Our friends who <br />
are looking for a house
</h3>
<div class="pets-slider">
<button class="button-arrow slider-left-arrow">
<span class="left-arrow"></span>
</button>
<div class="slider-track"></div>
<button class="button-arrow slider-right-arrow">
<span class="right-arrow"></span>
</button>
</div>
<button
class="button_primary"
onclick="window.location.href = '../pages/pets/index.html';"
>
<span class="get-to-know">Get to know the rest</span>
</button>
</div>
</section>
<!-- MODAL POPUP -->
<div class="modal" id="modal">
<div class="modal-content" id="modal-content">
<button class="modal-close-button" id="close-button">
<svg fill="none">
<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"
/>
<rect
class="rect"
x="1"
y="1"
width="50"
height="50"
rx="25"
stroke="#F1CDB3"
stroke-width="2"
/>
</svg>
</button>
<img class="modal-image" />
<div class="modal-pet-info">
<h3 class="pet-name"></h3>
<h4 class="pet-type-breed"></h4>
<h5 class="pet-description"></h5>
<div class="modal-pet-info-list">
<ul>
<li class="modal-pet-info_label">
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
fill="none"
>
<circle cx="2" cy="2" r="2" fill="#F1CDB3" />
</svg>
Age:
<span id="pet-age-value"></span>
</li>
<li class="modal-pet-info_label">
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
fill="none"
>
<circle cx="2" cy="2" r="2" fill="#F1CDB3" />
</svg>
Inoculations: <span id="pet-inoculations-value"></span>
</li>
<li class="modal-pet-info_label">
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
fill="none"
>
<circle cx="2" cy="2" r="2" fill="#F1CDB3" />
</svg>
Diseases: <span id="pet-diseases-value"></span>
</li>
<li class="modal-pet-info_label">
<svg
xmlns="http://www.w3.org/2000/svg"
width="4"
height="4"
viewBox="0 0 4 4"
fill="none"
>
<circle cx="2" cy="2" r="2" fill="#F1CDB3" />
</svg>
Parasites: <span id="pet-parasites-value"></span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- END of MODAL POPUP -->
<section id="help" class="help">
<div class="help-content">
<h3 class="help-heading">How you can help our shelter</h3>
<div class="help-list">
<div class="pet-food img-pet-food help-list-card">
<h3 class="help-icons-text">Pet food</h3>
</div>
<div class="transportation help-list-card">
<h3 class="help-icons-text">Transportation</h3>
</div>
<div class="toys help-list-card">
<h3 class="help-icons-text">Toys</h3>
</div>
<div class="bowls help-list-card">
<h3 class="help-icons-text">Bowls and cups</h3>
</div>
<div class="shampoo help-list-card">
<h3 class="help-icons-text">Shampoos</h3>
</div>
<div class="vitamins help-list-card">
<h3 class="help-icons-text">Vitamins</h3>
</div>
<div class="med help-list-card">
<h3 class="help-icons-text">Medicines</h3>
</div>
<div class="collars help-list-card">
<h3 class="help-icons-text">Collars / leashes</h3>
</div>
<div class="sleeping help-list-card">
<h3 class="help-icons-text">Sleeping areas</h3>
</div>
</div>
</div>
</section>
<section class="donation">
<div class="donation-content">
<div class="donation-dog"></div>
<div class="donation-text">
<h3 class="donation-h3">You can also make a donation</h3>
<span class="donation-h5"
>Name of the bank / Type of bank account</span
>
<div class="credit-card">
<div class="credit-card-content">
<div class="credit-card-svg"></div>
<a href="#no-link">
<h4 class="donation-h4">8380 2880 8028 8791 7435</h4>
</a>
</div>
</div>
<p class="legal">
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.
</p>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-content">
<div id="contacts" class="contacts">
<h3 class="contacts-title">For questions and suggestions</h3>
<a href="mailto:[email protected]">
<div class="mail">
<div class="mail-icon"></div>
<span class="mail-text"> [email protected]</span>
</div>
</a>
<a href="tel:+136745677554">
<div class="phone">
<div class="phone-icon"></div>
<span class="phone-text">+13 674 567 75 54</span>
</div>
</a>
</div>
<div class="locations">
<h3 class="locations-title">We are waiting for your visit</h3>
<a href="https://goo.gl/maps/iaQMo8v49jvpLNNs5" target="_blank">
<div class="location-link-1">
<div class="location-link-icon"></div>
<h4 class="location-link-text">
1 Central Street, Boston (entrance from the store)
</h4>
</div>
</a>
<a href="https://goo.gl/maps/5V2ZLroh58DJoU1FA" target="_blank">
<div class="location-link-2">
<div class="location-link-icon"></div>
<h4 class="location-link-text">18 South Park, London</h4>
</div>
</a>
</div>
<div class="footer-puppy"></div>
</div>
</footer>
</div>
<script type="module" src="./pages/script.js"></script>
<script type="module" src="./slider.js"></script>
</body>
</html>