Skip to content

Instantly share code, notes, and snippets.

@iamkeir

iamkeir/thing.html

Created June 10, 2020 16:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iamkeir/6502c9567be60426ec1abd53a2b4a43e to your computer and use it in GitHub Desktop.
Save iamkeir/6502c9567be60426ec1abd53a2b4a43e to your computer and use it in GitHub Desktop.
Download ZIP
Bower attempt
Raw
thing.html
<!doctype html>
<html class="no-js" lang="en-gb">
<head>
<!--js styling hook-->
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0" />
<title>Waste Calculator &ndash; Bower Collective</title>
<meta name="description" content="Woo" />
<link rel="canonical" href="https://bowercollective.com/pages/waste-calculator" />
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0112/6822/7134/files/Favicon_32x32_580e9596-9f3d-492e-835e-78285fa51353_32x32.png?v=1575622472" type="image/png" />
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0112/6822/7134/t/63/assets/vendors.css?v=11730523144465035247" />
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0112/6822/7134/t/63/assets/theme.scss.css?v=9378617490013979813" />
<link rel="stylesheet" href="//cdn.shopify.com/s/files/1/0112/6822/7134/t/63/assets/waste-calculator.scss.css?v=11160318154034397263" />
<script src="//cdn.shopify.com/s/files/1/0112/6822/7134/t/63/assets/jquery.min.js?v=16073738998526399014"></script>
<script src="//cdn.shopify.com/s/files/1/0112/6822/7134/t/63/assets/waste-calculator.js?v=14811845170724135784"></script>
</head>
<body id="top">
<header>
@TODO: Bower logo
</header>
<main>
<nav>
<ol>
<li><a href="#household">Your family</a></li><!-- @TODO: What if shared flat, not family? -->
<li><a href="#cleaning">Cleaning</a></li>
<li><a href="#kitchen">Kitchen</a></li>
<li><a href="#laundry">Laundry</a></li>
<li><a href="#bathroom">Bathroom</a></li>
<li><a href="#skincare">Skincare</a></li>
</ol>
</nav>
<section id="intro">
<h1>How much plastic waste does your household get through?</h1>
<p>Plastic is everywhere, and it’s easy to use loads of it without even noticing.</p>
<p>Spend 5 minutes using our plastic waste calculator to make sense of how much plastic you use. At the end, you’ll see how you compare, and get tips for cutting down on the amount of plastic your household gets through.</p>
<p><a href="#household">Calculate your plastic waste</a></p>
</section>
<section id="household">
<h2>First, how many people live in your house?</h2>
<label for="f-household">Household size</label>
<select name="f-household" id="f-household" required>
<option selected disabled>Select a number</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p>We’ll use this to work out how much of each product you use.</p>
<p><a href="#cleaning">Next: Cleaning</a></p>
</section>
<section id="cleaning">
<h2>What cleaning products do you use?</h2>
<p>Tick off all the products you regularly use to keep your house clean. If you’re already using plastic-free products, don’t tick them.</p>
<fieldset>
<legend>Cleaning products</legend>
<label>
<input type="checkbox" name="f-cleaning[]" value="santiser" />
Santiser or anti-bacterial spray
</label>
<label>
<input type="checkbox" name="f-cleaning[]" value="bin-bags" />
Bin bags
</label>
<label>
<input type="checkbox" name="f-cleaning[]" value="food-waste-liners" />
Liners for your food waste caddy
</label>
</fieldset>
<p><a href="#kitchen">Next: Kitchen</a></p>
<p><a href="#household">Back to your family</a></p>
<aside>
<h3>Did you know?</h3>
<p>Lorem ipsum dolor sit amet consecteteur adipiscing elit. Nonummy ad sum quam tincidum praesent atrium.</p>
</aside>
</section>
<section id="kitchen">
<h2>What products do you use in the kitchen?</h2>
<p>If you’re already using plastic-free products, don’t tick them.</p>
<fieldset>
<legend>Kitchen products</legend>
<label>
<input type="checkbox" name="f-kitchen[]" value="dishwasher-tablets" />
Dishwasher tablets
</label>
<label>
<input type="checkbox" name="f-kitchen[]" value="washing-up-liquid" />
Washing up liquid
</label>
<label>
<input type="checkbox" name="f-kitchen[]" value="dish-brush" />
A dish brush or washing up brush
</label>
<label>
<input type="checkbox" name="f-kitchen[]" value="baking-paper" />
Baking paper
</label>
<label>
<input type="checkbox" name="f-kitchen[]" value="aluminium-foil" />
Aluminium foil
</label>
<label>
<input type="checkbox" name="f-kitchen[]" value="cling-film" />
Cling film or plastic food wrap
</label>
</fieldset>
<p><a href="#laundry">Next: Laundry</a></p>
<p><a href="#cleaning">Back to cleaning</a></p>
<aside>
<h3>Did you know?</h3>
<p>Lorem ipsum dolor sit amet consecteteur adipiscing elit. Nonummy ad sum quam tincidum praesent atrium.</p>
</aside>
</section>
<section id="laundry">
<h2>What laundry products do you use?</h2>
<p>If you’re already using plastic-free products, don’t tick them.</p>
<fieldset>
<legend>Kitchen products</legend>
<label>
<input type="checkbox" name="f-laundry[]" value="fabric-conditioner" />
Fabric conditioner
</label>
<label>
<input type="checkbox" name="f-laundry[]" value="laundry-bleach" />
Laundry bleach
</label>
<label>
<input type="checkbox" name="f-laundry[]" value="washing-powder" />
Washing powder
</label>
</fieldset>
<p><a href="#bathroom">Next: Bathroom</a></p>
<p><a href="#kitchen">Back to kitchen</a></p>
<aside>
<h3>Did you know?</h3>
<p>Lorem ipsum dolor sit amet consecteteur adipiscing elit. Nonummy ad sum quam tincidum praesent atrium.</p>
</aside>
</section>
<section id="bathroom">
<h2>What products do you use in the bathroom?</h2>
<p>If you’re already using plastic-free products, don’t tick them.</p>
<fieldset>
<legend>Bathroom products</legend>
<label>
<input type="checkbox" name="f-bathroom[]" value="toothbrush" />
A toothbrush
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="toothpaste" />
Toothpaste
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="mouthwash" />
Mouthwash
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="floss" />
Floss
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="body-wash" />
Body wash
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="shampoo" />
Shampoo
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="conditioner" />
Conditioner
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="soap" />
Soap
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="deodorant" />
Deodorant
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="razors" />
Non-electric razors
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="shaving-gel" />
Shaving gel
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="tampons" />
Tampons
</label>
<label>
<input type="checkbox" name="f-bathroom[]" value="pads" />
Pads
</label>
</fieldset>
<p><a href="#skincare">Next: Skincare</a></p>
<p><a href="#laundry">Back to laundry</a></p>
<aside>
<h3>Did you know?</h3>
<p>Lorem ipsum dolor sit amet consecteteur adipiscing elit. Nonummy ad sum quam tincidum praesent atrium.</p>
</aside>
</section>
<section id="skincare">
<h2>What skincare products do you use?</h2>
<p>If you’re already using plastic-free products, don’t tick them.</p>
<fieldset>
<legend>Skincare products</legend>
<label>
<input type="checkbox" name="f-skincare[]" value="lip-balm" />
Lip balm
</label>
<label>
<input type="checkbox" name="f-skincare[]" value="moisturiser" />
Moisturiser
</label>
<label>
<input type="checkbox" name="f-skincare[]" value="body-lotion" />
Body lotion
</label>
<label>
<input type="checkbox" name="f-skincare[]" value="cleanser" />
Cleanser
</label>
<label>
<input type="checkbox" name="f-skincare[]" value="facial-scrub" />
Facial scrub
</label>
<label>
<input type="checkbox" name="f-skincare[]" value="facial-toner" />
Facial toner
</label>
<label>
<input type="checkbox" name="f-skincare[]" value="facial-oil" />
Facial oil
</label>
</fieldset>
<p><a href="#">Get your results</a></p>
<p><a href="#bathroom">Back to bathroom</a></p>
<aside>
<h3>Did you know?</h3>
<p>Lorem ipsum dolor sit amet consecteteur adipiscing elit. Nonummy ad sum quam tincidum praesent atrium.</p>
</aside>
</section>
</main>
<footer>
<div>
<p><strong>&copy; 2020 Bower Collective</strong></p>
<p>We have curated Earth's best natural home and personal care products to help our customers live a more sustainable life and reduce plastic waste from their homes. </p>
</div>
<div>
<ul>
<li><a href="#">@TODO: Facebook icon</a></li>
<li><a href="#">@TODO: Twitter icon</a></li>
<li><a href="#">@TODO: Instagram icon</a></li>
</ul>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment