-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
62 lines (56 loc) · 31.4 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
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title> Start the Day with Toffee and Coffee | Toffee and Coffee theme demo </title> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <link href="/css/webslides.css?v=0.0002" rel="stylesheet" /> <link href="/css/tachyons.min.css?v=0.0001" rel="stylesheet" /> <link href="/css/styles.css" rel="stylesheet" /> <style> .primary-color-dark { color: hsl(14,43%,20%); } .bg-primary-color-dark { background-color: hsl(14,43%,20%); color: rgba(255,255,255,.8); } .b--primary-color-dark { border-color: hsl(14,43%,20%); } .bg-primary-color-dark-90 { background-color: hsla(14,43%,20%,0.9); color: rgba(255,255,255,.8); } .b--primary-color-dark-90 { border-color: hsla(14,43%,20%,0.9); } .primary-color-first-letter-h3 h3:first-letter { color: hsl(14,43%,45%); font-size: 1.2em; } .primary-color { color: hsl(14,43%,45%); } .b--primary-color { border-color: hsl(14,43%,45%); } .hover-primary-color:hover, .hover-primary-color:focus { color: hsl(14,43%,45%); } .hover-bg-primary-color:hover, .hover-bg-primary-color:focus { background-color: hsl(14,43%,45%); } .bg-primary-color { background-color: hsl(14,43%,45%); color: rgba(255,255,255,.8); } .primary-color-light { color: hsl(14,43%,65%); } .bg-primary-color-light { background-color: hsl(14,43%,65%); color: rgba(255,255,255,.8); } .b--primary-color-light { border-color: hsl(14,43%,65%); } .primary-color-lighter { color: hsl(14,43%,80%); } .bg-primary-color-lighter { background-color: hsl(14,43%,80%); color: rgba(255,255,255,.9); } .b--primary-color-lighter { border-color: hsl(14,43%,80%); } .accent-color { color: hsl(165,35%,45%); } .bg-accent-color { background-color: hsl(165,35%,45%); color: rgba(255,255,255,.8); } .b--accent-color { border-color: hsl(165,35%,45%); } .accent-color-light { color: hsl(165,35%,65%); } .bg-accent-color-light { background-color: hsl(165,35%,65%); color: rgba(255,255,255,.8); } .b--accent-color-light { border-color: hsl(165,35%,65%); }
@keyframes slowRightEntry {
0% {
transform: translateX(-100vw);
opacity: 0.3;
}
50% {
opacity: .5;
}
90% {
transform: translateX(0vw);
opacity: .8;
}
100% {
transform: translateX(0vw);
opacity: 0.7;
}
}
.slowRightEntry {
animation: slowRightEntry 10s linear 10;
height: 100%;
}
@keyframes slowRightExit {
0% {
transform: translateX(0vw);
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: .0;
transform: translateX(50vw);
}
}
.slowRightExit {
animation: slowRightExit 20s linear 5;
height: 100%;
}
</style> </head> <body class="bg-light-gray sans-serif readable "> <main role="main" class="relative h-100" > <div id="site-page-settings"> <div onclick="" class="gt-vbar z-1 bg-white fixed left-0 top-0 bottom-0 vh-100 o-0 hover-o-90 mw2 flex flex-column justify-center"> <div class="relative"> <button aria-label="exit slides" type="button" class="pointer gt-label gt-exit-slides bg-orange w-100 pa1 v-mid mb2 dim br2 f5 fw9">⇅</button> <div class="w5 dn gt-tooltip bg-black-80 white-90 pa1 absolute top-2 left-2 ">Exit slides and browse as normal page.</div> </div> </div> </div> <article id="webslides" class="disabled"> <section class="alternate gt-mv-on relative flex flex-column min-vh-100" ><div class="flex-auto flex flex-column justify-center min-vh-100 bg-black fadeIn white-80 " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image slowZoomIn" src="/images/c.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-30" ></span> <nav class="relative o-90 bg-transparent " > <div class="w-90 mw9 center ph2 pv4 cf flex flex-wrap justify-between tracked" > <span class="fl dib self-center site-logo w-100 tc pb3 " > <a href="/" class="v-mid " title="Home" > <img data-role="logo" class="h2 v-mid dim" src="/images/logos/icon-on-dark.svg" /> </a> </span> <span class="flex-auto dn-l"></span> <ul class="list dn fl cf ma0 di-l flex-l pv1 ph4-l justify-start flex-grow-1 " > <li class="fl" > <a href="/" class="link ph3 white-80"> <span > Home</span> </a> </li> <li class="fl" > <a href="/about/" class="link ph3 white-80"> <span > About</span> </a> </li> </ul> <ul class="list fr cf ma0 ph3 ph4-l pv1 justify-end dn " > <li class="fl" > <a href="#" class="link ph3 dim white-80"> <span > Go</span> </a> </li> </ul> </div></nav><div class="min-vh-100 cf w-100 relative center flex flex-wrap mw-100" > <div class="fadeIn text-column z-0 center w-100 mw8 flex flex-auto pa2 ph3-m ph4-l fl w-100-ns justify-center " > <div class="text-card w-100 pa3 relative tc f3-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="f4 ma0 pv2 ttu">toffee & coffee <a href="#" class="slide-trigger grow ph2 dn di-l " title="View Page as Presentation"> <img class="v-mid w2" src="/images/logos/icon-on-dark.svg" /> </a> </p> <h2 class="ma0 pa2 pv3-ns ph0-ns gold baskerville tc f-5-ns fw7-ns fs-normal ttc " > <span class="">Taste the Happiness</span> </h2> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > <p>Quality ingredients. Brewed to perfection. Served with a smile.</p>
</div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv1 mw7 center relative flex flex-column" > <div class="fadeIn animate-edit-cta tc ba w-100 slide-trigger bg-black-10 center b--light-gray br0 pv2 ph3 mv3 w-30-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center white f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-th-large" data-fa-mask="fas fa-coffee" data-fa-transform="shrink-10 up-2 left-1" > </i> </span> <span > View as Slides </span> </div> </a> </div> </div> </div> </div> </div> <div class="vh-25"></div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn white-70 " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image " src="/images/coffee-beans.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-10" ></span><div class="cf w-100 relative center flex flex-wrap mw8" > <div class="image-column w-100 z-0 flex flex-wrap fl static odd-order-1-ns left--25-ns w-50-ns items-center"> <div class="tc overflow-hidden relative w-100 flex flex-column justify-center items-center h-100" > <img class="mw-100 maxh-100 o-90 of-scale-down br0" src="/images/coffee-beans-ground.jpg" alt="" > </div> </div> <div class="text-column z-0 center w-100 mw7 flex flex-auto pa2 pa3-m pa4-l fl w-50-ns justify-center " > <div class="text-card w-100 pa3 relative tl f3-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="ma0 pv2">Freshly baked and ground</p> <h2 class="ma0 pa2 pv5-ns ph0-ns tc f1-ns fw7-ns ttc " > <span class="">From Choice Coffee Beans</span> </h2> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > </div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv4 flex flex-column" > <div class="fadeIn animate-edit-cta tc ba w-100 bg-light-gray dn center b--light-gray br0 pv2 ph3 mv3 w-50-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center mid-gray f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-info" data-fa-mask="fas fa-circle" data-fa-transform="shrink-4" > </i> </span> <span > Quick Start </span> </div> </a> </div> </div> </div> </div> </div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn white-80 " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image " src="/images/coffee-deck.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-20" ></span><div class="cf w-100 relative center flex flex-wrap mw8" > <div class="image-column w-100 z-0 flex flex-wrap fl static odd-order-1-ns left--25-ns w-50-ns items-center"> <div class="tc overflow-hidden relative w-100 flex flex-column justify-center items-center h-100" > <img class="mw-100 maxh-100 o-80 of-scale-down br0" src="/images/coffee-brewing.jpg" alt="" > </div> </div> <div class="text-column z-0 center w-100 mw7 flex flex-auto pa2 pa3-m pa4-l fl w-50-ns justify-center " > <div class="text-card w-100 pa3 relative tl f3-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="ma0 pv2">Italian heritage brewing</p> <h2 class="ma0 pa2 pv5-ns ph0-ns tc f1-ns fw7-ns ttc " > <span class="">Came out the Aroma</span> </h2> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > </div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv4 flex flex-column" > <div class="fadeIn animate-edit-cta tc ba w-100 bg-light-gray dn center b--light-gray br0 pv2 ph3 mv3 w-50-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center mid-gray f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-info" data-fa-mask="fas fa-circle" data-fa-transform="shrink-4" > </i> </span> <span > Quick Start </span> </div> </a> </div> </div> </div> </div> </div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn white-80 " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image " src="/images/coffee-toffee.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-30" ></span><div class="cf w-100 relative center flex flex-wrap mw8" > <div class="image-column w-100 z-0 flex flex-wrap fl static odd-order-1-ns left--25-ns w-50-ns items-center"> <div class="tc overflow-hidden relative w-100 flex flex-column justify-center items-center h-100" > <img class="mw-100 maxh-100 o-70 of-scale-down br0" src="/images/coffee-desserts.jpg" alt="" > </div> </div> <div class="text-column z-0 center w-100 mw7 flex flex-auto pa2 pa3-m pa4-l fl w-50-ns justify-center " > <div class="text-card w-100 pa3 relative tl f3-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="ma0 pv2">Nutty and buttery</p> <h2 class="ma0 pa2 pv5-ns ph0-ns tc f1-ns fw7-ns ttc " > <span class="">Coupled with Toffee</span> </h2> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > </div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv4 flex flex-column" > <div class="fadeIn animate-edit-cta tc ba w-100 bg-light-gray dn center b--light-gray br0 pv2 ph3 mv3 w-50-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center mid-gray f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-info" data-fa-mask="fas fa-circle" data-fa-transform="shrink-4" > </i> </span> <span > Quick Start </span> </div> </a> </div> </div> </div> </div> </div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn white-80 " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image " src="/images/coffee-heart.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-10" ></span><div class="cf w-100 relative center flex flex-wrap mw-100" > <div class="image-column w-100 z-0 flex flex-wrap fl static odd-order-1-ns left--25-ns w-50-ns items-center"> <div class="tc overflow-hidden relative w-100 flex flex-column justify-center items-center h-100" > <img class="mw-100 maxh-100 o-100 of-scale-down br0" src="/images/coffee-plants.jpg" alt="" > </div> </div> <div class="text-column z-0 center w-100 mw7 flex flex-auto pa2 pa3-m pa4-l fl w-50-ns justify-center " > <div class="text-card w-100 pa3 relative tl f3-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="ma0 pv2">An artist's touch</p> <h2 class="ma0 pa2 pv5-ns ph0-ns tc f1-ns fw7-ns ttc " > <span class="">Overflow with joy</span> </h2> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > </div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv4 flex flex-column" > <div class="fadeIn animate-edit-cta tc ba w-100 bg-light-gray dn center b--light-gray br0 pv2 ph3 mv3 w-50-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center mid-gray f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-info" data-fa-mask="fas fa-circle" data-fa-transform="shrink-4" > </i> </span> <span > Quick Start </span> </div> </a> </div> </div> </div> </div> </div> </div> </section><section class="gt-mv-off relative flex flex-column mid-gray" ><div class="pv3 flex-auto flex flex-column justify-center bg-white-90 fadeIn black-30 " > <p class="tc pa2"> </p> <h2 class="tc pa2 pa3-ns ma0 f3">Serving Ideas </h2><div class="cf w-100 relative pa2 pa3-m pa4-l center mw8 flex flex-wrap justify-center " > <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-auto"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br0 bn b--inherit pa0 " src="/images/coffee-bread.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">with bread</span> </h3> <p class="card-sub-title" ></p> <div class="pt1 lh-copy markdown" > </div> </div> </div> </div> <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-auto"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br0 bn b--inherit pa0 " src="/images/coffee-doughnuts.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">with doughnut</span> </h3> <p class="card-sub-title" ></p> <div class="pt1 lh-copy markdown" > </div> </div> </div> </div> <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-auto"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br0 bn b--inherit pa0 " src="/images/coffee-macarons-p.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">with sweets</span> </h3> <p class="card-sub-title" ></p> <div class="pt1 lh-copy markdown" > </div> </div> </div> </div> </div> <div class="tc pa2 pa3-ns mb4 f3" > </div> </div> </section><section class="gt-mv-off relative flex flex-column mid-gray" ><div class="pv3 flex-auto flex flex-column justify-center bg-white-80 fadeIn black-30 tc " > <p class="tc pa2"> </p> <h2 class="tc pa2 pa3-ns ma0 f3">Enjoy </h2><div class="cf w-100 relative pa2 pa3-m pa4-l center mw8 flex flex-wrap justify-center " > <div class="w-50-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br0 bn b--inherit pa0 " src="/images/coffee-apples.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">with fruits</span> </h3> <p class="card-sub-title" ></p> <div class="pt1 lh-copy markdown" > </div> </div> </div> </div> <div class="w-50-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br0 bn b--inherit pa0 " src="/images/coffee-hands-3.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">most importantly, with family and friends</span> </h3> <p class="card-sub-title" ></p> <div class="pt1 lh-copy markdown" > </div> </div> </div> </div> </div> <div class="tc pa2 pa3-ns mb4 f3" > </div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn black-40 " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image " src="/images/coffee-beans.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-10" ></span><div class="cf w-100 relative center flex flex-wrap mw8" > <div class="image-column w-100 z-0 flex flex-wrap fl static even-order-1-ns left--25-ns w-50-ns items-center"> <div class="tc overflow-hidden relative w-100 flex flex-column justify-center items-center h-100" > <div class="w-100 aspect-ratio aspect-ratio--16x9 " > <iframe frameborder="0" style="border:0" allow="fullscreen" class="aspect-ratio--object" src="https://www.youtube-nocookie.com/embed/dPNVXSF89so?rel=0&modestbranding=1" ></iframe> </div> </div> </div> <div class="text-column z-0 center w-100 mw7 flex flex-auto pa2 pa3-m pa4-l fl w-50-ns justify-center " > <div class="text-card w-100 pa3 relative f3-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="ma0 pv2">By coffee lovers</p> <h2 class="ma0 pa2 pv3-ns ph0-ns tc f2-ns fw7-ns ttc " > <span class="">For Coffee lovers</span> </h2> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > </div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv4 flex flex-column" > <div class="fadeIn animate-edit-cta tc ba w-100 bg-light-gray dn center b--light-gray br0 pv2 ph3 mv3 w-50-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center mid-gray f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-info" data-fa-mask="fas fa-circle" data-fa-transform="shrink-4" > </i> </span> <span > Quick Start </span> </div> </a> </div> </div> </div> </div> </div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-accent-color-light fadeIn dark-gray " ><div class="cf w-100 relative pa2 pa3-m pa4-l center mw8 flex flex-wrap" > <div class="w-100 flex-auto pa2 fl"> <div class="w-100 pa3 "> <p class="f4 pa2">What People Say About It </p> <h2 class="tc pa2 pa3-m pa4-l ma0 f2">Love It </h2> <i class="fas fa-quote-left fa-pull-left fa-3x"></i> <div class="pt3 f3 markdown lh-copy " > <p>I love coffee, especially the coffee from Toffee and Coffee. I love the rich aroma, the dreamy taste, and the friendly atmosphere. I don't know a better way to start the day than having a coffee there with a friend. Highly recommended.</p>
</div> <i class="fas fa-quote-right fa-pull-right fa-3x"></i> <div class="pv2" > Apple </div> <div > Coffee lover </div> </div> </div> </div> </div> </section><section class="alternate gt-mv-off relative flex flex-column mid-gray" ><div class="z-0 flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn black-40 vh-50 " > <iframe frameborder="0" style="border:0" allow="fullscreen" class="aspect-ratio--object" src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d55253.57558682772!2d151.20242374059808!3d-33.8736412970612!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sau!4v1549676899675" ></iframe> <div class="dn show-in-edit vh-50"> <span hidden property="ui_only" mv-storage="none"></span> </div> </div> <div class="absolute w-100 w-60-ns left--20-ns top-0 bottom-0"></div> </section><section class="gt-mv-off relative flex flex-column mid-gray" ><div class="pv3 flex-auto flex flex-column justify-center fadeIn dark-gray " > <p class="tc pa2"> </p> <h2 class="tc pa2 pa3-ns ma0 f3">Morning Delight </h2><div class="cf w-100 relative pa2 pa3-m pa4-l center mw8 flex flex-wrap justify-center " > <div class="w-20-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br-100 bn b--inherit pa0 " src="/images/avatar-white.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">Strawberry</span> </h3> <p class="card-sub-title" >cake</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> <div class="w-20-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br-100 bn b--inherit pa0 " src="/images/avatar-chocalate.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">Cream</span> </h3> <p class="card-sub-title" >cake</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> <div class="w-20-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 hover-primary-color"> <div class="mb2 tc " > <img class="mw-100 br-100 bn b--inherit pa0 " src="/images/avatar-pink.jpg" > </div> <div class="" > <h3 class="card-title tc" > <span property="title">Cherry</span> </h3> <p class="card-sub-title" >cake</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> </div> <div class="tc pa2 pa3-ns mb4 f3" > </div> </div> </section><section class="gt-mv-off relative flex flex-column mid-gray" ><div class="pv3 flex-auto flex flex-column justify-center bg-white-80 fadeIn dark-gray " > <p class="tc pa2"> </p> <h2 class="tc pa2 pa3-ns ma0 f3">Special Occasions </h2><div class="cf w-100 relative pa2 pa3-m pa4-l center mw8 flex flex-wrap justify-center " > <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 flex"> <div class="mb2 tc w-40 pa2" > <img class="mw-100 br-100 ba b--primary-color-lighter pa1 " src="/images/avatar-rosy.jpg" > </div> <div class="w-60 ph2" > <h3 class="card-title tc" > <span property="title">Roses</span> </h3> <p class="card-sub-title" >cake</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 flex"> <div class="mb2 tc w-40 pa2" > <img class="mw-100 br-100 ba b--primary-color-lighter pa1 " src="/images/avatar-gingerbread.jpg" > </div> <div class="w-60 ph2" > <h3 class="card-title tc" > <span property="title">Figures</span> </h3> <p class="card-sub-title" >gingerbread</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 flex"> <div class="mb2 tc w-40 pa2" > <img class="mw-100 br-100 ba b--primary-color-lighter pa1 " src="/images/avatar-gingerbread-house.jpg" > </div> <div class="w-60 ph2" > <h3 class="card-title tc" > <span property="title">House</span> </h3> <p class="card-sub-title" >gingerbread</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 flex"> <div class="mb2 tc w-40 pa2" > <img class="mw-100 br-100 ba b--primary-color-lighter pa1 " src="/images/avatar-gingerbread-xmas.jpg" > </div> <div class="w-60 ph2" > <h3 class="card-title tc" > <span property="title">Chimney</span> </h3> <p class="card-sub-title" >gingerbread</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> <div class="w-33-l fl w-100 w-50-m pa3 flex grow flex-none"> <div class="w-100 pa2 flex"> <div class="mb2 tc w-40 pa2" > <img class="mw-100 br-100 ba b--primary-color-lighter pa1 " src="/images/avatar-cyan.jpg" > </div> <div class="w-60 ph2" > <h3 class="card-title tc" > <span property="title">Cyan</span> </h3> <p class="card-sub-title" >cake</p> <div class="pt1 lh-copy markdown" > <p>ingredients: food coloring, sugar, flour</p>
</div> </div> </div> </div> </div> <div class="tc pa2 pa3-ns mb4 f3" > </div> </div> </section><section class="alternate gt-mv-on relative flex flex-column mid-gray" ><div class="flex-auto flex flex-column justify-center bg-primary-color-dark fadeIn " > <div class="tc absolute absolute--fill fa-10x flex flex-column justify-center"> <div class="white-10 dn " > <i class="fallback-icon fas fa-font" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" ></i> </div></div> <figure class="ma0"><picture> <img alt="" class="absolute abs-image " src="/images/coffee-shop.jpg" > </picture></figure><span class="absolute absolute--fill bg-black-30" ></span><div class="cf w-100 relative center flex flex-wrap mw8" > <div class="text-column z-0 center w-100 mw7 flex flex-auto pa2 pa3-m pa4-l fl w-100-ns justify-center " > <div class="text-card w-100 pa3 relative f5-ns fw4-ns w-100-ns " > <span class="z--1 absolute absolute--fill bg-black-" > </span> <p class="ma0 pv2"></p> <h1 class="ma0 pa2 pv3-ns ph0-ns tc f2-ns fw7-ns ttc " > <span class="">Start the Day with Toffee and Coffee</span> </h1> <div class="pa2 " > <span class="dn" > <i class="fas fa-quote-left fa-3x fa-pull-left"></i> </span> <div class=" markdown lh-copy " > <h2>Business Hours</h2>
<p>7am - 3pm Monday to Friday</p>
<h2>Phone</h2>
<p>02 1111 1111</p>
<h2>Address</h2>
<p>Sydney CBD, New South Wales, Australia</p>
</div> <span class="dn" > <i class="fas fa-quote-right fa-3x fa-pull-right"></i> </span> </div> <div class="pv4 flex flex-column" > <div class="fadeIn animate-edit-cta center tc ba w-100 bg-primary-color center b--primary-color br2 pv2 ph3 mv3 w-50-ns " > <a class="no-underline w-100 dib" href="#" > <div class="flex items-center justify-center white-70 f4-ns " > <span class="ph2 " > <i class="cta-icon fas fa-th-large" data-fa-mask="fas fa-coffee" data-fa-transform="shrink-10 up-2 left-1" > </i> </span> <span > Reserve Your Coffee Now </span> </div> </a> </div> </div> <div class="db" > <form action="%7benc%7b!%20o.__get%28it,%20%5cu0027contact_form_post_url%5cu0027%29%20%7c%7c%20%5cu0027%5cu0027%20%7denc%7d" method="post" class=""> <div class="pv2"> <label for="name" >Your Name</label> <input type="text" name="name" id="name" class="h2 w-100 b--black-10 "> </div> <div class="pv2"> <label for="email" >Your Email Address</label> <input type="email" name="email" id="email" class="h2 w-100 b--black-10 "> </div> <div class="pv2"> <label for="phone" >Your Phone Number </label> <input type="text" name="phone" id="phone" class="h2 w-100 b--black-10 "> </div> <div class="pv2"> <label for="subject" >Subject </label> <input type="text" name="subject" id="subject" class="h2 w-100 b--black-10 "> </div> <div class="pv2"> <label for="message" > Your Message </label> <textarea name="message" id="message" class="h4 w-100 b--black-10 "></textarea> </div> <input hidden name="cf_page_id" id="cf_page_id" value=""> <div class="pv3 " > <button type="submit" class="ph3 pv1 br1 grow pointer ba bg-primary-color b--primary-color " > <span >Send</span> </button> </div> </form> </div> </div> </div> </div> </div> </section><section class="gt-mv-on relative flex flex-column justify-end" ><div class="flex-auto tc bg-black-10 gmws dn"> <div class="pt5 f-6-l f1-m f2 flex flex-column justify-center"> <span class="flex-auto"></span> <i class="fas fa-comments white slide-trigger pointer"></i> <span class="flex-auto"></span> </div> </div> <div class="bg-black-80 white-80 " > <nav class="relative f6" > <div class="w-90 mw8 center ph2 pv3" > <ul class="list cf ma0 ph3 ph4-l pv1 flex justify-center flex-wrap link-gold " > <li class="pv2 fl" > <a href="#top " class="link ph3 dim "> <span > Home</span> </a> </li> </ul> <ul class="list cf ma0 ph3 ph4-l pv1 flex justify-center flex-wrap link-white-80" > <li class="pv2 fl" > <a href="#" class="link ph3 dim "> <span > Terms</span> </a> </li> <li class="pv2 fl" > <a href="#" class="link ph3 dim "> <span > Privacy Policy</span> </a> </li> </ul> </div></nav> <div class="tc ph4 pv2 f7" > Copyright 2019. All rights reserved. </div> <div class="tc pa3 f7 bg-black-80 white-60 pb6 pb3-l"> Toffee and Coffee theme by <a class="white-70 hover-white" href="https://we.goandmake.app">GoAndMake.app</a> <a class="white-70 hover-white" href="https://creativecommons.org/licenses/by-nc/4.0/">CC-BY-NC-4.0</a> Powered by <a class="white-70 hover-white" href="https://we.goandmake.app">goandmake.app</a></div> </div> </section> </article> </main> <footer > <div > <div class="z-1 handheld-menu-0 handheld-menu overflow-scroll fixed top-0 left-0 right-0 bottom-0 pb5 dn bg-primary-color-dark" > <div class="h-100 pv3"> <ul class="h-100 pl0 flex flex-column justify-end"> <li class="hover-bg-white-50 pv3 ph4 bg-animate"> <a href="/" class="link white-80"> Home </a> </li> <li class="hover-bg-white-50 pv3 ph4 bg-animate"> <a href="/about/" class="link white-80"> About </a> </li> </ul> </div> </div> <div class="z-1 handheld-menu-1 handheld-menu overflow-scroll fixed top-0 left-0 right-0 bottom-0 pb5 dn bg-primary-color-dark" > <div class="h-100 pv3"> <ul class="h-100 pl0 flex flex-column justify-end"> <li class="hover-bg-white-50 pv3 ph4 bg-animate"> <a href="#" class="link white-80"> Go Account </a> </li> </ul> </div> </div> <div class="dn-l fixed left-0 right-0 bottom-0 z-5 flex" > <button class="gt-menu-toggle handheld-toggler dn-l flex-grow-1 bg-white-70 pv3 b--near-white " data-target=".handheld-menu-0"> Menu </button> <button class="gt-menu-toggle handheld-toggler dn-l flex-grow-1 bg-white-70 pv3 b--near-white " data-target=".handheld-menu-1"> Account </button> </div> </div> </footer> <script src="/js/webslides.min.js?v=0.0002"></script> <script src="/js/lib/fa/solid.min.js" data-auto-replace-svg="nest"></script> <script src="/js/lib/fa/fontawesome.min.js" data-auto-replace-svg="nest"></script> </body></html>