SethTrowbridge/atomic-css
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

extra radios

Browse Source
This commit is contained in:
TreetopFlyer 2021-09-24 16:02:21 -04:00
parent 1528a6e5b2
commit 2768ef2647
1 changed files with 247 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

352
index.html
View File

@ -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>
<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="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>
<a class="txt--size-small txt--wgt-bold txt--green-darken-01" href="">Change</a>
<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>
@ -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>
</body>