-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
470 lines (366 loc) · 23.7 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
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
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!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>Poppy Flower Works</title>
<!-- Primary Meta Tags -->
<title>Poppy Flower Works</title>
<meta name="title" content="Poppy Flower Works">
<meta name="description" content="Sustainable floristry serving Southern Alberta. With over a decade of experience in the industry, Robyn Buzzee, the florist behind Poppy, offers beautiful arrangements featuring blooms sourced from her small organic flower farm. Email robyn@poppyflowerworks.com, and let Poppy create beautiful and eco-friendly arrangements for your next event or special occasion.">
<meta name="image" content="./assets/images/mystorybonus.jpeg">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://poppyflowerworks.com/">
<meta property="og:title" content="Poppy Flower Works">
<meta property="og:description" content="Sustainable floristry serving Southern Alberta. With over a decade of experience in the industry, Robyn Buzzee, the florist behind Poppy, offers beautiful arrangements featuring blooms sourced from her small organic flower farm. Email robyn@poppyflowerworks.com, and let Poppy create beautiful and eco-friendly arrangements for your next event or special occasion.">
<meta property="og:image" content="./assets/images/mystorybonus.jpeg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://poppyflowerworks.com/">
<meta name="twitter:title" content="Poppy Flower Works">
<meta name="twitter:description" content="Sustainable floristry serving Southern Alberta. With over a decade of experience in the industry, Robyn Buzzee, the florist behind Poppy, offers beautiful arrangements featuring blooms sourced from her small organic flower farm. Email robyn@poppyflowerworks.com, and let Poppy create beautiful and eco-friendly arrangements for your next event or special occasion.">
<meta name="twitter:image" content="./assets/images/mystorybonus.jpeg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="./assets/images/faviconlight.png">
<!-- add your 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=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400&display=swap" rel="stylesheet">
<!-- link to your stylesheet -->
<link rel="stylesheet" href="./assets/styles.css">
</head>
<body>
<header>
<div class="background-image">
<div class="glass-overlay">
<h1 class="sr-only">Poppy Flower Works</h1>
<img class="big-logo" src="./assets/images/lrglogo.png" alt="">
</div>
</div>
<nav id="navbar">
<ul>
<li class="btn-effect"><a href="#about">About</a></li>
<li class="btn-effect"><a href="#contact">Contact</a></li>
<li class="btn-effect"><a href="#portfolio">Portfolio</a></li>
<li class="btn-effect"><a href="#weddings">Weddings</a></li>
<li class="btn-effect"><a href="#my-story">My Story</a></li>
</ul>
<button class="menu btn-effect">Menu</button>
</nav>
</header>
<main>
<section class="about" id="about">
<div class="about-content">
<div class="img-header-together">
<h2 class="section-header">about</h2>
<img src="./assets/images/aboutimage.jpg" alt="">
</div>
<div class="about-text">
<p>Welcome to Poppy Flower Works!</p>
<p>We are dedicated to crafting unique arrangements and designs using locally sourced, ethically grown flowers for weddings, events, and everyday settings. With a commitment to organic and biodynamic farming practices, we use seasonal flora to promote ecological sustainability. Our offerings feature flowers grown on our Southern Alberta landscape-integrated flower farms located in Canmore and Medicine Hat.</p>
<p>Join us in celebrating the beauty of nature with our lovingly crafted floral arrangements.</p>
</div>
</div>
</section>
<section class="contact" id="contact">
<div class="contact-background-image">
<div class="glass">
<h2 class="section-header">contact</h2>
<div class="contact-links">
<a href="mailto:robyn@poppyflowerworks.com" class="contact-link">robyn@poppyflowerworks.com</a>
<a href="https://instagram.com/poppyflowerworks" target="_blank" class="contact-link">@poppyflowerworks</a>
</div>
</div>
</div>
</section>
<section class="portfolio" id="portfolio">
<div class="portfolio-container">
<div class="portfolio-header">
<h2 class="section-header portfolio-h2">portfolio</h2>
<p class="portfolio-text">Step into Poppy's enchanting world of sustainable floral design! We invite you to browse through our portfolio of whimsical blooms and witness the artistry and skill that goes into each arrangement. From locally sourced, seasonally appropriate flowers to eco-friendly practices, we're dedicated to creating stunning, sustainable floral designs for your special day.</div>
</div>
<div class="portfolio-gallery-container">
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/001.jpg" alt="">
<div class="overlay">
<div class="text">Griselda & Matiase @pertiwiphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/002.jpg" alt="">
<div class="overlay">
<div class="text">Griselda & Matias @pertiwiphotography</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/003.jpg" alt="">
<div class="overlay">
<div class="text">Griselda & Matias @pertiwiphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/004.jpg" alt="">
<div class="overlay">
<div class="text">Matt & Amy @jessieraefilms</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/005.jpg" alt="">
<div class="overlay">
<div class="text">Matt & Amy @jessieraefilms</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/006.jpg" alt="">
<div class="overlay">
<div class="text">Matt & Amy @jessieraefilms</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/007.jpg" alt="">
<div class="overlay">
<div class="text">Matt & Amy @jessieraefilms</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/008.jpg" alt="">
<div class="overlay">
<div class="text">Matt & Amy @jessieraefilms</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/009.jpg" alt="">
<div class="overlay">
<div class="text">Erin & Conner @alexpopovphotography</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/010.jpg" alt="">
<div class="overlay">
<div class="text">Erin & Conner @alexpopovphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/011.jpeg" alt="">
<div class="overlay">
<div class="text">Sarah & Ian @larashea</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/012.jpeg" alt="">
<div class="overlay">
<div class="text">Monica & Cameron @rachelboekelphotography</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/013.jpeg" alt="">
<div class="overlay">
<div class="text">Monica & Cameron @rachelboekelphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/014.jpeg" alt="">
<div class="overlay">
<div class="text">Monica & Cameron @rachelboekelphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/015.jpeg" alt="">
<div class="overlay">
<div class="text">Monica & Cameron @rachelboekelphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/016.jpeg" alt="">
<div class="overlay">
<div class="text">Monica & Cameron @rachelboekelphotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/017.jpeg" alt="">
<div class="overlay">
<div class="text">Tatiana & Carson @grahammurrayphotography</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/018.jpeg" alt="">
<div class="overlay">
<div class="text">Tatiana & Carson @grahammurrayphotography</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/019.jpeg" alt="">
<div class="overlay">
<div class="text">Alexis & Scott @colwynpaddon</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/020.jpeg" alt="">
<div class="overlay">
<div class="text">Alexis & Scott @colwynpaddon</div>
</div>
</div>
<div class="portfolio-gallery-item no-mobile-show">
<img src="./assets/images/gallery-images/021.jpeg" alt="">
<div class="overlay">
<div class="text">Brittany & Patrick @coutneyannephotography</div>
</div>
</div>
<div class="portfolio-gallery-item">
<img src="./assets/images/gallery-images/022.jpeg" alt="">
<div class="overlay">
<div class="text">Brittany & Patrick @coutneyannephotography</div>
</div>
</div>
</div>
</div>
</section>
<section class="weddings" id="weddings">
<div class="glass weddings-glass">
<h2 class="section-header">weddings</h2>
<div class="weddings-about">
<p class="weddings-text">Thank you for considering Poppy Flower Works for your special day. We're thrilled to collaborate with you to design the perfect floral arrangements that reflect your vision and values. Our team is committed to using locally sourced, seasonally appropriate flowers that are both beautiful and ecologically sustainable.</p>
<p class="weddings-text">We offer complimentary consultations to discuss your needs and preferences. Our price list, which is provided below, serves as a helpful guideline, but keep in mind that each wedding is unique and we offer customized arrangements. While we may not be able to provide exact photo examples of your desired arrangements, we welcome you to browse our Instagram page for inspiration.</p>
<p class="weddings-text">Please note that we only book one wedding per weekend, ensuring that you receive our undivided attention and exceptional service. To secure your date, we require a signed contract and a 25% deposit of the total quote. The outstanding balance is due two weeks prior to the event.</p>
<p class="weddings-text">If you want to learn more or schedule a consultation, please fill out the contact form below, or send an email to <a href="mailto:robyn@poppyflowerworks.com?subject=Let's Work Together!"></a> robyn@poppyflowerworks.com. We look forward to hearing from you!</p>
</div>
<h2 class="section-header price-list-h2">price list</h2>
<div class="weddings-pricelist">
<div class="weddings-pricelist-about">
<p> Minimum spend $1500.</p>
<p>Minimum is exclusive of service fees, delivery fees and taxes.</p>
<p>Canmore Delivery is free for the first stop and each additional stop will be $50.</p>
<p>Out of town delivery starts at $100.</p>
<p>Canmore pick up available.</p>
<p>Bookings made within 1 month of your wedding will include a $100 late fee.</p>
<p>Weddings taking place on a holiday, will incur a $100 service fee.</p>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Bridal Bouquet</h3>
<h4 class="weddings-price">$150 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Bridesmaid Bouquet</h3>
<h4 class="weddings-price">$125 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Boutonniere</h3>
<h4 class="weddings-price">$30 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Corsage</h3>
<h4 class="weddings-price">$40 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Flower Crown</h3>
<h4 class="weddings-price">$175 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Short Centerpiece</h3>
<h4 class="weddings-price">$150 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Tall Centerpiece</h3>
<h4 class="weddings-price">$300 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Mixed Greenery Garland</h3>
<h4 class="weddings-price">$35/ft average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Ceremony Arrangements</h3>
<h4 class="weddings-price">$250 average</h4>
</div>
<div class="weddings-pricelist-item">
<h3 class="weddings-item">Arbour Arrangements Arrangements</h3>
<h4 class="weddings-price">$500 average</h4>
</div>
</div>
<div class="button-space">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeyZF6ET6Y9cI7xzpC1dzq_woYFqd4OfKxIMqqVdTMjxQRVEg/viewform?usp=sf_link" target="_blank" class="wedding-consultation btn-effect">Wedding consultation</a>
</div>
<h2 class="section-header fine-print-specail">Fine Print</h2>
<div class="fine-print">
<p class="fine-print-text">Our quotes are subject to change up to 6 weeks prior to your wedding day, to reflect current market prices and specific arrangement requests. At Poppy Flower Works, we pride ourselves on growing most of our own products here in Canmore, but if needed, we supplement with locally sourced products from within Canada. Please note that we cannot guarantee specific bloom choices and reserve the right to switch products if necessary due to poor quality, colour or size variations. However, we will always make substitutions of similar quality to ensure the best possible outcome for your wedding day.</p>
<p class="fine-print-text">For quality control and availability reasons, we require that Poppy Flower Works be the sole provider of all flowers at your wedding. If we are creating a larger-scale installation piece for your wedding, there may be additional setup and striking fees charged. Please note that additional charges will also apply for holiday delivery and installation.</p>
<p class="fine-print-text">We are more than happy to create mock-ups for a fee to ensure that we are both on the same page about the final product. Once we have created your custom quote and you are satisfied, we will send you a contract to be signed and returned. In order to secure your date, we require a signed contract and a deposit of 25% of your quote total. Your outstanding balance is due two weeks prior to your event. Please note that all deposits are non-refundable. We accept deposits through email money transfers (within Canada) or credit card payments.</p>
<p class="fine-print-text">At Poppy Flower Works, we are committed to providing you with the best possible experience and service for your special day. We look forward to working with you to create beautiful, sustainable and unique florals that reflect your vision and style.</p>
</div>
</div>
</section>
<section class="my-story" id="my-story">
<div class="my-story-content">
<div class="img-header-together my-story-together">
<h2 class="section-header">my story</h2>
</div>
<div class="some-page-wrapper">
<div class="row">
<div class="column">
<p> My name is Robyn Buzzee, and I am the florist and flower farmer behind Poppy Flower Works. I grew up in Canmore, nestled in the picturesque Bow Valley. Being raised in such an inspiring landscape developed an early appreciation for aesthetics and ecology, which has only grown throughout my journey.</p>
<p>I started my career in floristry in my early twenties, working my way up to managing the floral department at a corporate grocery store. However, my tenure there also exposed me to the darker side of the industry. The flowers were imported from overseas and treated with toxic farming practices to increase yield, and preservatives were used to keep them looking fresh during transportation. This made me realize that the mainstream floral industry was not taking care of its communities, flowers, or the environment at large.
</p>
<p>This realization led me to pursue my passion for gardening and cultivate my own flower farm, where I tend to them using organic and bio-dynamic processes. Gardening has become a site of active resistance against the toxic practices found in the floral industry, and it is a cultivation of my values.</p>
<p>After obtaining a fine arts diploma from Capilano University and a Bachelor of Fine Arts in Drawing from the Alberta College of Art and Design, I decided to start Poppy Flowerworks. My love for ecology and aesthetics guides my work, and I offer ecologically conscious and responsible arrangements and designs to our local community.</p>
</div>
<div class="column">
<img src="./assets/images/headshot.jpg" alt="">
<p>Now, as a mother, I am even more motivated to model my values through my work and pass them on to my daughter. I believe it is important that the floral industry shifts towards ecological sustainability through local, organic, and compostable practices, and I am proud to be part of this small but meaningful change.
</p>
<p>I hope to continue growing and learning as a florist and flower farmer and to inspire others to support sustainable floristry practices.</p>
</div>
</div>
</div>
<img src="./assets/images/mystorybonus.jpg" alt="" class="my-story-accent-image">
</div>
</section>
</main>
<footer>
<div class="glass footer-glass">
<img src="./assets/images/smllogo.png" alt="" class="tiny-logo">
<p class="footer-text">Copyright Poppy Flower Works 2023 - Canmore, AB / Medicine Hat, AB</p>
<div class="footer-links">
<a href="mailto:robyn@poppyflowerworks.com"><img src="./asstets/images/envelope.png" alt="" class="footer-link-items"></a>
<a href="http://instagram.com/poppyflowerworks" target="_blank"><img src="./asstets/images/instagram.png" alt="" class="footer-link-items"></a>
</div>
<p class="footer-text">Website Images by &revery</p>
<p class="footer-text">site designed and coded (with love) by <a href="http://dbuzzee.com" target="_blank">dbuzzee</a></p>
</div>
</footer>
<script>
window.onload = function() {
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE, and Opera
document.body.scrollTop = 0; // For Safari
};
</script>
<script>
window.onscroll = () => {
myFunction();
};
const navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;
const myFunction = () => {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
};
// Add event listener for menu button click
document.querySelector(".menu").addEventListener("click", (event) => {
event.preventDefault();
navbar.classList.toggle("show");
});
// Add event listeners for nav link clicks to close the menu
const navLinks = document.querySelectorAll("nav ul li a");
navLinks.forEach((navLink) => {
navLink.addEventListener("click", () => {
if (navbar.classList.contains("show")) {
navbar.classList.remove("show");
}
});
});
</script>
</body>
</html>