From 2768ef2647df1c333b7cb46b1fcfc080ea0b4e39 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Fri, 24 Sep 2021 16:02:21 -0400
Subject: [PATCH] extra radios

---
 index.html | 372 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 247 insertions(+), 125 deletions(-)

diff --git a/index.html b/index.html
index a88a019..a188ca2 100644
--- a/index.html
+++ b/index.html
@@ -14,23 +14,15 @@
             padding: 0;
             border: 0;
         }
-        .block > *
-        {
-            padding:10px 0 10px 10px;
-        }
-        .block > *:last-child
-        {
-            padding-right: 20px;
-        }
-        .block__hit-area
-        {
-            width:100%;
-        }
         .col--empty, input:checked + .col--empty-active
         {
             box-sizing: border-box;
             border:1px solid #f1f1ee;
         }
+        .col--yellow
+        {
+            background:#f7f3de;
+        }
         .col--warm, input:checked + .col--warm-active
         {
             box-sizing: border-box;
@@ -270,64 +262,6 @@
         }
     </style>
 
-    <!-- giving buttons -->
-    <style>
-        .giving
-        {
-            display:inline-block;
-            font-size:0;
-        }
-        .giving label, .giving *
-        {   
-            display:inline-block;
-            position:relative;
-            box-sizing: border-box;
-            height:44px;
-            line-height:44px;
-            padding: 0 15px 0 15px;
-            font-size: 14px;
-            vertical-align:top;
-        }
-        .giving label
-        {
-            margin:0;
-            border: 1px solid #DBDCD4;
-            border-right:0;
-            border-top-left-radius: 5px;
-            border-bottom-left-radius: 5px;
-
-            background: #F1F1EE;
-
-            color:black;
-            content:"$";
-            font-weight:900;
-            text-align:center;
-        }
-        .giving *
-        {
-            margin: 0;
-            border: 0;
-            border-right: 1px solid #4B6451;
-            border-radius: 0;
-            background: #5E7D65;
-            color: white;
-            font-weight: 900; 
-        }
-        .giving input
-        {
-            margin: 0;
-            border: 1px solid #DBDCD4;
-            padding:0 10px 0 10px;
-            background: white;
-            color: black;
-            font-weight: lighter;
-        }
-        .giving *:last-child
-        {
-            border-top-right-radius: 5px;
-            border-bottom-right-radius: 5px;
-        }
-    </style>
 
     <!-- atomic text -->
     <style>
@@ -337,13 +271,12 @@
 
         .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; }
 
@@ -355,23 +288,39 @@
         .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--md { padding-left: 16px; padding-right: 16px; }
+        .pad--xs-h { padding-left: 10px; padding-right: 10px; }
+        .pad--sm-h { padding-left: 16px; padding-right: 16px; }
+        .pad--md-h { padding-left: 20px; padding-right: 20px; }
+        .pad--lg-h { padding-left: 24px; padding-right: 24px; }
+        .pad--xl-h { padding-left: 36px; padding-right: 36px; }
+        .pad--xs-v { padding-top: 10px; padding-bottom: 10px; }
+        .pad--sm-v { padding-top: 16px; padding-bottom: 16px; }
+        .pad--md-v { padding-top: 20px; padding-bottom: 20px; }
+        .pad--lg-v { padding-top: 24px; padding-bottom: 24px; }
+        
 
         .dsp--block{ display:block; }
         .dsp--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 -->
@@ -397,11 +346,10 @@
     <div class="txt--size-h2 txt--wgt-black gap--sm">Payment Information</div>
     <div style="display:flex;">
 
-        
-        <div class="block col--empty col--warm-active gap--sm gap--md-right">
-            <input id="check-1" type="radio" name="slot-1" value="option-1"/>
-            <label class="block__hit-area" for="check-1">
-                <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
+        <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"/>
@@ -410,17 +358,17 @@
         </div>
         
         <input id="check-2" type="radio" name="slot-1" value="option-2"/>
-        <div class="block col--empty gap--sm gap--md-right">
-            <label class="block__hit-area" for="check-2">
-                <strong>Paypal</strong><br>
+        <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 gap--sm gap--sm-right">
-            <label class="block__hit-area" for="check-3">
-                <strong>Bank Transfer</strong><br>
+        <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>
@@ -429,8 +377,8 @@
 
 
     <div class="txt--size-copy txt--wgt-black txt--uppercase gap--md">Billing Information</div>
-    <div class="block col--empty">
-        <div class="block__hit-area">
+    <div class="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">
@@ -449,16 +397,49 @@
 
 
     <div class="txt--size-h2 txt--wgt-black gap--lg">Shipping Information</div>
-    <div class="block col--empty gap--sm">
-        <div class="block__hit-area">
-            <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
-            <div class="txt--size-copy txt--wgt-normal">
-                8759 Cardinal Court<br>
-                Windmere, FL 34786<br>
-                US
+    <div 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>
-        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
+
+        
+        <div class="col--warm pad--xs-v pad--xl-h">
+            <button class="dsp--round col--green pad--md-h txt--size-small txt--wgt-bold txt--col-white txt--short">Use this address</button>
+        </div>
+
     </div>
 
     <div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
@@ -468,48 +449,189 @@
     </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-copy txt--wgt-bold">
-        Truth For Life needs the contact information you provide to contact you about promotions & services. You may unsubscribe from these communications at anytime. For info on how to unsubscribe and our privacy practices, visit <a href="">Privacy Policy</a>.
+    <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;">
-        <label  class="col--drab   dsp--inline-block dsp--round-left  pad--md  txt--size-small txt--tall txt--wgt-black               ">$</label>
-        <input  class="col--inset  dsp--inline-block                  pad--md  txt--size-small txt--tall txt--wgt-normal              " type="number"/>
-        <button class="col--green                                     pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
-        <button class="col--green  dsp--emboss                        pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
-        <button class="col--green  dsp--emboss                        pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
-        <button class="col--green  dsp--emboss dsp--round-right       pad--md  txt--size-small txt--tall txt--wgt-black txt--col-white">$100</button>
+        <div>
+            <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>
 
 
-    <hr>
-
-    <div class="giving">
-        <label for="amount">$</label>
-        <input id="amount" type="number" value="100"/>
-        <button>$20 </button>
-        <button>$30 </button>
-        <button>$50 </button>
-        <button>$100</button>
+    <div 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>
 
-    <input type="text" value="text"/>
-    <select>
-        <option>select</option>
-        <option>select</option>
-        <option>select</option>
-        <option>select</option>
-    </select>
-    <input type="email" value="email"/>
-    <input type="number" value="123"/>
+    <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>
 
-    <input type="checkbox" id="bool-1"/>
-    <label for="bool-1">
-        Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
-    </label>
 
 
 </body>