From 9c35ee8af7199e71580d0f659fa67b25965f11d4 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Thu, 23 Sep 2021 14:20:23 -0400
Subject: [PATCH] icons used, layout updated

---
 index.html | 192 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 120 insertions(+), 72 deletions(-)

diff --git a/index.html b/index.html
index c4a11cf..49821d4 100644
--- a/index.html
+++ b/index.html
@@ -22,32 +22,33 @@
         }
         .block > *:last-child
         {
-            padding-right: 10px;
+            padding-right: 20px;
         }
         .block__hit-area
         {
             width:100%;
         }
-        .block--empty, input:checked + .block--empty-active
+        .col--empty, input:checked + .col--empty-active
         {
+            border-radius:4px;
             border:1px solid #f1f1ee;
         }
-        .block--warm, input:checked + .block--warm-active
+        .col--warm, input:checked + .col--warm-active
         {
             border:1px solid #f1f1ee;
             background:#F8F8F6;
         }
-        .block--cool, input:checked + .block--cool-active
+        .col--cool, input:checked + .col--cool-active
         {
             border: 1px solid #ccd7de;
             background:#e6ebee;
         }
-        .block--gray, input:checked + .block--gray-active
+        .col--gray, input:checked + .col--gray-active
         {
             border: 1px solid #E1DFDF;
             background:#F8F8F6;
         }
-        .block--green, input:checked + .block--green-active
+        .col--green, input:checked + .col--green-active
         {
             border: 1px solid #5E7D65;
             background:#5E7D65;
@@ -164,10 +165,9 @@
         input[type='text'], input[type='number'], input[type='email'], select
         {
             position:relative;
-            height:44px;
             box-sizing: border-box;
             margin:0;
-            padding:10px 13px;
+            padding:0px 13px;
             border: 1px solid #DBDCD4;
 
             appearance: none;
@@ -177,15 +177,18 @@
             color:#000000;
             font-weight:500;
             font-size:16px;
-            line-height:24px;
+            line-height:44px;
         }
         select
         {
-            top:1.5px;
+            line-height:44px;
             padding-right:50px;
             background:url();
         }
-
+        button
+        {
+            line-height: 44px;
+        }
     </style>
 
     <!-- progress bar -->
@@ -320,6 +323,10 @@
     <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; }
@@ -328,11 +335,12 @@
         .txt--size-h1{ font-size:32px; line-height:48px; }
 
         .txt--green-darken-01{ color: #4B6451; }
+        .txt--col-white{ color:#ffffff; }
 
-        .txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; }
-        .txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; }
-        .txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; }
-        .txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; }
+        .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; }
@@ -342,6 +350,13 @@
         .gap--sm { margin:24px 0 0 0; }
         .gap--xs { margin:12px 0 0 0; }
 
+        .gap--md-right { margin-right:42px; }
+        .gap--sm-right { margin-right:20px; }
+
+        .dsp--block{ display:block; }
+        .dsp--inline-block{ display:block; }
+        .dsp--wide{ width:100%; }
+
     </style>
 
     <!-- atomic coloration -->
@@ -350,9 +365,11 @@
     </style>
 
 </head>
-<body>
+<body style="max-width:900px; margin:0 auto;" class="txt--fnt-sans">
 
-    <ul class="progress progress--stage-2">
+    <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>
@@ -360,6 +377,88 @@
         <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 col--warm-active gap--sm gap--md-right">
+            <label class="block__hit-area" for="check-1">
+                <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><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 gap--sm gap--md-right">
+            <label class="block__hit-area" for="check-2">
+                <strong>Paypal</strong><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>
+                <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">
+        <div class="block__hit-area">
+            <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="block col--empty gap--sm">
+        <div class="block__hit-area">
+            <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
+            <div class="txt--size-copy txt--wgt-normal">
+                8759 Cardinal Court<br>
+                Windmere, FL 34786<br>
+                US
+            </div>
+        </div>
+        <a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
+    </div>
+
+    <div class="txt--size-h2 txt--wgt-black gap--lg">Listening Information</div>
+    <label class="txt--size-copy txt--wgt-bold gap--sm dsp--block">I primarily listen to Truth For Life with Alistair Begg on: </label>
+    <select class="dsp--block dsp--wide gap--xs">
+        <option>Please select option &hellip;</option>
+    </select>
+
+    <button style="line-height:44px;" class="dsp--wide gap--lg col--green txt--size-copy txt--wgt-bold txt--col-white">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 Privacy Policy.
+    </p>
+
+    <!------------------------------>
+
     <div class="giving">
         <label for="amount">$</label>
         <input id="amount" type="number" value="100"/>
@@ -379,62 +478,11 @@
     <input type="email" value="email"/>
     <input type="number" value="123"/>
 
-    <form>
+    <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>
 
-        <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 class="txt--size-h2 txt--wgt-black gap--lg">Review Your Order</div>
-        <div class="txt--size-copy txt--wgt-black txt--uppercase gap--sm">Payment Method</div>
-
-        <div class="block block--empty gap--xs">
-            <div class="txt--size-copy txt--wgt-bold">Credit Card</div>
-            <a class="txt--green-darken-01" href="/">Change</a>
-        </div>
-
-        <input id="check-1" type="radio" name="slot-1" value="option-1"/>
-        <div class="block block--empty block--warm-active gap--xs">
-            <label class="block__hit-area" for="check-1">
-                <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br>
-                <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
-                <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
-                <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br>
-                <span class="txt--size-copy txt--wgt-normal">Credit Card</span>
-            </label>
-            <a class="block__auxillary" href="/">Change</a>
-        </div>
-
-        <input id="check-2" type="radio" name="slot-1" value="option-2"/>
-        <div class="block block--empty gap--xs">
-            <label class="block__hit-area" for="check-2">
-                <strong>Paypal</strong><br>
-                <span>also good</span>
-            </label>
-            <a class="block__auxillary" href="/">Change</a>
-        </div>
-
-        <div class="txt--size-h2 txt--wgt-black">Shipping Information</div>
-        <div class="txt--size-copy txt--wgt-black txt--uppercase">Shipping Information</div>
-        <div class="block block--empty">
-            <div class="block__hit-area">
-                <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div>
-                <div class="txt--size-copy txt--wgt-normal">
-                    8759 Cardinal Court<br>
-                    Windmere, FL 34786<br>
-                    US
-                </div>
-                <div class="txt--size-copy txt--wgt-normal">
-                    8759 Cardinal Court<br>
-                    Windmere, FL 34786<br>
-                    US
-                </div>
-            </div>
-            <a class="block__auxillary" href="">Change</a>
-        </div>
-
-    </form>
 
 </body>
 </html>
\ No newline at end of file