-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
208 lines (208 loc) · 7.91 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
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
<!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" />
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/normalize.min.css" />
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="modal" class="modal">
<div class="modal__container">
<div id="close" class="close">×</div>
<div class="arrow left_arrow" id="left_arrow">‹</div>
<div class="arrow right_arrow" id="right_arrow">›</div>
<div id="modal__image-container" class="modal__image-container">
<figure class="modal__image">
<iframe
src="https://www.youtube.com/embed/n1a3VZY0xgM"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<figcaption class="modal__caption">
Visit team Treehouse to learn how to code.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/01.jpg" alt="Hay Bales" />
<figcaption class="modal__caption">
I love hay bales. Took this snap on a drive through the
countryside past some straw fields.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/02.jpg" alt="Lake" />
<figcaption class="modal__caption">
The lake was so calm today. We had a great view of the snow on the
mountains from here.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/03.jpg" alt="Canyon" />
<figcaption class="modal__caption">
I hiked to the top of the mountain and got this picture of the
canyon and trees below.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/04.jpg" alt="Iceberg" />
<figcaption class="modal__caption">
It was amazing to see an iceberg up close, it was so cold but
didn’t snow today.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/05.jpg" alt="Desert" />
<figcaption class="modal__caption">
The red cliffs were beautiful. It was really hot in the desert but
we did a lot of walking through the canyons.
</figcaption>
</figure>
<figure class="modal__image">
<img
src="photos/06.jpg"
alt="Winter image of red leaves on trees"
/>
<figcaption class="modal__caption">
Fall is coming, I love when the leaves on the trees start to
change color.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/07.jpg" alt="Plantation" />
<figcaption class="modal__caption">
I drove past this plantation yesterday, everything is so green!
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/08.jpg" alt="Sand Dunes" />
<figcaption class="modal__caption">
My summer vacation to the Oregon Coast. I love the sandy dunes!
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/09.jpg" alt="Conutryside lane" />
<figcaption class="modal__caption">
We enjoyed a quiet stroll down this countryside lane.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/10.jpg" alt="Sunset" />
<figcaption class="modal__caption">
Sunset at the coast! The sky turned a lovely shade of orange.
</figcaption>
</figure>
<figure class="modal__image">
<img src="photos/11.jpg" alt="Cave" />
<figcaption class="modal__caption">
I did a tour of a cave today and the view of the landscape below
was breathtaking.
</figcaption>
</figure>
</div>
</div>
</div>
<header>
<input
type="text"
class="search"
name="search"
id="search"
placeholder="Search for an image"
data-search
/>
</header>
<div id="container" class="container clearfix">
<div class="photo">
<a target="_blank" href="https://www.youtube.com/watch?v=n1a3VZY0xgM"
><img
src="photos/thumbnails/treehouse.jpg"
alt="Treehouse Learn to Code"
/></a>
</div>
<div class="photo">
<a
href="photos/01.jpg"
data-title="Hay Bales - I love hay bales. Took this snap on a drive through the countryside past some straw fields."
><img src="photos/thumbnails/01.jpg" alt="Hay Bales"
/></a>
</div>
<div class="photo">
<a
href="photos/02.jpg"
data-title="Lake - The lake was so calm today. We had a great view of the snow on the mountains from here."
><img src="photos/thumbnails/02.jpg" alt="Lake"
/></a>
</div>
<div class="photo">
<a
href="photos/03.jpg"
data-title="Canyon - I hiked to the top of the mountain and got this picture of the canyon and trees below."
><img src="photos/thumbnails/03.jpg" alt="Canyon"
/></a>
</div>
<div class="photo">
<a
href="photos/04.jpg"
data-title="Iceberg - It was amazing to see an iceberg up close, it was so cold but didn’t snow today."
><img src="photos/thumbnails/04.jpg" alt="Iceberg"
/></a>
</div>
<div class="photo">
<a
href="photos/05.jpg"
data-title="Desert - The red cliffs were beautiful. It was really hot in the desert but we did a lot of walking through the canyons."
><img src="photos/thumbnails/05.jpg" alt="Desert"
/></a>
</div>
<div class="photo">
<a
href="photos/06.jpg"
data-title="Fall - Fall is coming, I love when the leaves on the trees start to change color."
><img
src="photos/thumbnails/06.jpg"
alt="Winter image of red leaves on trees"
/></a>
</div>
<div class="photo">
<a
href="photos/07.jpg"
data-title="Plantation - I drove past this plantation yesterday, everything is so green!"
><img src="photos/thumbnails/07.jpg" alt="Plantation"
/></a>
</div>
<div class="photo">
<a
href="photos/08.jpg"
data-title="Dunes - My summer vacation to the Oregon Coast. I love the sandy dunes!"
><img src="photos/thumbnails/08.jpg" alt="Sand Dunes"
/></a>
</div>
<div class="photo">
<a
href="photos/09.jpg"
data-title="Countryside Lane - We enjoyed a quiet stroll down this countryside lane."
><img src="photos/thumbnails/09.jpg" alt="Conutryside lane"
/></a>
</div>
<div class="photo">
<a
href="photos/10.jpg"
data-title="Sunset - Sunset at the coast! The sky turned a lovely shade of orange."
><img src="photos/thumbnails/10.jpg" alt="Sunset"
/></a>
</div>
<div class="photo">
<a
href="photos/11.jpg"
data-title="Cave - I did a tour of a cave today and the view of the landscape below was breathtaking."
><img src="photos/thumbnails/11.jpg" alt="Cave"
/></a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>