qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
455 lines (451 loc) • 18.9 kB
HTML
<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>
<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>
<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>
<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>
<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>