-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
168 lines (168 loc) · 8.9 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
<!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">
<!-- CSS Links -->
<link href="assets/images/favicon.ico" rel="shortcut icon">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="" />
<link href="https://fonts.googleapis.com/css2?family=Redressed&family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Mako&family=Questrial&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<!-- End of CSS Links -->
<title>Home | Buddy Finder</title>
</head>
<body>
<!-- Title on Navbar -->
<nav>
<div class="nav-wrapper deep-orange lighten-2">
<div class="font-new brand-logo center">Buddy Finder</div>
</div>
</nav>
<main>
<!-- Buddy Finder Image -->
<div class="row">
<div class="section">
<div class="col s12 center">
<img class="responsive-img" src="./assets/images/Buddy_Finder.jpg" alt="Buddy Finder">
</div>
</div>
</div>
<!-- ZIP Code Search -->
<div class="row">
<div class="col s12 center">
<div class="row">
<form id="buddy-form" class="col s12">
<h5>Find Shelters:</h5>
<div class="row">
<div class="input-field col center offset-s4 s4 offset-l4 l4">
<input id="zipcode" name="zipcode" placeholder="Enter your ZIP Code">
</div>
<div class="input-field col center s1 l1">
<button class="btn waves-effect waves-light teal accent-4 modal-trigger" id="search-button" data-target="modal1"><i
class="material-icons">search</i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Recently Viewed Shelters -->
<h5 id="previously-viewed-header" class="center"></h5>
<div class="col center">
<p>
<button id="reset" class="btn waves-effect waves-light teal accent-4 modal-trigger hidden">Clear</button>
</p>
</div>
<div id="previously-viewed" class="col s12 m7 l9 center"></div>
<div class="container" id="orgWebsite"></div>
<!-- Informational Cards -->
<div class="row">
<div class="col s12 m4">
<div class="card large">
<div class="card-image">
<img src="./assets/images/guinea-pigs-card-img.jpg" alt="Guinea Pigs">
<span class="card-title">Necessities for Your Guinea Pig</span>
</div>
<div class="card-content">
<p>A cage, a house to hide in, a water bottle and food dish, and chew toys are a perfect start to the supplies you'll need for your guinea pig.</p>
<p>Did you know guinea pigs love to eat hay? It's their favorite food! Make sure to stock up on a variety to keep them satisfied. They can also snack on fresh vegetables like kale, collard greens, zucchini, and carrots.</p>
</div>
<div class="card-action">
<a href="https://www.petsmart.com/learning-center/small-pet-care/caring-for-your-guinea-pig/A0093.html" target="_blank">Tips on caring for your guinea pig</a>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card large">
<div class="card-image">
<img src="./assets/images/bird-card-img.jpg" alt="Bird on Hand">
<span class="card-title">Looking to Buy a Bird?</span>
</div>
<div class="card-content">
<p>So many types of bird to choose from. It's important to find the right one since many birds are abandoned at bird rescues after an unsuccessful match.</p>
<p>The most commonly owned birds are the Budgie, Cockatiel, Cockatoo, Hyacinth Macaw, Dove, Parrotlet, Green-Cheeked Conure, and Hahn's Macaw.</p>
<p>How do you know which one is right for you?</p>
</div>
<div class="card-action">
<a href="https://myrightbird.com/" target="_blank">Take this quiz to find your bird match</a>
</div>
</div>
</div>
<div class="col s12 m4">
<div class="card large">
<div class="card-image">
<img src="./assets/images/blackcat-card-img.jpg" alt="Black cat with Bandana">
<span class="card-title">Why You Should Adopt A Black Cat</span>
</div>
<div class="card-content">
<p>Black cats have a bad reputation that costs them their lives every day. These cats have some of the lowest adoption rates and highest euthanasia rates in shelters across America. Each October, many shelters suspend adoption of their black cats out of fear that they'll become abandoned Halloween props. </p>
<p>Rescue one of the most beautiful cats today.</p>
</div>
<div class="card-action">
<a href="https://www.petco.com/content/petco/PetcoStore/en_US/pet-services/resource-center/seasonal-topics/15-Black-Cat-Fun-Facts.html" target="_blank">Learn more about black cats</a>
</div>
</div>
</div>
</div>
<!-- Pete's Pet Shop Image -->
<div class="row">
<div class="section">
<div class="col s12 center">
<a href="#"><img class="responsive-img" src="./assets/images/Petes_Pet_Shop.jpg" alt="Pete's Pet Shop"></a>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="page-footer deep-orange lighten-2">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Created with 🐾 by Project SARD <br /></h5>
<p class="white-text text-lighten-4">Buddy Finder is a website designed to find loving homes for abandoned pets. Project SARD aims to rescue all animals in need across the nation.</p>
</div>
<div class="col l4 offset-l2 s12">
<ul>
<li><a class="white-text text-lighten-3" href="https://github.com/smakela13/">Soma M.</a></li>
<li><a class="white-text text-lighten-3" href="https://github.com/AranATA/">Ali A.</a></li>
<li><a class="white-text text-lighten-3" href="https://github.com/Vinyl77/">Richard Y.</a></li>
<li><a class="white-text text-lighten-3" href="https://github.com/hov92/">Dwayne H.</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021
<a class="grey-text text-lighten-4 right"
href="https://github.com/smakela13/project-buddy-finder">GitHub Project Repo
</a>
</div>
</div>
</footer>
<!-- Modal -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Invalid Input!</h4>
<p>Please enter a valid ZIP code</p>
</div>
<div class="modal-footer">
<a id="x" href="#!" class="modal-close waves-effect waves-green btn-flat">Try Again</a>
</div>
</div>
<!-- Scripts -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>