giving form atomic started
This commit is contained in:
parent
9c35ee8af7
commit
1528a6e5b2
68
index.html
68
index.html
@ -13,8 +13,6 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
border-radius: 4px;
|
||||
}
|
||||
.block > *
|
||||
{
|
||||
@ -30,29 +28,45 @@
|
||||
}
|
||||
.col--empty, input:checked + .col--empty-active
|
||||
{
|
||||
border-radius:4px;
|
||||
box-sizing: border-box;
|
||||
border:1px solid #f1f1ee;
|
||||
}
|
||||
.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: 1px solid #5E7D65;
|
||||
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 -->
|
||||
@ -161,7 +175,7 @@
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
input[type='text'], input[type='number'], input[type='email'], select
|
||||
{
|
||||
position:relative;
|
||||
@ -181,14 +195,10 @@
|
||||
}
|
||||
select
|
||||
{
|
||||
line-height:44px;
|
||||
padding-right:50px;
|
||||
background:url();
|
||||
}
|
||||
button
|
||||
{
|
||||
line-height: 44px;
|
||||
}
|
||||
*/
|
||||
</style>
|
||||
|
||||
<!-- progress bar -->
|
||||
@ -333,7 +343,7 @@
|
||||
.txt--size-copy{ font-size:16px; line-height:24px; }
|
||||
.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; }
|
||||
|
||||
@ -344,19 +354,24 @@
|
||||
|
||||
.txt--uppercase{ text-transform: uppercase; }
|
||||
.txt--center{ text-align:center; }
|
||||
.txt--tall{ line-height: 44px; }
|
||||
|
||||
.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--md-right { margin-right:42px; }
|
||||
.gap--sm-right { margin-right:20px; }
|
||||
|
||||
.pad--md { padding-left: 16px; padding-right: 16px; }
|
||||
|
||||
.dsp--block{ display:block; }
|
||||
.dsp--inline-block{ display:block; }
|
||||
.dsp--inline-block{ display:inline-block; vertical-align: top; }
|
||||
.dsp--wide{ width:100%; }
|
||||
|
||||
.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);}
|
||||
</style>
|
||||
|
||||
<!-- atomic coloration -->
|
||||
@ -382,8 +397,9 @@
|
||||
<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">
|
||||
<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>
|
||||
<img class="col--empty gap--xs gap--sm-right" src="icon-pay-visa.svg"/>
|
||||
@ -446,18 +462,30 @@
|
||||
</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">
|
||||
<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 …</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>
|
||||
<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 Privacy Policy.
|
||||
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>
|
||||
|
||||
<!------------------------------>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="giving">
|
||||
<label for="amount">$</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user