qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
454 lines (450 loc) • 20 kB
HTML
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Order Form Demo</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic|Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet">
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css" rel="stylesheet" data-populated="true">
<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67439/data-buttons.css" rel="stylesheet" data-populated="true">
<style>
/* FullWidth Template */
.fullwidth,
.fullwidth body {
padding: 0;
max-width: 100%;
}
.fullwidth > .wrap {
padding: 0;
margin: 0;
max-width: none;
}
.fullwidth > .wrap [data-theme] {
padding: 1.5em 1.5em 3em 1.5em;
}
.fullwidth > .wrap .wrap {
margin: 0 auto;
padding: 0;
max-width: 850px;
}
[data-button] {
display: block ;
margin: 1em auto ;
}
h2 {
text-align: center ;
}
/* Form Styles */
form,
form * {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
}
form {
font-size: 10pt;
line-height: 1.4;
font-weight: 400;
font-family: 'Open Sans', sans-serif;
-webkit-text-size-adjust: 100%;
margin: 0;
padding: 0;
transition: opacity .3s ease-in-out;
}
form:after {
content: '';
display: block;
clear: both;
}
form fieldset {
border: none;
padding: 0;
}
form select,
form .split-input > input,
form .split-input > select,
form input,
form textarea {
float: left;
margin: 0 0 2% 0;
margin-bottom: 2%;
padding: 5px 8px;
width: 49%;
height: 40px;
outline: none;
border: 1px solid rgba(255,255,255,.7);
border-radius: 2px;
background: rgba(255,255,255,.5);
box-shadow: rgba(0,0,0,.15) 0 1px 0;
color: rgba(0,0,0,.7);
font-weight: 400;
font-size: 12pt;
transition: all .2s ease-in-out;
-webkit-appearance: none;
appearance: none;
-moz-appearance: none;
font-family: 'Source Sans Pro', sans-serif;
}
form select:focus,
form .split-input > *:focus,
form input:focus {
outline: none;
border-color: orange;
box-shadow: #fc0 0 0 3px;
}
form select,
form .split-input select {
color: rgba(0,0,0,.5);
background: rgba(255,255,255,.5);
padding-right: 1.5em;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAAAjElEQVR4Ae2QxbkCARDGMlsB2sxe1ovCKR0uuOTh9jL3fH+Gu/DPP236dG+8Pm1IGTJmdMONGZJCQs78xstJAOJGVU6wJmd2lWRGzg5BcYVqRkHAoepS0aHGAz3KV/mao6ryT5qSQCmY6YsdD5QoCZQoCZSoG1bpGle5Rii3NI6v8jVO0Cwv+OefT2IBOYykNaMbWusAAAAASUVORK5CYII=') ;
background-repeat: no-repeat ;
background-position: calc(100% - .5em) 50% ;
background-size: 12px ;
text-indent: 0.01px;
text-overflow: '';
}
form select:active,
form .split-input select:active {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABBklEQVR4Ae3PQY7TQBCG0VfNLLgGd2SBhO207SBxuZgzcAsWIxfbHiuTFsnsyCd505Kf/gof1P8NPaHfX3z26rFe/IlfX7N6yT2kcFfFa9TYPuWYJw8Vc6yxyTCp7l9ULTIuIOo+3eVkWVSIDQg1x3+mMlZVthAlTyYSIZuvfWkLlpjt0ELIasq4AbUvaVEb9qKpRN3HkILDr8eXWLPa34NEMeegs4g4O7UMsTmWszHjBpRWJ4fiwrGiGt87Datqpw9RzIbri7RHdSFYDOKwKONscqwDRS4xvF3kbJJ96OqBukf1IVhzAOJshDuhKJb8Tvww2d0oNp1K/iS+2elDj/eEntCH9BdocplPRQvKAQAAAABJRU5ErkJggg==');
}
form select::-ms-expand {
display: none;
}
form textarea {
min-height: 5em;
}
form select[class=three-quarters],
form input[class=three-quarters],
form textarea[class=three-quarters] {
width: 74%;
}
form select[class=quarter],
form input[class=quarter],
form textarea[class=quarter] {
margin-left: 2% ;
width: 24%;
}
form .split-input > select[class=three-quarters],
form .split-input > input[class=three-quarters],
form .split-input > textarea[class=three-quarters] {
width: 73%;
}
form .split-input > select[class=quarter],
form .split-input > input[class=quarter],
form .split-input > textarea[class=quarter] {
margin-left: 4% ;
width: 23%;
}
form .split-input {
float: left;
width: 49%;
margin-bottom: 2%;
}
form .split-input > input,
form .split-input > select {
margin-bottom: 0;
width: 48%;
}
form .split-input input:nth-child(even),
form .split-input select:nth-child(even) {
margin-left: 2%;
}
form select:nth-child(even),
form input:nth-child(even),
form .split-input:nth-child(even) {
margin-left: 2%;
}
form .tooltip-inner {
padding: 7px;
border-radius: 2px;
color: #fff;
font-weight: 300;
font-size: 12pt;
}
form [type=number]::-webkit-inner-spin-button,
form [type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
form [data-button] {
width: auto;
padding: .5em .75em;
font-size: 18pt;
font-weight: 700;
font-style: italic;
display: block;
margin: 1em auto .5em auto;
}
form .lockit {
position: relative;
}
form .lockit:after {
content: '';
display: block;
width: 20px;
height: 24px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAACACAQAAABXPgRLAAAC10lEQVR4AczYBZIbMRBA0b8UTpYdZmZmJkPBMjMzg3ntvrniE0TSTBvqHcD1PSW1JIw6znCHDyQYZZEtDkiXHLDFIqMk+MAdzhi0YdRQzzW+MksSsUgyy1euUV9zIbTzhRUKiIcCK3yhvWZCuEQPKSSgFD1cqnoIEXo5QkI6opdI1UI4zk/SiJI0PzlehRCus4QoW+J6RUOo4wtHCPqO+EJdhUI4ST9SRv2crEAIzcwjZTZPc5lDaGcNqYA12ssYQivrSIWs01qmEM6wjFTQMmf0Q6CRMaTCxmnUD4kiVRBVDuERUiWPFENoZh8JoEiSHTZLdkhSRALYp1kvxH8A7tLHK67TykmaSk7SynVe0ceu/4BUCuGe5385wWNO/udc8JgJz+96TyGEJq/D4Rx3DXbcZc7rMNkUPuQF4ijLZxoMbmjgM1nE0YuQITSy4rwqbhr8cNN5xazQGC7kIeJklfaAd/1VxMnDUCGOy3KDFkMwtLDhtoWECKGTHGKV5KIhOC6SRKxydAYP+aSyELU2lE/BQ1y2yCFDeAy5bO0BQ2gjg1hk6FAJ6XD6rbZgIU8Qq4RBBwnE6kmAEBqIOizAiFpIxGFjidLgH9LMlP3iY9DDOGIxRbN/yBWHqftWNeStw+nhin/IE+tJKMdF1ZCL5KynuSf+IZ+tb4k7NKqGNLJjfYf87B9iX+rTBl1M25e7f0g3YtGjHtKDWHTbQ/yvtzH1kJj/tdceMohY/FUP+YtYDJYjJKoeEv3Xvn1bIRBDQQDc3q4BfBWY6JwiSoccz+GZt6ncZDJfHwgBAQEBAQEBAQEBAQEBWXzkmX1xO2R8cdDq4ZDq4pzjk32zSpfmSC5fKZc0D065fG1+tF+3V6TL9gfSJe1PQFoQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBCQrwgICAjID31N2qSk+/KUbHbkNUUFcs65wAAAAABJRU5ErkJggg==') no-repeat;
background-size: 20px 24px;
background-position: middle bottom;
position: absolute;
bottom: .25em;
right: 0;
}
/* Theme Support */
[data-theme=default] form select,
[data-theme=default] form .split-input > input,
[data-theme=default] form .split-input > select,
[data-theme=default] form input {
border: 1px solid rgba(255,255,255,.7) ;
background: rgba(255,255,255,.5) ;
box-shadow: rgba(0,0,0,.15) 0 1px 0 ;
color: rgba(0,0,0,.7) ;
}
[data-theme=default] form select:focus,
[data-theme=default] form .split-input > *:focus,
[data-theme=default] form input:focus {
border-color: orange ;
box-shadow: #fc0 0 0 3px ;
}
[data-theme=code] form select,
[data-theme=code] form .split-input > input,
[data-theme=code] form .split-input > select,
[data-theme=code] form input {
border: 1px solid rgba(0,0,0,.25);
border-radius: 2px;
background: #002b36;
box-shadow: rgba(0,0,0,.15) 0 1px 0;
color: #eee8d5;
}
[data-theme=code] form select,
[data-theme=code] form .split-input > select {
color: rgba(255,255,255,.3);
}
[data-theme=code] form select:focus,
[data-theme=code] form .split-input > *:focus,
[data-theme=code] form input:focus {
border-color: #2aa198;
box-shadow: #2aa198 0 0 3px;
}
[data-theme=dark] form select,
[data-theme=dark] form .split-input > input,
[data-theme=dark] form .split-input > select,
[data-theme=dark] form input {
border: 1px solid rgba(0,0,0,.25);
border-radius: 2px;
background: rgba(0,0,0,.3);
box-shadow: rgba(0,0,0,.15) 0 1px 0;
color: rgba(255,255,255,.8);
}
[data-theme=dark] form select,
[data-theme=dark] form .split-input > select {
color: rgba(255,255,255,.3);
}
[data-theme=dark] form select:focus,
[data-theme=dark] form .split-input > *:focus,
[data-theme=dark] form input:focus {
border-color: #6c71c4;
box-shadow: #6c71c4 0 0 3px;
}
</style>
<link href="order-form-external.css" rel="stylesheet"></head><body class="fullwidth">
<section class="wrap">
<section data-theme="">
<section class="wrap">
<h1>Self-Responsive Order Form</h1>
<h2>With Responsive Styles Powered by Element Queries</h2>
<h2>Default Theme</h2>
<form data-formeleloffsetwidth450at1="0" data-formeleloffsetwidth450at101="0" data-formeleloffsetwidth450at201="0" data-formeleloffsetwidth450at301="0" data-formeleloffsetwidth450at401="0">
<h3>Billing Information</h3>
<fieldset id="billingAddress">
<input type="text" name="cc_first_name" id="firstName" placeholder="First Name" autocorrect="off">
<input type="text" name="cc_last_name" id="lastName" placeholder="Last Name" autocorrect="off">
<input type="text" name="cc_street1" id="address" class="three-quarters" placeholder="Street" autocorrect="off">
<input type="text" name="cc_street2" id="address2" class="quarter" placeholder="Apt/Suite" autocorrect="off">
<input type="text" name="cc_city" id="city" placeholder="City" autocorrect="off">
<input type="text" name="cc_state" id="region" placeholder="State/Province" autocorrect="off">
<input type="text" name="cc_postal_code" id="postal" placeholder="Zip Code" autocorrect="off">
<select name="cc_country" id="country" x-autocompletetype="country">
<option value="United States">US / United States</option>
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select>
</fieldset>
<h3 class="lockit">Credit Card Information</h3>
<fieldset id="cardInfo">
<input type="tel" min="1" name="cc_number" id="cc-number" placeholder="Card Number" autocorrect="off">
<div class="split-input">
<select name="cc_card_type" id="cardType" class="three-quarters">
<option value="">Card Type</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
</select>
<input type="tel" name="cvv" id="cc-csc" min="1" placeholder="CVV" autocorrect="off" class="quarter">
</div>
<select name="cc_exp_month" id="expMonth">
<option value="">Expiration Month</option>
<option value="01">01 January</option>
<option value="02">02 February</option>
<option value="03">03 March</option>
<option value="04">04 April</option>
<option value="05">05 May</option>
<option value="06">06 June</option>
<option value="07">07 July</option>
<option value="08">08 August</option>
<option value="09">09 September</option>
<option value="10">10 October</option>
<option value="11">11 November</option>
<option value="12">12 December</option>
</select>
<select id="expYear" name="cc_exp_year">
<option value="">Expiration Year</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</fieldset>
<button data-button="">Complete My Order!</button>
</form>
</section>
</section>
<section data-theme="dark">
<section class="wrap">
<h2>Dark Theme</h2>
<form data-formeleloffsetwidth450at1="1" data-formeleloffsetwidth450at101="1" data-formeleloffsetwidth450at201="1" data-formeleloffsetwidth450at301="1" data-formeleloffsetwidth450at401="1">
<h3>Billing Information</h3>
<fieldset id="billingAddress">
<input type="text" name="cc_first_name" id="firstName" placeholder="First Name" autocorrect="off">
<input type="text" name="cc_last_name" id="lastName" placeholder="Last Name" autocorrect="off">
<input type="text" name="cc_street1" id="address" class="three-quarters" placeholder="Street" autocorrect="off">
<input type="text" name="cc_street2" id="address2" class="quarter" placeholder="Apt/Suite" autocorrect="off">
<input type="text" name="cc_city" id="city" placeholder="City" autocorrect="off">
<input type="text" name="cc_state" id="region" placeholder="State/Province" autocorrect="off">
<input type="text" name="cc_postal_code" id="postal" placeholder="Zip Code" autocorrect="off">
<select name="cc_country" id="country" x-autocompletetype="country">
<option value="United States">US / United States</option>
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select>
</fieldset>
<h3 class="lockit">Credit Card Information</h3>
<fieldset id="cardInfo">
<input type="tel" min="1" name="cc_number" id="cc-number" placeholder="Card Number" autocorrect="off">
<div class="split-input">
<select name="cc_card_type" id="cardType" class="three-quarters">
<option value="">Card Type</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
</select>
<input type="tel" name="cvv" id="cc-csc" min="1" placeholder="CVV" autocorrect="off" class="quarter">
</div>
<select name="cc_exp_month" id="expMonth">
<option value="">Expiration Month</option>
<option value="01">01 January</option>
<option value="02">02 February</option>
<option value="03">03 March</option>
<option value="04">04 April</option>
<option value="05">05 May</option>
<option value="06">06 June</option>
<option value="07">07 July</option>
<option value="08">08 August</option>
<option value="09">09 September</option>
<option value="10">10 October</option>
<option value="11">11 November</option>
<option value="12">12 December</option>
</select>
<select id="expYear" name="cc_exp_year">
<option value="">Expiration Year</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</fieldset>
<button data-button="blue">Complete My Order!</button>
</form>
</section>
</section>
<section data-theme="code">
<section class="wrap">
<h2>Code Theme</h2>
<form data-formeleloffsetwidth450at1="2" data-formeleloffsetwidth450at101="2" data-formeleloffsetwidth450at201="2" data-formeleloffsetwidth450at301="2" data-formeleloffsetwidth450at401="2">
<h3>Billing Information</h3>
<fieldset id="billingAddress">
<input type="text" name="cc_first_name" id="firstName" placeholder="First Name" autocorrect="off">
<input type="text" name="cc_last_name" id="lastName" placeholder="Last Name" autocorrect="off">
<input type="text" name="cc_street1" id="address" class="three-quarters" placeholder="Street" autocorrect="off">
<input type="text" name="cc_street2" id="address2" class="quarter" placeholder="Apt/Suite" autocorrect="off">
<input type="text" name="cc_city" id="city" placeholder="City" autocorrect="off">
<input type="text" name="cc_state" id="region" placeholder="State/Province" autocorrect="off">
<input type="text" name="cc_postal_code" id="postal" placeholder="Zip Code" autocorrect="off">
<select name="cc_country" id="country" x-autocompletetype="country">
<option value="United States">US / United States</option>
<option value="Canada">Canada</option>
<option value="Other">Other</option>
</select>
</fieldset>
<h3 class="lockit">Credit Card Information</h3>
<fieldset id="cardInfo">
<input type="tel" min="1" name="cc_number" id="cc-number" placeholder="Card Number" autocorrect="off">
<div class="split-input">
<select name="cc_card_type" id="cardType" class="three-quarters">
<option value="">Card Type</option>
<option value="Visa">Visa</option>
<option value="Mastercard">Mastercard</option>
<option value="American Express">American Express</option>
</select>
<input type="tel" name="cvv" id="cc-csc" min="1" placeholder="CVV" autocorrect="off" class="quarter">
</div>
<select name="cc_exp_month" id="expMonth">
<option value="">Expiration Month</option>
<option value="01">01 January</option>
<option value="02">02 February</option>
<option value="03">03 March</option>
<option value="04">04 April</option>
<option value="05">05 May</option>
<option value="06">06 June</option>
<option value="07">07 July</option>
<option value="08">08 August</option>
<option value="09">09 September</option>
<option value="10">10 October</option>
<option value="11">11 November</option>
<option value="12">12 December</option>
</select>
<select id="expYear" name="cc_exp_year">
<option value="">Expiration Year</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</fieldset>
<button data-button="blue">Complete My Order!</button>
</form>
</section>
</section>
</section>
</body></html>