commit all.
This commit is contained in:
parent
6ed0c48f4e
commit
3f6d7bd638
3 changed files with 134 additions and 0 deletions
105
index.html
Normal file
105
index.html
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#090b12" />
|
||||
<meta name="description" content="The Tiffin Food — goal-oriented meals for the body you are building." />
|
||||
<title>The Tiffin Food — Eat with intent</title>
|
||||
<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=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="noise"></div>
|
||||
<header class="site-header">
|
||||
<a class="brand" href="#" aria-label="The Tiffin Food home">
|
||||
<span class="brand-mark"><i></i><i></i><i></i></span>
|
||||
<span>THE TIFFIN<br /><b>FOOD</b></span>
|
||||
</a>
|
||||
<nav class="nav-links" aria-label="Main navigation">
|
||||
<a href="#menu">The menu</a>
|
||||
<a href="#method">Our method</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
<a class="header-cta" href="#menu">Build your box <span>↗</span></a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow"><span class="pulse"></span> Food for the body in progress</p>
|
||||
<h1>Eat with<br /><em>intent.</em></h1>
|
||||
<p class="hero-description">Goal-oriented meals, cooked fresh and delivered on your frequency. No noise. Just the right fuel for wherever you are going.</p>
|
||||
<a class="button button-primary" href="#menu">Find your fuel <span>↓</span></a>
|
||||
</div>
|
||||
<div class="hero-orbit" aria-hidden="true">
|
||||
<img class="hero-food-image" src="https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=1100&q=88" alt="" />
|
||||
<div class="orbit orbit-one"></div>
|
||||
<div class="orbit orbit-two"></div>
|
||||
<div class="orbit orbit-three"></div>
|
||||
<div class="core">
|
||||
<span class="core-kicker">01 / 04</span>
|
||||
<strong>FUEL<br />THE<br /><em>FORM</em></strong>
|
||||
<span class="core-line"></span>
|
||||
<span class="core-caption">Precision nutrition<br />for real life.</span>
|
||||
</div>
|
||||
<span class="orbit-label label-top">NUTRIENT<br />DENSITY</span>
|
||||
<span class="orbit-label label-right">FRESH<br />EVERY DAY</span>
|
||||
</div>
|
||||
<div class="scroll-note"><span>01</span><span class="scroll-line"></span><span>SCROLL TO EXPLORE</span></div>
|
||||
</section>
|
||||
|
||||
<section class="marquee" aria-label="Our principles">
|
||||
<div class="marquee-track"><span>CALCULATED FLAVOR</span><b>✳</b><span>FRESH BY DESIGN</span><b>✳</b><span>YOUR GOAL. OUR CRAFT.</span><b>✳</b><span>CALCULATED FLAVOR</span><b>✳</b></div>
|
||||
</section>
|
||||
|
||||
<section class="menu-section" id="menu">
|
||||
<div class="section-intro">
|
||||
<p class="eyebrow">02 / Choose your direction</p>
|
||||
<h2>Four ways to<br /><em>show up.</em></h2>
|
||||
<p>Every body has a different brief. Pick the one that sounds like your next chapter.</p>
|
||||
</div>
|
||||
<div class="meal-grid">
|
||||
<article class="meal-card card-lime" data-goal="Lean" tabindex="0">
|
||||
<div class="card-number">01</div>
|
||||
<div class="food-orb orb-lime"><img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=700&q=88" alt="Fresh salad bowl with vegetables and grains" /><span>LOW<br />FAT</span></div>
|
||||
<div class="card-content"><p class="card-tag">The cut</p><h3>Lean<br />mode</h3><p>Minimal fats. Maximum clarity. Light, clean meals to help you move sharper.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
|
||||
</article>
|
||||
<article class="meal-card card-orange" data-goal="Muscle" tabindex="0">
|
||||
<div class="card-number">02</div>
|
||||
<div class="food-orb orb-orange"><img src="https://images.unsplash.com/photo-1532550907401-a500c9a57435?auto=format&fit=crop&w=700&q=88" alt="High protein chicken and vegetables meal" /><span>HIGH<br />PROTEIN</span></div>
|
||||
<div class="card-content"><p class="card-tag">The build</p><h3>Muscle<br />mode</h3><p>Pure protein power for the work you put in, from first rep to last.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
|
||||
</article>
|
||||
<article class="meal-card card-violet" data-goal="Bulk" tabindex="0">
|
||||
<div class="card-number">03</div>
|
||||
<div class="food-orb orb-violet"><img src="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=700&q=88" alt="Colorful rice, vegetables and protein meal" /><span>CARBS +<br />PROTEIN</span></div>
|
||||
<div class="card-content"><p class="card-tag">The gain</p><h3>Bulk<br />mode</h3><p>Intentional calories, complex carbs and protein in a bigger, bolder box.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
|
||||
</article>
|
||||
<article class="meal-card card-blue" data-goal="Balance" tabindex="0">
|
||||
<div class="card-number">04</div>
|
||||
<div class="food-orb orb-blue"><img src="https://images.unsplash.com/photo-1543352634-a1c51d9f1fa7?auto=format&fit=crop&w=700&q=88" alt="Balanced meal with vegetables, grains and protein" /><span>ALL-ROUND<br />GOOD</span></div>
|
||||
<div class="card-content"><p class="card-tag">The flow</p><h3>Balanced<br />mode</h3><p>A little bit of everything, dialed into a rhythm you can actually keep.</p><button class="card-action" type="button">Explore meal <span>↗</span></button></div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="method-section" id="method">
|
||||
<div class="method-stamp">HOW IT<br />WORKS <span>↘</span></div>
|
||||
<div class="method-copy"><p class="eyebrow">03 / The tiffin protocol</p><h2>Small box.<br /><em>Big energy.</em></h2><p>We turn nutrition science into food you look forward to. Tell us the goal, choose your rhythm, and we will handle the rest.</p><a class="text-link" href="#contact">See the protocol <span>↗</span></a></div>
|
||||
<div class="steps"><div class="step"><span>01</span><h3>Choose your goal</h3><p>Tell us what you are building towards.</p></div><div class="step"><span>02</span><h3>Set your frequency</h3><p>Daily, weekly, or whenever you need a reset.</p></div><div class="step"><span>03</span><h3>We do the cooking</h3><p>Fresh food, delivered to your door.</p></div></div>
|
||||
</section>
|
||||
|
||||
<section class="contact-section" id="contact">
|
||||
<p class="eyebrow">04 / Ready when you are</p>
|
||||
<h2>Make your next<br /><em>meal count.</em></h2>
|
||||
<a class="button button-light" href="mailto:hello@thetiffinfood.com">Start your order <span>↗</span></a>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer><a class="brand" href="#"><span class="brand-mark"><i></i><i></i><i></i></span><span>THE TIFFIN<br /><b>FOOD</b></span></a><p>© 2024 The Tiffin Food / Made for your next.</p></footer>
|
||||
<div class="toast" role="status" aria-live="polite"></div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue