-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.htm
387 lines (340 loc) · 23.9 KB
/
about.htm
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
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meals on Mules | About</title>
<!-- Reset CSS -->
<link rel="stylesheet" href="css/reset.css">
<!-- Bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&family=Staatliches&display=swap" rel="stylesheet">
<!-- Main Styles -->
<link rel="stylesheet" href="css/main.css">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-W3G394H');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W3G394H"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Header -->
<header class="header">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white ">
<div class="container-fluid d-flex flex-row-reverse align-items-start relative pt-4 pb-1">
<!-- Cart Button -->
<button class="button btn-none"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="27"
fill="#F09C46" class="bi bi-cart-fill" viewBox="0 0 16 16">
<path
d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</svg></button>
<a class="navbar-brand absolute m-0 p-0" href="#">
<div class="relative">
<img class="img m" src="img/logo/logo-wordmark 1.svg" alt="">
</div>
</a>
<!-- Nav Mobile Button -->
<button class="navbar-toggler btn-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><svg width="24" height="24" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.857143 4.40816H23.1429C23.6163 4.40816 24 3.96961 24 3.42857V0.979592C24 0.438551 23.6163 0 23.1429 0H0.857143C0.383732 0 0 0.438551 0 0.979592V3.42857C0 3.96961 0.383732 4.40816 0.857143 4.40816ZM0.857143 14.2041H23.1429C23.6163 14.2041 24 13.7655 24 13.2245V10.7755C24 10.2345 23.6163 9.79592 23.1429 9.79592H0.857143C0.383732 9.79592 0 10.2345 0 10.7755V13.2245C0 13.7655 0.383732 14.2041 0.857143 14.2041ZM0.857143 24H23.1429C23.6163 24 24 23.5614 24 23.0204V20.5714C24 20.0304 23.6163 19.5918 23.1429 19.5918H0.857143C0.383732 19.5918 0 20.0304 0 20.5714V23.0204C0 23.5614 0.383732 24 0.857143 24Z"
fill="#F09C46" />
</svg></button>
<div class="collapse navbar-collapse bg-white px-3" id="navbarSupportedContent">
<img class="img d" src="img/logo/desktop-logo1.svg" alt="">
<ul class="navbar-nav me-auto pb-2 pb-lg-0 p-2">
<li class="nav-item ps-3">
<a class="nav-link active" aria-current="page" href="index.htm">Home</a>
</li>
<li class="nav-item ps-3">
<a class="nav-link" href="about.htm">About</a>
</li>
<li class="nav-item ps-3">
<a class="nav-link" href="shop.htm">Shop</a>
</li>
</ul>
<form class="d-flex">
<form class="d-flex">
<input class="form-control about-search me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-none pe-2" type="submit"><svg xmlns="http://www.w3.org/2000/svg"
width="25" height="28.37" fill="currentColor" class="bi bi-search"
viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg></button>
</form>
</form>
</div>
</div>
</nav>
<!-- Nav Bar End -->
<!--Desktop Catagories Nav-->
<ul class="nav justify-content-center d-flex mt-4 ">
<li class="nav-item d">
<a class="nav-link d pe-5" href="#">Seafood</a>
</li>
<li class="nav-item d pe-5">
<a class="nav-link d pe-5" href="#">Dairy & Eggs</a>
</li>
<li class="nav-item d">
<a class="nav-link d pe-5" href="#">Fruits & Veggies</a>
</li>
<li class="nav-item d">
<a class="nav-link d pe-5">Bakery</a>
</li>
<li class="nav-item d">
<a class="nav-link d pe-5">Frozen</a>
</li>
<li class="nav-item d">
<a class="nav-link d pe-5">Snacks</a>
</li>
</ul>
<!--Catagories Nav End-->
</header>
<main class="main">
<!-- Hero Section -->
<section class="section about bnr d-flex align-items-center justify-content-center">
<h1 class="h1 yellow">Meet the Mules</h1>
</section>
<!-- Mobile Item Search Section -->
<main class="about-width">
<!---- BRYCE --->
<section>
<div class="bryce d-flex p-2 bd-highlight flex-column">
<div class="d-flex align-items-end justify-content-start">
<div class="relative">
<div class="bg-ltgrn"></div>
<img src="img/headshots/bryce-maloney.png" alt="">
</div>
<p class="h2 orange"> Bruce </p>
</div>
<p class="p about">Meet Bryce, aka Bruce, certified “Daddy” of the Meals on Mules group and responsible adult to this group of animals. When not at his standing desk perusing the latest and greatest in tech gadgets, you can find Big Poppa B coding his
little heart out, helping friends to create the website of their dreams. The way to B’s heart? A case of wine fresh from the Okanagan. </p>
</div>
</section>
<!---- MERGHAN --->
<section>
<div class="mergan d-flex p-2 bd-highlight flex-column">
<div class="d-flex align-items-end justify-content-start flex-row-reverse">
<div class="relative">
<div class="bg-ltgrn"></div>
<img src="img/headshots/mergan-krenbrink.png" alt="">
</div>
<p class="h2 orange name-right"> Merhgan </p>
</div>
<p class="p about">Aka “Mergan”, the most hilarious cat-loving, punk rock space-enthusiast you ever will have the pleasure of meeting. Don’t let her all-black exterior fool you though, this gal has a quick wit and a certified banger of a collection of
memes that are sure to bring a smile to your face. When not slamming her fists on her desk, you can find Merg perusing redditt or coding the heck out of her portfolio. </p>
</div>
</section>
<!---- NICOLE --->
<section>
<div class="nicole d-flex p-2 bd-highlight flex-column">
<div class="d-flex align-items-end justify-content-star">
<div class="relative">
<div class="bg-ltgrn"></div>
<img src="img/headshots/nicole-cassandra.png" alt="">
</div>
<p class="h2 orange"> Nicole </p>
</div>
<p class="p about">The mama of the group and the sweetest angel you ever did meet. Always greeting you with a smile, Mama Nicole is at the ready for any and all design or web development-related questions. When not blessing her peers with an infectious
giggle, you can find this borb-enthusiast dancing up a storm to live music, jumping on a plane to a faraway beach, or cuddled up with her pets, Po and Leala. </p>
</div>
</section>
<!---- KELLEE--->
<section>
<div class="kellee d-flex p-2 bd-highlight flex-column">
<div class="d-flex align-items-end justify-content-start flex-row-reverse">
<div class="relative">
<div class="kellee bg-ltgrn"></div>
<img src="img/headshots/kellee-milne.png" alt="">
</div>
<p class="h2 orange name-right"> Kellee </p>
</div>
<p class="p about">Kellee, Kelisenavidad or “K-Swizzle” as she is known to the MoM team is the speedy-glasses-wearing-hero you didn’t know you needed but now realize you cannot live without. This design eficienado will downright refuse to code anything
but hand her a blank Adobe canvas and the girl is ready to pump out magic. When not crying in her coding classes, you can find this legend bartending her fricken heart out and planning a festival outfit that will make you say “wow
damn” and probably something else unmentionable. </p>
</div>
</section>
<!---- ELEANOR --->
<section>
<div class="eleanor d-flex p-2 bd-highlight flex-column">
<div class="d-flex align-items-end justify-content-start">
<div class="relative">
<div class="bg-ltgrn"></div>
<img src="img/headshots/eleanor-hanna.png" alt="">
</div>
<p class="h2 orange"> Eleanor </p>
</div>
<p class="p about">
Eleanor, or “Ethel” if you catch her on the right day, is an integral part of the MoM team where she always keeps us on our toes with her sassy attitude and witty remarks. At first glance you might assume Eleanor to be your typical, run-of-the-mill North
Vancouver girl, but the last thing you’ll ever find this girl doing is rippin’ mountain bike trails. Professionally, Eleanor is ready for just about anything that doesn’t involve coding. If you need copywriting, beautiful graphics,
logos, branding, or anything design related Eleanor will be the person you need to hire immediately. Outside of her professional life you can find Eleanor hiking, kayaking, exploring Gambier island or drinking gin martinis in her
living room. Best known for her catchphrase “I couldn’t code myself out of a wet paper bag”, please do not hire her for any of your web development needs.
</p>
</section>
</main>
<!-- Footer -->
<footer class="footer">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header " id="flush-headingOne">
<button class="accordion-button collapsed bg-ltgrn h4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Our Company
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Corporate Social Responsibility </a></li>
<li><a href="#"> Join Our Team </a></li>
<li><a href="#"> Retail Careers </a></li>
<li><a href="#"> Scholarships </a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed bg-ltgrn h4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Customer Service
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li><a href="#"> Help & Faq </a></li>
<li><a href="#"> Contact Us</a></li>
<li><a href="#"> Product Alerts </a></li>
<li><a href="#"> Gift Cards </a></li>
<li><a href="#"> In The News </a></li>
<li><a href="#"> Survey </a></li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed bg-ltgrn h4" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Quick Links
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li><a href="#"> Shop</a></li>
<li><a href="#"> Weekly Specials</a></li>
<li><a href="#"> Cart </a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="d-flex bg-teal px-2 py-2 justify-content-between">
<div class="company desktop-footer">
<ul>
<h6> Our Company </h6>
<li><a href="#"> About Us </a></li>
<li><a href="#"> Corporate Social Responsibility </a></li>
<li><a href="#"> Join Our Team </a></li>
<li><a href="#"> Retail Careers </a></li>
<li><a href="#"> Scholarships </a></li>
</ul>
</div>
<div class="service desktop-footer">
<ul>
<h6>Customer Service</h6>
<li><a href="#"> Help & Faq</a></li>
<li><a href="#"> Contact Us</a></li>
<li><a href="#"> Product Alerts </a></li>
<li><a href="#"> Gift Cards </a></li>
<li><a href="#"> In The News </a></li>
<li><a href="#"> Survey </a></li>
</ul>
</div>
<div class="quick desktop-footer">
<ul>
<h6> Quick Links</h6>
<li><a href="#"> Shop</a></li>
<li><a href="#"> Weekly Specials</a></li>
<li><a href="#"> Cart </a></li>
</ul>
</div>
<div class="d-flex download flex-column justify-content-center">
<p class="p ">Download Our App</p>
<div class="d-flex">
<img src="img/buttons/apple-btn.svg" height="100">
<img src=" img/buttons/google-btn.svg" height="100">
</div>
</div>
<div class=" social d-flex flex-column align-items-center justify-content-center">
<p class="p ">Follow Us</p>
<ul class="d-flex justify-content-around align-items-center p-0 ">
<li>
<a href="# "><svg xmlns="http://www.w3.org/2000/svg " width="22 " height="22 " fill="currentColor "
class="bi bi-facebook " viewBox="0 0 16 16 ">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303
1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z " />
</svg></a>
</li>
<li>
<a href="# "><svg xmlns="http://www.w3.org/2000/svg " width="22 " height="22 " fill="currentColor "
class="bi bi-twitter " viewBox="0 0 16 16 ">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325
9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32
6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z " />
</svg></a>
</li>
<li>
<a href="# "><svg xmlns="http://www.w3.org/2000/svg " width="22 " height="22 " fill="currentColor "
class="bi bi-instagram " viewBox="0 0 16 16 ">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372
1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99
10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007
3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478
2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24
1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z " />
</svg></a>
</li>
<li>
<a href="# "><svg xmlns="http://www.w3.org/2000/svg " width="22 " height="22 " fill="currentColor "
class="bi bi-youtube " viewBox="0 0 16 16 ">
<path
d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124
1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09
9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788
99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z " />
</svg></a>
</li>
</ul>
</div>
</div>
<div class="desktop-copy bg-teal justify-content-evenly">
<span class=" p-bottom hide-bottom"> Privacy Policy </span>
<span class="p-bottom"> © 2022 Meals On Mules LLC</span>
<span class="p-bottom hide-bottom"> Terms & Conditions</span>
</div>
</footer>
<!-- Scripts -->
<!-- jQuery Slim Minified -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js " integrity="sha512-6ORWJX/LrnSjBzwefdNUyLCMTIsGoNP6NftMy2UAm1JBm6PRZCO1d7OHBStWpVFZLO+RerTvqX/Z9mBFfCJZ4A==" crossorigin=" anonymous " referrerpolicy="no-referrer "></script>
<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js " integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p " crossorigin="anonymous "></script>
<!-- Main -->
<script src="js/main.js "></script>
</body>
</html>