-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
317 lines (286 loc) · 17.1 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
<!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="format-detection" content="telephone=no">
<title>KNIGHT'S SOFT SPOT</title>
<link rel="shortcut icon" href="img/favicon.ico">
<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=Gabriela&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/styleP1.css" />
</head>
<body>
<div class="wrapper">
<div class="background"></div>
<header class="header h-not-active">
<div class="header__container __container">
<div class="header__left" title="Main page">
<a href=".">
<img src="img/logo.png" alt="logo" class="header__logo">
</a>
</div>
<nav class="header__right">
<ul class="header__list hl-not-active">
<li class="header__item" title="Main page (current)">
<h3 class="header__link link link-dark">
<a href=".">About us</a>
</h3>
</li>
<li class="header__item" title="Gallery of the shelter">
<h3 class="header__link link link-dark">
<a href="pages/page2.html">Gallery</a>
</h3>
</li>
<li class="header__item" title="Statistics of the shelter">
<h3 class="header__link link link-dark">
<a href="pages/page3.html">Statistics</a>
</h3>
</li>
<li class="header__item" title="Form for donation">
<h3 class="header__link link link-dark">
<a href="pages/page4.html">Donation</a>
</h3>
</li>
</ul>
</nav>
<div class="header__burger b-not-active">
<span class="burger__bar bb-not-active"></span>
<span class="burger__bar bb-not-active"></span>
<span class="burger__bar bb-not-active"></span>
</div>
</div>
</header>
<div class="main">
<div class="main__container">
<section class="block1 blockBg">
<div class="block1__background blockBg__background">
<div class="block1__container blockBg__container __container">
<article class="block1__text blockBg__text">
<h1 class="block1__name">KNIGHT'S SOFT SPOT</h1>
<div class="block1__separator"></div>
<h3 class="block1__phrase1">Even knights can't resist pets</h3>
<h3 class="block1__phrase2">Shelter a new friend in your castle</h3>
</article>
</div>
</div>
</section>
<section class="block2 block">
<div class="block2__container block__container __container">
<article class="block2__text block__text">
<h2 class="block2__title">Who we are</h2>
<div class="block2__body block__body">
<p class="block2__paragraph">
Set up in 2007 by Illia Notleedskiy, “KNIGHT'S SOFT SPOT” is a shelter for cats and
dogs
in Ukraine. It is located in Nameplace village, Kyiv region. We pick up cats and
dogs on
the streets and give them new homes. Our workers pay special attention to animals’
health and conditions in which they live.
</p>
</div>
</article>
</div>
</section>
<section class="block3 blockBg">
<div class="block3__background blockBg__background">
<div class="block3__container blockBg__container __container">
<article class="block3__text blockBg__text">
<h2 class="block3__title">What we do</h2>
<div class="block3__body blockBg__body">
<p class="block3__paragraph">
“KNIGHT'S SOFT SPOT” provides a home for approximately 700 animals. We feed them
every
day, give all the necessary medicine and try to give attention to every pet. The
conditions are quite good now and we always try to make it better.
</p>
<aside>
<p class="block3__paragraph">
The shelter helps to connect the pet and the new owner. We know everything
about
our
cats and dogs and we are happy to share this experience to those who are
interested
in
adoption. Some animals stay for too long in “KNIGHT'S SOFT SPOT” and to
change
it we
need your help! (read the next part)
</p>
</aside>
</div>
</article>
</div>
</div>
</section>
<section class="block4 block">
<div class="block4__container block__container __container">
<article class="block4__text block__text">
<h2 class="block4__title">What you can do</h2>
<div class="block4__main">
<div class="block4__item1 block4__item">
<figure class="block4__pic">
<img class="block4__img" src="img/img13.jpg" alt="cat and dog image">
</figure>
</div>
<div class="block4__item2 block4__item">
<p class="block4__paragraph">
1. The first variant to help us is to click on the “Donation” section on
the
top
right
corner of the webpage and follow the steps. The money will be spent on
food,
medicine, maintenance of the building and heating when the temperature
falls.
</p>
</div>
<div class="block4__item3 block4__item">
<p class="block4__paragraph">
2. Another option is even better! Just come to us in person and adopt a
pet.
Sounds
easy, right? Our workers will guide you and help to pick up cats and
dogs
which
match you the best.
</p>
</div>
<div class="block4__item4 block4__item">
<p class="block4__paragraph">
3. You can also help by providing the food, equipment or a couple of
extra
hands
for us. Volunteer work is welcome. Do not hesitate to contact the
shelter
using
contact information under.
</p>
</div>
</div>
</article>
</div>
</section>
<section class="block5 blockBg">
<div class="block5__background blockBg__background">
<div class="block5__container blockBg__container __container">
<article class="block5__text blockBg__text">
<h2 class="block5__title">Other shelters</h2>
<p class="block5__paragraph">
There are many others which also need your help. <br>Here you can find some of
them:
</p>
<ul class="block5__list">
<li class="block5__element">
<div class="block5__item"
title="Facebook group of the shelter “Дай лапу, друг”">
<h3 class="block5__option link link-light">
<a href="https://www.facebook.com/groups/daylapu" target="_blank">
Дай лапу, друг
</a>
</h3>
</div>
</li>
<li class="block5__element">
<div class="block5__item"
title="Facebook group of the shelter “КП Центр поводження з тваринами”">
<h3 class="block5__option link link-light">
<a href="https://www.facebook.com/animals.kharkov/?ref=page_internal"
target="_blank">
КП Центр <br>поводження <br>з тваринами
</a>
</h3>
</div>
</li>
<li class="block5__element">
<div class="block5__item"
title="Facebook group of the shelter “Промінчик надіі”">
<h3 class="block5__option link link-light">
<a href="https://www.facebook.com/groups/737331146448350"
target="_blank">Промінчик надіі</a>
</h3>
</div>
</li>
<li class="block5__element">
<div class="block5__item"
title="Website of the shelter “Gostomel Shelter”">
<h3 class="block5__option link link-light">
<a href="https://www.gostomelshelter.com/" target="_blank">Gostomel
Shelter</a>
</h3>
</div>
</li>
<li class="block5__element">
<div class="block5__item"
title="Instagram page of the shelter “Бест Френдз”">
<h3 class="block5__option link link-light">
<a href="https://www.instagram.com/priiut_best_friends/?utm_source=ig_embed&ig_rid=cbf9bb2e-fcef-4a45-bc14-7f5de7e9583f"
target="_blank">
Бест Френдз
</a>
</h3>
</div>
</li>
<li class="block5__element">
<div class="block5__item"
title="Website of the shelter “В добрі руки”">
<h3 class="block5__option link link-light">
<a href="https://dobri-ruky.com.ua/" target="_blank">В добрі руки</a>
</h3>
</div>
</li>
<li class="block5__element">
<div class="block5__item" title="Website of the shelter “Сіріус”">
<h3 class="block5__option link link-light">
<a href="https://dogcat.com.ua/en" target="_blank">Сіріус</a>
</h3>
</div>
</li>
</ul>
</article>
</div>
</div>
</section>
<section class="block6 block">
<div class="block6__container block__container __container">
<article class="block6__text block__text">
<h2 class="block6__title">Contacts</h2>
<div class="block6__body block__body">
<p class="block6__paragraph">
Address: Ukraine 1717 Kyiv region, Nameplace village, Alsonameplace street 71a.
</p>
<p class="block6__paragraph">
Opening hours: <br>Monday-Saturday: 9:00-17:00.<br> Sunday: 9:00-12:00.
</p>
<p class="block6__paragraph">
Bank account number: 00000000-00000000
</p>
</div>
</article>
</div>
</section>
</div>
</div>
<footer class="footer">
<div class="footer__container __container">
<h3 class="footer__text link link-dark" title="GitHub account of the creator">
<a href="https://github.com/leedskiy" class="footer__link" target="_blank">
Website by Illia Takhtamyshev
</a>
</h3>
</div>
</footer>
<div class="SBtn SBtn-not-active">
<div class="SBtn__elem1 SBtn__elem"></div>
<div class="SBtn__elem2 SBtn__elem"></div>
</div>
<div class="overlay overlay-not-active"></div>
</div>
<script src="js/script.js"></script>
<script src="js/scriptP1.js"></script>
<script src="js/scriptSBtn.js"></script>
</body>
</html>