-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (155 loc) · 8.07 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
<!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" type="text/css" href="css/main.css">
<link rel="icon" type="image/png" href="picture/icons/icons8-cat-footprint-16.png">
<link href="https://fonts.googleapis.com/css?family=Georgia&display=swap" rel="stylesheet">
<title>Shelter</title>
</head>
<body>
<div class="background">
<header id="header">
<div class="title-logo">
<h3 class="logo">Cozy House</h3>
<p class="logo-text">Shelter for pets in Boston</p>
</div>
<nav>
<ul class="menu-main">
<li><a href="#" class="current">About the shelter</a></li>
<li><a href="pets.html">Our pets</a></li>
<li><a href="#help">Help the shelter</a></li>
<li><a href="#contact">Contacts</a></li>
</ul><label class="bar" for="check"><input type="checkbox" id="check"><span class="top"></span><span
class="middle"></span><span class="bottom"></span></label>
</nav>
</header>
<div class="startScreen">
<div class="content" id="content">
<div class="content-text" id="content-text">
<div>
<h2 id="h2">Not only people need a house </h2>
<p>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 !<br></p>
</div><a href="#pets">Make a friend</a>
</div><img src="picture/start_screen_puppy.png" alt="pet" id="start-screen-puppy">
</div>
</div>
</div>
<div class="about">
<div class="about-content" id="about-content">
<div class="about-picture"><img src="picture/about_pets.png" alt="pet"></div>
<div class="about-text" id="about-text">
<h3>About the shelter “Cozy House”</h3>
<p>Currently we have 121 dogs and 342 cats on our hands and statistics show that only 20% of them will
find a family. Theothers will co ntinue to live with us and will be waiting for a lucky chance to
become dearly loved.</p>
<p>We feed our wards with the best food and make sure that theydo 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>
</div>
<div class="pets" id="pets-main">
<h3>Our friends who <br>are looking for a house</h3>
<div class="pets-content" id="pets"><button class="forward-btn" id="btn-left1"><img
src="picture/icons/arrow-left.svg" alt="button-left"></button>
<div class="slider-item"><img src="picture/pets_jennifer.png" alt="Avatar">
<div class="container">
<h4><b>Katrine</b></h4><button class="learn-more">Learn more</button>
</div>
</div>
<div class="slider-item katrine"><img src="picture/pets_katrine.png" alt="Avatar">
<div class="container">
<h4><b>Katrine</b></h4><button class="learn-more">Learn more</button>
</div>
</div>
<div class="slider-item woody"><img src="picture/pets_woody.png" alt="Avatar">
<div class="container">
<h4><b>Woody</b></h4><button class="learn-more">Learn more</button>
</div>
</div>
<div class="nav"><button class="forward-btn btn-left" id="btn-left"><img src="picture/icons/arrow-left.svg"
alt="button-left"></button><button class="bck-btn"><img src="picture/icons/button-right.svg"
alt="button-rigth"></button></div>
</div><a href="pets.html">Get to know the rest</a>
</div>
<div class="help" id="help">
<div class="help-content">
<h3>How you can help<br>our shelter</h3>
<div class="list">
<div class="pet-food demand" id="demand"><img src="picture/icons/Vector.svg" alt="pet">
<h4>Pet food</h4>
</div>
<div class="transportation demand" id="demand"><img src="picture/icons/transportation.svg" alt="pet">
<h4>Transportation</h4>
</div>
<div class="toys demand" id="demand"><img src="picture/icons/toys.svg" alt="pet">
<h4>Toys</h4>
</div>
<div class="browls-cups demand" id="demand"><img src="picture/icons/bowls-and-cups.svg" alt="pet">
<h4>Bowls and cups</h4>
</div>
<div class="shampoos demand" id="demand"><img src="picture/icons/shampoos.svg" alt="pet">
<h4>Shampoos</h4>
</div>
<div class="vitamins demand" id="demand"><img src="picture/icons/vitamins.svg" alt="pet">
<h4>Vitamins</h4>
</div>
<div class="medicines demand" id="demand"><img src="picture/icons/medicines.svg" alt="pet">
<h4>Medicines</h4>
</div>
<div class="collars-leashes demand" id="demand"><img src="picture/icons/collars-or-leashes.svg"
alt="pet">
<h4>Collars / leashes</h4>
</div>
<div class="sleeping-area demand" id="demand"><img src="picture/icons/sleeping-area.svg" alt="pet">
<h4>Sleeping areas</h4>
</div>
</div>
</div>
</div>
<div class="donation">
<div class="donation-content" id="donation"><img src="picture/donation-dog.png" alt="dog" id="donat-dog">
<div class="content-card" id="content-card">
<h3>You can also<br>make a donation<br></h3>
<h5>Name of the bank / Type of bank account</h5>
<div class="card"><img src="picture/icons/credit-card.svg" alt="card"><a href="#">
<h4>8380 2880 8028 8791 7435</h4>
</a></div>
<p><br>Legal information and lorem ipsum dolor sit amet,
consectetur <br>adipiscing elit. Maecenas a ipsum at libero sagittis dignissim sed ac <br>diam.
Praesent ultrices maximus tortor et vulputate. Interdum et <br>malesuada fames ac ante ipsum primis
in faucibus.</p>
</div>
</div>
</div>
<footer id="contact">
<div class="contact ">
<h3>For questions <br>and suggestions</h3>
<div class="mail linkage"><img src="picture/icons/mail.svg" alt="mail">
<h4>email@shelter.com</h4>
</div>
<div class="phone linkage"><img src="picture/icons/icon-phone.svg" alt="phone">
<h4>+13 674 567 75 54</h4>
</div>
</div>
<div class="location linkage">
<h3>We are waiting <br>for your visit</h3>
<div class="london linkage"><img src="picture/icons/pin.svg" alt="pin">
<h4>18 South Park,
London </h4>
</div>
<div class="boston linkage"><img src="picture/icons/pin.svg" alt="pin">
<h4>1 Central Street,
Boston <br>(entrance from the store)</h4>
</div>
</div><img src="picture/footer-puppy.png" alt="puppy" class="footer-puppy">
</footer><img src="picture/footer-puppy.png" alt="puppy" class="footer-puppy2">
</body>
</html>