more progress
This commit is contained in:
parent
2768ef2647
commit
1eacae9f74
@ -1,8 +1,8 @@
|
||||
<svg width="28" height="20" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="28" height="20" fill="white"/>
|
||||
<path d="M12.1031 14.5235H10.0274L11.3257 6.15175H13.4012L12.1031 14.5235Z" fill="#00579F"/>
|
||||
<path d="M19.6273 6.35642C19.2179 6.18703 18.5686 6 17.7657 6C15.7159 6 14.2725 7.13992 14.2637 8.76966C14.2466 9.97208 15.2971 10.6399 16.0828 11.0409C16.8858 11.4505 17.1588 11.7179 17.1588 12.0831C17.1506 12.644 16.5099 12.9025 15.9123 12.9025C15.0836 12.9025 14.6396 12.7692 13.9648 12.4572L13.6915 12.3234L13.4011 14.2027C13.8879 14.434 14.7848 14.6392 15.7159 14.6482C17.8938 14.6482 19.3117 13.5259 19.3285 11.7892C19.3368 10.8362 18.7821 10.106 17.5862 9.50924C16.8603 9.12619 16.4157 8.86791 16.4157 8.47598C16.4242 8.11968 16.7917 7.75474 17.6112 7.75474C18.286 7.73687 18.7817 7.90602 19.1573 8.07529L19.345 8.16419L19.6273 6.35642Z" fill="#00579F"/>
|
||||
<path d="M22.386 11.5577C22.5569 11.0767 23.2147 9.21533 23.2147 9.21533C23.206 9.2332 23.3853 8.72551 23.4877 8.41383L23.6328 9.13519C23.6328 9.13519 24.0259 11.1391 24.1112 11.5577C23.7868 11.5577 22.796 11.5577 22.386 11.5577ZM24.9481 6.15175H23.3426C22.8475 6.15175 22.4713 6.30303 22.2577 6.84636L19.1747 14.5233H21.3526C21.3526 14.5233 21.7111 13.4901 21.7882 13.2675C22.0271 13.2675 24.1457 13.2675 24.4531 13.2675C24.5127 13.5615 24.7007 14.5233 24.7007 14.5233H26.6226L24.9481 6.15175Z" fill="#00579F"/>
|
||||
<path d="M8.29381 6.15175L6.2611 11.8605L6.03898 10.7027C5.66318 9.36672 4.48457 7.91525 3.16931 7.19354L5.0312 14.5146H7.2261L10.4886 6.15175H8.29381Z" fill="#00579F"/>
|
||||
<path d="M4.37362 6.15175H1.03416L1 6.3209C3.60498 7.01562 5.33021 8.69023 6.03903 10.703L5.31307 6.85547C5.19356 6.32078 4.82626 6.16939 4.37362 6.15175Z" fill="#FAA61A"/>
|
||||
<rect fill="#00579F" width="28" height="20" />
|
||||
<path fill="white" d="M12.1031 14.5235H10.0274L11.3257 6.15175H13.4012L12.1031 14.5235Z"/>
|
||||
<path fill="white" d="M19.6273 6.35642C19.2179 6.18703 18.5686 6 17.7657 6C15.7159 6 14.2725 7.13992 14.2637 8.76966C14.2466 9.97208 15.2971 10.6399 16.0828 11.0409C16.8858 11.4505 17.1588 11.7179 17.1588 12.0831C17.1506 12.644 16.5099 12.9025 15.9123 12.9025C15.0836 12.9025 14.6396 12.7692 13.9648 12.4572L13.6915 12.3234L13.4011 14.2027C13.8879 14.434 14.7848 14.6392 15.7159 14.6482C17.8938 14.6482 19.3117 13.5259 19.3285 11.7892C19.3368 10.8362 18.7821 10.106 17.5862 9.50924C16.8603 9.12619 16.4157 8.86791 16.4157 8.47598C16.4242 8.11968 16.7917 7.75474 17.6112 7.75474C18.286 7.73687 18.7817 7.90602 19.1573 8.07529L19.345 8.16419L19.6273 6.35642Z"/>
|
||||
<path fill="white" d="M22.386 11.5577C22.5569 11.0767 23.2147 9.21533 23.2147 9.21533C23.206 9.2332 23.3853 8.72551 23.4877 8.41383L23.6328 9.13519C23.6328 9.13519 24.0259 11.1391 24.1112 11.5577C23.7868 11.5577 22.796 11.5577 22.386 11.5577ZM24.9481 6.15175H23.3426C22.8475 6.15175 22.4713 6.30303 22.2577 6.84636L19.1747 14.5233H21.3526C21.3526 14.5233 21.7111 13.4901 21.7882 13.2675C22.0271 13.2675 24.1457 13.2675 24.4531 13.2675C24.5127 13.5615 24.7007 14.5233 24.7007 14.5233H26.6226L24.9481 6.15175Z"/>
|
||||
<path fill="white" d="M8.29381 6.15175L6.2611 11.8605L6.03898 10.7027C5.66318 9.36672 4.48457 7.91525 3.16931 7.19354L5.0312 14.5146H7.2261L10.4886 6.15175H8.29381Z"/>
|
||||
<path fill="#FAA61A" d="M4.37362 6.15175H1.03416L1 6.3209C3.60498 7.01562 5.33021 8.69023 6.03903 10.703L5.31307 6.85547C5.19356 6.32078 4.82626 6.16939 4.37362 6.15175Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
174
index.html
174
index.html
@ -14,51 +14,14 @@
|
||||
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);
|
||||
}
|
||||
.col--empty { box-sizing:border-box; border:1px solid #f1f1ee; }
|
||||
.col--yellow { box-sizing:border-box; border:1px solid #f7f3de; background:#f7f3de; }
|
||||
.col--warm { box-sizing:border-box; border:1px solid #f1f1ee; background:#F8F8F6; }
|
||||
.col--cool { box-sizing:border-box; border:1px solid #ccd7de; background:#e6ebee; }
|
||||
.col--gray { box-sizing:border-box; border:1px solid #E1DFDF; background:#F8F8F6; }
|
||||
.col--drab { box-sizing:border-box; border:1px solid #DBDCD4; background:#F1F1EE; }
|
||||
.col--green { box-sizing:border-box; border:1px solid #5E7D65; background:#5E7D65; }
|
||||
.col--inset { box-sizing:border-box; border:1px solid #DBDCD4; box-shadow: inset 0px 1px 5px rgba(0, 0, 0, 0.1); }
|
||||
</style>
|
||||
|
||||
<!-- form controls -->
|
||||
@ -167,6 +130,16 @@
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
|
||||
select
|
||||
{
|
||||
appearance: none;
|
||||
padding-left:20px;
|
||||
padding-right:30px;
|
||||
background:url();
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
input[type='text'], input[type='number'], input[type='email'], select
|
||||
{
|
||||
@ -311,16 +284,23 @@
|
||||
|
||||
.dsp--block{ display:block; }
|
||||
.dsp--inline-block{ display:inline-block; vertical-align: top; }
|
||||
.dsp--middle { display:inline-block; vertical-align: middle; }
|
||||
.dsp--wide{ width:100%; }
|
||||
.dsp--wide-1-3{ width:33%; }
|
||||
.dsp--wide-2-3{ width:66%; }
|
||||
|
||||
.dsp--square{ border-radius:0; }
|
||||
.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;}
|
||||
|
||||
.dsp--float-left{ float:left; }
|
||||
.dsp--float-right{ float:right; }
|
||||
.dsp--float-clear{ float:clear; }
|
||||
|
||||
</style>
|
||||
|
||||
<!-- atomic coloration -->
|
||||
@ -350,10 +330,10 @@
|
||||
<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"/>
|
||||
<img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
|
||||
<img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-mastercard.svg"/>
|
||||
<img class="col--empty dsp--round dsp--middle gap--xs gap--sm-right" src="icon-pay-discover.svg"/>
|
||||
<img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-american-express.svg"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -361,7 +341,7 @@
|
||||
<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"/>
|
||||
<img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-paypal.svg"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -369,7 +349,7 @@
|
||||
<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"/>
|
||||
<img class="col--empty dsp--round dsp--middle gap--xs" src="icon-pay-transfer.svg"/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -387,8 +367,8 @@
|
||||
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
|
||||
<img class="dsp--middle" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
|
||||
<img class="dsp--middle" src="icon-wire-envelope.svg"/> Windmere, FL 34786
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -447,6 +427,10 @@
|
||||
<select id="channel" class="dsp--block dsp--round dsp--wide col--inset txt--tall txt--wgt-bold txt--size-copy">
|
||||
<option>Please select option …</option>
|
||||
</select>
|
||||
<p class="gap--no">
|
||||
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="#">Don’t see your station? Click here.</a>
|
||||
<a class="txt--size-small txt--wgt-bold txt--green-darken-01 dsp--float-right" href="#">Why do we require this information?</a>
|
||||
</p>
|
||||
|
||||
<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">
|
||||
@ -460,12 +444,12 @@
|
||||
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>
|
||||
<label class="col--drab dsp--square dsp--round-left dsp--inline-block pad--sm-h txt--size-small txt--tall txt--wgt-black ">$</label>
|
||||
<input class="col--inset dsp--square dsp--inline-block pad--sm-h txt--size-small txt--tall txt--wgt-normal " type="number"/>
|
||||
<button class="col--green dsp--square pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$20 </button>
|
||||
<button class="col--green dsp--square dsp--emboss pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$30 </button>
|
||||
<button class="col--green dsp--square dsp--emboss pad--sm-h txt--size-small txt--tall txt--wgt-black txt--col-white">$50 </button>
|
||||
<button class="col--green dsp--square dsp--round-right dsp--emboss 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>
|
||||
@ -474,7 +458,7 @@
|
||||
</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>
|
||||
<button class="col--gray dsp--round gap--xs pad--sm-h txt--short txt--wgt-bold"><img class="dsp--middle" src="icon-wire-magnify.svg"/> Learn More</button>
|
||||
<img src="https://placekitten.com/150/200"/>
|
||||
</div>
|
||||
<div>
|
||||
@ -512,7 +496,7 @@
|
||||
<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>
|
||||
<span class="col--yellow dsp--round 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>
|
||||
@ -538,8 +522,8 @@
|
||||
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
|
||||
<img class="dsp--middle" src="icon-wire-phone.svg"/> 8759 Cardinal Court<br>
|
||||
<img class="dsp--middle" src="icon-wire-envelope.svg"/> Windmere, FL 34786
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -557,7 +541,7 @@
|
||||
<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>
|
||||
<img class="dsp--middle gap--sm-right" 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>
|
||||
@ -601,9 +585,9 @@
|
||||
</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 style="width:350px;" class="gap--md">
|
||||
|
||||
<div class="col--warm dsp--round pad--sm-h pad--sm-v">
|
||||
<div class="col--warm dsp--round gap--sm 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">
|
||||
@ -611,25 +595,57 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col--empty dsp--round pad--sm-h pad--sm-v">
|
||||
<div class="col--empty dsp--round gap--sm pad--md-h pad--lg-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>
|
||||
<div class="gap--sm">
|
||||
Items (3): <span class="dsp--float-right">$107.00 </span><br>
|
||||
Shipping & handling <span class="dsp--float-right">$3.09 </span><br>
|
||||
<hr class="dsp--float-right dsp--block dsp--wide-1-3"><br>
|
||||
Total before tax <span class="dsp--float-right">$110.09 </span><br>
|
||||
Tax <span class="dsp--float-right">$0.19 </span><br>
|
||||
</div>
|
||||
<hr class="gap--xs">
|
||||
<p class="gap--xs txt--wgt-black">
|
||||
Grand Total <span class="dsp--float-right">$110.28</span>
|
||||
</p>
|
||||
<input type="checkbox" id="bool-1"/>
|
||||
<label for="bool-1">
|
||||
<label for="bool-1" class="dsp--block gap--sm txt--size-small txt--wgt-bold">
|
||||
Please send me the daily devotional and program link from Truth For Life with Alistair Begg.
|
||||
</label>
|
||||
<button class="col--green gap--sm dsp--wide dsp--round txt--tall txt--col-white txt--size-copy txt--wgt-bold">Place Order</button>
|
||||
</div>
|
||||
|
||||
<div class="gap--sm">
|
||||
<div class="txt--uppercase txt--wgt-black">Free Account</div>
|
||||
<p class="gap--no txt--size-small">Create a free account to manage your subscriptions, track your listening progress, and build a listening library of your favorite messages. </p>
|
||||
<button class="gap--sm dsp--round col--gray pad--md-h txt--short txt--wgt-bold">Create Account</button>
|
||||
<div class="col--cool dsp--round gap--md pad--sm-v pad--sm-h txt--size-small txt--wgt-bold">
|
||||
We're grateful to offer you resources at cost, with no mark up, thanks to the generous giving from listeners like you.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col--warm dsp--round gap--sm pad--md-h pad--lg-v">
|
||||
<div class="txt--uppercase txt--wgt-black">Summary</div>
|
||||
<div class="gap--no txt--size-small txt--wgt-bold">December 12, 2021</div>
|
||||
<hr class="gap--sm">
|
||||
<div class="gap--sm txt--size-small txt--wgt-bold">
|
||||
<img class="dsp--middle dsp--round" src="icon-pay-visa.svg"/> 1234 - 1234 - 1234
|
||||
</div>
|
||||
<div class="gap--sm">
|
||||
Items (3): <span class="dsp--float-right">$107.00 </span><br>
|
||||
Shipping & handling <span class="dsp--float-right">$3.09 </span><br>
|
||||
<hr class="dsp--float-right dsp--block dsp--wide-1-3"><br>
|
||||
Total before tax <span class="dsp--float-right">$110.09 </span><br>
|
||||
Tax <span class="dsp--float-right">$0.19 </span><br>
|
||||
</div>
|
||||
<hr class="gap--xs">
|
||||
<p class="gap--xs txt--wgt-black">
|
||||
Grand Total <span class="dsp--float-right">$110.28</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="gap--xs txt--size-small txt--wgt-bold txt--center">
|
||||
Contact Customer Service<br>(888-588-7884)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user