-
Notifications
You must be signed in to change notification settings - Fork 0
/
beer_gallery.html
executable file
·258 lines (253 loc) · 10.5 KB
/
beer_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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beer Gallery</title>
<meta name="description" content="Blueprint: Blueprint: Google Grid Gallery" />
<meta name="keywords" content="google getting started gallery, image gallery, image grid, template, masonry" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />
<!-- My Styles -->
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/demo.css" />
<link rel="stylesheet" type="text/css" href="css/gallery/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div id="navmenu">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="events.html">events</a></li>
<li><a href="beer_gallery.html">beer gallery</a></li>
<li><a href="tasting.html">tasting tips</a></li>
</ul>
</div>
<div class="container">
<header class="clearfix">
<h1>Beer Gallery</h1>
</header>
<div id="grid-gallery" class="grid-gallery">
<section class="grid-wrap">
<ul class="grid">
<li class="grid-sizer"></li><!-- for Masonry column width -->
<li>
<figure>
<img src="img/thumb/beer_01_smash.jpg" alt="smash beer"/>
<figcaption><h3>SMaSH</h3>
<p>Single malt (vienna) and single hop (perle).</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_02_esb.jpg" alt="esb beer"/>
<figcaption><h3>Dog and Duck</h3><p>English Special Bitter (ESB). </p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_03_brown.jpg" alt="brown ale"/>
<figcaption><h3>Brown Ale</h3><p>Samuel Smith's clone.</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_04_pils.jpg" alt="pilsner beer"/>
<figcaption><h3>Summertime Pils</h3><p>Just your average lawnmower beer. </p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_05_stout.jpg" alt="stout beer"/>
<figcaption><h3>Russian Imperial Stout</h3><p>Firestone Walker Parabola clone. </p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_05b_belgian_golden.jpg" alt="belgian golden beer"/>
<figcaption><h3>Goldilocks</h3><p>Belgian golden ale. </p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_06_amber.jpg" alt="amber beer"/>
<figcaption><h3>The Standard</h3><p>Amber ale.</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_07_saison.jpg" alt="saison beer"/>
<figcaption><h3>Horse Blanket</h3><p>Farmhouse saison.</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_08_imperial_ipa.jpg" alt="imperial IPA beer"/>
<figcaption><h3>American Favorite</h3><p>Imperial IPA dry-hopped with mosaic.</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_09_vanilla_blonde.jpg" alt="vanilla lavender blonde ale"/>
<figcaption><h3>Ultraviolet</h3><p>Blonde ale with vanilla and lavender.</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_09b_coffee_porter.jpg" alt="coffee porter"/>
<figcaption><h3>Coffee Porter</h3><p>Base robust porter recipe with cold-brewed coffee addition.</p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_10_seasonal_ale.jpg" alt="harvest seasonal ale"/>
<figcaption><h3>Scythe and Sickle</h3><p>Seasonal harvest ale. </p></figcaption>
</figure>
</li>
<li>
<figure>
<img src="img/thumb/beer_11_kolsch.jpg" alt="kolsch style beer"/>
<figcaption><h3>Kolsch Style</h3><p>A classic German favorite.</p></figcaption>
</figure>
</li>
</ul>
</section><!-- // grid-wrap -->
<section class="slideshow">
<ul>
<li>
<figure>
<figcaption>
<h3>Letterpress asymmetrical</h3>
<p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p>
</figcaption>
<img src="img/large/beer_01_smash.jpg" alt="smash beer"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Vice velit chia</h3>
<p>Chillwave Echo Park Etsy organic Cosby sweater seitan authentic pour-over. Occupy wolf selvage bespoke tattooed, cred sustainable Odd Future hashtag butcher.</p>
</figcaption>
<img src="img/large/beer_02_esb.jpg" alt="ESB beer"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Brunch semiotics</h3>
<p>IPhone PBR polaroid before they sold out meh you probably haven't heard of them leggings tattooed tote bag, butcher paleo next level single-origin coffee photo booth.</p>
</figcaption>
<img src="img/large/beer_03_brown.jpg" alt="brown ale"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Chillwave nihil occupy</h3>
<p>Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p>
</figcaption>
<img src="img/large/beer_04_pils.jpg" alt="pilsner"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Kale chips lomo biodiesel</h3>
<p>Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a bird on it craft beer Etsy.</p>
</figcaption>
<img src="img/large/beer_05_stout.jpg" alt="stout"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Exercitation occaecat</h3>
<p>Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.</p>
</figcaption>
<img src="img/large/beer_05b_belgian_golden.jpg" alt="belgian golden"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Selfies viral four</h3>
<p>Ethnic readymade pug, small batch XOXO Odd Future normcore kogi food truck craft beer single-origin coffee banh mi photo booth raw denim. XOXO messenger bag pug VHS. Forage gluten-free polaroid, twee hoodie chillwave Helvetica.</p>
</figcaption>
<img src="img/large/beer_06_amber.jpg" alt="amber"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Photo booth skateboard</h3>
<p>Thundercats pour-over four loko skateboard Brooklyn, Etsy sriracha leggings dreamcatcher narwhal authentic 3 wolf moon synth Portland. Shabby chic photo booth Blue Bottle keffiyeh, McSweeney's roof party Carles.</p>
</figcaption>
<img src="img/large/beer_07_saison.jpg" alt="saison"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Ex fashion axe</h3>
<p>Ennui Blue Bottle shabby chic, organic butcher High Life tattooed meggings jean shorts Brooklyn sartorial polaroid. Cray raw denim +1, bespoke High Life Odd Future banh mi chillwave Marfa kogi disrupt paleo direct trade 90's Godard. </p>
</figcaption>
<img src="img/large/beer_08_imperial_ipa.jpg" alt="imperial ipa"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Thundercats next level</h3>
<p>Typewriter authentic PBR, iPhone mixtape fixie post-ironic fingerstache Pitchfork artisan. Wayfarers master cleanse occupy, Tonx lo-fi swag Truffaut irony whatever Blue Bottle readymade PBR gluten-free. Lomo Pinterest Banksy fap. Retro ennui you probably haven't heard of them iPhone, PBR fashion axe polaroid.</p>
</figcaption>
<img src="img/large/beer_09_vanilla_blonde.jpg" alt="vanilla lavender blonde ale"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Bushwick selvage synth</h3>
<p>Schlitz deserunt pour-over consectetur. Selfies plaid asymmetrical farm-to-table, cred gastropub photo booth narwhal non roof party velit raw denim slow-carb meggings pug. Tempor post-ironic seitan cliche bicycle rights. Meh viral Williamsburg, quinoa 8-bit kale chips YOLO Marfa accusamus.</p>
</figcaption>
<img src="img/large/beer_09b_coffee_porter.jpg" alt="coffee porter"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Bottle wayfarers locavore</h3>
<p>Aliqua High Life art party fixie farm-to-table. Kitsch Echo Park shabby chic, narwhal fugiat Cosby sweater asymmetrical gastropub tofu. Authentic minim Pinterest Blue Bottle beard, aliqua chia XOXO dolor freegan banh mi vegan fugiat.</p>
</figcaption>
<img src="img/large/beer_10_seasonal_ale.jpg" alt="harvest seasonal ale"/>
</figure>
</li>
<li>
<figure>
<figcaption>
<h3>Letterpress asymmetrical</h3>
<p>Pickled hoodie Pinterest 90's proident church-key chambray. Salvia incididunt slow-carb ugh skateboard velit, flannel authentic hoodie lomo fixie photo booth farm-to-table. Minim meggings Bushwick, semiotics Vice put a bird.</p>
</figcaption>
<img src="img/large/beer_11_kolsch.jpg" alt="kolsch style beer"/>
</figure>
</li>
</ul>
<nav>
<span class="icon nav-prev"></span>
<span class="icon nav-next"></span>
<span class="icon nav-close"></span>
</nav>
<div class="info-keys icon">Navigate with arrow keys</div>
</section><!-- // slideshow -->
</div><!-- // grid-gallery -->
</div>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>
<script>
new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
</script>
</body>
</html>