extra radios
This commit is contained in:
parent
1528a6e5b2
commit
2768ef2647
372
index.html
372
index.html
@ -14,23 +14,15 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
.block > *
|
|
||||||
{
|
|
||||||
padding:10px 0 10px 10px;
|
|
||||||
}
|
|
||||||
.block > *:last-child
|
|
||||||
{
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
.block__hit-area
|
|
||||||
{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.col--empty, input:checked + .col--empty-active
|
.col--empty, input:checked + .col--empty-active
|
||||||
{
|
{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border:1px solid #f1f1ee;
|
border:1px solid #f1f1ee;
|
||||||
}
|
}
|
||||||
|
.col--yellow
|
||||||
|
{
|
||||||
|
background:#f7f3de;
|
||||||
|
}
|
||||||
.col--warm, input:checked + .col--warm-active
|
.col--warm, input:checked + .col--warm-active
|
||||||
{
|
{
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@ -270,64 +262,6 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- giving buttons -->
|
|
||||||
<style>
|
|
||||||
.giving
|
|
||||||
{
|
|
||||||
display:inline-block;
|
|
||||||
font-size:0;
|
|
||||||
}
|
|
||||||
.giving label, .giving *
|
|
||||||
{
|
|
||||||
display:inline-block;
|
|
||||||
position:relative;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height:44px;
|
|
||||||
line-height:44px;
|
|
||||||
padding: 0 15px 0 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
vertical-align:top;
|
|
||||||
}
|
|
||||||
.giving label
|
|
||||||
{
|
|
||||||
margin:0;
|
|
||||||
border: 1px solid #DBDCD4;
|
|
||||||
border-right:0;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-bottom-left-radius: 5px;
|
|
||||||
|
|
||||||
background: #F1F1EE;
|
|
||||||
|
|
||||||
color:black;
|
|
||||||
content:"$";
|
|
||||||
font-weight:900;
|
|
||||||
text-align:center;
|
|
||||||
}
|
|
||||||
.giving *
|
|
||||||
{
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
border-right: 1px solid #4B6451;
|
|
||||||
border-radius: 0;
|
|
||||||
background: #5E7D65;
|
|
||||||
color: white;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
.giving input
|
|
||||||
{
|
|
||||||
margin: 0;
|
|
||||||
border: 1px solid #DBDCD4;
|
|
||||||
padding:0 10px 0 10px;
|
|
||||||
background: white;
|
|
||||||
color: black;
|
|
||||||
font-weight: lighter;
|
|
||||||
}
|
|
||||||
.giving *:last-child
|
|
||||||
{
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
border-bottom-right-radius: 5px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<!-- atomic text -->
|
<!-- atomic text -->
|
||||||
<style>
|
<style>
|
||||||
@ -337,13 +271,12 @@
|
|||||||
|
|
||||||
.txt--fnt-slab{ font-family: "Sanchez"; }
|
.txt--fnt-slab{ font-family: "Sanchez"; }
|
||||||
.txt--fnt-sans{ font-family: "Nunito Sans"; }
|
.txt--fnt-sans{ font-family: "Nunito Sans"; }
|
||||||
|
|
||||||
.txt--size-micro{ font-size: 12px; line-height:24px; }
|
.txt--size-micro{ font-size: 12px; line-height:24px; }
|
||||||
.txt--size-small{ font-size: 14px; line-height:24px; }
|
.txt--size-small{ font-size: 14px; line-height:24px; }
|
||||||
.txt--size-copy{ font-size:16px; line-height:24px; }
|
.txt--size-copy{ font-size:16px; line-height:24px; }
|
||||||
|
.txt--size-h3{ font-size:20px; line-height:32px; }
|
||||||
.txt--size-h2{ font-size:24px; line-height:28px; }
|
.txt--size-h2{ font-size:24px; line-height:28px; }
|
||||||
.txt--size-h1{ font-size:32px; line-height:48px; }
|
.txt--size-h1{ font-size:32px; line-height:48px; }
|
||||||
|
|
||||||
.txt--green-darken-01{ color: #4B6451; }
|
.txt--green-darken-01{ color: #4B6451; }
|
||||||
.txt--col-white{ color:#ffffff; }
|
.txt--col-white{ color:#ffffff; }
|
||||||
|
|
||||||
@ -355,23 +288,39 @@
|
|||||||
.txt--uppercase{ text-transform: uppercase; }
|
.txt--uppercase{ text-transform: uppercase; }
|
||||||
.txt--center{ text-align:center; }
|
.txt--center{ text-align:center; }
|
||||||
.txt--tall{ line-height: 44px; }
|
.txt--tall{ line-height: 44px; }
|
||||||
|
.txt--short{ line-height: 30px; }
|
||||||
|
|
||||||
.gap--lg { margin:72px 0 0 0; }
|
.gap--lg { margin:72px 0 0 0; }
|
||||||
.gap--md { margin:47px 0 0 0; }
|
.gap--md { margin:47px 0 0 0; }
|
||||||
.gap--sm { margin:24px 0 0 0; }
|
.gap--sm { margin:24px 0 0 0; }
|
||||||
.gap--xs { margin:12px 0 0 0; }
|
.gap--xs { margin:12px 0 0 0; }
|
||||||
|
.gap--no { margin:0; }
|
||||||
.gap--md-right { margin-right:42px; }
|
.gap--md-right { margin-right:42px; }
|
||||||
.gap--sm-right { margin-right:20px; }
|
.gap--sm-right { margin-right:20px; }
|
||||||
|
|
||||||
.pad--md { padding-left: 16px; padding-right: 16px; }
|
.pad--xs-h { padding-left: 10px; padding-right: 10px; }
|
||||||
|
.pad--sm-h { padding-left: 16px; padding-right: 16px; }
|
||||||
|
.pad--md-h { padding-left: 20px; padding-right: 20px; }
|
||||||
|
.pad--lg-h { padding-left: 24px; padding-right: 24px; }
|
||||||
|
.pad--xl-h { padding-left: 36px; padding-right: 36px; }
|
||||||
|
.pad--xs-v { padding-top: 10px; padding-bottom: 10px; }
|
||||||
|
.pad--sm-v { padding-top: 16px; padding-bottom: 16px; }
|
||||||
|
.pad--md-v { padding-top: 20px; padding-bottom: 20px; }
|
||||||
|
.pad--lg-v { padding-top: 24px; padding-bottom: 24px; }
|
||||||
|
|
||||||
|
|
||||||
.dsp--block{ display:block; }
|
.dsp--block{ display:block; }
|
||||||
.dsp--inline-block{ display:inline-block; vertical-align: top; }
|
.dsp--inline-block{ display:inline-block; vertical-align: top; }
|
||||||
.dsp--wide{ width:100%; }
|
.dsp--wide{ width:100%; }
|
||||||
|
.dsp--wide-1-3{ width:33%; }
|
||||||
|
.dsp--wide-2-3{ width:66%; }
|
||||||
.dsp--round{ border-radius:4px; }
|
.dsp--round{ border-radius:4px; }
|
||||||
.dsp--round-left{ border-top-left-radius:4px; border-bottom-left-radius:4px; }
|
.dsp--round-left{ border-top-left-radius:4px; border-bottom-left-radius:4px; }
|
||||||
.dsp--round-right{ border-top-right-radius:4px; border-bottom-right-radius:4px; }
|
.dsp--round-right{ border-top-right-radius:4px; border-bottom-right-radius:4px; }
|
||||||
.dsp--emboss{ border-left:1px solid rgba(0, 0, 0, 0.5);}
|
.dsp--emboss{ border-left:1px solid rgba(0, 0, 0, 0.5);}
|
||||||
|
.dsp--plus { position: relative; padding-left:1em; }
|
||||||
|
.dsp--plus::before{ content:"+"; position:absolute; left:0;}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<!-- atomic coloration -->
|
<!-- atomic coloration -->
|
||||||
@ -397,11 +346,10 @@
|
|||||||
<div class="txt--size-h2 txt--wgt-black gap--sm">Payment Information</div>
|
<div class="txt--size-h2 txt--wgt-black gap--sm">Payment Information</div>
|
||||||
<div style="display:flex;">
|
<div style="display:flex;">
|
||||||
|
|
||||||
|
<input id="check-1" type="radio" name="slot-1" value="option-1"/>
|
||||||
<div class="block col--empty col--warm-active gap--sm gap--md-right">
|
<div class="block col--empty dsp--round col--warm-active gap--sm gap--md-right">
|
||||||
<input id="check-1" type="radio" name="slot-1" value="option-1"/>
|
<label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-1">
|
||||||
<label class="block__hit-area" for="check-1">
|
Credit Card<br>
|
||||||
<span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
|
|
||||||
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
|
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
|
||||||
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-mastercard.svg"/>
|
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-mastercard.svg"/>
|
||||||
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-discover.svg"/>
|
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-discover.svg"/>
|
||||||
@ -410,17 +358,17 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input id="check-2" type="radio" name="slot-1" value="option-2"/>
|
<input id="check-2" type="radio" name="slot-1" value="option-2"/>
|
||||||
<div class="block col--empty gap--sm gap--md-right">
|
<div class="block col--empty dsp--round gap--sm gap--md-right">
|
||||||
<label class="block__hit-area" for="check-2">
|
<label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-2">
|
||||||
<strong>Paypal</strong><br>
|
Paypal<br>
|
||||||
<img class="col--empty gap--xs" src="icon-pay-paypal.svg"/>
|
<img class="col--empty gap--xs" src="icon-pay-paypal.svg"/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input id="check-3" type="radio" name="slot-1" value="option-3"/>
|
<input id="check-3" type="radio" name="slot-1" value="option-3"/>
|
||||||
<div class="block col--empty gap--sm gap--sm-right">
|
<div class="block col--empty dsp--round gap--sm gap--sm-right">
|
||||||
<label class="block__hit-area" for="check-3">
|
<label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-3">
|
||||||
<strong>Bank Transfer</strong><br>
|
Bank Transfer<br>
|
||||||
<img class="col--empty gap--xs" src="icon-pay-transfer.svg"/>
|
<img class="col--empty gap--xs" src="icon-pay-transfer.svg"/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
@ -429,8 +377,8 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
|
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
|
||||||
<div class="block col--empty">
|
<div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
|
||||||
<div class="block__hit-area">
|
<div class="dsp--wide">
|
||||||
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
|
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
|
||||||
<div style="display:flex; gap:130px;">
|
<div style="display:flex; gap:130px;">
|
||||||
<div class="txt--size-copy txt--wgt-normal">
|
<div class="txt--size-copy txt--wgt-normal">
|
||||||
@ -449,16 +397,49 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="txt--size-h2 txt--wgt-black gap--lg">Shipping Information</div>
|
<div class="txt--size-h2 txt--wgt-black gap--lg">Shipping Information</div>
|
||||||
<div class="block col--empty gap--sm">
|
<div class="col--empty gap--sm dsp--round">
|
||||||
<div class="block__hit-area">
|
|
||||||
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
|
<div class="pad--md-h pad--sm-v">
|
||||||
<div class="txt--size-copy txt--wgt-normal">
|
|
||||||
8759 Cardinal Court<br>
|
<div class="txt--size-copy txt--wgt-bold">Available Addresses</div>
|
||||||
Windmere, FL 34786<br>
|
|
||||||
US
|
<input type="radio" name="ship" value="ship-1" id="ship-1" />
|
||||||
|
<div class="block dsp--round gap--xs">
|
||||||
|
<label for="ship-1" class="dsp--wide pad--md-h pad--xs-v">
|
||||||
|
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
|
||||||
|
<div class="txt--size-copy txt--wgt-normal">
|
||||||
|
8759 Cardinal Court<br>
|
||||||
|
Windmere, FL 34786<br>
|
||||||
|
US
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<a class="txt--size-small txt--wgt-bold txt--green-darken-01 pad--md-h pad--xs-v" href="">Change</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<input type="radio" name="ship" value="ship-2" id="ship-2" />
|
||||||
|
<div class="block dsp--round gap--xs">
|
||||||
|
<label for="ship-2" class="dsp--wide pad--md-h pad--xs-v">
|
||||||
|
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
|
||||||
|
<div class="txt--size-copy txt--wgt-normal">
|
||||||
|
8759 Cardinal Court<br>
|
||||||
|
Windmere, FL 34786<br>
|
||||||
|
US
|
||||||
|
</div>
|
||||||
|
</label>
|
||||||
|
<a class="txt--size-small txt--wgt-bold txt--green-darken-01 pad--md-h pad--xs-v" href="">Change</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pad--xl-h gap--xs">
|
||||||
|
<a class="dsp--plus txt--green-darken-01 txt--size-small txt--wgt-bold" href="">Add</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
|
|
||||||
|
|
||||||
|
<div class="col--warm pad--xs-v pad--xl-h">
|
||||||
|
<button class="dsp--round col--green pad--md-h txt--size-small txt--wgt-bold txt--col-white txt--short">Use this address</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
|
<div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
|
||||||
@ -468,48 +449,189 @@
|
|||||||
</select>
|
</select>
|
||||||
|
|
||||||
<button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
|
<button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
|
||||||
|
<p class="txt--size-small txt--wgt-bold gap--sm">
|
||||||
<p class="txt--size-copy txt--wgt-bold">
|
Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit <a class="txt--green-darken-01" href="">Privacy Policy</a>.
|
||||||
Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit <a href="">Privacy Policy</a>.
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="txt--size-h2 txt--wgt-black gap--lg">Will you add a donation to your order?</div>
|
||||||
|
<p class="txt--size-copy txt--wgt-normal gap--xs">
|
||||||
|
Truth For Life is entirely funded by the generous giving from people like you! Your added donation today helps make all of Truth For Life's online teaching free and books available for purchase at cost with free shipping. Thank you.
|
||||||
|
</p>
|
||||||
|
<div class="gap--xs" style="display:flex;">
|
||||||
|
<label class="col--drab dsp--inline-block dsp--round-left pad--sm-h txt--size-small txt--tall txt--wgt-black ">$</label>
|
||||||
|
<input class="col--inset dsp--inline-block pad--sm-h txt--size-small txt--tall txt--wgt-normal " type="number"/>
|
||||||
|
<button class="col--green pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
|
||||||
|
<button class="col--green dsp--emboss pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
|
||||||
|
<button class="col--green dsp--emboss pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
|
||||||
|
<button class="col--green dsp--emboss dsp--round-right pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$100</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="txt--size-h2 txt--wgt-black gap--lg">Send you a copy? </div>
|
||||||
|
<p class="txt--size-copy txt--wgt-normal gap--xs">
|
||||||
|
Would you like to receive a copy of our featured book? It's our way of saying thanks for your support.
|
||||||
|
</p>
|
||||||
<div style="display:flex;">
|
<div style="display:flex;">
|
||||||
<label class="col--drab dsp--inline-block dsp--round-left pad--md txt--size-small txt--tall txt--wgt-black ">$</label>
|
<div>
|
||||||
<input class="col--inset dsp--inline-block pad--md txt--size-small txt--tall txt--wgt-normal " type="number"/>
|
<button class="col--gray dsp--round gap--xs pad--sm-h txt--short txt--wgt-bold"><img src="icon-wire-magnify.svg"/> Learn More</button>
|
||||||
<button class="col--green pad--md txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
|
<img src="https://placekitten.com/150/200"/>
|
||||||
<button class="col--green dsp--emboss pad--md txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
|
</div>
|
||||||
<button class="col--green dsp--emboss pad--md txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
|
<div>
|
||||||
<button class="col--green dsp--emboss dsp--round-right pad--md txt--size-small txt--tall txt--wgt-black txt--col-white">$100</button>
|
<p class="gap--xs txt--fnt-slab txt--green-darken-01 txt--size-h3">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</p>
|
||||||
|
<p class="gap--xs txt--green-darken-01 txt--size-copy">(fair market value $3.00)</p>
|
||||||
|
|
||||||
|
<input type="radio" name="donation" value="donation-ebook" id="donation-ebook"/>
|
||||||
|
<div class="dsp--inline-block">
|
||||||
|
<label for="donation-ebook" class="dsp--inline-block dsp--round col--active-warm pad--md-h pad--xs-v txt--wgt-bold">
|
||||||
|
Ebook<br>
|
||||||
|
<span class="txt--size-micro txt--green-darken-01">.ePub, .mobi, and .pdf</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="radio" name="donation" value="donation-paperback" id="donation-paperback"/>
|
||||||
|
<div class="dsp--inline-block">
|
||||||
|
<label for="donation-paperback" class="dsp--inline-block dsp--round col--active-warm pad--md-h pad--xs-v txt--wgt-bold">
|
||||||
|
Paperback<br>
|
||||||
|
<span class="txt--size-micro txt--green-darken-01">Softcover, 224 pages</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="radio" name="donation" value="donation-none" id="donation-none"/>
|
||||||
|
<div class="dsp--inline-block">
|
||||||
|
<label for="donation-none" class="dsp--inline-block dsp--round col--active-warm pad--md-h pad--xs-v txt--wgt-bold">
|
||||||
|
No, thank you
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<hr>
|
<div class="txt--size-h2 txt--wgt-black gap--lg">Shipping Options</div>
|
||||||
|
<p class="txt--size-copy txt--wgt-normal gap--sm txt--wgt-bold">
|
||||||
<div class="giving">
|
Please choose your preferred shipping method.
|
||||||
<label for="amount">$</label>
|
</p>
|
||||||
<input id="amount" type="number" value="100"/>
|
<span class="col--yellow dsp--round pad--xs-h txt--size-small txt--wgt-bold">You save <strong class="txt--wgt-black">$2.89</strong> by using USPS, Media Mail.</span>
|
||||||
<button>$20 </button>
|
<input type="radio" name="shipping" value="shipping-1" id="shipping-1"/>
|
||||||
<button>$30 </button>
|
<div class="gap--xs">
|
||||||
<button>$50 </button>
|
<label for="shipping-1" class="dsp--block pad--xs-v"><span class="txt--wgt-black">$0.00</span> <span class="txt--wgt-bold">USPS - Media Mail</span> <span class="txt--green-darken-01">(Delivery in 7-10 business days.)</span></label>
|
||||||
<button>$100</button>
|
</div>
|
||||||
|
<input type="radio" name="shipping" value="shipping-2" id="shipping-2"/>
|
||||||
|
<div>
|
||||||
|
<label for="shipping-2" class="dsp--block pad--xs-v"><span class="txt--wgt-black">$37.23</span> <span class="txt--wgt-bold">USPS - Next Day Air</span> <span class="txt--green-darken-01">(Order by 11 am EST for next business day delivery. Weekend orders will be shipped on Monday for Tuesday delivery.)</span></label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<input type="text" value="text"/>
|
<button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
|
||||||
<select>
|
|
||||||
<option>select</option>
|
|
||||||
<option>select</option>
|
<div class="txt--size-h2 txt--wgt-black gap--lg">Review your Order</div>
|
||||||
<option>select</option>
|
|
||||||
<option>select</option>
|
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
|
||||||
</select>
|
<div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
|
||||||
<input type="email" value="email"/>
|
<div class="dsp--wide">
|
||||||
<input type="number" value="123"/>
|
<div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
|
||||||
|
<div style="display:flex; gap:130px;">
|
||||||
|
<div class="txt--size-copy txt--wgt-normal">
|
||||||
|
8759 Cardinal Court<br>
|
||||||
|
Windmere, FL 34786<br>
|
||||||
|
US
|
||||||
|
</div>
|
||||||
|
<div class="txt--size-copy txt--wgt-normal">
|
||||||
|
<img style="vertical-align: middle;" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
|
||||||
|
<img style="vertical-align: middle;" src="icon-wire-envelope.svg"/> Windmere, FL 34786
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Shipping Information</div>
|
||||||
|
<div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
|
||||||
|
<div class="dsp--wide txt--size-copy txt--wgt-bold">
|
||||||
|
Same as billing information
|
||||||
|
</div>
|
||||||
|
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Items and Shipping</div>
|
||||||
|
<div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
|
||||||
|
<div class="dsp--wide txt--size-copy txt--size-copy">
|
||||||
|
<img src="icon-wire-truck.svg"/> <span class="txt--wgt-black">$3.09</span> <span class="txt--wgt-bold">USPS - Media Mail</span> <span class="txt--green-darken-01">(Delivery 7-10 business days.)</span>
|
||||||
|
</div>
|
||||||
|
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display:flex;" class="dsp--round col--empty gap--sm pad--sm-h pad--lg-v">
|
||||||
|
<div class="pad--xs-h">
|
||||||
|
<img src="https://placekitten.com/200/200"/>
|
||||||
|
</div>
|
||||||
|
<div class="pad--xs-h">
|
||||||
|
<p class="gap--no txt--fnt-slab txt--green-darken-01 txt--size-h3">Donation</p>
|
||||||
|
<p class="gap--xs txt--green-darken-01 txt--size-copy">$100.00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display:flex;" class="dsp--round col--empty gap--sm pad--sm-h pad--lg-v">
|
||||||
|
<div class="pad--xs-h">
|
||||||
|
<img src="https://placekitten.com/200/200"/>
|
||||||
|
</div>
|
||||||
|
<div class="pad--xs-h">
|
||||||
|
<p class="gap--no txt--fnt-slab txt--green-darken-01 txt--size-h3">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</p>
|
||||||
|
<p class="gap--no txt--green-darken-01 txt--size-small txt--wgt-black">Paperback</p>
|
||||||
|
<p class="gap--no txt--green-darken-01 txt--size-copy">$3.00</p>
|
||||||
|
<p class="gap--no txt--green-darken-01 txt--size-copy">Quantity: 2 ($6.00)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="progress progress--stage-5 gap--lg">
|
||||||
|
<li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
|
||||||
|
<li class="txt--wgt-normal txt--size-copy">Payment Options</li>
|
||||||
|
<li class="txt--wgt-normal txt--size-copy">Shipping Method</li>
|
||||||
|
<li class="txt--wgt-normal txt--size-copy">Confirmation</li>
|
||||||
|
<li class="txt--wgt-normal txt--size-copy">Print Receipt</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 class="gap--md txt--size-h2 txt--fnt-slab txt--wgt-normal">Thank you for your order</h2>
|
||||||
|
<p class="gap--sm">
|
||||||
|
Your order <span class="txt--wgt-black">#00000001111</span> has been placed!
|
||||||
|
</p>
|
||||||
|
<p class="gap--sm">
|
||||||
|
We sent an email to <span class="txt--green-darken-01 txt--wgt-black">brian.p@email.com</span> with your order details and receipt. If the email hasn’t arrived within five minutes, please check your spam folder.
|
||||||
|
</p>
|
||||||
|
<button class="gap--sm dsp--round col--gray pad--md-h txt--short txt--wgt-bold">Print</button>
|
||||||
|
|
||||||
|
<div style="width:350px;" class="gap--lg">
|
||||||
|
|
||||||
|
<div class="col--warm dsp--round pad--sm-h pad--sm-v">
|
||||||
|
<div class="txt--wgt-black">Need Help?</div>
|
||||||
|
<p class="gap--xs">Contact Customer Service<br>(888-588-7884)</p>
|
||||||
|
<p class="gap--sm">
|
||||||
|
<a class="txt--green-darken-01" href="">Submit a Support Ticket</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col--empty dsp--round pad--sm-h pad--sm-v">
|
||||||
|
<div class="txt--uppercase txt--wgt-black">Order Summary</div>
|
||||||
|
<p>Items (3):<span style="float:right;">$107.00</span></p>
|
||||||
|
<span class="dsp--inline-block dsp--wide-2-3">Items (3):</span> <span class="dsp--inline-block dsp--wide-1-3">$107.00</span>
|
||||||
|
<span class="dsp--inline-block dsp--wide-2-3">Shipping & handling</span> <span class="dsp--inline-block dsp--wide-1-3">$3.09</span>
|
||||||
|
<span class="dsp--inline-block dsp--wide-2-3">Items (3):</span> <span class="dsp--inline-block dsp--wide-1-3">$107.00</span>
|
||||||
|
<span class="dsp--inline-block dsp--wide-2-3">Total before tax</span> <span class="dsp--inline-block dsp--wide-1-3">$110.09</span>
|
||||||
|
<span class="dsp--inline-block dsp--wide-2-3">Tax</span> <span class="dsp--inline-block dsp--wide-1-3">$0.19</span>
|
||||||
|
|
||||||
|
<p class="gap--xs">Contact Customer Service<br>(888-588-7884)</p>
|
||||||
|
<p class="gap--sm">
|
||||||
|
<a class="txt--green-darken-01" href="">Submit a Support Ticket</a>
|
||||||
|
</p>
|
||||||
|
<input type="checkbox" id="bool-1"/>
|
||||||
|
<label for="bool-1">
|
||||||
|
Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="checkbox" id="bool-1"/>
|
|
||||||
<label for="bool-1">
|
|
||||||
Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
|
|
||||||
</label>
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user