Intake form

by Brandon

HTML

<div class="fContainer">
  <div class="fItem cardSelect">

    <form>
      <div class="gridContainer">
        <div class="item-a">
          <p class="h3">Describe Service</p>
          <p class="instructionText">Please provide some preliminary information to view solutions</p>
          <div class="lightgreyLine"></div>
        </div>

        <div class="item-b">
          <label for="instanceType">What type of instance do you require?<span class="required">*</span></label>
          <select name="instanceType" id="instanceType">
            <option value="default" selected="selected">Select</option>
            <option value="enterprise">Enterprise</option>
            <option value="dedicated">Dedicated</option>
          </select>
        </div>

        <div class="item-c">
          <label for="accessibilityReq">What are the accessibility requirements of your application?<span class="required">*</span></label>
          <select name="accessibilityReq" id="accessibilityReq">
            <option value="default" selected="selected">Select</option>
            <option value="niprnet">NIPRnet Only</option>
            <option value="internet">Internet</option>
          </select>
        </div>

        <div class="item-d">
          <label for="useDesc">Please provide a brief description of your intended use of ServiceNow.<span class="required">*</span></label>
          <textarea name="useDesc" id="useDesc" placeholder="100 Char"></textarea>
        </div>

        <!--<div class="item-e">
          <label for="enhancedUsers"># of Enhanced Users (Require PAAs)<span class="required">*</span></label>
          <input type="text" name="enhancedUsers" id="enhancedUsers" />
        </div>-->


        <div class="item-f">
          <label for="impactLevel">What impact level (IL) is your data?<span class="required">*</span></label>
          <select name="impactLevel" id="impactLevel">
            <option value="default" selected="selected">Select</option>
      ...

CSS

.customCard {
  margin: -20px 0 0 0px;
  min-width: 260px;
  font-size: 12px;
   !important;
}

.h3 {
  margin-top: 0;
}

.lightgreyLine {
  background: #EDEEF4;
  display: block;
  width: 120%;
  height: 2px;
  margin: 20px -10%;
}

button.btn.btn-default {
  background: #768395;
  color: white;
  font-size: 20px;
  padding: 4px 7px 0px 9px;
}

.ntafont {
  font-size: 12px;
   !important;
  display: inline-flex;

}

.abc {
  align-items: top;
}

.input-group {
  width: 150px !important;
}


/* ---------------------- */

.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-1,
.container-fluid .col-sm-1,
.container-fluid .col-md-1,
.container-fluid .col-lg-1,
.container-fluid .col-xs-2,
.container-fluid .col-sm-2,
.container-fluid .col-md-2,
.container-fluid .col-lg-2,
.container-fluid .col-xs-3,
.container-fluid .col-sm-3,
.container-fluid .col-md-3,
.container-fluid .col-lg-3,
.container-fluid .col-xs-4,
.container-fluid .col-sm-4,
.container-fluid .col-md-4,
.container-fluid .col-lg-4,
.container-fluid .col-xs-5,
.container-fluid .col-sm-5,
.container-fluid .col-md-5,
.container-fluid .col-lg-5,
.container-fluid .col-xs-6,
.container-fluid .col-sm-6,
.container-fluid .col-md-6,
.container-fluid .col-lg-6,
.container-fluid .col-xs-7,
.container-fluid .col-sm-7,
.container-fluid .col-md-7,
.container-fluid .col-lg-7,
.container-fluid .col-xs-8,
.container-fluid .col-sm-8,
.container-fluid .col-md-8,
.container-fluid .col-lg-8,
.container-fluid .col-xs-9,
.container-fluid .col-sm-9,
.container-fluid .col-md-9,
.container-fluid .col-lg-9,
.container-fluid .col-xs-10,
.container-fluid .col-sm-10,
.container-fluid .col-md-10,
.container-fluid .col-lg-10,
.container-fluid .col-xs-11,
.container-fluid .col-sm-11,
.container-fluid .col-md-11,
.container-fluid .col-lg-11,
.container-fluid .col-xs-12,
.container-fluid .col-sm-12,
.container-fluid .col-md-12,
.container-fluid .col-lg-12 {
 ...