787 lines
30 KiB
HTML
787 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta name="viewport" content="initial-scale=1"/>
|
||
|
||
<!-- layout -->
|
||
<style>
|
||
/*
|
||
layouts provide generic flexbox options.
|
||
They can float elements, align them to the sides, or do basic columns.
|
||
|
||
*/
|
||
.layout{ display:flex; gap:0px 30px; }
|
||
.layout--tiles { flex-wrap: wrap; justify-content: flex-start; }
|
||
.layout--sides { flex-wrap: wrap; justify-content: space-between; }
|
||
.layout--sides > * { width:40%; }
|
||
.layout--sides > *:nth-child(even){text-align:right;}
|
||
.layout--split { flex-direction: row; gap: 30px 30px;}
|
||
.layout__locked { width:100%; max-width:265px; }
|
||
.layout__locked--small { max-width:135px; }
|
||
.layout__spread { flex-grow:1;}
|
||
@media(max-width:768px)
|
||
{
|
||
.layout--split{ flex-direction:column; }
|
||
}
|
||
</style>
|
||
|
||
<!-- region -->
|
||
<style>
|
||
/*
|
||
Region blocks are the numerous (usually) bordered "chunks" in the layout.
|
||
This is the most complex block because it needs to take on many forms.
|
||
regions can have Icon, Main, Auxillary, and Fill elements.
|
||
|
||
- Icon:
|
||
When the Region is acting as a checkbox or radio control, the input should be the Icon and is used to override the OS display of the control
|
||
|
||
- Main:
|
||
The Main element has even padding, and when acting as a form field, the <label> should be the Main. In these cases,
|
||
the contents of the Main should be largely text-based and not contain other actions.
|
||
|
||
- Fill:
|
||
Regions have the added option of a javascript-less active state.
|
||
This is done with combinatorial selectors ("+" and "~") provided the Icon element precedes the Fill element,
|
||
which will color the Region background when the Icon is :checked
|
||
|
||
- Auxillary:
|
||
The Auxillary element is designed to have a different hit area from the sometimes-interactive Main and Icon elements,
|
||
letting the Region be split into two buttons when added to a Region acting as a form control.
|
||
|
||
*/
|
||
.region
|
||
{
|
||
display:flex;
|
||
position:relative;
|
||
box-sizing: border-box;
|
||
border:1px solid #F1F1EE;
|
||
border-radius:4px;
|
||
margin-top:24px;
|
||
overflow:hidden;
|
||
}
|
||
.region--borderless { border:none; }
|
||
.region--vertical { flex-direction: column; }
|
||
.region--vertical > .region__aux{ border-top:1px solid #f1f1ee; background: #f8f8f6; }
|
||
|
||
.region--compress > .region__main, .region--compress > .region__icon, .region--compress > .region__aux {padding:0px 10px 0px 0px;}
|
||
.region--compress > .region__main {width:auto;}
|
||
|
||
.region__icon
|
||
{
|
||
z-index:100;
|
||
padding:20px;
|
||
padding-right:0;
|
||
margin: 0;
|
||
box-sizing: border-box;
|
||
|
||
display:block;
|
||
appearance: none;
|
||
}
|
||
.region__icon::before, .region__icon::after
|
||
{
|
||
content:" ";
|
||
display:inline-block;
|
||
width:20px;
|
||
height:20px;
|
||
box-sizing: border-box;
|
||
border:2px solid #D2D2D1;
|
||
border-radius: 50px;
|
||
}
|
||
.region__icon:checked::before
|
||
{
|
||
border-color:#1565C0;
|
||
}
|
||
.region__icon::after
|
||
{
|
||
margin-left:-20px;
|
||
background-color: #1565C0;
|
||
border-color: #1565C0;
|
||
transform:scale(0);
|
||
transition: transform 0.4s;
|
||
}
|
||
.region__icon:checked::after
|
||
{
|
||
transform:scale(0.7);
|
||
}
|
||
|
||
|
||
.region__icon--check::before
|
||
{
|
||
border-radius:4px;
|
||
background:#ddd;
|
||
transition:background 0.4s;
|
||
}
|
||
.region__icon--check::after
|
||
{
|
||
border-radius: 0;
|
||
border: none;
|
||
border-bottom: 4px solid white;
|
||
border-left: 2px solid white;
|
||
transform: translate(0px, 6px) rotate(-45deg) scale(0.5, 0.3);
|
||
background: none;
|
||
opacity:0;
|
||
}
|
||
.region__icon--check:checked::before
|
||
{
|
||
background:blue;
|
||
}
|
||
.region__icon--check:checked::after
|
||
{
|
||
opacity:1;
|
||
transform: translate(0px, -3px) rotate(-45deg) scale(0.5, 0.3);
|
||
}
|
||
|
||
|
||
.region__fill
|
||
{
|
||
position:absolute;
|
||
top:0%;
|
||
left:0%;
|
||
width:0%;
|
||
height:110%;
|
||
z-index:1;
|
||
background: #F8F8F6;
|
||
transition:width 0.4s;
|
||
}
|
||
.region__icon:checked ~ .region__fill, .region__icon:hover ~ .region__fill, .region__main:hover ~ .region__fill
|
||
{
|
||
width:110%;
|
||
}
|
||
|
||
.region__main
|
||
{
|
||
z-index:100;
|
||
padding:20px;
|
||
box-sizing: border-box;
|
||
|
||
width:100%;
|
||
}
|
||
|
||
.region__aux
|
||
{
|
||
z-index:100;
|
||
padding:20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
@media(max-width:500px)
|
||
{
|
||
.region{ flex-direction: column; }
|
||
.region .region__icon{ padding:10px 10px 0px 10px; }
|
||
.region .region__main{ padding:10px; }
|
||
.region .region__aux { padding:0px 10px 10px 10px; text-align:right; }
|
||
|
||
.region--compress{ flex-direction: row; }
|
||
.region--vertical > .region__aux{ padding:10px; text-align:center; }
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<!-- progress bar -->
|
||
<style>
|
||
.progress
|
||
{
|
||
position:relative;
|
||
display:block;
|
||
margin:0;
|
||
padding:12px 0 0 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__stage
|
||
{
|
||
position:static;
|
||
display:inline-block;
|
||
width:20%;
|
||
padding:18px 0 0 0;
|
||
margin:0;
|
||
list-style-type: none;
|
||
vertical-align: top;
|
||
font-size:13px;
|
||
font-family: 'Nunito Sans';
|
||
font-size:16px;
|
||
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 .progress__stage:nth-child(1)::before,
|
||
.progress--stage-2 .progress__stage:nth-child(2)::before,
|
||
.progress--stage-3 .progress__stage:nth-child(3)::before,
|
||
.progress--stage-4 .progress__stage:nth-child(4)::before,
|
||
.progress--stage-5 .progress__stage:nth-child(5)::before
|
||
{
|
||
content:" ";
|
||
display: block;
|
||
position:absolute;
|
||
top:-13px;
|
||
width:36px;
|
||
height:36px;
|
||
border-radius:50px;
|
||
background:#5E7D65;
|
||
transform:translateX(-50%);
|
||
}
|
||
.progress--stage-1 .progress__stage:nth-child(1)::before{ left:10%; }
|
||
.progress--stage-2 .progress__stage:nth-child(2)::before{ left:30%; }
|
||
.progress--stage-3 .progress__stage:nth-child(3)::before{ left:50%; }
|
||
.progress--stage-4 .progress__stage:nth-child(4)::before{ left:70%; }
|
||
.progress--stage-5 .progress__stage:nth-child(5)::before{ left:100%; }
|
||
|
||
.progress--stage-5 .progress__stage:nth-child(5)::before
|
||
{
|
||
left:auto;
|
||
right:0;
|
||
transform:none;
|
||
}
|
||
|
||
@media(max-width:512px)
|
||
{
|
||
.progress__stage{ width:100%; display:none; }
|
||
}
|
||
.progress--stage-1 .progress__stage:nth-child(1),
|
||
.progress--stage-2 .progress__stage:nth-child(2),
|
||
.progress--stage-3 .progress__stage:nth-child(3),
|
||
.progress--stage-4 .progress__stage:nth-child(4),
|
||
.progress--stage-5 .progress__stage:nth-child(5)
|
||
{
|
||
font-weight:900;
|
||
display:inline-block;
|
||
}
|
||
|
||
.progress--stage-2 .progress__stage:nth-child(1),
|
||
.progress--stage-3 .progress__stage:nth-child(1),
|
||
.progress--stage-3 .progress__stage:nth-child(2),
|
||
.progress--stage-4 .progress__stage:nth-child(1),
|
||
.progress--stage-4 .progress__stage:nth-child(2),
|
||
.progress--stage-4 .progress__stage:nth-child(3),
|
||
.progress--stage-5 .progress__stage:nth-child(1),
|
||
.progress--stage-5 .progress__stage:nth-child(2),
|
||
.progress--stage-5 .progress__stage:nth-child(3),
|
||
.progress--stage-5 .progress__stage:nth-child(4)
|
||
{
|
||
color:#564E4E;
|
||
font-weight:600;
|
||
}
|
||
|
||
|
||
</style>
|
||
|
||
<!-- giving buttons-->
|
||
<style>
|
||
.giving
|
||
{
|
||
display:flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.giving__label, .giving__input, .giving__button
|
||
{
|
||
position:relative;
|
||
height:44px;
|
||
padding: 0 15px 0 15px;
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
border: 0;
|
||
border-radius: 0;
|
||
line-height:44px;
|
||
font-size: 14px;
|
||
font-family:'Nunito Sans';
|
||
vertical-align:top;
|
||
}
|
||
|
||
.giving__label
|
||
{
|
||
border: 1px solid #DBDCD4;
|
||
border-top-left-radius: 4px;
|
||
border-bottom-left-radius: 4px;
|
||
|
||
background: #F1F1EE;
|
||
|
||
color:black;
|
||
font-weight:900;
|
||
text-align:center;
|
||
}
|
||
.giving__input
|
||
{
|
||
max-width:150px;
|
||
border: 1px solid #DBDCD4;
|
||
border-left:none;
|
||
background: white;
|
||
color: black;
|
||
font-weight: lighter;
|
||
}
|
||
.giving__button
|
||
{
|
||
color: white;
|
||
font-weight: 900;
|
||
border-right: 1px solid #4B6451;
|
||
background: #5E7D65;
|
||
}
|
||
.giving__button[data-active='true']{opacity:0.5;}
|
||
.giving__button:last-child
|
||
{
|
||
border-top-right-radius: 4px;
|
||
border-bottom-right-radius: 4px;
|
||
border-right:none;
|
||
}
|
||
@media(max-width:512px)
|
||
{
|
||
.giving__label{ border-bottom-left-radius: 0px; }
|
||
.giving__input{ flex-grow:1; min-width:75%; max-width:100%; border-top-right-radius: 4px; }
|
||
.giving__input + .giving__button{ border-bottom-left-radius: 4px; }
|
||
.giving__button{ width:25%; }
|
||
.giving__button:last-child{ border-top-right-radius: 0px; }
|
||
}
|
||
</style>
|
||
|
||
<!-- element override blocks -->
|
||
<style>
|
||
.el-h2 { margin:72px 0 0 0; color:#2b2727; font:900 24px/28px 'Nunito Sans', sans-serif; }
|
||
.el-h3 { margin:45px 0 0 0; color:#2b2727; font:900 16px/24px 'Nunito Sans', sans-serif; text-transform: uppercase; }
|
||
.el-h4 { margin:0 0 0 0; color:#4B6451; font:500 21px/32px 'Sanchez', monospace; }
|
||
.el-label { margin:24px 0 0 0; color:#2b2727; font:600 16px/24px 'Nunito Sans', sans-serif; display:block; }
|
||
.el-a { margin:0 0 0 0; color:#4B6451; font:500 16px/24px 'Nunito Sans', sans-serif; text-decoration:underline; }
|
||
.el-p { margin:0 0 0 0; color:#2b2727; font:500 16px/24px 'Nunito Sans', sans-serif; }
|
||
|
||
.el-button
|
||
{
|
||
display:inline-block;
|
||
position:relative;
|
||
z-index:10;
|
||
padding:5px 15px 5px 15px;
|
||
border-radius:4px;
|
||
border:none;
|
||
background: #5E7D65;
|
||
cursor:pointer;
|
||
color:#ffffff;
|
||
font-family:'Nunito Sans';
|
||
font-size:14px;
|
||
font-weight:600;
|
||
line-height:24px;
|
||
transition:all 0.4s;
|
||
}
|
||
.el-button--wide { width:100%; }
|
||
.el-button--tall { padding:10px 30px 10px 30px; font-size:16px; }
|
||
.el-button--gray { background:#F8F8F6; border:1px solid #E1DFDF; color:#000000 }
|
||
.el-button:hover { box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3); }
|
||
|
||
.el-input
|
||
{
|
||
display:block;
|
||
width:100%;
|
||
appearance: none;
|
||
box-sizing:border-box;
|
||
border:1px solid #DBDCD4;
|
||
padding:10px 0px 10px 20px;
|
||
border-radius:4px;
|
||
|
||
box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1);
|
||
|
||
color: #000000;
|
||
font-size:16px;
|
||
line-height:24px;
|
||
}
|
||
.el-input--select
|
||
{
|
||
padding-right:30px;
|
||
background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M12 0H0L6 7L12 0Z' fill='%23A7A0A0' /%3E%3C/svg%3E");
|
||
background-repeat: no-repeat;
|
||
background-position: right 20px top 50%;
|
||
}
|
||
|
||
.el-hr{ display:block; border:none; border-top:1px solid #E1DFDF; margin:12px 0;}
|
||
.el-hr--short{ margin:6px 0 }
|
||
.el-hr--tall { margin:35px 0 }
|
||
.el-image { display:block; width:100%; height:auto; }
|
||
</style>
|
||
|
||
<!-- universal modifiers -->
|
||
<style>
|
||
|
||
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700;900&family=Sanchez&display=swap');
|
||
|
||
.txt--bold { font-weight:600; } .txt--small { font-size:14px; } .txt--center { text-align:center; } .txt--plain{ text-decoration:none; }
|
||
.txt--heavy { font-weight:900; } .txt--micro { font-size:12px; } .txt--right { text-align:right; } .txt--under{ text-decoration:underline; }
|
||
|
||
.txt--green-00{ color:#4B6451; }
|
||
.txt--green-01{ color:#564E4E; }
|
||
.txt--azure-00{ color:#002235; }
|
||
|
||
.gap--xl { margin-top:72px; }
|
||
.gap--lg { margin-top:45px; }
|
||
.gap--md { margin-top:24px; }
|
||
.gap--sm { margin-top:12px; }
|
||
.gap--xs { margin-top:6px; }
|
||
.gap--no { margin-top:0px; }
|
||
|
||
.lap--over { margin-bottom:-10px; z-index:110; }
|
||
.lap--tuck { margin-top:-10px; z-index:90; }
|
||
|
||
.fill--yell { background:#f7f3de; border:2px solid #f7f3de; display:inline-block; }
|
||
.fill--warm { background:#F8F8F6; border:1px solid #F1F1EE; }
|
||
.fill--cool { background:#E6EBEE; border:1px solid #CCD7DE; }
|
||
|
||
</style>
|
||
|
||
</head>
|
||
<body style="max-width:800px; margin:0 auto; box-sizing: border-box; padding:10px;">
|
||
|
||
<ol class="progress progress--stage-2 gap--sm">
|
||
<li class="progress__stage">Shopping Cart</li>
|
||
<li class="progress__stage">Payment Options</li>
|
||
<li class="progress__stage">Shipping Method</li>
|
||
<li class="progress__stage">Confirmation</li>
|
||
<li class="progress__stage">Print Receipt</li>
|
||
</ol>
|
||
|
||
<h2 class="el-h2">Payment Information</h2>
|
||
<div class="layout layout--tiles">
|
||
<div class="region">
|
||
<input class="region__icon" type="radio" name="pay" value="cc" id="pay-cc"/>
|
||
<label class="region__main" for="pay-cc">
|
||
<span class="el-p | txt--bold">Credit Card</span>
|
||
<span class="layout layout--tiles">
|
||
<span style="width:35px; height:15px; background:red;"></span>
|
||
<span style="width:35px; height:15px; background:red;"></span>
|
||
<span style="width:35px; height:15px; background:red;"></span>
|
||
<span style="width:35px; height:15px; background:red;"></span>
|
||
</span>
|
||
</label>
|
||
<div class="region__fill" ></div>
|
||
</div>
|
||
<div class="region">
|
||
<input class="region__icon" type="radio" name="pay" value="pp" id="pay-pp"/>
|
||
<label class="region__main" for="pay-pp">
|
||
<span class="el-p | txt--bold">Pay Pal</span>
|
||
<span class="layout layout--tiles">
|
||
<span style="width:35px; height:15px; background:red;"></span>
|
||
</span>
|
||
</label>
|
||
<div class="region__fill" ></div>
|
||
</div>
|
||
<div class="region">
|
||
<input class="region__icon" type="radio" name="pay" value="pp" id="pay-bt"/>
|
||
<label class="region__main" for="pay-bt">
|
||
<span class="el-p | txt--bold">Bank Transfer</span>
|
||
<span class="layout layout--tiles">
|
||
<span style="width:35px; height:15px; background:red;"></span>
|
||
</span>
|
||
</label>
|
||
<div class="region__fill" ></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gap--lg">payconnex</div>
|
||
|
||
<h3 class="el-h3">Billing Information</h3>
|
||
<div class="region | gap--sm">
|
||
<div class="region__main">
|
||
<h3 class="el-p | txt--bold">Addresses</h3>
|
||
<div class="layout layout--split">
|
||
<p class="layout__locked el-p">
|
||
8759 Cardinal Court<br>
|
||
Windermere, FL 34786<br>
|
||
US
|
||
</p>
|
||
<p class="layout__filled el-p">
|
||
8759 Cardinal Court<br>
|
||
Windermere, FL 34786<br>
|
||
US
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="region__aux">
|
||
<a class="el-a" href="#">Change</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h2 class="el-h2">Shipping Information</h2>
|
||
<div class="region">
|
||
<div class="region__main">
|
||
<p class="el-p | txt--bold">Same as billing information</p>
|
||
</div>
|
||
<div class="region__aux">
|
||
<a class="el-a" href="">Change</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h2 class="el-h2">Shipping Information</h2>
|
||
<div class="region region--vertical">
|
||
<div class="region__main">
|
||
<h3 class="el-p | txt--bold">Available Addresses</h3>
|
||
<div class="region region--borderless">
|
||
<input class="region__icon" type="radio" name="add" value="1" id="add-1"/>
|
||
<div class="region__fill" ></div>
|
||
<label class="region__main" for="add-1">
|
||
<span class="el-p | txt--bold">Shell Long TP Check</span>
|
||
<span class="el-p | txt--small txt--green-00">(billing address)</span><br>
|
||
<span class="el-p">
|
||
8759 Cardinal Court<br>
|
||
Windermere, FL 34786<br>
|
||
</span>
|
||
<span class="el-p | txt--small txt--green-00">Default Shipping Address</span>
|
||
</label>
|
||
<div class="region__aux"><a class="el-a" href="#change">Change</a></div>
|
||
</div>
|
||
<div class="region region--borderless"">
|
||
<input class="region__icon" type="radio" name="add" value="2" id="add-2"/>
|
||
<div class="region__fill" ></div>
|
||
<label class="region__main" for="add-2">
|
||
<span class="el-p | txt--bold">Shell Long TP Check</span><br>
|
||
<span class="el-p">
|
||
8759 Cardinal Court<br>
|
||
Windermere, FL 34786<br>
|
||
</span>
|
||
</label>
|
||
<div class="region__aux"><a class="el-a" href="#change">Change</a></div>
|
||
</div>
|
||
<div class="region region--borderless">
|
||
<div class="region__main">
|
||
<a href="#modal" class="txt--plain">
|
||
<span class="el-a | txt--plain"> + </span>
|
||
<span class="el-a">Add new address</span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="region__aux">
|
||
<button class="el-button">Use this Address</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="padding:50px;">
|
||
<div class="layout">
|
||
<div class="layout__spread">
|
||
<label class="el-label">First Name</label>
|
||
<input class="el-input" type="text"/>
|
||
</div>
|
||
<div class="layout__spread">
|
||
<label class="el-label">Last Name</label>
|
||
<input class="el-input" type="text"/>
|
||
</div>
|
||
</div>
|
||
|
||
<label class="el-label">Street Address</label>
|
||
<input class="el-input" type="text"/>
|
||
|
||
<div class="layout">
|
||
<div class="layout__spread">
|
||
<label class="el-label">City</label>
|
||
<input class="el-input" type="text"/>
|
||
</div>
|
||
<div class="layout__spread">
|
||
<label class="el-label">State</label>
|
||
<select class="el-input el-input--select">
|
||
<option>1</option>
|
||
</select>
|
||
</div>
|
||
<div class="layout__spread">
|
||
<label class="el-label">Zip/Postal</label>
|
||
<input class="el-input" type="text"/>
|
||
</div>
|
||
</div>
|
||
|
||
<label class="el-label">Country</label>
|
||
<select class="el-input el-input--select">
|
||
<option>1</option>
|
||
</select>
|
||
|
||
<div class="region region--compress region--borderless">
|
||
<input class="region__icon region__icon--check" type="checkbox"/>
|
||
<label class="region__main">
|
||
<span class="el-p | txt--bold">Default Shipping address</span>
|
||
</label>
|
||
</div>
|
||
|
||
<hr class="el-hr el-hr--tall">
|
||
|
||
<div class="el-p | txt--right">
|
||
<button class="el-button el-button--gray el-button--tall">Cancel</button>
|
||
<button class="el-button el-button--green el-button--tall">Save Address</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h2 class="el-h2">Listening Information</h2>
|
||
<label class="el-label | gap--md">I primarily listen to Truth For Life with Alistair Begg on: </label>
|
||
<select class="el-input el-input--select">
|
||
<option>website</option>
|
||
<option>radio</option>
|
||
</select>
|
||
<div class="layout layout--sides | gap--xs">
|
||
<a class="el-p txt--link txt--small" href="#">Don’t see your station? Click here.</a>
|
||
<a class="el-p txt--link txt--small" href="#">Why do we require this information?</a>
|
||
</div>
|
||
|
||
|
||
<input class="el-button el-button--wide el-button--tall gap--xl" type="submit" value="Continue Checkout"/>
|
||
<p class="el-p txt--bold | gap--md">
|
||
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-00 txt--plain" href="">Privacy Policy</a>.
|
||
</p>
|
||
|
||
|
||
<h2 class="el-h2">Will you add a donation to your order?</h2>
|
||
<p class="el-p | gap--md">
|
||
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. <em>Thank you</em>.
|
||
</p>
|
||
|
||
<div class="giving | gap--md">
|
||
<label class="giving__label"for="amount">$</label>
|
||
<input class="giving__input"id="amount" type="number" value="100"/>
|
||
<button class="giving__button">$20 </button>
|
||
<button class="giving__button">$30 </button>
|
||
<button class="giving__button">$50 </button>
|
||
<button class="giving__button">$100</button>
|
||
</div>
|
||
|
||
|
||
|
||
<h2 class="el-h2">Send you a copy?</h2>
|
||
<p class="el-p | gap--md">
|
||
Would you like to receive a copy of our featured book? It's our way of saying thanks for your support.
|
||
</p>
|
||
<div class="layout layout--split | gap--md">
|
||
<div class="layout__locked">
|
||
<div class="el-p | txt--center">
|
||
<a class="el-button el-button--gray lap--over">Look Inside</a>
|
||
<img class="el-image lap--tuck" src="https://placekitten.com/100/100"/>
|
||
</div>
|
||
</div>
|
||
<div class="layout__spread">
|
||
<h4 class="el-h4">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</h4>
|
||
<p class="el-p | txt--green-01 gap--sm">(fair market value $3.00)</p>
|
||
<div class="layout layout--tiles">
|
||
<div class="region region--borderless">
|
||
<input class="region__icon" type="radio" name="prod" value="ebook" id="prod-ebook"/>
|
||
<label class="region__main" for="prod-ebook">
|
||
<span class="el-p | txt--bold">eBook</span><br>
|
||
<span class="el-p | txt--micro txt--bold txt--green-01">Pub, mobi, and pdf</span>
|
||
</label>
|
||
<div class="region__fill" ></div>
|
||
</div>
|
||
<div class="region region--borderless">
|
||
<input class="region__icon" type="radio" name="prod" value="paper" id="prod-paper"/>
|
||
<label class="region__main" for="prod-paper">
|
||
<span class="el-p | txt--bold">Paperback</span><br>
|
||
<span class="el-p | txt--micro txt--bold txt--green-01">Softcover, 224 pages</span>
|
||
</label>
|
||
<div class="region__fill" ></div>
|
||
</div>
|
||
<div class="region region--borderless">
|
||
<input class="region__icon" type="radio" name="prod" value="none" id="prod-none"/>
|
||
<label class="region__main" for="prod-none">
|
||
<span class="el-p | txt--bold">No, Thank you</span>
|
||
</label>
|
||
<div class="region__fill" ></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<h2 class="el-h2">Shipping Options</h2>
|
||
<p class="el-p | txt--bold gap--md">Please choose your preferred shipping method.</p>
|
||
<span class="el-p | txt--small txt--bold fill--yell gap--sm">You save <strong class="el-p | txt--heavy">$2.89</strong> by using USPS, Media Mail.</span>
|
||
<div class="region region--borderless region--compress">
|
||
<input class="region__icon" type="radio" name="ship" value="1" id="ship-1"/>
|
||
<label class="region__main" for="ship-1">
|
||
<span class="el-p | txt--heavy">$0.00</span>
|
||
<span class="el-p | txt--bold">USPS - Media Mail</span>
|
||
<span class="el-p | txt--green-01">(Delivery in 7-10 business days.)</span>
|
||
</label>
|
||
</div>
|
||
<div class="region region--borderless region--compress">
|
||
<input class="region__icon" type="radio" name="ship" value="2" id="ship-2"/>
|
||
<label class="region__main" for="ship-2">
|
||
<span class="el-p | txt--heavy">$0.00</span>
|
||
<span class="el-p | txt--bold">USPS - Media Mail</span>
|
||
<span class="el-p | txt--green-01">(Delivery in 7-10 business days.)</span>
|
||
</label>
|
||
</div>
|
||
<div class="region region--borderless region--compress">
|
||
<input class="region__icon" type="radio" name="ship" value="3" id="ship-3"/>
|
||
<label class="region__main" for="ship-3">
|
||
<span class="el-p | txt--heavy">$0.00</span>
|
||
<span class="el-p | txt--bold">USPS - Media Mail</span>
|
||
<span class="el-p | txt--green-01">(Delivery in 7-10 business days.)</span>
|
||
</label>
|
||
</div>
|
||
|
||
<input class="el-button el-button--wide el-button--tall | gap--xl" type="submit" value="Continue Checkout"/>
|
||
|
||
<h2 class="el-h2">Review Your Order</h2>
|
||
<h3 class="el-h3 | gap--md">Items and Shipping</h3>
|
||
<div class="region | gap--sm">
|
||
<div class="region__main">
|
||
<span class="el-p | txt--heavy">$3.09</span>
|
||
<span class="el-p | txt--bold">USPS - Media Mail</span>
|
||
<span class="el-p | txt--green-00">(Delivery in 7-10 business days)</span>
|
||
</div>
|
||
</div>
|
||
<div class="region">
|
||
<div class="region__main">
|
||
<div class="layout layout--split">
|
||
<div class="layout__locked layout__locked--small">
|
||
<img class="el-image" src="https://placekitten.com/200/200" />
|
||
</div>
|
||
<div>
|
||
<h3 class="el-h4">George Whitefield: God's Anointed Servant in the Great Revival of the Eighteenth Century</h3>
|
||
<div class="el-p | txt--small txt--heavy txt--green-01">Paperback</div>
|
||
<div class="el-p | txt--small">$3.00</div>
|
||
<span class="el-p | txt--green-01">Quantity: </span>
|
||
<span class="el-p">1</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="region">
|
||
<div class="region__main">
|
||
<h4 class="el-h3 | gap--no">Order Summary</h4>
|
||
<div class="layout layout--sides | gap--sm">
|
||
<p class="el-p | txt--small">Items (3): </p> <p class="el-p | txt--small">$107.00 </p>
|
||
<p class="el-p | txt--small">Shipping & Handling </p> <p class="el-p | txt--small">$3.09 </p>
|
||
<span></span><span class="el-hr el-hr--short"></span>
|
||
<p class="el-p | txt--small">Total before tax </p> <p class="el-p | txt--small">$110.09 </p>
|
||
<p class="el-p | txt--small">Tax </p> <p class="el-p | txt--small">$0.19 </p>
|
||
</div>
|
||
<div class="el-hr"></div>
|
||
<div class="layout layout--sides">
|
||
<p class="el-p | txt--heavy">Grand Total </p> <p class="el-p | txt--heavy">$110.28 </p>
|
||
</div>
|
||
<div class="region region--borderless region--compress">
|
||
<input class="region__icon region__icon--check" type="checkbox"/>
|
||
<label class="region__main">
|
||
<span class="el-p | txt--bold txt--small">Please send me the daily devotional and program link from Truth For Life with Alistair Begg.</span>
|
||
</label>
|
||
</div>
|
||
<input class="el-button el-button--tall el-button--wide | gap--md" type="submit" value="Place Order"/>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</body>
|
||
</html> |