<section class="warning">
<div class="wrap">
<h1>Deprecated</h1>
<p>
This version is deprecated, I'll be working on a newer version that uses more modern practices and cleaner code. This has been kept for reference (mostly to see how far I've come 😅). Visit the new one <a href="https://codepen.io/mejiaj/pen/BgJxgK"><strong>here</strong></a>
</p>
</div>
</section>
<div class="wrap">
<section class="cart">
<header class="cart-header">
<div class="pure-g">
<div class="pure-u-md-2-3 pure-u-1">
<h1 class="cart-headline">Your Shopping Cart</h1>
</div>
<div class="pure-u-md-1-3 pure-u-1">
<div class="cart-secure-badge">Your shopping experience is secure.</div>
</div>
</div>
</header>
<div class="cart-body">
<div class="cart-items-header">
<div class="pure-g">
<div class="pure-u-1-4 pure-u-md-1-2">
<div class="cart-item-title">Product</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-price">Price</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-qty">Qty</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-subtotal">Subtotal</div>
</div>
</div>
</div>
<ul class="cart-items-body">
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Smooth and Silky Brazilian Formula Wax (refill)</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$24.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty1" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Style Therapy: Shine Therapy Grooming Brush</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$9.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty2" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Battery Operated Rotary Nose & Ear Trimmer</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$19.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty3" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
<li class="cart-item">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Studio Style 30 Piece Professional Haircut Kit</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$31.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">
<input type="number" name="" id="qty4" value="12" max="15">
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal"></div>
</div>
</div>
</li>
</ul><!--/Cart Items Body-->
</div><!--/Cart Body-->
<footer class="cart-footer">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-2-5">
<div class="field-wrap inline-field promo is-valid">
<label for="promo">Promo Code:</label>
<input type="text" name="promo" id="promo" placeholder="Promo Code" value="Dinosaur"/>
<a href="" class="btn btn-tertiary">Submit Code</a>
</div>
</div>
<div class="pure-u-1 pure-u-md-3-5">
<div class="cart-total">
<div class="pure-g">
<div class="pure-u-1-2 pure-u-sm-4-5 h2">Total<span class="tooltip-trigger">♦<span class="tooltip">Doesn't include shipping & handling or tax</span></span>:</div>
<div class="pure-u-1-2 pure-u-sm-1-5 h2" id="cartTotalVal">$1,199.52</div>
</div>
</div>
</div>
</div>
<div class="cart-controls">
<a href="#login" class="btn btn-primary">Begin Checkout</a>
<a href="" class="btn btn-secondary">Back to Browsing</a>
</div>
</footer>
</section><!--/Cart-->
<section class="checkout is-hidden" id="login">
<header class="checkout-header">
<h1 class="checkout-headline">Sign In</h1>
</header>
<div class="checkout-body">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="login">
<a href="" class="btn btn-facebook">Login with Facebook</a>
<span class="hr-text">or</span>
<h5>Use existing account:</h5>
<form action="">
<div class="field-wrap">
<label for="accEmail">Email</label>
<input type="email" name="accEmail" id="accEmail" placeholder="Email" required />
</div>
<div class="field-wrap">
<label for="accPwd">Password</label>
<input type="password" name="" id="accPwd" placeholder="Password" required />
</div>
<div class="field-wrap input-checkbox">
<label for="rememberMe">Remember Me</label>
<input type="checkbox" name="rememberMe" id="rememberMe" />
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div><!--/Login-->
</div>
<div class="pure-u-1 pure-u-md-1-2 is-centered">
<div class="login-alt">
<a href="#checkout" class="btn btn-tertiary">Guest Checkout</a>
<a href="" class="btn btn-secondary">Create Account</a>
</div>
</div>
</div>
</div><!--/Checkout Body-->
</section><!--/Checkout-->
<section class="checkout is-hidden" id="checkout">
<header class="checkout-header">
<h1 class="checkout-headline">Checkout</h1>
<div class="progress">
<div class="pure-g">
<div class="pure-u-1-3 h3 progress-step is-active">
<a href="">Billing</a>
</div>
<div class="pure-u-1-3 h3 progress-step">
<a href="">Shipping</a>
</div>
<div class="pure-u-1-3 h3 progress-step">
<a href="">Payment</a>
</div>
</div>
</div>
</header>
<div class="checkout-body">
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3 push-u-2-3">
<section class="checkout-items">
<h3 class="checkout-items-headline">Your Items</h3>
<ul class="checkout-items-body">
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Smooth and Silky Brazilian Formula Wax (refill)
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Style Therapy: Shine Therapy Grooming Brush
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Battery Operated Rotary Nose & Ear Trimmer
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-item">
<dl>
<dt class="checkout-item-title">
Studio Style 30 Piece Professional Haircut Kit
</dt>
<dd class="checkout-item-price">
$24.99
<span class="price-desc">ea.</span>
</dd>
<dd class="checkout-item-qty">×12</dd>
<dd class="checkout-item-subtotal">$299.88</dd>
</dl>
</li>
<li class="checkout-total">
<span class="h4 checkout-total-val">$1,199.52</span>
<span class="h5">total</span>
</li>
</ul><!--/Cart Items Body-->
</section>
</div>
<div class="pure-u-1 pure-u-md-2-3 pull-u-1-3">
<section class="checkout-billing checkout-step checkout-step-1" id="step1">
<h2 class="billing-header">Billing Info</h2>
<form action="">
<fieldset class="billing-name">
<legend>Name</legend>
<div class="field-wrap">
<label for="gAccEmail">Email</label>
<input type="email" name="" id="gAccEmail" placeholder="Email" required />
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<div class="field-wrap">
<label for="firstName">First Name</label>
<input type="text" name="" id="firstName" placeholder="First Name" required class="pure-u-1 pure-u-sm-23-24"/>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<div class="field-wrap">
<label for="lastName">Last Name</label>
<input type="text" name="" id="lastName" placeholder="Last Name" required/>
</div>
</div>
</div>
</fieldset>
<fieldset class="billing-address">
<legend>Address</legend>
<div class="field-wrap">
<label for="street">Street</label>
<input type="text" name="" id="street" placeholder="Street" required/>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="field-wrap">
<label for="city">City</label>
<input type="text" name="" id="city" placeholder="City" required value="Madison" class="pure-u-1 pure-u-md-23-24"/>
</div>
</div>
<div class="pure-u-1 pure-u-sm-2-3 pure-u-md-1-5">
<div class="field-wrap">
<label for="state">State</label>
<select name='options' id="state" require class="pure-u-1 pure-u-sm-22-24">
<option value='option-1'>Arizona</option>
<option value='option-2' selected>Wisconsin</option>
<option value='option-6'>Florida</option>
</select>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-3 pure-u-md-7-24">
<div class="field-wrap">
<label for="zipcode">Zipcode</label>
<input type="text" name="zipcode" id="zipcode" placeholder="Zip Code" required value="53713"/>
</div>
</div>
</div>
<div class="field-wrap input-checkbox">
<label for="shipAddress">My shipping address is the same as my billing address.</label>
<input type="checkbox" name="shipCheck" id="shipAddress" checked/>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Continue</button>
<a href="" class="btn btn-secondary">Back</a>
</form>
</section><!--/Checkout Step 1-->
<section class="checkout-step checkout-step-2 shipping-info is-hidden" id="step2">
<h2 class="shipping-info-header">Shipping Info</h2>
<form action="">
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<fieldset>
<legend class="">Fedex</legend>
<div class="field-wrap input-radio">
<label for="shipOp1">Standard - Free</label>
<input type="radio" name="shipOp" id="shipOp1" required />
</div>
<div class="field-wrap input-radio">
<label for="shipOp2">Priority - $46.96</label>
<input type="radio" name="shipOp" id="shipOp2" required />
</div>
</fieldset>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<fieldset>
<legend>UPS</legend>
<div class="field-wrap input-radio">
<label for="shipOp3">Standard - Free</label>
<input type="radio" name="shipOp" id="shipOp3" required />
</div>
<div class="field-wrap input-radio">
<label for="shipOp4">Priority - $17.26</label>
<input type="radio" name="shipOp" id="shipOp4" required />
</div>
</fieldset>
</div>
</div>
<button type="submit" class="btn btn-primary">Continue</button>
<a href="" class="btn btn-secondary">Back</a>
</form>
</section><!--/Checkout Step 2-->
<section class="checkout-step checkout-step-3 payment-info is-hidden" id="step3">
<h2 class="payment-info-header">Payment Info</h2>
<form action="" class="payment-form">
<div class="field-wrap">
<label for="ccNum">Credit Card Number</label>
<input type="text" id="ccNum" placeholder="Credit Card Number" maxlength="15" required/>
</div>
<div class="field-wrap">
<label for="ccName">Name on Card</label>
<input type="text" id="ccName" placeholder="Name on Card" required />
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-3-5">
<div class="field-wrap">
<label for="ccExpDate">Expires</label>
<input type="month" name="ccExpDate" id="ccExpDate" class="cc-exp pure-u-sm-22-24" />
</div>
</div>
<div class="pure-u-1 pure-u-sm-2-5">
<div class="field-wrap">
<label for="ccCode" class="ccCode">Security Code</label>
<input type="text" name="ccCode" id="ccCode" placeholder="Security Code" class="cc-code" required maxlength="6"/>
<span class="tooltip-trigger">♦
<span class="tooltip">
The security code is the 3 digit number on the back of your card.
</span>
</span>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Complete Purchase</button>
<a href="" class="btn btn-secondary">Back</a>
</form>
</section><!--/Checkout Step 3-->
<div class="checkout-footer">
<div class="nl-signup">
<h3 class="nl-signup-header">Checkout Our Newsletter</h3>
<div class="nl-signup-body">
<p>
Once a month you get an email with the latest products, exclusive deals, the hottest tips and style guides.
</p>
<a href="" class="btn btn-tertiary" id="nl-signup">Sign Me Up!</a>
<a href="" class="btn btn-secondary" id="nl-noThanks">No Thanks</a>
</div>
</div>
</div><!--/Checkout Footer-->
</div><!--/Pure 2 of 3-->
</div><!--/Pure G-->
</div><!--/Checkout Body-->
</section><!--/Checkout-->
<section class="checkout-receipt is-hidden" id="checkout-receipt">
<h1>Thanks for shopping with us</h1>
<h4 class="checkout-ordernum">Order No. 12111320</h4>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2">
<div class="shipped-info">
<h5>Shipped To:</h5>
<ul>
<li>B. Rodriguez</li>
<li>3001 Deming Way,</li>
<li>Middleton WI, 53713</li>
</ul>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2">
<div class="paid-info">
<h5>Paid With:</h5>
<ul>
<li>Mastercard</li>
<li>**** **** **** 2916</li>
<li>Billing Address same as Shipping</li>
</ul>
</div>
</div>
</div>
<div class="cart-items-header">
<div class="pure-g">
<div class="pure-u-1-4 pure-u-md-1-2">
<div class="cart-item-title">Product</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-price">Price</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-qty">Qty</div>
</div>
<div class="pure-u-1-6">
<div class="cart-item-subtotal">Subtotal</div>
</div>
</div>
</div>
<ul class="cart-items-body">
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Smooth and Silky Brazilian Formula Wax (refill)</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$24.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$299.88</div>
</div>
</div>
</li>
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Style Therapy: Shine Therapy Grooming Brush</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$9.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$119.88</div>
</div>
</div>
</li>
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Battery Operated Rotary Nose & Ear Trimmer</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$19.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$239.88</div>
</div>
</div>
</li>
<li>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="cart-item-title pure-g">
<div class="pure-u-1 pure-u-md-5-24">
<div class="cart-title-img">
<img src="http://www.placehold.it/110x110" alt="">
</div>
</div>
<div class="pure-u-1 pure-u-md-19-24">
<div class="cart-title-desc"><a href="">Studio Style 30 Piece Professional Haircut Kit</a></div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-price">
$31.99
<span class="price-desc">ea.</span>
</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-qty">12</div>
</div>
<div class="pure-u-1 pure-u-sm-1-4 pure-u-md-1-6">
<div class="cart-item-subtotal">$383.88</div>
</div>
</div>
</li>
</ul>
<div class="cart-total">
<div class="pure-g">
<div class="pure-u-1-2 pure-u-md-4-5 h4">Promo Code:</div>
<div class="pure-u-1-2 pure-u-md-1-5 h4" 
Total de visitas: 60