351 lines
13 KiB
HTML
351 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Cafe Menu Interactive Codepen challenge</title>
|
|
<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-KHN4CRK');</script>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins&display=swap" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://toruskit.com/assets/css/toruskit.bundle.min.css">
|
|
<script src="https://toruskit.com/assets/js/toruskit.min.js"></script><link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="overflow-auto h-100">
|
|
<div class="h-100 position-relative f.p-8">
|
|
|
|
<!-- Main -->
|
|
<main class="h-100 shadow-pop">
|
|
<div class="d-md-flex h-100">
|
|
<!-- Left -->
|
|
<div id="left" class="w-md-40 h-100">
|
|
<div id="about" class="position-relative h-100">
|
|
<div class="overlay h-100">
|
|
<div class="overlay-content z-index-2 overflow-visible">
|
|
<h1 class="position-absolute ms-6 mt-n7 svg-shadow-lg">The Cascade Cafe</h1>
|
|
|
|
<div id="address" class="position-absolute start-0 bottom-0 ms-6 mb-n5 p-6 shadow-lg">
|
|
<address class="mb-3">
|
|
<div class="circle circle-md position-absolute start-0 bg-black bg-opacity-50" data-tor="shift.left(50%)">
|
|
<svg viewBox="0 0 384 512" width="15" title="map-marker-alt" fill="white">
|
|
<path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="h3">123 Main Street <br> Smalltown, PA</p>
|
|
|
|
<div class="circle circle-md position-absolute start-0 bg-black bg-opacity-50" data-tor="shift.left(50%) shift.up(10%)">
|
|
<svg viewBox="0 0 512 512" width="15" title="phone-alt" fill="white">
|
|
<path d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" />
|
|
</svg>
|
|
</div>
|
|
<a href="4125550100" class="text-white text-decoration-none my-2 d-block">412-555-0100</a>
|
|
</address>
|
|
|
|
<table class="hours">
|
|
<tbody>
|
|
<tr>
|
|
<td class="pe-6">Mon. - Thurs.</td>
|
|
<td>6 a.m. - 9 p.m.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6">Fri. - Sat.</td>
|
|
<td>6 a.m. - 11 p.m.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="pe-6">Sunday</td>
|
|
<td>8 a.m. - 2 p.m.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
<img class="obj-fit-cover w-h-100" src="https://assets.codepen.io/t-1/nathan-dumlao-6VhPY27jdps-unsplash.jpg" alt="three hands toasting with coffee drinks">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right -->
|
|
<div id="right" class="w-md-60 h-100 position-relative">
|
|
|
|
<div class="position-absolute shadow-lg z-index-1 d-flex flex-column end-0 bottom-0 z-index-2" data-tor-slider-target="#slider" data-tor="shift.right(50%) shift.up(50%)">
|
|
<button role="button" class="btn btn-arrow square p-4 shadow-0" data-tor-slide-to="next"></button>
|
|
<button role="button" class="btn btn-arrow-left square p-4 shadow-0" data-tor-slide-to="prev"></button>
|
|
</div>
|
|
|
|
<div class="h-100" id="slider" data-tor-slider="add-parent(active) stack(true)" data-tor-group="
|
|
.slide => active(p):clip(up, {skew: 4rem}) slowest quad;">
|
|
|
|
<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#846b47)" data-tor-group="
|
|
h2 => active(p):reveal(up) slow quad wait(400ms);
|
|
.prices span => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
|
|
hr => active(p):scale.from(0) origin.left slow wait(500ms);
|
|
.product => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
|
|
">
|
|
<header class="">
|
|
<h2 class="text-end">Coffee</h2>
|
|
<p class="prices text-end">
|
|
|
|
<span class="d-block"><strong>Small:</strong> $2</span>
|
|
|
|
<span class="d-block"><strong>Large:</strong> $4</span>
|
|
|
|
</p>
|
|
</header>
|
|
|
|
<hr class="border-white my-5">
|
|
|
|
<dl class="list">
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">01</span>
|
|
House Blend
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Smoky, strong, and assertive, just like us.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">02</span>
|
|
Organic French Roast
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Smooth and mellow with hints of molasses.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">03</span>
|
|
Organic Decaf
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Full bodied and rich, we promise you won't miss the caffiene.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#755f3f)" data-tor-group="
|
|
h2 => active(p):reveal(up) slow quad wait(400ms);
|
|
.prices span => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
|
|
hr => active(p):scale.from(0) origin.left slow wait(500ms);
|
|
.product => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
|
|
">
|
|
<header class="">
|
|
<h2 class="text-end">Espresso Drinks</h2>
|
|
<p class="prices text-end">
|
|
|
|
<span class="d-block"><strong>Small:</strong> $3</span>
|
|
|
|
<span class="d-block"><strong>Large:</strong> $5</span>
|
|
|
|
</p>
|
|
</header>
|
|
|
|
<hr class="border-white my-5">
|
|
|
|
<dl class="list">
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">01</span>
|
|
Machiatto
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Espressso and steamed milk, served in a demitasse cup. (Size Small Only)</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">02</span>
|
|
Latte
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Espresso with steamed milk, and sometimes a little art on top.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">03</span>
|
|
Mocha
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Espresso with steamed chocolate milk and whipped cream. Also available with white chocolate milk.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">04</span>
|
|
Americano
|
|
</dt>
|
|
<dd class="description">
|
|
<p>1 shot espresso, two shots hot water.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#6d583b)" data-tor-group="
|
|
h2 => active(p):reveal(up) slow quad wait(400ms);
|
|
.prices span => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
|
|
hr => active(p):scale.from(0) origin.left slow wait(500ms);
|
|
.product => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
|
|
">
|
|
<header class="">
|
|
<h2 class="text-end">Tea</h2>
|
|
<p class="prices text-end">
|
|
|
|
<span class="d-block"><strong>Per Cup:</strong> $2</span>
|
|
|
|
<span class="d-block"><strong>If you break the cup:</strong> $200</span>
|
|
|
|
</p>
|
|
</header>
|
|
|
|
<hr class="border-white my-5">
|
|
|
|
<dl class="list">
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">01</span>
|
|
Earl Grey
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Black tea fragranced with bergamot.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">02</span>
|
|
Ginger Hibiscus
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Floral, tart, and spicy. Caffeine free.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">03</span>
|
|
Cascade Green
|
|
</dt>
|
|
<dd class="description">
|
|
<p>A blend of green teas hand selected by our master teamaker.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">04</span>
|
|
Chamomile
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Soothing and slightly sweet. Try it with honey! Caffeine free.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="slide px-7 pt-7 h-100 overflow-auto scrollbar scrollbar-light" data-tor="bg(#655236)" data-tor-group="
|
|
h2 => active(p):reveal(up) slow quad wait(400ms);
|
|
.prices span => active(p):[pull.right(md) fade.in] slow wait(500ms) delay(/+100ms/);
|
|
hr => active(p):scale.from(0) origin.left slow wait(500ms);
|
|
.product => active(p):[fade.in pull.up(md)] slower wait(500ms) delay(/+100ms/);
|
|
">
|
|
<header class="">
|
|
<h2 class="text-end">From the Bakery</h2>
|
|
<p class="prices text-end">
|
|
|
|
<span class="d-block"><strong>Cookies:</strong> $2</span>
|
|
|
|
<span class="d-block"><strong>Muffins & Pastries:</strong> $3</span>
|
|
|
|
</p>
|
|
</header>
|
|
|
|
<hr class="border-white my-5">
|
|
|
|
<dl class="list">
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">01</span>
|
|
Mallory's Famous Snickerdoodles
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Creamy cinnamony goodness made from scratch with our founder Mallory's prizewinning recipe.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">02</span>
|
|
Oatmeal Cookie
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Packed with rolled oats, raisins, and cranberries, these monster cookies are (almost) good for ya!</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">03</span>
|
|
Mixed Berry Muffins
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Filled with the best berries of the season and topped with a crumb crust.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
<div class="product d-inline-block mb-3">
|
|
<dt class="h3">
|
|
<span class="number d-block mb-2 opacity-20">04</span>
|
|
Croissant
|
|
</dt>
|
|
<dd class="description">
|
|
<p>Our oversized croissants are buttery, flaky, and usually all sold out by 7 a.m.</p>
|
|
</dd>
|
|
</div>
|
|
|
|
</dl>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- end tor-slider -->
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-fixed bottom-0 end-0 m-4 z-index-master">
|
|
<a href="https://toruskit.com" id="btn-codepen" class="d-inline-block btn-gtm strong text-white text-decoration-none bg-black bg-opacity-80 p-3 btn-arrow">Made with <strong class="text-decoration-underline">Torus Kit</strong></a>
|
|
</div>
|
|
<!-- partial -->
|
|
|
|
</body>
|
|
</html>
|