atomic-css/index.html

<!DOCTYPE html>
<html>
<head>

    <!-- blocks -->
    <style>
        .block
        {
            position:relative;
            display: flex;
            align-items: flex-start;

            margin: 0;
            padding: 0;
            border: 0;
        }
        .col--empty, input:checked + .col--empty-active
        {
            box-sizing: border-box;
            border:1px solid #f1f1ee;
        }
        .col--yellow
        {
            background:#f7f3de;
        }
        .col--warm, input:checked + .col--warm-active
        {
            box-sizing: border-box;
            border:1px solid #f1f1ee;
            background:#F8F8F6;
        }
        .col--cool, input:checked + .col--cool-active
        {
            box-sizing: border-box;
            border: 1px solid #ccd7de;
            background:#e6ebee;
        }
        .col--gray, input:checked + .col--gray-active
        {
            box-sizing: border-box;
            border: 1px solid #E1DFDF;
            background:#F8F8F6;
        }
        .col--drab
        {
            border:1px solid #DBDCD4;
            background: #F1F1EE;
        }
        .col--green, input:checked + .col--green-active
        {
            border:none;
            background:#5E7D65;
        }
        .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);
        }
    </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;
        }

        /*
        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--wide{ width:100%; }
        .dsp--wide-1-3{ width:33%; }
        .dsp--wide-2-3{ width:66%; }
        .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;}

    </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 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"/>
            </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 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 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 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-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 &hellip;</option>
    </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>
    <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--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>
            <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>
            <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 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>
    <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 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>


</body>
</html>
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
+								<!DOCTYPE html>
 								<html>
 								<head>
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								    <!-- blocks -->
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
+								    <style>
 								        .block
 								        {
 								            position:relative;
 								            display: flex;
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								            align-items: flex-start;
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
 								            margin: 0;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            padding: 0;
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
+								            border: 0;
 								        }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .col--empty, input:checked + .col--empty-active
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        {
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								            box-sizing: border-box;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            border:1px solid #f1f1ee;
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        }
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .col--yellow
 								        {
 								            background:#f7f3de;
 								        }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .col--warm, input:checked + .col--warm-active
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								        {
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								            box-sizing: border-box;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            border:1px solid #f1f1ee;
 								            background:#F8F8F6;
 								        }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .col--cool, input:checked + .col--cool-active
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								        {
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								            box-sizing: border-box;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            border: 1px solid #ccd7de;
 								            background:#e6ebee;
 								        }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .col--gray, input:checked + .col--gray-active
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								        {
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								            box-sizing: border-box;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            border: 1px solid #E1DFDF;
 								            background:#F8F8F6;
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								        }
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								        .col--drab
 								        {
 								            border:1px solid #DBDCD4;
 								            background: #F1F1EE;
 								        }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .col--green, input:checked + .col--green-active
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								        {
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								            border:none;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            background:#5E7D65;
 								        }
-												giving form atomic started

											
										
										
											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);
 								        }
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								    </style>
 								    <!-- form controls -->
 								    <style>
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        input[type='radio']
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								        {
 								            appearance: none;
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								            display:block;
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								            position:relative;
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								            margin:0;
 								            padding:0;
 								            border:0;
 								            width:0;
 								            height:0;
 								        }
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								        input[type='radio'] + * label
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        {
 								            position: relative;
 								            padding-left:50px;
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								        }
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								        input[type='radio'] + * label::before, input[type='radio'] + * label::after
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								        {
 								            content: " ";
 								            display: block;
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								            position: absolute;
 								            top: 10px;
 								            left: 10px;
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								            width: 17px;
 								            height: 17px;
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								            border: 2px solid #D2D2D1;
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								            border-radius: 20px;
 								        }
-												checkbox animations

											
										
										
											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;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            transform:scale(0);
-												checkbox animations

											
										
										
											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
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								        {
 								            content: " ";
 								            display: block;
 								            position: absolute;
-												checkbox animations

											
										
										
											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
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        {
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								            opacity:1;
 								            top: 5px;
 								        }
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								        /*
-												form input fields

											
										
										
											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;
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								            padding:0px 13px;
-												form input fields

											
										
										
											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;
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								            line-height:44px;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								        }
 								        select
 								        {
 								            padding-right:50px;
 								            background:url();
 								        }
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								        */
-												progress bar

											
										
										
											2021-09-10 17:16:18 -04:00
+								    </style>
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
-												progress bar

											
										
										
											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;
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								            background:#F4F2EE;
-												progress bar

											
										
										
											2021-09-10 17:16:18 -04:00
