.in-text-link
<a href="#" class="in-text-link">In-text link</a>
.button-nav
<a href="#" class="button">Navigation Button</a>
.button
<button type="submit" value="Submit">Submit</button>%lt; button type="reset" value="Reset" > Reset</button>
.text-input and input-label
<div class="form-name">
<label for="password-signin1">Password</label><br>
<input type="text" id="password-signin1" name="password"><br><br>
</div>
<label>
<input type="checkbox" name="remember">Remember this device
</label>
<form action="products.html" method="get" class="redirect-products">
<button class="button-submit">Login</button>
</form>
.radio-button
<fieldset>
<legend>Select a shipment method:</legend>
<div>
<input type="radio" id="regular(5-7businessdays)" name="drone" value="regular(5-7businessdays)" checked >
<label for="regular(5-7businessdays)">Regular (5-7 business days)</label>
</div>
<div>
<input type="radio" id="express(1-2business days)" name="drone" value="express(1-2businessdays)" >
<label for="express(1-2businessdays)">Express (1-2 business days)</label>
</div>
<div>
<input type="radio" id="pick-up" name="drone" value="pick-up" />
<label for="pick-up">Pickup (free)</label>
</div>
</fieldset>
.image-link
<a href="grey-sweater.html"><img src="images/item3.png" alt="Blue sweater"></a>
<h2>Header 1</h2>
<h3>Header 2</h3>
<h4>Header 3</h4>
<h5>Header 4</h5>
<h6>Header 5</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo leo, elementum at venenatis vitae, auctor eu neque. Sed vulputate hendrerit molestie. Mauris laoreet lorem ac pulvinar consequat. Sed non euismod nisl, sed iaculis tellus. Vestibulum vitae ipsum placerat, finibus ipsum ut, tincidunt tortor.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc justo leo, elementum at venenatis vitae, auctor eu neque. Sed vulputate hendrerit molestie. Mauris laoreet lorem ac pulvinar consequat. Sed non euismod nisl, sed iaculis tellus. Vestibulum vitae ipsum placerat, finibus ipsum ut, tincidunt tortor.
<ol>
<li>90% Cotton</li>
<li>5% Alpaca</li>
<li>5% Wool</li>
</ol>
<header>
<div class="header">
<nav>
<div class="left-nav">
<a href="index.html">Home</a>
<a href="products.html">Products</a>
<a href="about.html">About</a>
<a href="events.html">Events</a>
</div>
<div class="right-nav">
<a href="styleguide.html">Style Guide</a>
<a href="account.html">Account</a>
<a href="cart.html" class="cart-icon"></a>
</nav>
</div>
</header>
<section class="footer footer-flex">
<div class="footer-section footer-section0" id="footer-section0">
<a href="index.html" class="home-button"><img class="footer-logo" src="images/flufffibre.png"
alt="Fluff and Fibre logo"></a></div>
<div class="footer-section footer-section1" id="footer-section1">
<a href="products.html" class="footer-link-header">
<p class="footer-header">Products</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Sweaters</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Pants</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Shoes</p></a>
<a href="products.html" class="footer-link-header">
<p class="footer-header">Accesories</p></a>
</div>
<h4>Backpack</h4>
<a><img src="backpack.png" alt="Backpack" style="width:200px;height:200px;"></a>
<h4>105$</h4>
<a href="#">Description</a>
<div class="checkout">
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-50">
<h3>Shipping</h3>
<div class="payment">
<form action="payment" method="post" autocomplete="on">
<div class="form-module-flex">
<div class="payment-module">
<div class="form-name">
<label for="first-name">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="Jane"><br><br>
</div>
</div>
<div class="payment-module">
<div class="form-name">
<label for="first-name">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="Doe"><br><br>
</div>
</div>
</div>
<div class="payment-module">
<div class="form-full-address">
<label for="address-line-1">Address</label>
<input type="text" id="address-line-1" name="address-line-1" placeholder="123 Bacon Avenue" required>
<input type="text" id="address-line-2" name="address-line-2" placeholder="#100"><br><br>
</div>
<div class="form-module-flex">
<div class="form-city">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Eggs" required><br><br>
</div>
<div class="form-region">
<label for="region">Province</label>
<select id="region" name="region" required>
<option value="">Choose option</option>
<option value="alta">Alberta</option>
<option value="bc">British Columbia</option>
<option value="man">Manitoba</option>
<option value="nb">New Brunswick</option>
<option value="nl">Newfoundland and Labrador</option>
<option value="ns">Nova Scotia</option>
<option value="nl">Nunavut</option>
<option value="ont">Ontario</option>
<option value="pei">Prince Edward Island</option>
<option value="nque">Quebec</option>
<option value="sask">Saskatchewan</option>
<option value="nwt">The Northwest Territories</option>
<option value="yt">The Yukon</option>
</select><br><br>
</div>
<div class="form-postal-code">
<label for="postal-code">Postal code</label>
<input type="text" id="postal-code" name="postal-code" placeholder="1A2 3B4" required maxlength="7" autocapitalize="characters"><br><br>
</div>
</div>
<div class="payment-module">
<div class="form-phone-number">
<label for="phone-number">Phone number</label>
<input type="tel" id="phone-number" name="phone-number" placeholder="123-123-1234" required maxlength="12"><br><br>
</div>
</div>
<div class="payment-module">
<div class="form-email">
<label for="email">Email address</label>
<input type="email" id="email" name="email" placeholder="email@domain.com" required><br><br>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
<div class="payment">
<form action="payment" method="post" autocomplete="on">
<div class="form-module-flex">
<div class="payment-module">
<div class="form-name">
<label for="first-name">Name On Card:</label>
<input type="text" id="first-name" name="first-name" placeholder="Jane Doe"><br><br>
</div>
</div>
<div class="payment-module">
<div class="form-card">
<label for="card number">Credit Card Number:</label>
<input type="text" id="card number" name="card number" placeholder="111-222-333-444"><br><br>
</div>
</div>
</div>
<div class="payment-module">
<div class="expiry">
<label for="exp-month">Expiry Month:</label>
<input type="text" id="exp-month" name
<div class="col-25">
<div class="container">
<h4>Shopping Cart
<span class="price" style="color:black">
<i class="fa fa-shopping-cart"></i>
<b> </b>
<h4> </h4>
</span>
</h4>
<p><a href="#">Backpack</a> <span class="price">$109</span></p>
<p><a href="#">Wool Sweater</a> <span class="price">$51</span></p>
<p><a href="#">T-Shirt</a> <span class="price">$20</span></p>
<p><a href="#">Sticker</a> <span class="price">$2</span></p>
<hr>
<p>Total <span class="price" style="color:black"><b>$182</b></span></p>
</div>
</div>
ABCDEFGHIJKLMNOPQRSTUVWSYZabcdefghijklmnopqrstuvwxyz
Primary: Teal // #B6CDB8
Secondary: Olive // #B6CDB8
Tertiary: Tan // #E39371
Off-White: Off-White // #FFF2EC