-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
226 lines (219 loc) · 9.39 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
<!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>Cat care</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header id="home" class="header">
<nav class="header__menu menu">
<a href="#home" class="menu__item"> <b>Home</b></a>
<a href="#sign-up" class="menu__item"> <b>Sign Up</b></a>
<a href="#contacts" class="menu__item"> <b>Contacts</b></a>
<a href="#" class="menu__item clock"></a>
<hr>
</nav>
<div class="header__info">
<h1 class="header__title">How to take care of your cat?</h1>
<p class="header__text">There’s nothing cuter than watching a cat chase a patch of light, using their paws to
knead
as if they’re baking
bread, or climbing into everything and anything. That’s why the internet is practically made of cats, with
millions
of videos to show us just how adorable and funny these felines can be.</p>
<br>
<video class="header__sleeping-cat" loop autoplay muted controls src="video/cat-is-sleeping.mp4"></video>
<br>
<p class="header__text">But if you’re planning on adopting a cat or kitten, <b>what’s the best way of caring for
your fluffy friend?</b>
</p>
<hr>
</div>
</header>
<main>
<section class="care-methods">
<div class="care-methods__background-image">
<div class="care-method">
<div class="care-method__companionship">
<h2>1. Provide plenty of human companionship</h2>
<p>Cats need play sessions to engage their minds and exercise their bodies. We all know cats enjoy a good
<a target="_blank" href="https://rozetka.com.ua/trixie_4011905457352/p10555920/">catnip-filled
mouse</a>.
Here are some other fun ways to play with your cat:
</p>
<ul>
<li>Play hide-and-seek</li>
<li>Have a singing contest</li>
<li>Teach it a trick</li>
<li>Give it an empty box</li>
</ul>
<img src="img/cat-in-box.jpg" alt="cat is sitting in a box">
</div>
</div>
<div class="care-method">
<div class="care-method__meals">
<h2>2. Provide regular, suitable meals with a constant supply of fresh water</h2>
<p>The number of meals a cat eats per day depends completely on the family schedule. Cats should eat <b>at
least
two
meals each day</b>, about 12 hours apart.
Canned food is more beneficial than dry food for several reasons. But, it is also more expensive and
messier
to
feed.</p>
<img src="img/cat-eating-out-of-bowl.jpg" alt="cat is eating">
</div>
</div>
<div class="care-method">
<div class="care-method__litter-tray">
<h2>3. Provide the cat with outdoor access or be prepared to empty and clean a litter tray on a daily
basis
</h2>
<p>The best way to clean a litter box is to dump the entire box and soak it in hot water for a few minutes
<b>at
least once a week</b>.
There are different types of fillers for litter tray:
</p>
<ul>
<li>Wood fillers</li>
<li>Fillers based on minerals</li>
<li>Silica gel fillers</li>
</ul>
<img src="img/cat-near-litter-tray.jpg" alt="cat is near litter tray">
</div>
</div>
<div class="care-method">
<div class="care-method__grooming">
<h2>4. Groom it regularly. Longhaired cats require daily grooming</h2>
<p>The process of grooming your cat should be fun for you and for them. Try to schedule a grooming session
for
a
time when your cat is already calm and sleepy,
such as after dinner. You should also be in a good mood — your cat will notice if you’re grumpy or
stressed
during
the grooming session, and this can stress
them out in turn.</p>
<a target="_blank" href="https://www.youtube.com/watch?v=YwyLBj1ldW0"><img width="500"
src="img/cat-grooming.jpeg" alt="the cat's fur is combed"></a>
</div>
</div>
<div class="care-method">
<div class="care-method__vaccination">
<h2>5. Vaccinate against the major feline diseases regularly</h2>
<p>Vaccinations are a critical part of preventive health care for your cat. Even indoor cats can be
exposed to
serious and potentially fatal diseases because many of the diseases that fit within the normal vaccine
schedule
are airborne.
An open window is all it takes to expose your pet.With a series of cat vaccinations, you can ensure that
your
cat
is protected and safe, no matter what the future holds.</p>
</div>
</div>
<div class="care-method">
<div class="care-method__fleas">
<h2>6. Provide treatment for fleas</h2>
<p>Possible options for treating <i>fleas</i> in cats can include:</p>
<ul>
<li> <a target="_blank" href="https://rozetka.com.ua/ua/animall_4820150202835/p166757977/">Collar
against
fleas</a></li>
<li> <a target="_blank" href="https://rozetka.com.ua/ua/289187533/p289187533/">Drops against fleas</a>
</li>
</ul>
</div>
</div>
<div class="care-method">
<div class="care-method__illness">
<h2>7. Take the cat to the vet when it shows any sign of illness</h2>
<p> Here are symptoms that should never be ignored:</p>
<ul>
<li>Signs of obvious distress</li>
<li>Abnormal litter box behavior </li>
<li>Repeated vomiting</li>
<li>Overwhelming fatigue</li>
<li>Sudden change in appetite</li>
<li>Coughing or other breathing changes</li>
</ul>
</div>
</div>
</div>
</section>
<hr>
<section class="cat-carousel">
<svg class="btn-prev" viewBox="0 0 30 30">
<defs>
<path
d="M19.533 15l-9.1-9.45c-.577-.6-.577-1.5 0-2.1.578-.6 1.445-.6 2.023 0l10.11 10.5c.29.3.434.75.434 1.05 0 .45-.144.75-.433 1.05l-10.111 10.5c-.29.3-.578.45-1.012.45-.433 0-.722-.15-1.01-.45-.578-.6-.578-1.5 0-2.1l9.1-9.45z"
id="a-1672905079094"></path>
</defs>
<use fill-rule="nonzero" opacity=".8" xlink:href="#a-1672905079094"></use>
</svg>
<div class="carousel-slide-container">
</div>
<svg class="btn-next" viewBox="0 0 30 30">
<defs>
<path
d="M19.533 15l-9.1-9.45c-.577-.6-.577-1.5 0-2.1.578-.6 1.445-.6 2.023 0l10.11 10.5c.29.3.434.75.434 1.05 0 .45-.144.75-.433 1.05l-10.111 10.5c-.29.3-.578.45-1.012.45-.433 0-.722-.15-1.01-.45-.578-.6-.578-1.5 0-2.1l9.1-9.45z"
id="a-1672905079094"></path>
</defs>
<use fill-rule="nonzero" opacity=".8" xlink:href="#a-1672905079094"></use>
</svg>
</section>
<hr>
<section class="form">
<br>
<form id="sign-up"
action="https://veterynar.lviv.ua/?gclid=CjwKCAiA8OmdBhAgEiwAShr4087AfSbuHxfv3_aR_fZ_s4JNz1Q7Ww8DnpdVb__FsxygPzT0akWNRxoCDpIQAvD_BwE">
<h2 class="form__title">Sign up for a visit to the veterinarian:</h2>
<div class="form__personal-data">
<input class="form__name" required type="text" placeholder="Name*">
<input class="form__surname" required type="text" placeholder="Surname*">
<input class="form__email" required type="email" placeholder="Email*">
<input class="form__number" required type="tel" placeholder="Phone Number*">
</div>
<p><b>Gender of the cat:</b></p>
<p>
<label for="male">
<input id="male" type="radio" name="gender" value="male" checked>
Male
</label>
<label for="female">
<input id="female" type="radio" name="gender" value="female"> Female
</label>
</p>
<div class="form__agreements">
<p>
<label>
<input required type="checkbox" name="agreement" value="agree to the processing of personal information">
I
agree
to the processing of my personal information
</label>
</p>
<p>
<label>
<input required type="checkbox" name="agreement" value="agree to receive emails">I agree to receive emails
</label>
</p>
</div>
<p><button class="form__submit" type="submit">Sign up</button></p>
</form>
<br>
</section>
</main>
<hr>
<footer id="contacts">
<p class="contacts__title"><b>Contacts:</b></p>
<a class="contacts__tel" href="tel:067-785-9386">067-785-9386</a>
<a class="contacts__tel" href="tel:096-671-9993">096-671-9993</a>
</footer>
<script src="js/clock.js"></script>
<script src="js/cat-carousel.js"></script>
</body>
</html>