-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·199 lines (197 loc) · 8.97 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
<!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>High Paw!</title>
<link rel="stylesheet" href="css/main.css" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous"
/>
</head>
<body>
<section class="top">
<nav class="navbar">
<ul>
<li class="nav-link"><a href="index.html">Home</a></li>
<li class="nav-link"><a href="about.html">About</a></li>
<li class="nav-link"><a href="contact.html">Contact</a></li>
<svg
class="menu"
viewBox="0 0 48 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z"
fill="black"
/>
</svg>
</ul>
</nav>
</section>
<aside>
<svg
class="close"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.5 0.25C13.2861 0.25 10.1443 1.20305 7.47199 2.98862C4.79969 4.77419 2.71689 7.31209 1.48697 10.2814C0.257041 13.2507 -0.0647633 16.518 0.562247 19.6702C1.18926 22.8224 2.73692 25.7179 5.00952 27.9905C7.28213 30.2631 10.1776 31.8108 13.3298 32.4378C16.482 33.0648 19.7493 32.743 22.7186 31.513C25.6879 30.2831 28.2258 28.2003 30.0114 25.528C31.797 22.8557 32.75 19.7139 32.75 16.5C32.75 14.366 32.3297 12.2529 31.5131 10.2814C30.6964 8.30985 29.4994 6.51847 27.9905 5.00952C26.4815 3.50056 24.6902 2.3036 22.7186 1.48696C20.7471 0.670319 18.634 0.25 16.5 0.25ZM20.9038 18.5963C21.0561 18.7473 21.177 18.927 21.2595 19.1251C21.342 19.3231 21.3844 19.5355 21.3844 19.75C21.3844 19.9645 21.342 20.1769 21.2595 20.3749C21.177 20.573 21.0561 20.7527 20.9038 20.9038C20.7527 21.0561 20.573 21.177 20.3749 21.2594C20.1769 21.3419 19.9645 21.3844 19.75 21.3844C19.5355 21.3844 19.3231 21.3419 19.1251 21.2594C18.927 21.177 18.7473 21.0561 18.5963 20.9038L16.5 18.7913L14.4038 20.9038C14.2527 21.0561 14.073 21.177 13.8749 21.2594C13.6769 21.3419 13.4645 21.3844 13.25 21.3844C13.0355 21.3844 12.8231 21.3419 12.6251 21.2594C12.427 21.177 12.2473 21.0561 12.0963 20.9038C11.9439 20.7527 11.8231 20.573 11.7406 20.3749C11.6581 20.1769 11.6156 19.9645 11.6156 19.75C11.6156 19.5355 11.6581 19.3231 11.7406 19.1251C11.8231 18.927 11.9439 18.7473 12.0963 18.5963L14.2088 16.5L12.0963 14.4038C11.7903 14.0978 11.6184 13.6827 11.6184 13.25C11.6184 12.8173 11.7903 12.4022 12.0963 12.0963C12.4023 11.7903 12.8173 11.6184 13.25 11.6184C13.6827 11.6184 14.0978 11.7903 14.4038 12.0963L16.5 14.2088L18.5963 12.0963C18.9023 11.7903 19.3173 11.6184 19.75 11.6184C20.1827 11.6184 20.5978 11.7903 20.9038 12.0963C21.2098 12.4022 21.3817 12.8173 21.3817 13.25C21.3817 13.6827 21.2098 14.0978 20.9038 14.4038L18.7913 16.5L20.9038 18.5963Z"
fill="black"
/>
</svg>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</aside>
<section class="hero">
<div class="b1">
<h1>High Paw! <i class="fas fa-paw"></i></h1>
<h2>a cats-friendly shelter and more...</h2>
<p>
Here you can find all the help that you need, in almost all
cat-related topics! From cat adoption to a healthcare - we have it
all!
</p>
</div>
</section>
<section class="s1">
<form action="https://httpbin.org/anything" method="post" id="form">
<h2>Sign up</h2>
<div class="name">
<label for="Name"><i class="fas fa-file-signature"></i>Name</label>
<input
type="text"
name="Name"
id="Name"
required
placeholder="User name"
/>
</div>
<div class="pass">
<label for="Password"><i class="fas fa-key"></i>Password</label>
<input type="password" name="Password" id="Password" required />
</div>
<div class="mail">
<label for="E-mail"><i class="fas fa-at"></i>E-mail address</label>
<input
type="email"
id="E-mail"
required
placeholder="Ex. [email protected]"
/>
</div>
<div class="rest">
<p>
Please choose what topic you are interested in and we will gladly
help you with all the information!
</p>
<div>
<label for="adoption">apply for an adoption</label>
<input type="checkbox" name="adoption" id="adoption" />
</div>
<div>
<label for="rescurer">become a rescurer</label>
<input type="checkbox" name="rescurer" id="rescurer" />
</div>
<div>
<label for="house">offer a temporary safe-house</label>
<input type="checkbox" name="house" id="house" />
</div>
<div>
<label for="support">financiall support</label>
<input type="checkbox" name="support" id="support" />
</div>
</div>
<div class="button">
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</div>
</form>
<div class="faq">
<h2>FAQ <i class="fas fa-question"></i></h2>
<h3>
*Information in this section are real and you can find them
<a
href="https://www.pdsa.org.uk/pet-help-and-advice/looking-after-your-pet/kittens-cats/the-best-diet-for-your-cat"
>HERE</a
>
</h3>
<ul id="accordion">
<li>
<label for="first"
>Why is my cat's diet important? <span>⤵</span></label
>
<input type="radio" name="accordion" id="first" checked />
<div class="content">
<p>
Feeding your cat the correct food is really important for their
health. Just like us, your cat needs to eat a balanced diet each
day to give them energy and nutrients.
</p>
</div>
<label for="second"
>Can I give milk to my cat as a treat?
<span>⤵</span></label
>
<input type="radio" name="accordion" id="second" />
<div class="content">
<p>
It's a myth that cats need a nice saucer of milk. Cows' milk
contains lactose, a sugar that cats find hard to digest and can
give them an upset tummy. Cream and dairy products are also high
in fat so will contribute to your cat piling on the pounds.
</p>
</div>
<label for="third"
>Can I give human food to my cat? <span>⤵</span></label
>
<input type="radio" name="accordion" id="third" />
<div class="content">
<p>
There are some human foods that are safe for your cat. However,
feeding human food can mean lots of extra calories for your cat,
so it's important to feed cat sized amounts to keep them at a
healthy weight. There are also some human foods that are toxic
to cats, so if in doubt stick with food that has been made
specifically for cats and skip the scraps.
</p>
</div>
<label for="fourth"
>Can my cat eat fruit and vegetables? <span>⤵</span></label
>
<input type="radio" name="accordion" id="fourth" />
<div class="content">
<p>
Cats don't need fruit or vegetables as part of their diet, but
they can make for an occasional healthy treat. Just remember not
to give them too much – a little for us is a lot for your cat,
so cut it into bite-sized pieces and deseed it as necessary to
avoid choking. And check out the list of safety food first!
</p>
</div>
</li>
</ul>
</div>
</section>
<script>
const menu = document.querySelector(".menu");
const close = document.querySelector(".close");
const nav = document.querySelector("aside");
menu.addEventListener("click", () => {
nav.classList.add("open-nav");
});
close.addEventListener("click", () => {
nav.classList.remove("open-nav");
});
</script>
</body>
</html>