diff --git a/_examples/form-contact.html b/_examples/form-contact.html deleted file mode 100644 index f7fa112c..00000000 --- a/_examples/form-contact.html +++ /dev/null @@ -1,247 +0,0 @@ - - - - - - -
- - - - -
-<form>
- <header class="form-header">
- <h2>Contact Us</h2>
- <p>This is an example contact form that might appear on a design agencies website. It features a form header and footer along with required fields and some notes.</p>
- </header>
- <div class="form-group">
- <label for="input-username">Your Name <span class="req">*</span></label>
- <div class="row">
- <div class="col col-6">
- <input type="text" class="input" placeholder="First Name" required>
- </div>
- <div class="col col-6">
- <input type="text" class="input" placeholder="Last Name" required>
- </div>
- </div>
- </div>
- <div class="form-group">
- <label>Email Address <span class="req">*</span></label>
- <p class="note">Your email will not be shared with anyone.</p>
- <input type="email" class="input" placeholder="example@gmail.com" required>
- </div>
- <div class="form-group">
- <label>What are you interested in? <span class="req">*</span></label>
- <select class="input" required>
- <option disabled selected>Select One...</option>
- <option>Web Design</option>
- <option>Development</option>
- <option>Content Creation</option>
- <option>Search Engine Stuff</option>
- </select>
- </div>
- <div class="form-group">
- <label>Your Message</label>
- <textarea class="input" rows="4"></textarea>
- </div>
- <footer class="form-action">
- <button class="button green">Submit Form</button>
- <div class="note input-align float-right">
- <p><em>* Required fields</em></p>
- </div>
- </footer>
-</form>
-
-
-
-form {
- max-width: 600px;
- margin-left: auto;
- margin-right: auto;
- background: $white;
- background-clip: padding-box;
- border: 1px solid rgba($black, 0.1);
- @include box-shadow(0 1px 6px rgba($black, 0.1));
- @include border-radius();
-}
-form .form-group {
- padding: 0 20px;
-}
-form .form-header {
- margin-top: -1px;
- margin-left: -1px;
- margin-right: -1px;
- padding: 20px;
- text-shadow: 0 1px 1px rgba($black, 0.1);
- background: $blue;
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: rgba($black, 0.1);
- @include linear-gradient(top, $blue, $blue-darker);
- @include border-radius-top();
-
- h2 {
- color: $white;
- }
- p {
- color: rgba($white, 0.75);
- }
-}
-form .form-action {
- padding: 20px;
- background: $blue-pale;
- border-top: 1px solid rgba($black, 0.1);
- @include border-radius-bottom();
-}
-
-
-
-<form>
- <div class="form-group">
- <div class="row">
- <div class="col col-3">
- <label class="block">Shirt Details</label>
- <p class="note">Select the shirt details you'd like to purchase.</p>
- </div>
- <div class="col col-9">
-
- <div class="row">
- <div class="col col-3">
- <label class="sub block text-right" for="shirt-type">Shirt Type</label>
- </div>
- <div class="col col-9">
- <select class="input" id="shirt-type">
- <option selected></option>
- <option>T-Shirt</option>
- <option>Baseball T-Shirt</option>
- <option>Tank Shirt</option>
- </select>
- </div>
- </div>
- <div class="row">
- <div class="col col-3">
- <label class="sub block text-right" for="shirt-size">Shirt Size</label>
- </div>
- <div class="col col-9">
- <select class="input" id="shirt-size">
- <option selected></option>
- <option>X-Small</option>
- <option>Small</option>
- <option>Medium</option>
- <option>Large</option>
- <option>X-Large</option>
- </select>
- </div>
- </div>
- <div class="row">
- <div class="col col-3">
- <label class="sub block text-right" for="shirt-color">Shirt Color</label>
- </div>
- <div class="col col-9">
- <select class="input" id="shirt-color">
- <option selected></option>
- <option>Blue</option>
- <option>Red</option>
- <option>Green</option>
- <option>Black</option>
- </select>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <div class="row">
- <div class="col col-3">
- <label>Your Details</label>
- <p class="note">We need to know some stuff about you.</p>
- </div>
- <div class="col col-9">
- <div class="input-group">
- <label class="sub">Full Name</label>
- <div class="row">
- <div class="col col-6">
- <input type="text" class="input" placeholder="First Name">
- </div>
- <div class="col col-6">
- <input type="text" class="input" placeholder="Last Name">
- </div>
- </div>
- </div>
- <div class="input-group">
- <label class="sub" for="input-email">Email Address</label>
- <input type="email" class="input" id="input-email" placeholder="example@gmail.com">
- </div>
- <div class="input-group">
- <label class="sub">Shipping Address</label>
- <input type="text" class="input" placeholder="Street Address">
- </div>
- <div class="input-group">
- <input type="text" class="input" placeholder="Address Line 2">
- </div>
- <div class="row">
- <div class="col col-4">
- <input type="text" class="input" placeholder="City">
- </div>
- <div class="col col-4">
- <input type="text" class="input" placeholder="State">
- </div>
- <div class="col col-4">
- <input type="text" class="input" placeholder="Zip">
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <div class="row">
- <div class="col col-3">
- <label class="block">Other Details</label>
- </div>
- <div class="col col-9">
- <div class="row">
- <div class="col col-6">
- <label class="choice"><input type="checkbox"> Is this item a gift?</label>
- </div>
- <div class="col col-6">
- <label class="choice"><input type="checkbox"> Create an Account</label>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <div class="row">
- <div class="col col-9 prefix-3">
- <button class="button primary">Proceed to Checkout</button>
- </div>
- </div>
- </div>
-</form>
-
-
-
-form .form-group {
- padding: 20px;
- background: rgba($black, 0.05);
- box-shadow: 0 1px 1px rgba($white, 0.5), inset 0 1px 2px rgba($black, 0.05);
- @include border-radius();
-}
-
-
-
-<form>
- <header class="form-header text-center">
- <h2>Sign In</h2>
- <p>This is an example sign in form that features a reset password link, remember me and create account button.</p>
- </header>
- <div class="form-group">
- <label for="input-username" class="hide">Username</label>
- <input type="text" class="input" id="input-username" placeholder="Username">
- </div>
- <div class="form-group">
- <label for="input-password" class="hide">Password</label>
- <input type="password" class="input" id="input-password" placeholder="Password">
- </div>
- <div class="form-group">
- <div class="input-group inline">
- <label class="checkbox"><input type="checkbox"> Remember Me</label>
- <p class="note float-right"><a href="#">Forgotten your password?</a></p>
- </div>
- </div>
- <footer class="form-action text-center">
- <div class="input-group inline">
- <button class="button primary">Sign In</button>
- <span class="note input-align"><em>or</em></span>
- <button class="button default">Create Account</button>
- </div>
- </footer>
-</form>
-
-
-
-form {
- max-width: 400px;
- margin-left: auto;
- margin-right: auto;
- background: $white;
- background-clip: padding-box;
- border: 3px solid rgba($black, 0.1);
- @include border-radius();
-}
-form .form-header,
-form .form-group,
-form .form-action {
- margin: 0;
- padding: 20px;
-}
-form .form-group,
-form .form-action {
- border-top: 1px solid rgba($black, 0.1);
-}
-
-
- Examples are a new feature and are still being developed. So, things might not be working perfectly yet.
-Examples are a new feature and are still being developed. So, things might not be working perfectly yet.
-
-<form>
- <header class="form-header">
- <h2>Contact Us</h2>
- <p>This is an example contact form that might appear on a design agencies website. It features a form header and footer along with required fields and some notes.</p>
- </header>
- <div class="form-group">
- <label for="input-username">Your Name <span class="req">*</span></label>
- <div class="row">
- <div class="col col-6">
- <input type="text" class="input" placeholder="First Name" required>
- </div>
- <div class="col col-6">
- <input type="text" class="input" placeholder="Last Name" required>
- </div>
- </div>
- </div>
- <div class="form-group">
- <label>Email Address <span class="req">*</span></label>
- <p class="note">Your email will not be shared with anyone.</p>
- <input type="email" class="input" placeholder="example@gmail.com" required>
- </div>
- <div class="form-group">
- <label>What are you interested in? <span class="req">*</span></label>
- <select class="input" required>
- <option disabled selected>Select One...</option>
- <option>Web Design</option>
- <option>Development</option>
- <option>Content Creation</option>
- <option>Search Engine Stuff</option>
- </select>
- </div>
- <div class="form-group">
- <label>Your Message</label>
- <textarea class="input" rows="4"></textarea>
- </div>
- <footer class="form-action">
- <button class="button green">Submit Form</button>
- <div class="note input-align float-right">
- <p><em>* Required fields</em></p>
- </div>
- </footer>
-</form>
-
-
-
-form {
- max-width: 600px;
- margin-left: auto;
- margin-right: auto;
- background: $white;
- background-clip: padding-box;
- border: 1px solid rgba($black, 0.1);
- @include box-shadow(0 1px 6px rgba($black, 0.1));
- @include border-radius();
-}
-form .form-group {
- padding: 0 20px;
-}
-form .form-header {
- margin-top: -1px;
- margin-left: -1px;
- margin-right: -1px;
- padding: 20px;
- text-shadow: 0 1px 1px rgba($black, 0.1);
- background: $blue;
- border-width: 1px 1px 0 1px;
- border-style: solid;
- border-color: rgba($black, 0.1);
- @include linear-gradient(top, $blue, $blue-darker);
- @include border-radius-top();
-
- h2 {
- color: $white;
- }
- p {
- color: rgba($white, 0.75);
- }
-}
-form .form-action {
- padding: 20px;
- background: $blue-pale;
- border-top: 1px solid rgba($black, 0.1);
- @include border-radius-bottom();
-}
-
-
-
-<form>
- <div class="form-group">
- <div class="row">
- <div class="col col-3">
- <label class="block">Shirt Details</label>
- <p class="note">Select the shirt details you'd like to purchase.</p>
- </div>
- <div class="col col-9">
-
- <div class="row">
- <div class="col col-3">
- <label class="sub block text-right" for="shirt-type">Shirt Type</label>
- </div>
- <div class="col col-9">
- <select class="input" id="shirt-type">
- <option selected></option>
- <option>T-Shirt</option>
- <option>Baseball T-Shirt</option>
- <option>Tank Shirt</option>
- </select>
- </div>
- </div>
- <div class="row">
- <div class="col col-3">
- <label class="sub block text-right" for="shirt-size">Shirt Size</label>
- </div>
- <div class="col col-9">
- <select class="input" id="shirt-size">
- <option selected></option>
- <option>X-Small</option>
- <option>Small</option>
- <option>Medium</option>
- <option>Large</option>
- <option>X-Large</option>
- </select>
- </div>
- </div>
- <div class="row">
- <div class="col col-3">
- <label class="sub block text-right" for="shirt-color">Shirt Color</label>
- </div>
- <div class="col col-9">
- <select class="input" id="shirt-color">
- <option selected></option>
- <option>Blue</option>
- <option>Red</option>
- <option>Green</option>
- <option>Black</option>
- </select>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <div class="row">
- <div class="col col-3">
- <label>Your Details</label>
- <p class="note">We need to know some stuff about you.</p>
- </div>
- <div class="col col-9">
- <div class="input-group">
- <label class="sub">Full Name</label>
- <div class="row">
- <div class="col col-6">
- <input type="text" class="input" placeholder="First Name">
- </div>
- <div class="col col-6">
- <input type="text" class="input" placeholder="Last Name">
- </div>
- </div>
- </div>
- <div class="input-group">
- <label class="sub" for="input-email">Email Address</label>
- <input type="email" class="input" id="input-email" placeholder="example@gmail.com">
- </div>
- <div class="input-group">
- <label class="sub">Shipping Address</label>
- <input type="text" class="input" placeholder="Street Address">
- </div>
- <div class="input-group">
- <input type="text" class="input" placeholder="Address Line 2">
- </div>
- <div class="row">
- <div class="col col-4">
- <input type="text" class="input" placeholder="City">
- </div>
- <div class="col col-4">
- <input type="text" class="input" placeholder="State">
- </div>
- <div class="col col-4">
- <input type="text" class="input" placeholder="Zip">
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <div class="row">
- <div class="col col-3">
- <label class="block">Other Details</label>
- </div>
- <div class="col col-9">
- <div class="row">
- <div class="col col-6">
- <label class="choice"><input type="checkbox"> Is this item a gift?</label>
- </div>
- <div class="col col-6">
- <label class="choice"><input type="checkbox"> Create an Account</label>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <div class="form-group">
- <div class="row">
- <div class="col col-9 prefix-3">
- <button class="button primary">Proceed to Checkout</button>
- </div>
- </div>
- </div>
-</form>
-
-
-
-form .form-group {
- padding: 20px;
- background: rgba($black, 0.05);
- box-shadow: 0 1px 1px rgba($white, 0.5), inset 0 1px 2px rgba($black, 0.05);
- @include border-radius();
-}
-
-
-
-<form>
- <header class="form-header text-center">
- <h2>Sign In</h2>
- <p>This is an example sign in form that features a reset password link, remember me and create account button.</p>
- </header>
- <div class="form-group">
- <label for="input-username" class="hide">Username</label>
- <input type="text" class="input" id="input-username" placeholder="Username">
- </div>
- <div class="form-group">
- <label for="input-password" class="hide">Password</label>
- <input type="password" class="input" id="input-password" placeholder="Password">
- </div>
- <div class="form-group">
- <div class="input-group inline">
- <label class="checkbox"><input type="checkbox"> Remember Me</label>
- <p class="note float-right"><a href="#">Forgotten your password?</a></p>
- </div>
- </div>
- <footer class="form-action text-center">
- <div class="input-group inline">
- <button class="button primary">Sign In</button>
- <span class="note input-align"><em>or</em></span>
- <button class="button default">Create Account</button>
- </div>
- </footer>
-</form>
-
-
-
-form {
- max-width: 400px;
- margin-left: auto;
- margin-right: auto;
- background: $white;
- background-clip: padding-box;
- border: 3px solid rgba($black, 0.1);
- @include border-radius();
-}
-form .form-header,
-form .form-group,
-form .form-action {
- margin: 0;
- padding: 20px;
-}
-form .form-group,
-form .form-action {
- border-top: 1px solid rgba($black, 0.1);
-}
-
-
- Examples are a new feature and are still being developed. So, things might not be working perfectly yet.
-Examples are a new feature and are still being developed. So, things might not be working perfectly yet.
-