-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
310 lines (297 loc) · 10.2 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pawsible Pet Adoption Center</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
.navbar {
background-color: #F0544F;
color: white;}
.logo {
font-family: 'Beth Ellen';
}
.centered-text {
text-align: center;
margin-left: auto;
margin-right: auto;
width: 60%;
max-width: 600px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0.5px;
color: #333;
}
#tabcontainer a {
color: #FFFFFF;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#tabcontainer a:hover {
color: #FFFFFF;
}
.special-text {
font-family: sans-serif;
font-size: 28px;
font-weight: bold;
color: #ff6600;
}
body {
font-family: 'Barlow', Arial, sans-serif;
background-color: #f5f5f5;
margin: 0;
}
.jumbotron {
background: url('background.jpg') no-repeat center center;
background-size: cover;
color: #fff;
text-align: left;
padding: 100px 0;
margin-bottom: 0;
}
.jumbotron .container {
display: flex;
align-items: center;
padding: 0;
}
.jumbotron .content {
padding-left: 15px;
margin-left: 0;
}
.jumbotron h1 {
font-size: 2.5rem;
margin-bottom: 20px;
font-weight: 600;
}
.jumbotron p {
font-size: 1.25rem;
margin-bottom: 40px;
font-weight: 400;
}
.btn-primary {
background-color: #e74c3c;
border-color: #e74c3c;
}
.btn-primary:hover {
background-color: #c0392b;
border-color: #c0392b;
}
.statistics-container {
margin-top: 0;
padding: 20px 0;
background-color: #f0544f;
}
.statistic {
text-align: center;
padding: 20px;
}
.statistic h2 {
font-size: 2rem;
margin-bottom: 10px;
font-weight: 500;
color: #fff;
}
.statistic p {
font-size: 1rem;
color: #fff;
}
.how-it-works {
padding: 50px 0;
}
.how-it-works h2 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}
.how-it-works p {
font-size: 1.25rem;
margin-bottom: 20px;
}
.featured-animals {
padding: 50px 0;
}
.animal-card {
background-color: #fff;
border-radius: 15px;
padding: 20px;
text-align: center;
margin: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.animal-card img {
max-width: 100%;
border-radius: 10px;
}
.animal-card p {
font-weight: bold;
margin-top: 10px;
}
.adopt-now {
text-align: center;
padding: 50px 0;
}
.adopt-now h2 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<header>
<div class="navbar p-2 ps-3 pe-3">
<h1 class="logo">Pawsible</h1>
<div id="tabcontainer" class="end-100 d-flex justify-content-end">
<a href="adopt.html" class="ps-5 pe-5">Adopt</a>
<a href="Rehome.html" class="ps-5 pe-5">Report</a>
<a href="petabout.html" class="ps-5 pe-5">About</a>
</div>
</div>
</header>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-lg-6 content">
<h1>Changing Destinies, One Rescue at a Time:</h1>
<p>See How Pawsible Is Reshaping Lives.</p>
<p>Since 2014, Pawsible has been a part of the stories of 3000+ stray, abused, injured, and abandoned animals. Adopt an animal and make a difference.</p>
<a href="#" class="btn btn-primary">Find out how it works</a>
</div>
</div>
</div>
</div>
<div class="container statistics-container">
<div class="row">
<div class="col-md-6 col-lg-3 statistic">
<h2>12,000+ Animals Saved</h2>
<p>Since 2003, more than 12,000 animal lives have been saved.</p>
</div>
<div class="col-md-6 col-lg-3 statistic">
<h2>7,000 Exams Performed</h2>
<p>In a single year, our medical staff performed 3,200 exams and vaccinated 4,200 animals.</p>
</div>
<div class="col-md-6 col-lg-3 statistic">
<h2>780 Pets Adopted</h2>
<p>More than 700 pets found homes from our adoption centers.</p>
</div>
<div class="col-md-6 col-lg-3 statistic">
<h2>170 Programs</h2>
<p>Reaching students, advancing and enhancing learning.</p>
</div>
</div>
</div>
<div class="container how-it-works">
<div class="row">
<div class="col-lg-12">
<h2>How it Works</h2>
<p><strong>1. Search Pawsible to find "The One"</strong></p>
<p>Take some time to read the profile of each pet, get to know their personality and find out if they are the right fit for you and your lifestyle. You’ll need to consider things such as size, age, activity levels, grooming requirements and training needs.</p>
<p><strong>2. Get to know our rescue</strong></p>
<p>If you’re new to rescue, it’ll help to learn a little about us. It’s important to build trust and ensure that you can feel a connection with your rescue group.</p>
<p><strong>3. Let us know you're interested</strong></p>
<p>Make your application. This gives us all the info we need to help you find the pet that’s right for you and your home. It may be that the pet you’re interested in has been adopted, so with the information you provide the rescue group may be able to suggest another suitable pet.</p>
<p><strong>4. Meet and Greet</strong></p>
<p>Once your application has been processed, the rescue group will contact you to arrange a time for you and your family to meet the pet. We may also request a house check, just to make sure your fences are escape-proof and there are no potentially dangerous situations your new pet may get into.</p>
</div>
</div>
</div>
<div class="container featured-animals">
<h2>Featured Animals</h2>
<div id="animalCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6">
<div class="animal-card">
<img src="https://pet-uploads.adoptapet.com/1/b/0/681860912.jpg" alt="Luna the American Shorthair">
<p>Luna 9 American Shorthair</p>
</div>
</div>
<div class="col-md-6">
<div class="animal-card">
<img src="https://pet-uploads.adoptapet.com/4/b/2/632518517.jpg" alt="Buddy the Labrador Retriever">
<p>Buddy 5 Labrador Retriever</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6">
<div class="animal-card">
<img src="https://pet-uploads.adoptapet.com/0/2/d/691152794.jpg" alt="Max the Golden Retriever">
<p>Max 2 Golden Retriever</p>
</div>
</div>
<div class="col-md-6">
<div class="animal-card">
<img src="https://pet-uploads.adoptapet.com/4/2/d/677759713.jpg" alt="Milo the Siamese Cat">
<p>Milo 7 Siamese Cat</p>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#animalCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#animalCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container adopt-now">
<h2>What Are You Waiting For?</h2>
<a href="adopt.html" class="btn btn-primary">Adopt Now</a>
</div>
<footer class="text-center text-lg-start text-white" style="background-color:#F0544F";>
<!-- Section: Links -->
<div class="my-5">
<section class="">
<div class="container text-center text-md-start mt-5">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4 ">
<h1 class="my-5"></h1>
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3 text-secondary"></i>RESOURCES
</h6>
<p>Why Adopt an Animal</p>
<p>Rehome a Pet or Report a Found Animal</p>
<p>How You Can Volunteer for Shelters in Your Area</p>
</div>
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<h1 class="my-5"></h1>
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3 text-secondary"></i> The Pawse Foundation, Thrissur, Kerala 695010</p>
<p>
<i class="fas fa-envelope me-3 text-secondary"></i>
</p>
<p><i class="fas fa-phone me-3 text-secondary"></i> + 91 9446440167</p>
<p><i class="fas fa-print me-3 text-secondary"></i> + 91 8282409044</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
</div>
<!-- Section: Links -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.025);">
© 2023 The Pawse Foundation
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>