654 lines
28 KiB
HTML
654 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
|
||
<!-- blocks -->
|
||
<style>
|
||
.block
|
||
{
|
||
position:relative;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
.col--empty { box-sizing:border-box; border:1px solid #f1f1ee; }
|
||
.col--yellow { box-sizing:border-box; border:1px solid #f7f3de; background:#f7f3de; }
|
||
.col--warm { box-sizing:border-box; border:1px solid #f1f1ee; background:#F8F8F6; }
|
||
.col--cool { box-sizing:border-box; border:1px solid #ccd7de; background:#e6ebee; }
|
||
.col--gray { box-sizing:border-box; border:1px solid #E1DFDF; background:#F8F8F6; }
|
||
.col--drab { box-sizing:border-box; border:1px solid #DBDCD4; background:#F1F1EE; }
|
||
.col--green { box-sizing:border-box; border:1px solid #5E7D65; background:#5E7D65; }
|
||
.col--inset { box-sizing:border-box; border:1px solid #DBDCD4; box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1); }
|
||
</style>
|
||
|
||
<!-- form controls -->
|
||
<style>
|
||
|
||
input[type='radio']
|
||
{
|
||
appearance: none;
|
||
display:block;
|
||
position:relative;
|
||
margin:0;
|
||
padding:0;
|
||
border:0;
|
||
width:0;
|
||
height:0;
|
||
}
|
||
input[type='radio'] + * label
|
||
{
|
||
position: relative;
|
||
padding-left:50px;
|
||
}
|
||
input[type='radio'] + * label::before, input[type='radio'] + * label::after
|
||
{
|
||
content: " ";
|
||
display: block;
|
||
position: absolute;
|
||
top: 10px;
|
||
left: 10px;
|
||
width: 17px;
|
||
height: 17px;
|
||
border: 2px solid #D2D2D1;
|
||
border-radius: 20px;
|
||
}
|
||
input[type='radio']:checked + * label::before
|
||
{
|
||
border:2px solid #1565C0;
|
||
}
|
||
input[type='radio'] + * label::after
|
||
{
|
||
background:#1565C0;
|
||
border:2px solid #1565C0;
|
||
opacity:0;
|
||
transform:scale(0);
|
||
transition: opacity 0.4s, transform 0.4s;
|
||
}
|
||
input[type='radio']:checked + * label::after
|
||
{
|
||
opacity:1;
|
||
transform:scale(0.65);
|
||
}
|
||
input[type='radio']:checked + *
|
||
{
|
||
background: #F8F8F6;
|
||
}
|
||
|
||
|
||
input[type='checkbox']
|
||
{
|
||
appearance: none;
|
||
display:block;
|
||
position: relative;
|
||
margin:0;
|
||
padding:0;
|
||
border:0;
|
||
width:0;
|
||
height:0;
|
||
}
|
||
input[type='checkbox'] + label
|
||
{
|
||
padding-left:30px;
|
||
}
|
||
input[type='checkbox']::before
|
||
{
|
||
content:" ";
|
||
display:block;
|
||
box-sizing: border-box;
|
||
width:22px;
|
||
height:22px;
|
||
border:2px solid #aaa;
|
||
border-radius:3px;
|
||
background:#ccc;
|
||
}
|
||
input[type='checkbox']:checked::before
|
||
{
|
||
border:2px solid #0A58B2;
|
||
background:#1565C0;
|
||
}
|
||
input[type='checkbox']::after
|
||
{
|
||
content: " ";
|
||
display: block;
|
||
position: absolute;
|
||
width: 10px;
|
||
height: 5px;
|
||
border-bottom: 3px solid #fff;
|
||
border-left: 3px solid #fff;
|
||
transform: rotate(-45deg);
|
||
left: 5px;
|
||
top: 10px;
|
||
opacity:0;
|
||
transition:opacity 0.4s, top 0.4s;
|
||
}
|
||
input[type='checkbox']:checked::after
|
||
{
|
||
opacity:1;
|
||
top: 5px;
|
||
}
|
||
|
||
|
||
select
|
||
{
|
||
appearance: none;
|
||
padding-left:20px;
|
||
padding-right:30px;
|
||
background:url();
|
||
}
|
||
|
||
|
||
/*
|
||
input[type='text'], input[type='number'], input[type='email'], select
|
||
{
|
||
position:relative;
|
||
box-sizing: border-box;
|
||
margin:0;
|
||
padding:0px 13px;
|
||
border: 1px solid #DBDCD4;
|
||
|
||
appearance: none;
|
||
border-radius: 4px;
|
||
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
|
||
|
||
color:#000000;
|
||
font-weight:500;
|
||
font-size:16px;
|
||
line-height:44px;
|
||
}
|
||
select
|
||
{
|
||
padding-right:50px;
|
||
background:url();
|
||
}
|
||
*/
|
||
</style>
|
||
|
||
<!-- progress bar -->
|
||
<style>
|
||
.progress
|
||
{
|
||
position:relative;
|
||
display:block;
|
||
margin:0;
|
||
padding:0;
|
||
border:0;
|
||
font-size:0;
|
||
}
|
||
.progress::before, .progress::after
|
||
{
|
||
content:" ";
|
||
display: block;
|
||
position:absolute;
|
||
top:0;
|
||
left:0;
|
||
width:100%;
|
||
height:12px;
|
||
border-radius:20px;
|
||
background:#F4F2EE;
|
||
}
|
||
.progress::after
|
||
{
|
||
background:#5E7D65;
|
||
}
|
||
.progress > *
|
||
{
|
||
position:relative;
|
||
display:inline-block;
|
||
width:20%;
|
||
padding:30px 0 0 0;
|
||
margin:6px 0 0 0;
|
||
list-style-type: none;
|
||
font-size:13px;
|
||
text-align:center;
|
||
}
|
||
|
||
.progress--stage-1::after{ width:10%; }
|
||
.progress--stage-2::after{ width:30%; }
|
||
.progress--stage-3::after{ width:50%; }
|
||
.progress--stage-4::after{ width:70%; }
|
||
.progress--stage-5::after{ width:100%; }
|
||
.progress--stage-1 > *:nth-child(1)::before, .progress--stage-2 > *:nth-child(2)::before, .progress--stage-3 > *:nth-child(3)::before, .progress--stage-4 > *:nth-child(4)::before, .progress--stage-5 > *:nth-child(5)::before
|
||
{
|
||
content:" ";
|
||
display: block;
|
||
position:absolute;
|
||
top:-18px;
|
||
left:50%;
|
||
width:36px;
|
||
height:36px;
|
||
border-radius:50px;
|
||
background:#5E7D65;
|
||
transform:translateX(-50%);
|
||
}
|
||
.progress--stage-5 > *:nth-child(5)::before
|
||
{
|
||
left:auto;
|
||
right:0;
|
||
transform:none;
|
||
}
|
||
.progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5)
|
||
{
|
||
font-weight:900;
|
||
}
|
||
</style>
|
||
|
||
|
||
<!-- atomic text -->
|
||
<style>
|
||
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
|
||
@import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap');
|
||
|
||
.txt--fnt-slab{ font-family: "Sanchez"; }
|
||
.txt--fnt-sans{ font-family: "Nunito Sans"; }
|
||
.txt--size-micro{ font-size: 12px; line-height:24px; }
|
||
.txt--size-small{ font-size: 14px; 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-h1{ font-size:32px; line-height:48px; }
|
||
.txt--green-darken-01{ color: #4B6451; }
|
||
.txt--col-white{ color:#ffffff; }
|
||
|
||
.txt--wgt-light { font-weight:100; }
|
||
.txt--wgt-normal{ font-weight:300; }
|
||
.txt--wgt-bold { font-weight:600; }
|
||
.txt--wgt-black { font-weight:900; }
|
||
|
||
.txt--uppercase{ text-transform: uppercase; }
|
||
.txt--center{ text-align:center; }
|
||
.txt--tall{ line-height: 44px; }
|
||
.txt--short{ line-height: 30px; }
|
||
|
||
.gap--lg { margin:72px 0 0 0; }
|
||
.gap--md { margin:47px 0 0 0; }
|
||
.gap--sm { margin:24px 0 0 0; }
|
||
.gap--xs { margin:12px 0 0 0; }
|
||
.gap--no { margin:0; }
|
||
.gap--md-right { margin-right:42px; }
|
||
.gap--sm-right { margin-right:20px; }
|
||
|
||
.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--inline-block{ display:inline-block; vertical-align: top; }
|
||
.dsp--middle { display:inline-block; vertical-align: middle; }
|
||
.dsp--wide{ width:100%; }
|
||
.dsp--wide-1-3{ width:33%; }
|
||
|
||
.dsp--square{ border-radius:0; }
|
||
.dsp--round{ border-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--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;}
|
||
|
||
.dsp--float-left{ float:left; }
|
||
.dsp--float-right{ float:right; }
|
||
.dsp--float-clear{ float:clear; }
|
||
|
||
</style>
|
||
|
||
<!-- atomic coloration -->
|
||
<style>
|
||
|
||
</style>
|
||
|
||
</head>
|
||
<body style="max-width:900px; margin:0 auto;" class="txt--fnt-sans">
|
||
|
||
<h1 class="txt--fnt-slab txt--size-h1 txt--wgt-normal gap--sm">Checkout</h1>
|
||
|
||
<ul class="progress progress--stage-2 gap--sm">
|
||
<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>
|
||
|
||
<p class="txt--size-copy gap--lg"><strong>*</strong> Indicates required fields</p>
|
||
|
||
<div class="txt--size-h2 txt--wgt-black gap--sm">Payment Information</div>
|
||
<div style="display:flex;">
|
||
|
||
<input id="check-1" type="radio" name="slot-1" value="option-1"/>
|
||
<div class="block col--empty dsp--round col--warm-active gap--sm gap--md-right">
|
||
<label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-1">
|
||
Credit Card<br>
|
||
<img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
|
||
<img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-mastercard.svg"/>
|
||
<img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-discover.svg"/>
|
||
<img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-american-express.svg"/>
|
||
</label>
|
||
</div>
|
||
|
||
<input id="check-2" type="radio" name="slot-1" value="option-2"/>
|
||
<div class="block col--empty dsp--round gap--sm gap--md-right">
|
||
<label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-2">
|
||
Paypal<br>
|
||
<img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-paypal.svg"/>
|
||
</label>
|
||
</div>
|
||
|
||
<input id="check-3" type="radio" name="slot-1" value="option-3"/>
|
||
<div class="block col--empty dsp--round gap--sm gap--sm-right">
|
||
<label class="pad--sm-h pad--xs-v txt--wgt-bold txt--size-copy" for="check-3">
|
||
Bank Transfer<br>
|
||
<img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-transfer.svg"/>
|
||
</label>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
|
||
<div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
|
||
<div class="dsp--wide">
|
||
<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 class="dsp--middle" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
|
||
<img class="dsp--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-h2 txt--wgt-black gap--lg">Shipping Information</div>
|
||
<div class="col--empty gap--sm dsp--round">
|
||
|
||
<div class="pad--md-h pad--sm-v">
|
||
|
||
<div class="txt--size-copy txt--wgt-bold">Available Addresses</div>
|
||
|
||
<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>
|
||
|
||
<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 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 class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
|
||
<label for="channel" class="txt--size-copy txt--wgt-bold gap--sm dsp--block">I primarily listen to Truth For Life with Alistair Begg on: </label>
|
||
<select id="channel" class="dsp--block dsp--round dsp--wide col--inset txt--tall txt--wgt-bold txt--size-copy">
|
||
<option>Please select option …</option>
|
||
</select>
|
||
<p class="gap--no">
|
||
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="#">Don’t see your station? Click here.</a>
|
||
<a class="txt--size-small txt--wgt-bold txt--green-darken-01 dsp--float-right" href="#">Why do we require this information?</a>
|
||
</p>
|
||
|
||
<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">
|
||
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>.
|
||
</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--square dsp--round-left dsp--inline-block pad--sm-h txt--size-small txt--tall txt--wgt-black ">$</label>
|
||
<input class="col--inset dsp--square dsp--inline-block pad--sm-h txt--size-small txt--tall txt--wgt-normal " type="number"/>
|
||
<button class="col--green dsp--square pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
|
||
<button class="col--green dsp--square dsp--emboss pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
|
||
<button class="col--green dsp--square dsp--emboss pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
|
||
<button class="col--green dsp--square dsp--round-right dsp--emboss 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>
|
||
<button class="col--gray dsp--round gap--xs pad--sm-h txt--short txt--wgt-bold"><img class="dsp--middle" src="icon-wire-magnify.svg"/> Learn More</button>
|
||
<img src="https://placekitten.com/150/200"/>
|
||
</div>
|
||
<div>
|
||
<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 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">
|
||
Please choose your preferred shipping method.
|
||
</p>
|
||
<span class="col--yellow dsp--round txt--size-small txt--wgt-bold">You save <strong class="txt--wgt-black">$2.89</strong> by using USPS, Media Mail.</span>
|
||
<input type="radio" name="shipping" value="shipping-1" id="shipping-1"/>
|
||
<div class="gap--xs">
|
||
<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>
|
||
</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>
|
||
|
||
<button class="dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall">Continue Checkout</button>
|
||
|
||
|
||
<div class="txt--size-h2 txt--wgt-black gap--lg">Review your Order</div>
|
||
|
||
<div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
|
||
<div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
|
||
<div class="dsp--wide">
|
||
<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 class="dsp--middle" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
|
||
<img class="dsp--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 class="dsp--middle gap--sm-right" 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--md">
|
||
|
||
<div class="col--warm dsp--round gap--sm 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 gap--sm pad--md-h pad--lg-v">
|
||
<div class="txt--uppercase txt--wgt-black">Order Summary</div>
|
||
<div class="gap--sm">
|
||
Items (3): <span class="dsp--float-right">$107.00 </span><br>
|
||
Shipping & handling <span class="dsp--float-right">$3.09 </span><br>
|
||
<hr class="dsp--float-right dsp--block dsp--wide-1-3"><br>
|
||
Total before tax <span class="dsp--float-right">$110.09 </span><br>
|
||
Tax <span class="dsp--float-right">$0.19 </span><br>
|
||
</div>
|
||
<hr class="gap--xs">
|
||
<p class="gap--xs txt--wgt-black">
|
||
Grand Total <span class="dsp--float-right">$110.28</span>
|
||
</p>
|
||
<input type="checkbox" id="bool-1"/>
|
||
<label for="bool-1" class="dsp--block gap--sm txt--size-small txt--wgt-bold">
|
||
Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
|
||
</label>
|
||
<button class="col--green gap--sm dsp--wide dsp--round txt--tall txt--col-white txt--size-copy txt--wgt-bold">Place Order</button>
|
||
</div>
|
||
|
||
<div class="gap--sm">
|
||
<div class="txt--uppercase txt--wgt-black">Free Account</div>
|
||
<p class="gap--no txt--size-small">Create a free account to manage your subscriptions, track your listening progress, and build a listening library of your favorite messages. </p>
|
||
<button class="gap--sm dsp--round col--gray pad--md-h txt--short txt--wgt-bold">Create Account</button>
|
||
<div class="col--cool dsp--round gap--md pad--sm-v pad--sm-h txt--size-small txt--wgt-bold">
|
||
We're grateful to offer you resources at cost, with no mark up, thanks to the generous giving from listeners like you.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col--warm dsp--round gap--sm pad--md-h pad--lg-v">
|
||
<div class="txt--uppercase txt--wgt-black">Summary</div>
|
||
<div class="gap--no txt--size-small txt--wgt-bold">December 12, 2021</div>
|
||
<hr class="gap--sm">
|
||
<div class="gap--sm txt--size-small txt--wgt-bold">
|
||
<img class="dsp--middle dsp--round" src="icon-pay-visa.svg"/> 1234 - 1234 - 1234
|
||
</div>
|
||
<div class="gap--sm">
|
||
Items (3): <span class="dsp--float-right">$107.00 </span><br>
|
||
Shipping & handling <span class="dsp--float-right">$3.09 </span><br>
|
||
<hr class="dsp--float-right dsp--block dsp--wide-1-3"><br>
|
||
Total before tax <span class="dsp--float-right">$110.09 </span><br>
|
||
Tax <span class="dsp--float-right">$0.19 </span><br>
|
||
</div>
|
||
<hr class="gap--xs">
|
||
<p class="gap--xs txt--wgt-black">
|
||
Grand Total <span class="dsp--float-right">$110.28</span>
|
||
</p>
|
||
</div>
|
||
<p class="gap--xs txt--size-small txt--wgt-bold txt--center">
|
||
Contact Customer Service<br>(888-588-7884)
|
||
</p>
|
||
</div>
|
||
|
||
|
||
|
||
</body>
|
||
</html> |