-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
executable file
·113 lines (111 loc) · 6.58 KB
/
about.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
<!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>About</title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/about.css" />
</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">
<h1>About us</h1>
<div>
<p>
Our main goal is to help all the cats that we can! If you would like
to join our squad, there are four diffrent ways to do that! <p>First of
all, you can provide shelter and food for a cat, while it's waiting
for an adoption. This will help with building trust towards people and
making cat's self-confident increase.</p> <p>Secondly, you can become a
rescurer, which means that you will be going from place to place every
time when we will receive an emergency registration. Your job will be then to safely
catch a cat and bring it to one of our veterinarian centers.</p> <p> Thirdly,
you can adopt one of our cats! It means the cat will stay with you at
your home and you will gain a life-time friend!</p> <p> And last, but not
least, you can always support us with donation! Check out our <a href="index.html#form"> contact form</a> and gain answers to all of your questions!</p>
</p>
</div>
</section>
<section class="header">
<h3>
Currently we have 3 cat-fantastic candidates ready for an adoption:
</h3>
</section>
<section class="s2">
<div class="bio">
<div>
<img src="images/f3.jpg" alt="Smiling cat with yellow collar" />
</div>
<div class="container"><h3>Teddy ⤴</h3>
<p>
Hello there! I'm looking for someone who can play with me and run around a whole house! I'm really active during the day, always happy and smiling! I like to wear colorful, funny colars. Can I maybe stay with you? PLEASE!<p>
</p><a href="index.html#form"> Apply for an adoption</a>
</div>
</div>
<div class="bio">
<div><img src="images/f4.jpg" alt="Cat with a butterfly on its nose" /></div>
<div class="container"><h3>Luna ⤴</h3>
<p>Greetings! I'm a young female, who likes to spend time outside, with nature. I'm keen into chasing butterflies and smelling flowers - I can do it all day! And also sunbathing... I just love sunbathing! Do you maybe have a house with a small garden? I'm very loyal and I won't escape, I promise!<p>
</p><a href="index.html#form"> Apply for an adoption</a>
</div>
</div>
<div class="bio">
<div><img src="images/f5.jpg" alt="Cat with one eye missing" /></div>
<div class="container"><h3>Blinky ⤴</h3>
<p>Hi! Even though I have only one eye, I'm still very active and playful. But what I like the most is to cuddle, so if you are a Netflix fan - I'm all in! Movie nights and marathons with you sound really exciting! Maybe I will fall asleep in the middle of the show - but it surely won't interrupt you while you will be watching. So... when do you want to meet? <p>
</p><a href="index.html#form"> Apply for an adoption</a>
</div>
</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>