forked from kevin-powell/brewery_website
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
154 lines (153 loc) · 11.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="Gayatri">
<meta name="description" content="A website for a brewery. 🍻">
<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>
<meta name="theme-color" content="#2F2726">
<link rel="stylesheet" href="style/fonts.css">
<link rel="stylesheet" href="style/main.min.css">
<link rel="shortcut icon" href="images/favicon.png" type="image/png">
<link rel="preload" href="images/hero-bg.jpg" as="image">
</head>
<body id="body">
<div class="loader-container">
<div class="text">Boozing...😵</div>
</div>
<!-- NAVIGATION -->
<nav>
<ul>
<li><a href="#beer" class="scroll">Our Beer</a></li>|
<li><a href="#mission" class="scroll">Our Mission</a></li>|
<li><a href="#brewery" class="scroll">Tours</a></li>|
<li><a href="#taproom" class="scroll">Taproom</a></li>
</ul>
</nav>
<!-- INTRO -->
<section class="section section--intro">
<svg class="logo logo--white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 84">
<g fill="#fff" style="isolation:isolate">
<path d="M1 43V2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v32h13a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zM28 23C28 5 38 0 48 0s20 5 20 23-10 22-20 22-20-5-20-23zm27 0c0-10-3-12-7-12s-7 2-7 12 3 11 7 11 7-2 7-12zM71 23C71 4 81 0 91 0c6 0 9 1 11 2l1 3v7a1 1 0 0 1-1 2 4 4 0 0 1-2-1 15 15 0 0 0-7-2c-6 0-9 3-9 12s3 12 9 12a16 16 0 0 0 7-3 4 4 0 0 1 2 0 1 1 0 0 1 1 1v8l-1 2c-2 1-5 2-11 2-10 0-20-4-20-22zM118 43a1 1 0 0 1-2 1h-9a1 1 0 0 1-1-1 9 9 0 0 1 1-3l12-38 1-1h9a1 1 0 0 1 2 1l12 38a9 9 0 0 1 1 3 1 1 0 0 1-1 1h-9a2 2 0 0 1-2-1l-1-5h-12zm9-18l-2-8v-1 1l-2 8-2 4h7zM147 43V2a1 1 0 0 1 2-1h9a1 1 0 0 1 1 1l1 32h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-23a1 1 0 0 1-2-1z"/>
</g>
<g fill="#fff" style="isolation:isolate">
<path d="M0 83V56a1 1 0 0 1 1-1h12c5 0 8 3 8 8a7 7 0 0 1-4 6c4 1 5 3 5 7 0 5-3 8-9 8H1l-1-1zm10-17c2 0 3 0 3-2s-1-3-3-3H8v5h2zm1 12c2 1 3 0 3-3 0-2-1-3-3-3H8v7zM45 76l3 6a2 2 0 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1-1 0h-7c-2 0-2-1-3-3l-3-6a1 1 0 0 0-2-1h-1v9a1 1 0 0 1 0 1h-7a1 1 0 0 1-1-1V56a1 1 0 0 1 1-1h13c5 0 9 4 9 10 0 4-3 7-6 8 2 0 2 1 3 3zm-12-8h3c2 0 4-1 4-3s-2-3-4-3h-3v6zM52 83V56a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v6a1 1 0 0 1-1 0h-8v4h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-6v4h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H53a1 1 0 0 1-1-1zM90 60l2 9a18 18 0 0 1 1 3v-3l2-13a1 1 0 0 1 1-1l6 1a1 1 0 0 1 1 0 11 11 0 0 1 0 2l-5 25a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1l-2-8-1-5c0-1 0 0 0 0l-1 5-1 9a1 1 0 0 1-1 0h-7l-5-26a11 11 0 0 1-1-2 1 1 0 0 1 1 0h6a1 1 0 0 1 1 0l2 13 1 3c0 1 0 0 0 0a20 20 0 0 1 1-3l2-9a1 1 0 0 1 1 0h3a1 1 0 0 1 1 0zM106 83V56a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 0h-9v4h7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7v4h9a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1zM147 76l3 6a2 2 0 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1-1 0h-7c-2 0-2-1-3-3l-4-6a1 1 0 0 0-1-1h-1v9a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V56a1 1 0 0 1 1-1h13c5 0 8 4 8 10 0 4-2 7-5 8l3 3zm-12-8h3c2 0 3-1 3-3s-1-3-3-3h-3v6zM158 83v-9l-8-16a4 4 0 0 1 0-2 1 1 0 0 1 0-1l7 1a1 1 0 0 1 1 0l2 6a29 29 0 0 1 2 4 20 20 0 0 1 2-4l2-6 1-1 6 1a1 1 0 0 1 1 0 4 4 0 0 1 0 2l-8 16v9a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z"/>
</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>
<!-- BEER CAROUSEL -->
<section class="section section--beer" id="beer">
<h2 class="section__title">The Beer</h2>
<p class="section__subtitle">Some of what we have on offer</p>
<p class="section__about">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="carousel">
<button class="carousel__arrow" id="js-left">
<svg viewBox="0 0 19 31" width="30" height="30"><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>
<div class="carousel-items">
<!-- carousel item 01 -->
<figure class="carousel__item">
<img src="images/beer-1.jpg" class="carousel__image">
<figcaption class="carousel__caption">
<h3 class="carousel__title">Dark lager</h3>
<p class="carousel__subtitle">8.2%<span>alcohol</span></p>
<p class="carousel__description">Makes you feel light</p>
</figcaption>
</figure>
<!-- carousel item 02 -->
<figure class="carousel__item">
<img src="images/beer-2.jpg" class="carousel__image">
<figcaption class="carousel__caption">
<h3 class="carousel__title">Imperial Stout</h3>
<p class="carousel__subtitle">1.2%<span>alcohol</span></p>
<p class="carousel__description">The real royal taste</p>
</figcaption>
</figure>
<!-- carousel item 03 -->
<figure class="carousel__item">
<img src="images/beer-3.jpg" class="carousel__image">
<figcaption class="carousel__caption">
<h3 class="carousel__title">Indian Pale Ale</h3>
<p class="carousel__subtitle">6.2%<span>alcohol</span></p>
<p class="carousel__description">Our take on a classic style</p>
</figcaption>
</figure>
<!-- carousel item 04 -->
<figure class="carousel__item">
<img src="images/beer-4.jpg" class="carousel__image">
<figcaption class="carousel__caption">
<h3 class="carousel__title">Saison</h3>
<p class="carousel__subtitle">2.5%<span>alcohol</span></p>
<p class="carousel__description">A modern farmhouse feel</p>
</figcaption>
</figure>
<!-- carousel item 05 -->
<figure class="carousel__item">
<img src="images/beer-5.jpg" class="carousel__image">
<figcaption class="carousel__caption">
<h3 class="carousel__title">Baltic Porter</h3>
<p class="carousel__subtitle">7.6%<span>alcohol</span></p>
<p class="carousel__description">Get all rusty with this</p>
</figcaption>
</figure>
</div>
<button class="carousel__arrow" id="js-right">
<svg viewBox="0 0 19 31" width="30" height="30"><path d="M3.5,27.49l12-12-12-12" transform="translate(0)" fill="none" stroke="#645a57" stroke-linecap="round" stroke-linejoin="round" stroke-width="7"/></svg>
</button>
</div>
</section>
<!-- MISSION -->
<section class="section section--mission" id="mission">
<div class="card 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--img">
</section>
<!-- BREWERY -->
<section class="section section--brewery" id="brewery">
<div class="section__image">
<img src="images/keg.jpg" alt="" srcset="">
</div>
<div class="section__content">
<h2 class="section__title">Our brewery</h2>
<div class="section__subtitle">Free tours every Saturday and Sunday</div>
<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>
<!-- TAPROOM -->
<section class="section section--taproom" id="taproom">
<div class="card card--light front">
<h2 class="section__title">Taproom</h2>
<div class="section__subtitle">Try our beers on location</div>
<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="back card--img">
</section>
<!-- FOOTER -->
<footer>
<svg class="logo logo--light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174 84">
<g fill="#fff" style="isolation:isolate">
<path d="M1 43V2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v32h13a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zM28 23C28 5 38 0 48 0s20 5 20 23-10 22-20 22-20-5-20-23zm27 0c0-10-3-12-7-12s-7 2-7 12 3 11 7 11 7-2 7-12zM71 23C71 4 81 0 91 0c6 0 9 1 11 2l1 3v7a1 1 0 0 1-1 2 4 4 0 0 1-2-1 15 15 0 0 0-7-2c-6 0-9 3-9 12s3 12 9 12a16 16 0 0 0 7-3 4 4 0 0 1 2 0 1 1 0 0 1 1 1v8l-1 2c-2 1-5 2-11 2-10 0-20-4-20-22zM118 43a1 1 0 0 1-2 1h-9a1 1 0 0 1-1-1 9 9 0 0 1 1-3l12-38 1-1h9a1 1 0 0 1 2 1l12 38a9 9 0 0 1 1 3 1 1 0 0 1-1 1h-9a2 2 0 0 1-2-1l-1-5h-12zm9-18l-2-8v-1 1l-2 8-2 4h7zM147 43V2a1 1 0 0 1 2-1h9a1 1 0 0 1 1 1l1 32h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-23a1 1 0 0 1-2-1z"/>
</g>
<g fill="#fff" style="isolation:isolate">
<path d="M0 83V56a1 1 0 0 1 1-1h12c5 0 8 3 8 8a7 7 0 0 1-4 6c4 1 5 3 5 7 0 5-3 8-9 8H1l-1-1zm10-17c2 0 3 0 3-2s-1-3-3-3H8v5h2zm1 12c2 1 3 0 3-3 0-2-1-3-3-3H8v7zM45 76l3 6a2 2 0 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1-1 0h-7c-2 0-2-1-3-3l-3-6a1 1 0 0 0-2-1h-1v9a1 1 0 0 1 0 1h-7a1 1 0 0 1-1-1V56a1 1 0 0 1 1-1h13c5 0 9 4 9 10 0 4-3 7-6 8 2 0 2 1 3 3zm-12-8h3c2 0 4-1 4-3s-2-3-4-3h-3v6zM52 83V56a1 1 0 0 1 1-1h15a1 1 0 0 1 1 1v6a1 1 0 0 1-1 0h-8v4h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-6v4h8a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H53a1 1 0 0 1-1-1zM90 60l2 9a18 18 0 0 1 1 3v-3l2-13a1 1 0 0 1 1-1l6 1a1 1 0 0 1 1 0 11 11 0 0 1 0 2l-5 25a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1l-2-8-1-5c0-1 0 0 0 0l-1 5-1 9a1 1 0 0 1-1 0h-7l-5-26a11 11 0 0 1-1-2 1 1 0 0 1 1 0h6a1 1 0 0 1 1 0l2 13 1 3c0 1 0 0 0 0a20 20 0 0 1 1-3l2-9a1 1 0 0 1 1 0h3a1 1 0 0 1 1 0zM106 83V56a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v6a1 1 0 0 1-1 0h-9v4h7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7v4h9a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-16a1 1 0 0 1-1-1zM147 76l3 6a2 2 0 0 0 1 1 1 1 0 0 1 1 1 1 1 0 0 1-1 0h-7c-2 0-2-1-3-3l-4-6a1 1 0 0 0-1-1h-1v9a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V56a1 1 0 0 1 1-1h13c5 0 8 4 8 10 0 4-2 7-5 8l3 3zm-12-8h3c2 0 3-1 3-3s-1-3-3-3h-3v6zM158 83v-9l-8-16a4 4 0 0 1 0-2 1 1 0 0 1 0-1l7 1a1 1 0 0 1 1 0l2 6a29 29 0 0 1 2 4 20 20 0 0 1 2-4l2-6 1-1 6 1a1 1 0 0 1 1 0 4 4 0 0 1 0 2l-8 16v9a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1z"/>
</g>
</svg>
<p>© 2018</p>
<p>design by Kevin Powell</p>
<p>code by Gayatri</p>
</footer>
<script src="js/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>