+								        }
 								        .progress::after
 								        {
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								            background:#5E7D65;
-												progress bar

											
										
										
											2021-09-10 17:16:18 -04:00
+								        }
 								        .progress > *
 								        {
 								            position:relative;
 								            display:inline-block;
 								            width:20%;
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								            padding:30px 0 0 0;
-												progress bar

											
										
										
											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;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            top:-18px;
-												progress bar

											
										
										
											2021-09-10 17:16:18 -04:00
+								            left:50%;
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								             width:36px;
 								            height:36px;
-												progress bar

											
										
										
											2021-09-10 17:16:18 -04:00
+								            border-radius:50px;
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								            background:#5E7D65;
-												form input fields

											
										
										
											2021-09-22 14:52:20 -04:00
+								            transform:translateX(-50%);
 								        }
 								        .progress--stage-5 > *:nth-child(5)::before
 								        {
 								            left:auto;
 								            right:0;
 								            transform:none;
-												progress bar

											
										
										
											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;
 								        }
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
+								    </style>
-												text utility classes

											
										
										
											2021-09-09 14:16:25 -04:00
-												misc

											
										
										
											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');
-												icons used, layout updated

											
										
										
											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"; }
-												misc

											
										
										
											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; }
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .txt--size-h3{ font-size:20px; line-height:32px; }
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								        .txt--size-h2{ font-size:24px; line-height:28px; }
 								        .txt--size-h1{ font-size:32px; line-height:48px; }
 								        .txt--green-darken-01{ color: #4B6451; }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .txt--col-white{ color:#ffffff; }
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
-												icons used, layout updated

											
										
										
											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; }
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
 								        .txt--uppercase{ text-transform: uppercase; }
 								        .txt--center{ text-align:center; }
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								        .txt--tall{ line-height: 44px; }
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .txt--short{ line-height: 30px; }
-												misc

											
										
										
											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; }
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .gap--no { margin:0; }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .gap--md-right { margin-right:42px; }
 								        .gap--sm-right { margin-right:20px; }
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .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; }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
 								        .dsp--block{ display:block; }
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								        .dsp--inline-block{ display:inline-block; vertical-align: top; }
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        .dsp--wide{ width:100%; }
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .dsp--wide-1-3{ width:33%; }
 								        .dsp--wide-2-3{ width:66%; }
-												giving form atomic started

											
										
										
											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);}
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        .dsp--plus { position: relative; padding-left:1em; }
 								        .dsp--plus::before{ content:"+"; position:absolute; left:0;}
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
+								    </style>
 								    <!-- atomic coloration -->
 								    <style>
 								    </style>
 								</head>
-												icons used, layout updated

											
										
										
											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>
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								    <ul class="progress progress--stage-2 gap--sm">
-												form input fields

											
										
										
											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>
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								    <p class="txt--size-copy gap--lg"><strong>*</strong> Indicates required fields</p>
-												giving form

											
										
										
											2021-09-13 17:15:41 -04:00
-												icons used, layout updated

											
										
										
											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;">
-												text utility classes

											
										
										
											2021-09-09 14:16:25 -04:00
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        <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>
-												icons used, layout updated

											
										
										
											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"/>
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
+								            </label>
 								        </div>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        <input id="check-2" type="radio" name="slot-1" value="option-2"/>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        <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>
-												icons used, layout updated

											
										
										
											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"/>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        <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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								                <img class="col--empty gap--xs" src="icon-pay-transfer.svg"/>
-												revert to input outside

											
										
										
											2021-09-08 14:52:42 -04:00
+								            </label>
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								        </div>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								    </div>
 								    <div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								    <div class="block col--empty dsp--round gap--xs pad--md-h pad--xs-v">
 								        <div class="dsp--wide">
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								            <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
 								            <div style="display:flex; gap:130px;">
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								                <div class="txt--size-copy txt--wgt-normal">
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+Cardinal Court<br>
 								                    Windmere, FL 34786<br>
 								                    US
 								                </div>
-												checkbox animations

											
										
										
											2021-09-10 13:22:19 -04:00
+								                <div class="txt--size-copy txt--wgt-normal">
-												icons used, layout updated

											
										
										
											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
-												input adjacent, margin classes

											
										
										
											2021-09-10 09:36:46 -04:00
+								                </div>
 								            </div>
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
+								        </div>
-												icons used, layout updated

											
										
										
											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>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								    <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">
 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">
 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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								            </div>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
 								            <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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        </div>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
 								        <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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								    </div>
 								    <div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
-												giving form atomic started

											
										
										
											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">
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								        <option>Please select option &hellip;</option>
 								    </select>
-												giving form atomic started

											
										
										
											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>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								    <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>.
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								    </p>
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								    <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>
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								    <div style="display:flex;">
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								        <div>
 								            <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>
 								            <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>
-												giving form atomic started

											
										
										
											2021-09-23 15:17:01 -04:00
+								    </div>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								    <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 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>
 								    <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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
-												extra radios

											
										
										
											2021-09-24 16:02:21 -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>
 								    <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">
 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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
+								    </div>
-												extra radios

											
										
										
											2021-09-24 16:02:21 -04:00
+								    <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>
-												icons used, layout updated

											
										
										
											2021-09-23 14:20:23 -04:00
-												radio icon styles

											
										
										
											2021-09-08 14:05:57 -04:00
-												misc

											
										
										
											2021-09-17 11:06:31 -04:00
-												setup

											
										
										
											2021-09-08 13:21:22 -04:00
+								</body>
 								</html>