-
Notifications
You must be signed in to change notification settings - Fork 0
/
gallery.html
278 lines (267 loc) · 11.1 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Gallery</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header>
<div class="container flex justify-center">
<div id="logo">
<span>VA</span>
</div>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul class="flex">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="handicrafts.html">Handicrafts</a>
<div class="dropdown">
<div class="container flex">
<div class="dropdown-image">
<img src="images/handicrafts.png" />
</div>
<div class="dropdown-details">
<p>A handicraft, sometimes more precisely expressed as artisanal handicraft or handmade...</p>
</div>
</div>
</div>
</li>
<li>
<a href="painting.html">Painting</a>
<div class="dropdown">
<div class="container flex">
<div class="dropdown-image">
<img src="images/painting.png" />
</div>
<div class="dropdown-details">
<p>Painting is the practice of applying paint, pigment, color or other medium to a solid surface...</p>
</div>
</div>
</div>
</li>
<li>
<a href="sculpture.html">Sculpture</a>
<div class="dropdown">
<div class="container flex">
<div class="dropdown-image">
<img src="images/sculpture.png" />
</div>
<div class="dropdown-details">
<p>Sculpture began fundamentally from hieroglyphics...</p>
</div>
</div>
</div>
</li>
<li>
<a href="architecture.html">Architecture</a>
<div class="dropdown">
<div class="container flex">
<div class="dropdown-image">
<img src="images/architecture.jpg" width="400" />
</div>
<div class="dropdown-details">
<p>It is one of mankind's most perceptible and enduring forms of articulation, bridging the gap between the past and present...</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<section class="page-content">
<div id="paintings" class="container" style="position: relative">
<h1>Paintings</h1>
<div class="line-separator"></div>
<div class="gallery-masonry">
<div class="gallery-item">
<img src="images/PAINTINGS/bayanihan.png" data-title="Bayanihan" data-attrib='by Carlos "Botong" Francisco' />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/day after.png" data-title="The Day After" data-attrib="by Edvard Munch" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/fruit pickers.png" data-title="The Fruit Pickers Under The Mango Tree" data-attrib="by Fernando Amorsolo" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/haystack.png" data-title="Haystack" data-attrib="by Claude Monet" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/katipunan.png" data-title="Katipunan" data-attrib="by Carlos Francisco" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/la parissienne.png" data-title="La Parissienne" data-attrib="by Felix Hidalgo" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/lalugana.png" data-title="Lalugana" data-attrib="by Felix Hidalgo" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/last supper.png" data-title="The Last Supper" data-attrib="by Leonardo da Vinci" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/candle vendors.png" data-title="Candle Vendors" data-attrib="by Vicente Manansala" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/luksong tinik.png" data-title="Luksong Tinik" data-attrib="by Vicente Manansala" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/magbabayo.png" data-title="Magbabayo" data-attrib="by Carlos Francisco" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/magpupukot.png" data-title="Magpupukot" data-attrib="by Carlos Francisco" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/making of philippine flag.png" data-title="The Making of the Philippine Flag" data-attrib="Fernando Amorsolo" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/mona lisa.png" data-title="Mona Lisa" data-attrib="by Leonardo da Vinci" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/parisian life.png" data-title="The Parisian Life" data-attrib="by Juan Luna" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/planting rice.png" data-title="Planting Rice" data-attrib="by Fernando Amorsolo" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/scream.png" data-title="The Scream" data-attrib="Edvard Munch" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/spoliarium.png" data-title="Spoliarium" data-attrib="by Juan Luna" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/sunrise.png" data-title="Sunrise" data-attrib="by Claude Monet" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/tampuhan.png" data-title="Tampuhan" data-attrib="by Juan Luna" />
</div>
<div class="gallery-item">
<img src="images/PAINTINGS/water lilies.png" data-title="Water Lilies" data-attrib="by Claude Monet" />
</div>
</div>
</div>
<br />
<div id="architecture" class="container" style="position: relative">
<h1>Architecture</h1>
<div class="line-separator"></div>
<div class="gallery-masonry">
<div class="gallery-item">
<img src="images/ARCHI/ART SCIENCE.jpg" data-title="Art Science" data-attrib="by Moshe Safdie" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/BEKO MASTERPLAN.jpg" data-title="Beko Masterplan" data-attrib="by Zaha Hadid" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/CASA MILA.jpg" data-title="Casa Mila" data-attrib="by Antoni Gaudi" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/CULTURAL CENTER OF THE PHILIPPINES.jpg" data-title="Cultural Center of the Philippines" data-attrib="by Leandro Locsin" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/FEU.jpg" data-title="Far Eastern University" data-attrib="by Pablo Antonio" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/GALERIA DE CENTRO BOTIN.jpg" data-title="Galeria de Centro Botin" data-attrib="by Renzo Piano" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/GALLERY OF CLEVELAND.jpg" data-title="Gallery of Cleveland" data-attrib="by Frank Gehry" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/HABITAT 67 MONTREAL APARTMENT.jpg" data-title="Habitat 67 Montreal Apartment" data-attrib="by Moshe Safdie" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/HEYDAR.jpg" data-title="Heydar" data-attrib="by Zaha Hadid" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/IGLESIA NI CRISTO.jpg" data-title="Iglesia Ni Cristo" data-attrib="by Carlos Santos-Viola" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/INTERFAITH PEACE CHAPEL.jpg" data-title="Interfaith Peace Chapel" data-attrib="by Philip Johnson" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/KIMBEL ART MUSEUM.jpg" data-title="Kimbel Art Museum" data-attrib="by Richard Rogers" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/LE GRAND LOUVRE.jpg" data-title="Le Grand Louvre" data-attrib="by Ieoh Ming Pei" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/MARINA BAY HOTEL.jpg" data-title="Marina Bay Hotel" data-attrib="by Richard Rogers" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/MILWAUKEE.jpg" data-title="Milwaukee" data-attrib="Eero Saarinen" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/NATIONAL ARTS THEATRE.jpg" data-title="National Arts Theatre" data-attrib="by Leandro Locsin" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/PACO PARK.jpg" data-title="Paco Park" data-attrib="by Ildefonso P. Santos" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/PPG PLACE.jpg" data-title="PPG Place" data-attrib="by Philip Johnson" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/QUIAPO CHURCH.jpg" data-title="Quiapo Church" data-attrib="by Juan Nakpil" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/ROBIE HOUSE.jpg" data-title="Robie House" data-attrib="by Frank Lloyd Wright" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/SR CROWN HALL 2.jpg" data-title="SR Crown Hall" data-attrib="by Mies Van Der Rohe" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/SR CROWN HALL.jpg" data-title="SR Crown Hall" data-attrib="by Mies Van Der Rohe" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/TISHOMINGO STATE PARK.jpg" data-title="Tishomingo State Park" data-attrib="by Frank Gehry" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/TWA TERMINAL.jpg" data-title="TWA Terminal" data-attrib="by Eero Saarinen" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/UP HALL.jpg" data-title="UP Hall" data-attrib="by Juan Nakpil" />
</div>
<div class="gallery-item">
<img src="images/ARCHI/WHITE CROSS.jpg" data-title="White Cross" data-attrib="by Pablo Antonio" />
</div>
</div>
</div>
</section>
<div class="overlay">
<div class="image-viewer">
<div class="close">x</div>
<h2 class="image-title"></h2>
<img class="image" />
<h3 class="image-attrib"></h3>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
var $grid = $('.gallery-masonry').masonry({
itemSelector: '.gallery-item',
gutter: 10
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
$('.gallery-item img').click(function() {
var item = $(this); // get the current object
// Set the details
$('.image-title').text(item.attr('data-title'));
$('.image').prop('src', item.prop('src'));
$('.image-attrib').text(item.attr('data-attrib'));
$('.overlay').fadeIn();
});
$('.close').click(function() {
$('.overlay').fadeOut();
});
</script>
</body>
</html>