Skip to content

Instantly share code, notes, and snippets.

@joeydsmith
Created March 8, 2016 20:48
Show Gist options
  • Save joeydsmith/f99a6381c67fac65071f to your computer and use it in GitHub Desktop.
Save joeydsmith/f99a6381c67fac65071f to your computer and use it in GitHub Desktop.
<div class="loanApplication">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#personalInfo" aria-controls="home" role="tab" data-toggle="tab">Personal Info</a></li>
<li role="presentation"><a href="#propertyInfo" aria-controls="profile" role="tab" data-toggle="tab">Property Info</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="personalInfo">
<ul class="list-group">
<li class="list-group-item focus">
<div class="loanApplication__label">
<label>Full Name</label>
</div>
<div class="loanApplication__input">
<input name="fullName" type="text" class="form-control" />
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Date of Birth</label>
</div>
<div class="loanApplication__input">
<input name="dateOfBith" class="form-control inputDate" type="text"></input>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Education</label>
</div>
<div class="loanApplication__input">
<select name="education" class="form-control">
<option value="" selected disabled>Please select</option>
<option>Some high school, no diploma</option>
<option>High school graduate, diploma or the equivalent </option>
<option>Some college credit, no degree</option>
<option>Trade/technical/vocational training</option>
<option>Associate degree</option>
<option>Bachelor’s degree</option>
<option>Master’s degree</option>
<option>Professional degree</option>
<option>Doctorate degree</option>
</select>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Current Address</label>
</div>
<div class="loanApplication__input">
<input name="currentAddress" type="text" class="form-control" />
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Years at above address</label>
</div>
<div class="loanApplication__input">
<input name="yearsAtAddress" type="text" class="form-control" />
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Mailing Address (if different from above)</label>
</div>
<div class="loanApplication__input">
<div class="loanApplication__input">
<input name="mailingAddress" type="text" class="form-control" />
</div>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Marital Status</label>
</div>
<div class="loanApplication__input">
<select name="MaritalStatus" class="form-control">
<option value="" selected disabled>Please select</option>
<option>Single, never married</option>
<option>Married or domestic partnership</option>
<option>Widowed</option>
<option>Divorced</option>
<option>Separated</option>
</select>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Number of Dependents</label>
</div>
<div class="loanApplication__input">
<input name="numOfDependents" type="text" class="form-control" />
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Employment Status</label>
</div>
<div class="loanApplication__input">
<select name="employmentStatus" class="form-control">
<option value="" selected disabled>Please select</option>
<option>Employed for wages</option>
<option>Self-employed</option>
<option>Out of work and looking for work</option>
<option>Out of work but not currently looking for work</option>
<option>A homemaker</option>
<option>A student</option>
<option>Military</option>
<option>Retired</option>
<option>Unable to work</option>
</select>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Years at Current Employer</label>
</div>
<div class="loanApplication__input">
<input name="yearsAtEmployer" type="text" class="form-control" />
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Monthly employment income</label>
</div>
<div class="loanApplication__input">
<div class="loanApplication__input">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input name="monthlyIncome" type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Annual self-employment income</label>
</div>
<div class="loanApplication__input">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input name="annualIncome" type="text" class="form-control" />
</div>
</div>
</form>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Total value of asset</label>
</div>
<div class="loanApplication__input">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input name="valueOfAssets" type="text" class="form-control" />
</div>
</div>
</form>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Total value of liabilites</label>
</div>
<div class="loanApplication__input">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input name="valueOfLiabilities" type="text" class="form-control" />
</div>
</div>
</form>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Are you a U.S citizen?</label>
</div>
<div class="loanApplication__input">
<select name="citizen" class="form-control">
<option value="" selected disabled>Please select</option>
<option>Yes</option>
<option>No </option>
</select>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Social Security Number</label>
</div>
<div class="loanApplication__input">
<input name="socialSecurityNumber" class="form-control inputSSN" type="text"></input>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane" id="propertyInfo">
<ul class="list-group">
<li class="list-group-item focus">
<div class="loanApplication__label">
<label>Property Address</label>
</div>
<div class="loanApplication__input">
<input name="propertyAddress" type="text" class="form-control" />
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>How Much do you want to buy it for?</label>
</div>
<div class="loanApplication__input">
<div class="loanApplication__input">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input name="buyingAmount"type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Down Payment Amount</label>
</div>
<div class="loanApplication__input">
<div class="loanApplication__input">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input name="downPaymentAmount" type="text" class="form-control" />
</div>
</div>
</form>
</div>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Property Type</label>
</div>
<div class="loanApplication__input">
<select name="propertyType" class="form-control">
<option value="" selected disabled>Please select</option>
<option>Single Family Home</option>
<option>Property Type Here</option>
<option>Property Type Here</option>
</select>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
<li class="list-group-item">
<div class="loanApplication__label">
<label>Purpose of Loan</label>
</div>
<div class="loanApplication__input">
<select name="purposeOfLoan" class="form-control">
<option value="" selected disabled>Please select</option>
<option>Purchase</option>
<option>Purpose of loan here</option>
<option>Purpose of loan here</option>
</select>
</div>
<div class="loanApplication__info">
<i class="fa fa-info-circle"></i>
</div>
</li>
</ul>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment