2021-09-08 13:21:22 -04:00
<!DOCTYPE html>
< html >
< head >
2021-09-17 11:06:31 -04:00
2021-09-22 14:52:20 -04:00
<!-- blocks -->
2021-09-08 13:21:22 -04:00
< style >
.block
{
position:relative;
display: flex;
2021-09-10 09:36:46 -04:00
align-items: flex-start;
2021-09-08 13:21:22 -04:00
margin: 0;
2021-09-22 14:52:20 -04:00
padding: 0;
2021-09-08 13:21:22 -04:00
border: 0;
}
2021-09-08 14:52:42 -04:00
.block > *
2021-09-08 13:21:22 -04:00
{
2021-09-08 14:52:42 -04:00
padding:10px 0 10px 10px;
2021-09-08 13:21:22 -04:00
}
2021-09-08 14:52:42 -04:00
.block > *:last-child
2021-09-08 14:05:57 -04:00
{
2021-09-23 14:20:23 -04:00
padding-right: 20px;
2021-09-08 14:05:57 -04:00
}
2021-09-10 09:36:46 -04:00
.block__hit-area
2021-09-08 14:52:42 -04:00
{
width:100%;
}
2021-09-23 14:20:23 -04:00
.col--empty, input:checked + .col--empty-active
2021-09-10 09:36:46 -04:00
{
2021-09-23 15:17:01 -04:00
box-sizing: border-box;
2021-09-22 14:52:20 -04:00
border:1px solid #f1f1ee;
2021-09-10 09:36:46 -04:00
}
2021-09-23 14:20:23 -04:00
.col--warm, input:checked + .col--warm-active
2021-09-17 11:06:31 -04:00
{
2021-09-23 15:17:01 -04:00
box-sizing: border-box;
2021-09-22 14:52:20 -04:00
border:1px solid #f1f1ee;
background:#F8F8F6;
}
2021-09-23 14:20:23 -04:00
.col--cool, input:checked + .col--cool-active
2021-09-22 14:52:20 -04:00
{
2021-09-23 15:17:01 -04:00
box-sizing: border-box;
2021-09-22 14:52:20 -04:00
border: 1px solid #ccd7de;
background:#e6ebee;
}
2021-09-23 14:20:23 -04:00
.col--gray, input:checked + .col--gray-active
2021-09-22 14:52:20 -04:00
{
2021-09-23 15:17:01 -04:00
box-sizing: border-box;
2021-09-22 14:52:20 -04:00
border: 1px solid #E1DFDF;
background:#F8F8F6;
2021-09-17 11:06:31 -04:00
}
2021-09-23 15:17:01 -04:00
.col--drab
{
border:1px solid #DBDCD4;
background: #F1F1EE;
}
2021-09-23 14:20:23 -04:00
.col--green, input:checked + .col--green-active
2021-09-22 14:52:20 -04:00
{
2021-09-23 15:17:01 -04:00
border:none;
2021-09-22 14:52:20 -04:00
background:#5E7D65;
}
2021-09-23 15:17:01 -04:00
.col--inset
{
box-sizing: border-box;
appearance: none;
padding:0 30px;
border: 1px solid #DBDCD4;
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
}
2021-09-22 14:52:20 -04:00
< / style >
<!-- form controls -->
< style >
2021-09-10 13:22:19 -04:00
2021-09-10 09:36:46 -04:00
input[type='radio']
2021-09-08 14:05:57 -04:00
{
appearance: none;
2021-09-10 09:36:46 -04:00
display:block;
2021-09-10 13:22:19 -04:00
position:relative;
2021-09-10 09:36:46 -04:00
margin:0;
padding:0;
border:0;
width:0;
height:0;
}
2021-09-10 13:22:19 -04:00
input[type='radio'] + * label
2021-09-10 09:36:46 -04:00
{
position: relative;
padding-left:50px;
2021-09-08 14:05:57 -04:00
}
2021-09-10 13:22:19 -04:00
input[type='radio'] + * label::before, input[type='radio'] + * label::after
2021-09-08 14:05:57 -04:00
{
content: " ";
display: block;
2021-09-10 09:36:46 -04:00
position: absolute;
top: 10px;
left: 10px;
2021-09-08 14:05:57 -04:00
width: 17px;
height: 17px;
2021-09-10 13:22:19 -04:00
border: 2px solid #D2D2D1;
2021-09-08 14:05:57 -04:00
border-radius: 20px;
}
2021-09-10 13:22:19 -04:00
input[type='radio']:checked + * label::before
{
border:2px solid #1565C0;
}
input[type='radio'] + * label::after
{
background:#1565C0;
border:2px solid #1565C0;
opacity:0;
2021-09-22 14:52:20 -04:00
transform:scale(0);
2021-09-10 13:22:19 -04:00
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
2021-09-08 14:05:57 -04:00
{
content: " ";
display: block;
position: absolute;
2021-09-10 13:22:19 -04:00
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
2021-09-10 09:36:46 -04:00
{
2021-09-10 13:22:19 -04:00
opacity:1;
top: 5px;
}
2021-09-23 15:17:01 -04:00
/*
2021-09-22 14:52:20 -04:00
input[type='text'], input[type='number'], input[type='email'], select
{
position:relative;
box-sizing: border-box;
margin:0;
2021-09-23 14:20:23 -04:00
padding:0px 13px;
2021-09-22 14:52:20 -04:00
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;
2021-09-23 14:20:23 -04:00
line-height:44px;
2021-09-22 14:52:20 -04:00
}
select
{
padding-right:50px;
background:url();
}
2021-09-23 15:17:01 -04:00
*/
2021-09-10 17:16:18 -04:00
< / style >
2021-09-08 13:21:22 -04:00
2021-09-10 17:16:18 -04:00
<!-- 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;
2021-09-17 11:06:31 -04:00
background:#F4F2EE;
2021-09-10 17:16:18 -04:00
}
.progress::after
{
2021-09-17 11:06:31 -04:00
background:#5E7D65;
2021-09-10 17:16:18 -04:00
}
.progress > *
{
position:relative;
display:inline-block;
width:20%;
2021-09-17 11:06:31 -04:00
padding:30px 0 0 0;
2021-09-10 17:16:18 -04:00
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;
2021-09-22 14:52:20 -04:00
top:-18px;
2021-09-10 17:16:18 -04:00
left:50%;
2021-09-17 11:06:31 -04:00
width:36px;
height:36px;
2021-09-10 17:16:18 -04:00
border-radius:50px;
2021-09-17 11:06:31 -04:00
background:#5E7D65;
2021-09-22 14:52:20 -04:00
transform:translateX(-50%);
}
.progress--stage-5 > *:nth-child(5)::before
{
left:auto;
right:0;
transform:none;
2021-09-10 17:16:18 -04:00
}
.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;
}
2021-09-08 13:21:22 -04:00
< / style >
2021-09-09 14:16:25 -04:00
2021-09-17 11:06:31 -04:00
<!-- giving buttons -->
2021-09-13 17:15:41 -04:00
< 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 >
2021-09-17 11:06:31 -04:00
<!-- atomic text -->
< style >
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap');
2021-09-23 14:20:23 -04:00
@import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap');
.txt--fnt-slab{ font-family: "Sanchez"; }
.txt--fnt-sans{ font-family: "Nunito Sans"; }
2021-09-17 11:06:31 -04:00
.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-h2{ font-size:24px; line-height:28px; }
.txt--size-h1{ font-size:32px; line-height:48px; }
2021-09-23 15:17:01 -04:00
2021-09-17 11:06:31 -04:00
.txt--green-darken-01{ color: #4B6451; }
2021-09-23 14:20:23 -04:00
.txt--col-white{ color:#ffffff; }
2021-09-17 11:06:31 -04:00
2021-09-23 14:20:23 -04:00
.txt--wgt-light { font-weight:100; }
.txt--wgt-normal{ font-weight:300; }
.txt--wgt-bold { font-weight:600; }
.txt--wgt-black { font-weight:900; }
2021-09-17 11:06:31 -04:00
.txt--uppercase{ text-transform: uppercase; }
.txt--center{ text-align:center; }
2021-09-23 15:17:01 -04:00
.txt--tall{ line-height: 44px; }
2021-09-17 11:06:31 -04:00
.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; }
2021-09-23 14:20:23 -04:00
.gap--md-right { margin-right:42px; }
.gap--sm-right { margin-right:20px; }
2021-09-23 15:17:01 -04:00
.pad--md { padding-left: 16px; padding-right: 16px; }
2021-09-23 14:20:23 -04:00
.dsp--block{ display:block; }
2021-09-23 15:17:01 -04:00
.dsp--inline-block{ display:inline-block; vertical-align: top; }
2021-09-23 14:20:23 -04:00
.dsp--wide{ width:100%; }
2021-09-23 15:17:01 -04:00
.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);}
2021-09-17 11:06:31 -04:00
< / style >
<!-- atomic coloration -->
< style >
< / style >
< / head >
2021-09-23 14:20:23 -04:00
< 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 >
2021-09-17 11:06:31 -04:00
2021-09-23 14:20:23 -04:00
< ul class = "progress progress--stage-2 gap--sm" >
2021-09-22 14:52:20 -04:00
< 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 >
2021-09-17 11:06:31 -04:00
2021-09-23 14:20:23 -04:00
< p class = "txt--size-copy gap--lg" > < strong > *< / strong > Indicates required fields< / p >
2021-09-13 17:15:41 -04:00
2021-09-23 14:20:23 -04:00
< div class = "txt--size-h2 txt--wgt-black gap--sm" > Payment Information< / div >
< div style = "display:flex;" >
2021-09-09 14:16:25 -04:00
2021-09-23 15:17:01 -04:00
2021-09-23 14:20:23 -04:00
< div class = "block col--empty col--warm-active gap--sm gap--md-right" >
2021-09-23 15:17:01 -04:00
< input id = "check-1" type = "radio" name = "slot-1" value = "option-1" / >
2021-09-10 09:36:46 -04:00
< label class = "block__hit-area" for = "check-1" >
2021-09-10 13:22:19 -04:00
< span class = "txt--size-copy txt--wgt-bold" > Credit Card< / strong > < br >
2021-09-23 14:20:23 -04:00
< 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-discover.svg" / >
< img class = "col--empty" src = "icon-pay-american-express.svg" / >
2021-09-08 14:05:57 -04:00
< / label >
< / div >
2021-09-23 14:20:23 -04:00
2021-09-10 09:36:46 -04:00
< input id = "check-2" type = "radio" name = "slot-1" value = "option-2" / >
2021-09-23 14:20:23 -04:00
< div class = "block col--empty gap--sm gap--md-right" >
2021-09-10 09:36:46 -04:00
< label class = "block__hit-area" for = "check-2" >
2021-09-08 14:52:42 -04:00
< strong > Paypal< / strong > < br >
2021-09-23 14:20:23 -04:00
< img class = "col--empty 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 gap--sm gap--sm-right" >
< label class = "block__hit-area" for = "check-3" >
< strong > Bank Transfer< / strong > < br >
< img class = "col--empty gap--xs" src = "icon-pay-transfer.svg" / >
2021-09-08 14:52:42 -04:00
< / label >
2021-09-10 09:36:46 -04:00
< / div >
2021-09-23 14:20:23 -04:00
< / div >
< div class = "txt--size-copy txt--wgt-black txt--uppercase gap--md" > Billing Information< / div >
< div class = "block col--empty" >
< div class = "block__hit-area" >
< div class = "txt--size-copy txt--wgt-bold" > Shell Long TP Check< / div >
< div style = "display:flex; gap:130px;" >
2021-09-10 13:22:19 -04:00
< div class = "txt--size-copy txt--wgt-normal" >
2021-09-10 09:36:46 -04:00
8759 Cardinal Court< br >
Windmere, FL 34786< br >
US
< / div >
2021-09-10 13:22:19 -04:00
< div class = "txt--size-copy txt--wgt-normal" >
2021-09-23 14:20:23 -04:00
< 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
2021-09-10 09:36:46 -04:00
< / div >
< / div >
2021-09-08 13:21:22 -04:00
< / div >
2021-09-23 14:20:23 -04:00
< 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 = "block col--empty gap--sm" >
< div class = "block__hit-area" >
< 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 >
< / 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" > Listening Information< / div >
2021-09-23 15:17:01 -04:00
< 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" >
2021-09-23 14:20:23 -04:00
< option > Please select option … < / option >
< / select >
2021-09-23 15:17:01 -04:00
< button class = "dsp--wide dsp--round gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white txt--tall" > Continue Checkout< / button >
2021-09-23 14:20:23 -04:00
< p class = "txt--size-copy txt--wgt-bold" >
2021-09-23 15:17:01 -04:00
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 > .
2021-09-23 14:20:23 -04:00
< / p >
2021-09-23 15:17:01 -04:00
< 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 >
< input class = "col--inset dsp--inline-block pad--md txt--size-small txt--tall txt--wgt-normal " type = "number" / >
< button class = "col--green pad--md txt--size-small txt--tall txt--wgt-black txt--col-white" > $20 < / button >
< button class = "col--green dsp--emboss pad--md txt--size-small txt--tall txt--wgt-black txt--col-white" > $30 < / button >
< button class = "col--green dsp--emboss pad--md txt--size-small txt--tall txt--wgt-black txt--col-white" > $50 < / button >
< button class = "col--green dsp--emboss dsp--round-right pad--md txt--size-small txt--tall txt--wgt-black txt--col-white" > $100< / button >
< / div >
< hr >
2021-09-23 14:20:23 -04:00
< div class = "giving" >
< label for = "amount" > $< / label >
< input id = "amount" type = "number" value = "100" / >
< button > $20 < / button >
< button > $30 < / button >
< button > $50 < / button >
< button > $100< / button >
< / div >
< input type = "text" value = "text" / >
< select >
< option > select< / option >
< option > select< / option >
< option > select< / option >
< option > select< / option >
< / select >
< input type = "email" value = "email" / >
< input type = "number" value = "123" / >
< 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 >
2021-09-08 14:05:57 -04:00
2021-09-17 11:06:31 -04:00
2021-09-08 13:21:22 -04:00
< / body >
< / html >
