-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex2.html
More file actions
132 lines (132 loc) · 5.98 KB
/
index2.html
File metadata and controls
132 lines (132 loc) · 5.98 KB
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
<!DOCTYPE html>
<html>
<head>
<title>The Pet Shop</title>
<meta charset="UTF-8">
<!--ADD CSS-->
<link rel="stylesheet" href="css/style2.css">
</head>
<body>
<!--NAVBAR-->
<div class="navBar">
<ul id="navBorder">
<a href="index1.html"><li>HOME 1</li></a>
<a href="contact1.html"><li>CONTACT 1</li></a>
<a href="index2.html"><li>HOME 2</li></a>
<a href="contact2.html"><li>CONTACT 2</li></a>
<a href="index3.html"><li>HOME 3</li></a>
<a href="contact3.html"><li>CONTACT 3</li></a>
<a href="index4.html"><li>HOME 4</li></a>
<a href="contact4.html"><li>CONTACT 4</li></a>
</ul>
<ul>
<a href="#cat"><li>Cats & Kittens</li></a>
<a href="#dog"><li>Dogs & Puppies</li></a>
<a href="#rabbit"><li>Rabbits</li></a>
<a href="#guineapig"><li>Guinea Pigs</li></a>
<a href="#fish"><li>Fish</li></a>
<a href="#reptile"><li>Reptiles</li></a>
<a href="#video"><li>Videos</li></a>
</ul>
</div>
<!--HEADER-->
<header>
<div>
<h1 class="animateText">Welcome to The Pet Shop!</h1>
</div>
</header>
<!--PET IMAGES-->
<section>
<div class="container">
<h2>Choose a Pet!</h2> <!--Add in script to change from Pick a Pet! to Choose a Pet!-->
<div>
<!--CAT IMAGE-->
<div id="cat" class="column">
<div class="image-container"><!--NEW this applies for all images down.-->
<h3>Cats & Kittens</h3>
<img src="images/cat.png" alt="Picture of kittens" class="image">
<div class="overlay"> <!--ADD NEW DIVS FOR OVERLAY-->
<div class="text">Select which cat or kitten you want to take home.</div>
</div>
</div>
</div>
<!--DOG IMAGE-->
<div id="dog" class="column">
<div class="image-container">
<h3>Dogs & Puppies</h3>
<img src="images/dog.png" alt="Picture of dogs" class="image">
<div class="overlay"> <!--ADD NEW DIVS FOR OVERLAY-->
<div class="text">Select which dog or puppy you want to take home.</div>
</div>
</div>
</div>
<!--RABBIT IMAGE-->
<div id="rabbit" class="column">
<div class="image-container">
<h3>Rabbits</h3>
<img src="images/rabbits.png" alt="Picture of rabbits" class="image">
<div class="overlay"> <!--ADD NEW DIVS FOR OVERLAY-->
<div class="text">Select which rabbit you want to take home.</div>
</div>
</div>
</div>
<!--GUINEA PIG IMAGE-->
<div id="guineapig" class="column">
<div class="image-container">
<h3>Guinea Pigs</h3>
<img src="images/guineapigs.png" alt="Picture of guinea pigs" class="image">
<div class="overlay"> <!--ADD NEW DIVS FOR OVERLAY-->
<div class="text">Select your perfect guinea pig to take home.</div>
</div>
</div>
</div>
<!--FISH IMAGE-->
<div id="fish" class="column">
<div class="image-container">
<h3>Fish</h3>
<img src="images/fish.png" alt="Picture of goldfish" class="image">
<div class="overlay"> <!--ADD NEW DIVS FOR OVERLAY-->
<div class="text">Select which fish you want to take home.</div>
</div>
</div>
</div>
<!--REPTILE IMAGE-->
<div id="reptile" class="column">
<div class="image-container">
<h3>Reptiles</h3>
<img src="images/beardedDragon.png" alt="Picture of a bearded dragon" class="image">
<div class="overlay"> <!--ADD NEW DIVS FOR OVERLAY-->
<div class="text">Select which reptile you want to take home.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--VIDEOS-->
<section>
<!--DOG VIDEO-->
<div id="video" class="container">
<h2>Videos</h2> <!--Add in script to change from h3 to h2-->
<iframe width="1280" height="720" src="https://www.youtube.com/embed/ng58pNPDDW4"></iframe>
</div>
</section>
<!--FOOTER-->
<footer>
<table>
<tr>
<td>
<p>The Pet Shop! ©</p>
</td>
<td>
<p>123 Square Ave</p>
<p>Portland, OR 97204</p>
</td>
<td>
<p>503-234-3966</p>
</td>
</tr>
</table>
</footer>
</body>
</html>