contact form

by Brandon

HTML

<div class="outerContainer" style="width:1082px;">
  <div class="fContainer">
    <div class="fItem">
      <div class="contactContainer">
        <div>
          <div class="h3">
            Contact Information
          </div>
          <div class="lText">
            We'll need some basic information about your organization and key points of contact.
          </div>
        </div>
        <div>
          <label for="reqFirstName" class="bold">Your First Name: <i class="redText"> *</i></label>
          <input type="text" id="reqFirstName" ng-model="c.reqFirstName" size="50">
        </div>

        <div>
          <label for="reqEmail" class="bold">Your E-mail: <i class="redText"> *</i></label>
          <input type="text" id="reqEmail" ng-model="c.reqEmail" size="50" placeholder="[email protected]">
        </div>

        <div>
          <label for="appName" class="bold">Application Name <i class="redText"> *</i></label>
          <input type="text" id="appName" ng-model="c.appName" size="50">
        </div>

        <div>
          <label for="echIIName" class="bold">Echelon II<i class="redText"> *</i></label>
          <input type="text" id="echIIName" ng-model="c.echIIName" size="50">
        </div>

        <div>
          <label for="primaryFirstName" class="bold">Primary POC First Name <i class="redText"> *</i></label>
          <input type="text" id="primaryFirstName" ng-model="c.primaryFirstName" size="50">
        </div>

        <div>
          <label for="primaryPOCPhone" class="bold">Primary POC Phone Number: <i class="redText"> *</i></label>
          <input type="text" id="primaryPOCPhone" ng-model="c.primaryPOCPhone" size="50" placeholder="1(757)555-1212">
        </div>

        <div>
          <label for="secondaryFirstName" class="bold">Secondary POC First Name <i class="redText"> *</i></label>
          <input type="text" id="secondaryFirstName" ng-model="c.secondaryFirstName" size="50">
        </div>

        <div>
         ...

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 {
 ...