Select the shirt details you'd like to purchase.

We need to know some stuff about you.


<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();
}