forked from kevin-powell/brewery_website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (158 loc) · 15.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The Brewery</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="#beer">Our Beer</a></li>
<li><a href="#mission">Our Mission</a></li>
<li><a href="#tours">Tours</a></li>
<li><a href="#taproom">Taproom</a></li>
</ul>
</nav>
<section class="section section--intro">
<svg class="logo logo--white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.1 84.4">
<title>logo</title>
<g style="isolation: isolate">
<path d="M3.4,50.7V9.7A1.26,1.26,0,0,1,4.7,8.4h9.5a1.26,1.26,0,0,1,1.3,1.3V41.4H28.1a1.26,1.26,0,0,1,1.3,1.3v8A1.26,1.26,0,0,1,28.1,52H4.7A1.21,1.21,0,0,1,3.4,50.7Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M30.5,30.2C30.5,13,40.2,7.8,50.2,7.8S70,13,70,30.2,60.3,52.7,50.3,52.7,30.5,47.4,30.5,30.2Zm27.1,0c0-9.5-3.5-11.3-7.3-11.3S43,20.7,43,30.2s3.5,11.4,7.3,11.4S57.6,39.7,57.6,30.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M73.6,30.2c0-18.7,9.7-22.5,20.1-22.5,5.4,0,9,1.4,10.3,2.3,1,.7,1.7,1.4,1.7,2.3V20a1.24,1.24,0,0,1-1.3,1.4,4.25,4.25,0,0,1-1.8-.8,14.7,14.7,0,0,0-7.7-2.2c-6,0-9,3.3-9,12s3.1,11.9,9,11.9a15.7,15.7,0,0,0,7.7-2.2,4.25,4.25,0,0,1,1.8-.8,1.24,1.24,0,0,1,1.3,1.4v7.6c0,1-.7,1.6-1.7,2.3-1.4,1-4.9,2.3-10.3,2.3C83.3,52.7,73.6,48.9,73.6,30.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M119.9,50.8a1.46,1.46,0,0,1-1.6,1.2h-9a1.16,1.16,0,0,1-1.2-1.2,9.38,9.38,0,0,1,.7-2.7L121.1,9.7c.3-1,.7-1.2,1.5-1.2h9.2a1.46,1.46,0,0,1,1.5,1.2l12.3,38.4a9.38,9.38,0,0,1,.7,2.7,1.16,1.16,0,0,1-1.2,1.2h-9a1.52,1.52,0,0,1-1.6-1.2l-1.3-4.7H121.1Zm9.8-17.7c-.4-1.4-2-7.5-2-8.2s-.1-.8-.4-.8-.4.2-.4.8-1.6,6.8-2,8.2L123.8,37h6.9Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M149.7,50.7V9.7A1.26,1.26,0,0,1,151,8.4h9.5a1.26,1.26,0,0,1,1.3,1.3V41.4h12.6a1.26,1.26,0,0,1,1.3,1.3v8a1.26,1.26,0,0,1-1.3,1.3H151A1.26,1.26,0,0,1,149.7,50.7Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
</g>
<g style="isolation: isolate">
<path d="M2.3,91.1V64a.9.9,0,0,1,.9-.9H14.9c5.7,0,8.4,2.9,8.4,7.3a6.59,6.59,0,0,1-3.7,6.1c3.3,1.4,5.1,3.6,5.1,7.2,0,5-3.2,8.2-9.2,8.2H3.1C2.6,92,2.3,91.6,2.3,91.1ZM12.6,74c1.8,0,2.9-.4,2.9-2.7,0-1.9-1.4-2.4-3.4-2.4H10.3v5h2.3Zm.6,12.2c2.3,0,3.5-.7,3.5-3.3,0-2.2-1.3-3.1-3.5-3.1H10.3v6.4Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M47.5,84l2.8,5.4a1.72,1.72,0,0,0,1.2,1,.7.7,0,0,1,.6.8.74.74,0,0,1-.8.8H44.6c-1.9,0-2.4-1-3.4-3l-3.3-6.6a1.38,1.38,0,0,0-1.3-.9h-.9v9.6a.9.9,0,0,1-.9.9H28.5a.9.9,0,0,1-.9-.9V64a.9.9,0,0,1,.9-.9H41.4c5,0,8.4,3.9,8.4,9.2,0,4.3-2.3,7.3-5.5,8.1C45.8,81.1,46.4,82.1,47.5,84ZM35.7,75.7h2.6c2.3,0,3.5-.9,3.5-3.1s-1.2-3.1-3.5-3.1H35.6v6.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M54.1,91.1V64a.9.9,0,0,1,.9-.9H70.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H62.1v3.2h6.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H62.1V85h8.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H55A1.06,1.06,0,0,1,54.1,91.1Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M92.4,68l1.9,8.4a18.06,18.06,0,0,1,.5,3.2c0,.4,0,.5.2.5s.2-.1.2-.5.3-2,.4-3.2L97.7,64a.89.89,0,0,1,1-.8h6a.86.86,0,0,1,.8.8,11.27,11.27,0,0,1-.3,1.8l-4.9,25.4a.88.88,0,0,1-.9.8H93a.88.88,0,0,1-.9-.8l-1.7-8.5c-.3-1.4-.7-4.3-.7-4.7s0-.5-.2-.5-.2.1-.2.5-.5,3.3-.7,4.7L87,91.2a.88.88,0,0,1-.9.8H79.7a.88.88,0,0,1-.9-.8L73.9,65.8a11.27,11.27,0,0,1-.3-1.8.86.86,0,0,1,.8-.8h6a.89.89,0,0,1,1,.8l2.1,12.4c.2,1.3.5,2.7.5,3.2s0,.5.2.5.2-.1.2-.5a19.5,19.5,0,0,1,.5-3.2L86.8,68a1,1,0,0,1,1-.8h3.6A.89.89,0,0,1,92.4,68Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M108.6,91.1V64a.9.9,0,0,1,.9-.9H125a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9h-8.4v3.2h6.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9h-6.5V85h8.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H109.4A1.08,1.08,0,0,1,108.6,91.1Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M149.4,84l2.8,5.4a1.72,1.72,0,0,0,1.2,1,.7.7,0,0,1,.6.8.74.74,0,0,1-.8.8h-6.7c-1.9,0-2.4-1-3.4-3l-3.3-6.6a1.38,1.38,0,0,0-1.3-.9h-.9v9.6a.9.9,0,0,1-.9.9h-6.3a.9.9,0,0,1-.9-.9V64a.9.9,0,0,1,.9-.9h12.9c5,0,8.4,3.9,8.4,9.2,0,4.3-2.3,7.3-5.5,8.1C147.7,81.1,148.3,82.1,149.4,84Zm-11.8-8.3h2.6c2.3,0,3.5-.9,3.5-3.1s-1.2-3.1-3.5-3.1h-2.7v6.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M160.1,91.1V81.6l-7.6-16A3.68,3.68,0,0,1,152,64a.79.79,0,0,1,.8-.8h6.1a1.21,1.21,0,0,1,1.3.8l2.4,5.9a28.53,28.53,0,0,1,1.3,3.6c0,.4.1.5.3.5s.3-.1.3-.5a20.49,20.49,0,0,1,1.3-3.6l2.4-5.9c.2-.6.6-.8,1.3-.8h6.1a.79.79,0,0,1,.8.8,3.68,3.68,0,0,1-.5,1.6l-7.6,16v9.5a.9.9,0,0,1-.9.9h-6.3A.87.87,0,0,1,160.1,91.1Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
</g>
</svg>
<p class="intro__text">For example, the Busch indicates that a tipsy bottle dances with some geosynchronous Sierra Nevada. Furthermore, the mug earns enough for a beer, and the usch indicates that a tipsy bottle dances with some geosynchronous Sierra Nevada. Furthermore, the mug earns enough for a beer, and the burglar ale borrows money from.</p>
</section>
<section class="section section--beer">
<h2 class="section__title">The Beer</h2>
<p class="section__subtitle">Some of what we have on offer</p>
<p>For example, the Busch indicates that a tipsy bottle dances with some geosynchronous Sierra Nevada. Furthermore, the mug earns enough for a beer, and the burglar ale borrows money from.</p>
<div class="grid-carousel">
<button class="grid-carousel__button js-left">
<svg id="left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 31">
<title>left-arrow</title>
<path id="left-arrow" d="M15.5,3.5l-12,12,12,12" transform="translate(0)" fill="none" stroke="#645a57" stroke-linecap="round" stroke-linejoin="round" stroke-width="7"/></svg>
</button>
<!-- carousel item 01 -->
<figure class="grid-carousel__item">
<img src="images/beer-1.jpg" class="grid-carousel__image">
<figcaption class="grid-carousel__caption">
<h3 class="grid-carousel__title">IPA</h3>
<p class="grid-carousel__subtitle">6.2%<span>alcohol</span></span></p>
<p class="grid-carousel__description">Our take on a classic style</p>
</figcaption>
</figure>
<!-- carousel item 02 -->
<figure class="grid-carousel__item">
<img src="images/beer-2.jpg" class="grid-carousel__image">
<figcaption class="grid-carousel__caption">
<h3 class="grid-carousel__title">Raspberry Ale</h3>
<p class="grid-carousel__subtitle">4.9%<span>alcohol</span></span></p>
<p class="grid-carousel__description">Beat the heat with this refreshing summer beer</p>
</figcaption>
</figure>
<!-- carousel item 03 -->
<figure class="grid-carousel__item featured">
<img src="images/beer-3.jpg" class="grid-carousel__image">
<figcaption class="grid-carousel__caption">
<h3 class="grid-carousel__title">Saison</h3>
<p class="grid-carousel__subtitle">5.8%<span>alcohol</span></span></p>
<p class="grid-carousel__description">A farmhouse style Saison</p>
</figcaption>
</figure>
<!-- carousel item 04 -->
<figure class="grid-carousel__item">
<img src="images/beer-4.jpg" class="grid-carousel__image">
<figcaption class="grid-carousel__caption">
<h3 class="grid-carousel__title">Brett Pale Ale</h3>
<p class="grid-carousel__subtitle">6.4%<span>alcohol</span></span></p>
<p class="grid-carousel__description">A rustic style beer</p>
</figcaption>
</figure>
<!-- carousel item 05 -->
<figure class="grid-carousel__item">
<img src="images/beer-5.jpg" class="grid-carousel__image">
<figcaption class="grid-carousel__caption">
<h3 class="grid-carousel__title">ESB</h3>
<p class="grid-carousel__subtitle">6.2%<span>alcohol</span></span></p>
<p class="grid-carousel__description">A classic English style beer</p>
</figcaption>
</figure>
<button class="grid-carousel__button js-right">
<svg id="right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 31">
<title>right-arrow</title>
<path id="right-arrow" d="M3.5,27.49l12-12-12-12" transform="translate(0 0.01)" fill="none" stroke="#645a57" stroke-linecap="round" stroke-linejoin="round" stroke-width="7"/>
</svg>
</button>
</div>
</section>
<section class="section section--card section--mission">
<div class="card card--start card--dark back">
<h2 class="section__title">Our mission</h2>
<p class="section__subtitle">Why we do what we do</p>
<p>For example, the Busch indicates that a tipsy bottle dances with some geosynchronous Sierra Nevada. Furthermore, the mug earns enough for a beer, and the burglar ale borrows money from.</p>
<a href="" class="btn btn--light">Read More</a>
</div>
<img src="images/mission.jpg" alt="man smiling while working at brewery" class="front card__image card__image--end">
</section>
<section class="section section--brewery">
<img class="section--brewery__image" src="images/keg.jpg" alt="some kegs">
<div class="section--brewery__text-box">
<h2 class="section__title">Our brewery</h2>
<p class="section__subtitle">Free tours every Saturday and Sunday</p>
<p>For example, the Busch indicates that a tipsy bottle dances with some geosynchronous Sierra Nevada. Furthermore, the mug earns enough for a beer, and the burglar ale borrows money from.</p>
<p>The bud light barely satiates a Full Sail IPA. When the monkey bite from a mating ritual is usually loyal, a Sam Adams completely figures out the bar tab related to the corona light. If a financial shot dumbly reaches an understanding with a Budweiser Select over a Pilsner, then an incinerated colt 45 trembles. When a plowed Hoptoberfest feels nagging remorse, the polka-dotted Red Stripe gets stinking drunk. When you see the stein.</p>
<a href="#" class="btn btn--light">Find out more</a>
</div>
</section>
<section class="section section--card section--taproom">
<div class="card card--light card--end">
<h2 class="section__title">Taproom</h2>
<p class="section__subtitle">Try our beers on location</p>
<p>For example, the Busch indicates that a tipsy bottle dances with some geosynchronous Sierra Nevada. Furthermore, the mug earns enough for a beer, and the burglar ale borrows money from.</p>
<a href="" class="btn btn--outline">What's on tap</a>
<a href="" class="btn btn--dark">Opening Hours</a>
</div>
<img src="images/taproom.jpg" alt="waitress serving two flights of beer" class="card__image card__image--start">
</section>
<footer>
<svg class="logo logo--light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.1 84.4">
<title>logo</title>
<g style="isolation: isolate">
<path d="M3.4,50.7V9.7A1.26,1.26,0,0,1,4.7,8.4h9.5a1.26,1.26,0,0,1,1.3,1.3V41.4H28.1a1.26,1.26,0,0,1,1.3,1.3v8A1.26,1.26,0,0,1,28.1,52H4.7A1.21,1.21,0,0,1,3.4,50.7Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M30.5,30.2C30.5,13,40.2,7.8,50.2,7.8S70,13,70,30.2,60.3,52.7,50.3,52.7,30.5,47.4,30.5,30.2Zm27.1,0c0-9.5-3.5-11.3-7.3-11.3S43,20.7,43,30.2s3.5,11.4,7.3,11.4S57.6,39.7,57.6,30.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M73.6,30.2c0-18.7,9.7-22.5,20.1-22.5,5.4,0,9,1.4,10.3,2.3,1,.7,1.7,1.4,1.7,2.3V20a1.24,1.24,0,0,1-1.3,1.4,4.25,4.25,0,0,1-1.8-.8,14.7,14.7,0,0,0-7.7-2.2c-6,0-9,3.3-9,12s3.1,11.9,9,11.9a15.7,15.7,0,0,0,7.7-2.2,4.25,4.25,0,0,1,1.8-.8,1.24,1.24,0,0,1,1.3,1.4v7.6c0,1-.7,1.6-1.7,2.3-1.4,1-4.9,2.3-10.3,2.3C83.3,52.7,73.6,48.9,73.6,30.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M119.9,50.8a1.46,1.46,0,0,1-1.6,1.2h-9a1.16,1.16,0,0,1-1.2-1.2,9.38,9.38,0,0,1,.7-2.7L121.1,9.7c.3-1,.7-1.2,1.5-1.2h9.2a1.46,1.46,0,0,1,1.5,1.2l12.3,38.4a9.38,9.38,0,0,1,.7,2.7,1.16,1.16,0,0,1-1.2,1.2h-9a1.52,1.52,0,0,1-1.6-1.2l-1.3-4.7H121.1Zm9.8-17.7c-.4-1.4-2-7.5-2-8.2s-.1-.8-.4-.8-.4.2-.4.8-1.6,6.8-2,8.2L123.8,37h6.9Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M149.7,50.7V9.7A1.26,1.26,0,0,1,151,8.4h9.5a1.26,1.26,0,0,1,1.3,1.3V41.4h12.6a1.26,1.26,0,0,1,1.3,1.3v8a1.26,1.26,0,0,1-1.3,1.3H151A1.26,1.26,0,0,1,149.7,50.7Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
</g>
<g style="isolation: isolate">
<path d="M2.3,91.1V64a.9.9,0,0,1,.9-.9H14.9c5.7,0,8.4,2.9,8.4,7.3a6.59,6.59,0,0,1-3.7,6.1c3.3,1.4,5.1,3.6,5.1,7.2,0,5-3.2,8.2-9.2,8.2H3.1C2.6,92,2.3,91.6,2.3,91.1ZM12.6,74c1.8,0,2.9-.4,2.9-2.7,0-1.9-1.4-2.4-3.4-2.4H10.3v5h2.3Zm.6,12.2c2.3,0,3.5-.7,3.5-3.3,0-2.2-1.3-3.1-3.5-3.1H10.3v6.4Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M47.5,84l2.8,5.4a1.72,1.72,0,0,0,1.2,1,.7.7,0,0,1,.6.8.74.74,0,0,1-.8.8H44.6c-1.9,0-2.4-1-3.4-3l-3.3-6.6a1.38,1.38,0,0,0-1.3-.9h-.9v9.6a.9.9,0,0,1-.9.9H28.5a.9.9,0,0,1-.9-.9V64a.9.9,0,0,1,.9-.9H41.4c5,0,8.4,3.9,8.4,9.2,0,4.3-2.3,7.3-5.5,8.1C45.8,81.1,46.4,82.1,47.5,84ZM35.7,75.7h2.6c2.3,0,3.5-.9,3.5-3.1s-1.2-3.1-3.5-3.1H35.6v6.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M54.1,91.1V64a.9.9,0,0,1,.9-.9H70.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H62.1v3.2h6.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H62.1V85h8.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H55A1.06,1.06,0,0,1,54.1,91.1Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M92.4,68l1.9,8.4a18.06,18.06,0,0,1,.5,3.2c0,.4,0,.5.2.5s.2-.1.2-.5.3-2,.4-3.2L97.7,64a.89.89,0,0,1,1-.8h6a.86.86,0,0,1,.8.8,11.27,11.27,0,0,1-.3,1.8l-4.9,25.4a.88.88,0,0,1-.9.8H93a.88.88,0,0,1-.9-.8l-1.7-8.5c-.3-1.4-.7-4.3-.7-4.7s0-.5-.2-.5-.2.1-.2.5-.5,3.3-.7,4.7L87,91.2a.88.88,0,0,1-.9.8H79.7a.88.88,0,0,1-.9-.8L73.9,65.8a11.27,11.27,0,0,1-.3-1.8.86.86,0,0,1,.8-.8h6a.89.89,0,0,1,1,.8l2.1,12.4c.2,1.3.5,2.7.5,3.2s0,.5.2.5.2-.1.2-.5a19.5,19.5,0,0,1,.5-3.2L86.8,68a1,1,0,0,1,1-.8h3.6A.89.89,0,0,1,92.4,68Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M108.6,91.1V64a.9.9,0,0,1,.9-.9H125a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9h-8.4v3.2h6.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9h-6.5V85h8.5a.9.9,0,0,1,.9.9v5.3a.9.9,0,0,1-.9.9H109.4A1.08,1.08,0,0,1,108.6,91.1Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M149.4,84l2.8,5.4a1.72,1.72,0,0,0,1.2,1,.7.7,0,0,1,.6.8.74.74,0,0,1-.8.8h-6.7c-1.9,0-2.4-1-3.4-3l-3.3-6.6a1.38,1.38,0,0,0-1.3-.9h-.9v9.6a.9.9,0,0,1-.9.9h-6.3a.9.9,0,0,1-.9-.9V64a.9.9,0,0,1,.9-.9h12.9c5,0,8.4,3.9,8.4,9.2,0,4.3-2.3,7.3-5.5,8.1C147.7,81.1,148.3,82.1,149.4,84Zm-11.8-8.3h2.6c2.3,0,3.5-.9,3.5-3.1s-1.2-3.1-3.5-3.1h-2.7v6.2Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
<path d="M160.1,91.1V81.6l-7.6-16A3.68,3.68,0,0,1,152,64a.79.79,0,0,1,.8-.8h6.1a1.21,1.21,0,0,1,1.3.8l2.4,5.9a28.53,28.53,0,0,1,1.3,3.6c0,.4.1.5.3.5s.3-.1.3-.5a20.49,20.49,0,0,1,1.3-3.6l2.4-5.9c.2-.6.6-.8,1.3-.8h6.1a.79.79,0,0,1,.8.8,3.68,3.68,0,0,1-.5,1.6l-7.6,16v9.5a.9.9,0,0,1-.9.9h-6.3A.87.87,0,0,1,160.1,91.1Z" transform="translate(-2.3 -7.7)" fill="#fff"/>
</g>
</svg>
<p>copyright 2018</p>
<p>design by kevin powell</p>
</footer>
<script src="carousel.js"></script>
</body>
</html>