-
Notifications
You must be signed in to change notification settings - Fork 0
/
shopGuide.html
293 lines (209 loc) · 9.8 KB
/
shopGuide.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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- page title -->
<title> The Little Green Larder | Shopping guide </title>
<!-- import viewport properties -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- import custom font -->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker%7CRaleway&display=swap" rel="stylesheet">
<!-- import bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- import mapbox files -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<!-- theme color set for web app -->
<meta name="theme-color" content="#d9ede2">
<!-- icon in the highest resolution -->
<link rel="icon" sizes="192x192" href="images/icons/highres.png">
<!-- icon for apple touch -->
<link rel="apple-touch-icon" href="images/icons/apple-icon.png">
<!-- import css file -->
<link rel="stylesheet" href="css/master.css">
<!-- import manifest.json -->
<link rel="manifest" href="web-app/manifest.json">
</head>
<body>
<header class="container-fluid p-5">
<!-- Store logo -->
<img id=headerImg class="img-fluid" src="images/logo.jpg" alt="">
</header>
<!-- navigation bar with links -->
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav p-2 m-auto">
<li class="nav-item mx-2">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="about.html">About zero-waste</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="advice.html">Advice</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="menu.html">Products</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="shopGuide.html">Shopping guide</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="calculator.html">Carbon footprint calculator</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link" href="map.html">Helpful places in Dundee</a>
</li>
</ul>
</div>
</nav>
<main class="container p-5">
<!-- Introduction to page -->
<div class="row pb-4">
<div class="col-lg-4">
<h2 class="pb-2">Shopping at The Little Green Larder</h2>
<p>Shopping in a zero-waste shop can take a little bit of getting used to. This guide provides information on how you should shop at our store!</p>
<p>Shopping in a zero waste/packaging free shop means that you don’t have a huge amount of waste plastic containers when you get home. Less single use plastic means less waste that can end up in our environment and oceans breaking down into
micro plastics. You will be reducing your carbon footprint and having a fun shopping experience.</p>
</div>
<div class="col-lg">
<img class="img-fluid" src="images/SIOD7333.jpg" alt="">
</div>
</div>
<!-- Text and images -->
<div class="row">
<div class="col-lg">
<p>Shopping like this also means you will have less food waste. It is estimated that food waste accounts for 8% of the worlds greenhouse gasses and 1.3 billion tonnes of food are wasted every year! (From Zero waste Scotland Facebook page). At
The Little Green Larder you can buy as much or as little as you need. This means you won’t have large packets that will inevitably not get used and go off. </p>
</div>
</div>
<div class="row">
</div>
<div class="col-lg">
<h2>1. Bring your own containers and bags</h2>
<p>You can bring any container you have along with you to fill up. We have fresh fruit and veg, bread, whole foods, fried foods and refillable oil, vinegar and cleaning liquids. People normally bring in jars, bottles and tupperware, but
anything works. We have even had people filling up a wine bottle with washing up liquid!</p>
</div>
<div class="row pt-4">
<div class="col-lg">
<img class="img-fluid pb-2" src="images/empty-container.png" alt="">
</div>
<div class="col-lg-6">
<h2>2. Weigh your empty container</h2>
<p>You can bring any container you have along with you to fill up. We have fresh fruit and veg, bread, whole foods, fried foods and refillable oil, vinegar and cleaning liquids. People normally bring in jars, bottles and tupperware, but
anything works. We have even had people filling up a wine bottle with washing up liquid!</p>
<p>When filling up a liquid, snack or dried good you must first weigh your container. Place it on the scales and select, “I have an empty container to weigh”. Then press print and put the sticker on your container.</p>
</div>
</div>
<div class="row pt-4">
<div class="col-lg">
<h2 class="text-right">3. Fill up with a product</h2>
<p>Everything is different prices so only one type of product per container. Fill as much or as little as you need then head back to the scales.</p>
</div>
<div class="col-lg-4">
<img class="img-fluid" src="images/product.jpg" alt="">
</div>
</div>
<div class="row pt-4">
<div class="col-lg-6">
<img class="img-fluid" src="images/reweigh.png" alt="">
</div>
<div class="col-lg">
<h2>4. Re-weigh your container</h2>
<p>At the scales select, “I have a filled container to weigh” and then scan your printed barcode. Place the container on the scales. You will get a list of categories to choose from. Select the right category e.g. cereal. This will bring a
list of items up for you. Select your item then press print. You will get a second sticker with the item name, weight and price.
Zero waste shopping at the Little Green Larder</p>
</div>
</div>
<div class="row pt-4">
<div class="col-lg">
<h2>5. Pay at the till</h2>
<p>The last thing for you to do is bring it up to the till and pay for it. We accept both cash and card. We have a few spare donated plastic bags available but we do encourage you to bring along your own. The more times you use a bag the less
of a carbon footprint you have!</p>
</div>
<div class="col-lg">
<img class="img-fluid" src="images/final.png" alt="">
</div>
</div>
</main>
<!-- Footer -->
<footer class="container-fluid page-footer footerDesign">
<div class="row">
<div class="col-lg-4">
<!-- Store description -->
<h6 class="mt-3">About</h6>
<p>The Little Green Larder offers a plastic free shopping experience, with zero waste alternatives to inspire us to create a greener future.</p>
</div>
<div class="col-lg ">
<!-- Address -->
<h6 class="mt-3">Address</h6>
<p>272 Perth Road, Dundee</p>
</div>
<div class="col-lg">
<!-- Working hours of the store -->
<h6 class="mt-3">Working hours</h6>
<table>
<tbody>
<tr>
<th></th>
<td>Monday</td>
<td>10:00 - 18:00</td>
</tr>
<tr>
<th></th>
<td>Tuesday</td>
<td>10:00 - 18:00</td>
</tr>
<tr>
<th></th>
<td>Wednesday</td>
<td>9:00 - 17:00</td>
</tr>
<tr>
<th></th>
<td>Thursday</td>
<td>16:00 - 19:00</td>
</tr>
<tr>
<th></th>
<td>Friday</td>
<td>10:00 - 18:00</td>
</tr>
<tr>
<th></th>
<td>Saturday</td>
<td>09:00 - 17:00</td>
</tr>
<tr>
<th></th>
<td>Sunday</td>
<td>11:00 - 14:00</td>
</tr>
</tbody>
</table>
</div>
<!-- Additional links -->
<div class="col-lg mx-auto">
<h6 class="mt-3">Useful links</h6>
<ul class="list-unstyled">
<li> <a href="http://thelittlegreenblogger.com/"> The Little Green Blogger</a> </li>
<li> <a href="https://www.facebook.com/thelittlegreenlarder/"> The Little Green Larder facebook page</a> </li>
</ul>
</div>
</div>
<div class="row">
<div class="col font-italic text-justify mt-2">
<p>The webpage was made by Gerda Ugnė Pupelytė, Andrew Studders, Neil McGuigan, Edward Houghton. </p>
</div>
</div>
</footer>
<!-- import bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="web-app/registerSW.js"></script>
</body>
</html>