-
Notifications
You must be signed in to change notification settings - Fork 0
/
foster.html
178 lines (171 loc) · 8.19 KB
/
foster.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Cat Room Fosters</title>
<link rel = "icon" type = "image/x-icon" href = "media/Orange-tabby favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/fosterstyle.css">
<link rel="stylesheet" href="css/trigger_modal.css">
<link rel="stylesheet" href="css/lightbox.css">
<script src="./js/lightbox-plus-jquery.js"></script>
</head>
<body>
<div class="bg">
<header class="nav-header-main">
<div class="header-main-logo">
<img src="media/logo02.jpg" alt="logo">
<nav class="header-main-nav"> <!-- put <nav></nav> outside header-main-logo to center -->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="foster.html">Fosters</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<div class="header-main-sm">
<a href="https://www.facebook.com/AACAnimalCareControl "><div class="header-main-sm-fb"></div></a>
<div class="header-main-sm-in"></div>
<div class="header-main-sm-tw"></div>
</div>
</header>
<div class="title">
<h1>Fosters </h1>
</div>
</div>
<div>
<h2><center> <a href="https://www.aacounty.org/animal-control">
Call (410) 222-3939 - Ask how to Visit Fosters </a> </center> </h2>
<br>
<h3><center><p><script>document.write(new Date().toLocaleDateString())</script></p>
</center></h3>
</div>
<div class = "lbcontainer">
<div class = "gallery">
<a href = "f_images/524659BIG PAWZ.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 34 Days" >
<img src ="f_thumbs/524659BIG PAWZ_T.jpeg" alt = "BIG PAWZ">
</a>
<a href = "f_images/514292CANNELLINI.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 180 Days" >
<img src ="f_thumbs/514292CANNELLINI_T.jpeg" alt = "CANNELLINI">
</a>
<a href = "f_images/524737CANNONBALL.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 28 Days" >
<img src ="f_thumbs/524737CANNONBALL_T.jpeg" alt = "CANNONBALL">
</a>
<a href = "f_images/524878DATZA.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 15 Days" >
<img src ="f_thumbs/524878DATZA_T.jpeg" alt = "DATZA">
</a>
<a href = "f_images/514293FAVA.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 180 Days" >
<img src ="f_thumbs/514293FAVA_T.jpeg" alt = "FAVA">
</a>
<a href = "f_images/524753FEISTY.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 27 Days" >
<img src ="f_thumbs/524753FEISTY_T.jpeg" alt = "FEISTY">
</a>
<a href = "f_images/524652GRIFFITH.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 34 Days" >
<img src ="f_thumbs/524652GRIFFITH_T.jpeg" alt = "GRIFFITH">
</a>
<a href = "f_images/524109JUNIOR MINT.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 69 Days" >
<img src ="f_thumbs/524109JUNIOR MINT_T.jpeg" alt = "JUNIOR MINT">
</a>
<a href = "f_images/514294LENTIL.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 180 Days" >
<img src ="f_thumbs/514294LENTIL_T.jpeg" alt = "LENTIL">
</a>
<a href = "f_images/514291LIMA.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 180 Days" >
<img src ="f_thumbs/514291LIMA_T.jpeg" alt = "LIMA">
</a>
<a href = "f_images/523826MEGA ICING.jpeg" data-Lightbox = "models"
data-title="Not Altered, SIAMESE, In the Shelter for 84 Days" >
<img src ="f_thumbs/523826MEGA ICING_T.jpeg" alt = "MEGA ICING">
</a>
<a href = "f_images/524130MILK DUD.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 69 Days" >
<img src ="f_thumbs/524130MILK DUD_T.jpeg" alt = "MILK DUD">
</a>
<a href = "f_images/524638MOLLY.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 34 Days" >
<img src ="f_thumbs/524638MOLLY_T.jpeg" alt = "MOLLY">
</a>
<a href = "f_images/524390MUSTARD.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 53 Days" >
<img src ="f_thumbs/524390MUSTARD_T.jpeg" alt = "MUSTARD">
</a>
<a href = "f_images/524322NATHAN'S FAMOUS.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 54 Days" >
<img src ="f_thumbs/524322NATHAN'S FAMOUS_T.jpeg" alt = "NATHAN'S FAMOUS">
</a>
<a href = "f_images/525012PEPPERMINT SWIRL.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 6 Days" >
<img src ="f_thumbs/525012PEPPERMINT SWIRL_T.jpeg" alt = "PEPPERMINT SWIRL">
</a>
<a href = "f_images/524163SEA TURTLE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 65 Days" >
<img src ="f_thumbs/524163SEA TURTLE_T.jpeg" alt = "SEA TURTLE">
</a>
<a href = "f_images/524752SIR ROYAL.jpeg" data-Lightbox = "models"
data-title="Altered, DOMESTIC SHORT HAIR, In the Shelter for 27 Days" >
<img src ="f_thumbs/524752SIR ROYAL_T.jpeg" alt = "SIR ROYAL">
</a>
<a href = "f_images/524877SPICY MEATBALL.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 15 Days" >
<img src ="f_thumbs/524877SPICY MEATBALL_T.jpeg" alt = "SPICY MEATBALL">
</a>
<a href = "f_images/523713STAR-CROSSED LOVE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC MEDIUM HAIR, In the Shelter for 89 Days" >
<img src ="f_thumbs/523713STAR-CROSSED LOVE_T.jpeg" alt = "STAR-CROSSED LOVE">
</a>
<a href = "f_images/517929TEXAS PETE.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 141 Days" >
<img src ="f_thumbs/517929TEXAS PETE_T.jpeg" alt = "TEXAS PETE">
</a>
<a href = "f_images/524319ZODIAC.jpeg" data-Lightbox = "models"
data-title="Not Altered, DOMESTIC SHORT HAIR, In the Shelter for 54 Days" >
<img src ="f_thumbs/524319ZODIAC_T.jpeg" alt = "ZODIAC">
</a>
</div>
</div>
<!-- End of index.html Section (Constant) -->
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
<br>
<br>
<p style = "font-family: Arial; font-size: 22pt; font-weight: bold; text-align:center">
<a href = "https://sites.google.com/aacounty.org/dogs-at-aacacc/cats-in-foster">
A Link to More Information on Cats in Foster
</p>
<br>
<br>
</body>
</html>