Scribd
Upload
6 views15 pages

Index

The document outlines the structure and design of a home loan application webpage for NLB Bank. It includes sections for personal information, loan details, property details, and a progress bar to guide users through the application process. The page is styled with CSS variables for colors and includes form elements for user input.

Uploaded by

Aaditya Saxena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views15 pages

Index

The document outlines the structure and design of a home loan application webpage for NLB Bank. It includes sections for personal information, loan details, property details, and a progress bar to guide users through the application process. The page is styled with CSS variables for colors and includes form elements for user input.

Uploaded by

Aaditya Saxena
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NLB Bank - Home Loan Application</title>
<style>
:root {
--primary-color: #003366;
--secondary-color: #0066cc;
--accent-color: #00aaff;
--light-gray: #f5f7fa;
--medium-gray: #e1e5eb;
--dark-gray: #67757c;
--success-color: #28a745;
--error-color: #dc3545;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background-color: #f9fbfd;
color: #333;
line-height: 1.6;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

header {
background-color: var(--primary-color);
padding: 15px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
color: white;
font-size: 24px;
font-weight: bold;
}

.progress-container {
margin: 30px 0;
}

.progress-bar {
display: flex;
justify-content: space-between;
position: relative;
margin-bottom: 30px;
}

.progress-bar::before {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 3px;
background-color: var(--medium-gray);
z-index: 1;
}

.progress-bar-fill {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 3px;
background-color: var(--secondary-color);
z-index: 2;
transition: width 0.3s ease;
width: 25%; /* Set initially to 25% for first step */
}

.step {
width: 35px;
height: 35px;
border-radius: 50%;
background-color: white;
border: 3px solid var(--medium-gray);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
position: relative;
z-index: 3;
}

.step.active {
border-color: var(--secondary-color);
background-color: var(--secondary-color);
color: white;
}

.step.completed {
border-color: var(--secondary-color);
background-color: var(--secondary-color);
color: white;
}

.step-label {
position: absolute;
top: 45px;
white-space: nowrap;
font-size: 14px;
color: var(--dark-gray);
}

.step.active .step-label,
.step.completed .step-label {
color: var(--secondary-color);
font-weight: 600;
}

.card {
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
padding: 25px;
margin-bottom: 25px;
}

.instruction-card {
background-color: #f0f7ff;
border-left: 4px solid var(--secondary-color);
}

.info-card {
display: flex;
justify-content: space-between;
background-color: #f7f9fc;
padding: 20px;
}

.info-section {
flex: 1;
padding: 0 15px;
}

.info-section h3 {
font-size: 16px;
color: var(--dark-gray);
margin-bottom: 10px;
font-weight: 600;
}

.info-item {
display: flex;
margin-bottom: 8px;
}

.info-label {
flex: 0 0 40%;
color: var(--dark-gray);
font-size: 14px;
}

.info-value {
flex: 0 0 60%;
font-weight: 500;
font-size: 14px;
}

.form-title {
margin-bottom: 20px;
color: var(--primary-color);
font-size: 24px;
}

.form-section {
margin-bottom: 30px;
}

.form-section-title {
font-size: 18px;
margin-bottom: 15px;
color: var(--primary-color);
font-weight: 600;
}

.form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px 15px;
}

.form-group {
flex: 1 0 calc(50% - 20px);
margin: 0 10px 15px;
}

.form-group.full-width {
flex: 1 0 calc(100% - 20px);
}

label {
display: block;
margin-bottom: 8px;
font-weight: 500;
color: #495057;
}

input, select, textarea {


width: 100%;
padding: 12px 15px;
border: 1px solid var(--medium-gray);
border-radius: 6px;
font-size: 16px;
transition: border 0.2s ease;
}

input:focus, select:focus, textarea:focus {


outline: none;
border-color: var(--secondary-color);
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.radio-group {
display: flex;
gap: 20px;
}

.radio-option {
display: flex;
align-items: center;
}

.radio-option input {
width: auto;
margin-right: 8px;
}

.buttons {
display: flex;
justify-content: space-between;
margin-top: 30px;
}

.btn {
padding: 12px 25px;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-primary {
background-color: var(--secondary-color);
color: white;
}

.btn-primary:hover {
background-color: var(--primary-color);
}

.btn-outline {
background-color: transparent;
border: 1px solid var(--dark-gray);
color: var(--dark-gray);
}

.btn-outline:hover {
background-color: var(--light-gray);
}

.required::after {
content: '*';
color: var(--error-color);
margin-left: 4px;
}

/* Tab content display control */


.tab-content {
display: none;
}

.tab-content.active {
display: block;
}

/* Hide all forms except the first one initially */


#loanDetailsForm {
display: block;
}

#propertyDetailsForm, #employmentDetailsForm, #documentUploadForm {


display: none;
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">NLB BANK</div>
<div class="application-id">Application ID: HLA-2025042501</div>
</div>
</header>

<div class="container">
<div class="progress-container">
<div class="progress-bar">
<div class="progress-bar-fill"></div>
<div class="step active" id="step1">
1
<span class="step-label">Loan Details</span>
</div>
<div class="step" id="step2">
2
<span class="step-label">Property Details</span>
</div>
<div class="step" id="step3">
3
<span class="step-label">Employment & Income</span>
</div>
<div class="step" id="step4">
4
<span class="step-label">Documents</span>
</div>
</div>
</div>

<!-- Personal Information Card (Read-only) -->


<div class="card info-card">
<div class="info-section">
<h3>Personal Information</h3>
<div class="info-item">
<div class="info-label">Full Name:</div>
<div class="info-value">Alex Johnson</div>
</div>
<div class="info-item">
<div class="info-label">Date of Birth:</div>
<div class="info-value">15 Jun 1985</div>
</div>
<div class="info-item">
<div class="info-label">National ID:</div>
<div class="info-value">****-****-5678</div>
</div>
</div>

<div class="info-section">
<h3>Contact Information</h3>
<div class="info-item">
<div class="info-label">Email:</div>
<div class="info-value">[email protected]</div>
</div>
<div class="info-item">
<div class="info-label">Phone:</div>
<div class="info-value">+1 (555) 123-4567</div>
</div>
<div class="info-item">
<div class="info-label">Current Address:</div>
<div class="info-value">123 Main St, Anytown, ST 12345</div>
</div>
</div>
</div>

<!-- Loan Details Form (First Step - Active by default) -->


<div class="tab-content active" id="loanDetailsForm">
<div class="card instruction-card">
<h3>Step 1: Loan Details</h3>
<p>Please provide the details of the home loan you wish to apply
for. The loan amount, term, and purpose will help us determine the best options
for you. Fields marked with an asterisk (*) are required.</p>
</div>

<div class="card">
<h2 class="form-title">Loan Details</h2>

<div class="form-section">
<div class="form-row">
<div class="form-group">
<label for="loanAmount" class="required">Loan Amount
($)</label>
<input type="number" id="loanAmount" min="10000"
placeholder="Enter loan amount" required>
</div>
<div class="form-group">
<label for="loanTerm" class="required">Loan Term
(Years)</label>
<select id="loanTerm" required>
<option value="">Select loan term</option>
<option value="5">5 years</option>
<option value="10">10 years</option>
<option value="15">15 years</option>
<option value="20">20 years</option>
<option value="25">25 years</option>
<option value="30">30 years</option>
</select>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="loanPurpose" class="required">Loan
Purpose</label>
<select id="loanPurpose" required>
<option value="">Select purpose</option>
<option value="purchase">Purchase a new
home</option>
<option value="refinance">Refinance existing
mortgage</option>
<option value="renovation">Home
renovation</option>
<option value="construction">New
construction</option>
</select>
</div>
<div class="form-group">
<label for="propertyValue"
class="required">Estimated Property Value ($)</label>
<input type="number" id="propertyValue"
placeholder="Enter property value" required>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="downPayment" class="required">Down
Payment ($)</label>
<input type="number" id="downPayment"
placeholder="Enter down payment amount" required>
</div>
<div class="form-group">
<label>Down Payment (%)</label>
<input type="text" id="downPaymentPercentage"
readonly>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="interestType" class="required">Interest
Rate Type</label>
<select id="interestType" required>
<option value="">Select interest rate
type</option>
<option value="fixed">Fixed Rate</option>
<option value="variable">Variable Rate</option>
<option value="hybrid">Hybrid (Fixed then
Variable)</option>
</select>
</div>
<div class="form-group">
<label for="firstTimeBuyer">First-Time Home Buyer?
</label>
<div class="radio-group">
<div class="radio-option">
<input type="radio" id="firstTimeBuyerYes"
name="firstTimeBuyer" value="yes">
<label for="firstTimeBuyerYes">Yes</label>
</div>
<div class="radio-option">
<input type="radio" id="firstTimeBuyerNo"
name="firstTimeBuyer" value="no">
<label for="firstTimeBuyerNo">No</label>
</div>
</div>
</div>
</div>

<div class="form-row">
<div class="form-group full-width">
<label for="additionalComments">Additional Comments
or Special Requirements</label>
<textarea id="additionalComments" rows="4"
placeholder="Any special requirements or additional information about your loan
request..."></textarea>
</div>
</div>
</div>

<div class="buttons">
<button type="button" class="btn btn-outline"
disabled>Previous</button>
<button type="button" class="btn btn-primary"
onclick="showTab('propertyDetailsForm', 2)">Next: Property Details</button>
</div>
</div>
</div>

<!-- Property Details Form (Second Step) -->


<div class="tab-content" id="propertyDetailsForm">
<div class="card instruction-card">
<h3>Step 2: Property Details</h3>
<p>Please provide information about the property you intend to
purchase or refinance. Complete property details help us assess the loan
eligibility and terms. Fields marked with an asterisk (*) are required.</p>
</div>

<div class="card">
<h2 class="form-title">Property Details</h2>

<div class="form-section">
<div class="form-row">
<div class="form-group full-width">
<label for="propertyAddress"
class="required">Property Address</label>
<input type="text" id="propertyAddress"
placeholder="Enter complete property address" required>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="propertyCity"
class="required">City</label>
<input type="text" id="propertyCity"
placeholder="Enter city" required>
</div>
<div class="form-group">
<label for="propertyState"
class="required">State/Province</label>
<input type="text" id="propertyState"
placeholder="Enter state/province" required>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="propertyZip" class="required">ZIP/Postal
Code</label>
<input type="text" id="propertyZip"
placeholder="Enter ZIP/postal code" required>
</div>
<div class="form-group">
<label for="propertyCountry"
class="required">Country</label>
<input type="text" id="propertyCountry"
placeholder="Enter country" required>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="propertyType" class="required">Property
Type</label>
<select id="propertyType" required>
<option value="">Select property type</option>
<option value="singleFamily">Single-Family
Home</option>
<option value="multiFamily">Multi-Family
Home</option>
<option value="townhouse">Townhouse</option>
<option value="condo">Condominium</option>
<option value="coop">Co-operative</option>
<option value="manufactured">Manufactured
Home</option>
</select>
</div>
<div class="form-group">
<label for="occupancyType"
class="required">Occupancy Type</label>
<select id="occupancyType" required>
<option value="">Select occupancy type</option>
<option value="primaryResidence">Primary
Residence</option>
<option
value="secondaryResidence">Secondary/Vacation Home</option>
<option value="investment">Investment
Property</option>
</select>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="yearBuilt">Year Built</label>
<input type="number" id="yearBuilt"
placeholder="Enter year built" min="1800" max="2025">
</div>
<div class="form-group">
<label for="squareFootage">Square Footage</label>
<input type="number" id="squareFootage"
placeholder="Enter square footage">
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="bedrooms">Number of Bedrooms</label>
<select id="bedrooms">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6+">6+</option>
</select>
</div>
<div class="form-group">
<label for="bathrooms">Number of Bathrooms</label>
<select id="bathrooms">
<option value="">Select</option>
<option value="1">1</option>
<option value="1.5">1.5</option>
<option value="2">2</option>
<option value="2.5">2.5</option>
<option value="3">3</option>
<option value="3.5">3.5</option>
<option value="4+">4+</option>
</select>
</div>
</div>
</div>

<div class="buttons">
<button type="button" class="btn btn-outline"
onclick="showTab('loanDetailsForm', 1)">Previous</button>
<button type="button" class="btn btn-primary"
onclick="showTab('employmentDetailsForm', 3)">Next: Employment & Income</button>
</div>
</div>
</div>

<!-- Employment & Income Details Form (Third Step) -->


<div class="tab-content" id="employmentDetailsForm">
<div class="card instruction-card">
<h3>Step 3: Employment & Income Details</h3>
<p>Please provide information about your employment and income
sources. This information helps us determine your loan eligibility and repayment
capacity. Fields marked with an asterisk (*) are required.</p>
</div>

<div class="card">
<h2 class="form-title">Employment & Income Details</h2>

<div class="form-section">
<h3 class="form-section-title">Primary Employment</h3>

<div class="form-row">
<div class="form-group">
<label for="employmentStatus"
class="required">Employment Status</label>
<select id="employmentStatus" required>
<option value="">Select employment
status</option>
<option value="employed">Employed
Full-Time</option>
<option
value="selfEmployed">Self-Employed</option>
<option value="partTime">Employed
Part-Time</option>
<option value="retired">Retired</option>
<option value="unemployed">Not Currently
Employed</option>
</select>
</div>
<div class="form-group">
<label for="employerName" class="required">Employer
Name</label>
<input type="text" id="employerName"
placeholder="Enter employer name" required>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="jobTitle" class="required">Job
Title/Position</label>
<input type="text" id="jobTitle" placeholder="Enter
job title" required>
</div>
<div class="form-group">
<label for="yearsWithEmployer"
class="required">Years with Current Employer</label>
<input type="number" id="yearsWithEmployer"
placeholder="Years" min="0" step="0.1" required>
</div>
</div>

<div class="form-row">
<div class="form-group">
<label for="monthlyIncome" class="required">Gross
Monthly Income ($)</label>
<input type="number" id="monthlyIncome"
placeholder="Enter monthly income" required>
</div>
<div class="form-group">
<label for="incomeFrequency" class="required">Income
Frequency</label>
<select id="incomeFrequency" required>
<option value="">Select frequency</option>
<option value="weekly">Weekly</option>
<option value="biweekly">Bi-weekly</option>
<option value="monthly">Monthly</option>
<option value="quarterly">Quarterly</option>
<option value="annually">Annually</option>
</select>
</div>
</div>
</div>

<div class="form-section">
<h3 class="form-section-title">Additional Income Sources
(Optional)</h3>

<div class="form-row">
<div class="form-group">
<label for="additionalIncomeSource">Additional
Income Source</label>
<select id="additionalIncomeSource">
<option value="">Select if applicable</option>
<option value="partTime">Part-Time Job</option>
<option value="rental">Rental Income</option>
<option value="investment">Investment
Income</option>
<option value="alimony">Alimony/Child
Support</option>
<option
value="pension">Pension/Retirement</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group">
<label for="additionalIncomeAmount">Additional
Monthly Income ($)</label>
<input type="number" id="additionalIncomeAmount"
placeholder="Enter amount if applicable">
</div>
</div>
</div>

<div class="form-section">
<h3 class="form-section-title">Financial Obligations</h3>

<div class="form-row">
<div class="form-group">
<label for="monthlyDebtPayments"
class="required">Monthly Debt Payments ($)</label>
<input type="number" id="monthlyDebtPayments"
placeholder="Total of all monthly payments" required>
</div>
<div class="form-group">
<label for="existingMortgage">Existing Mortgage/Rent
Payment ($)</label>
<input type="number" id="existingMortgage"
placeholder="Enter current mortgage/rent payment">
</div>
</div>
</div>

<div class="buttons">
<button type="button" class="btn btn-outline"
onclick="showTab('propertyDetailsForm', 2)">Previous</button>
<button type="button" class="btn btn-primary"
onclick="showTab('documentUploadForm', 4)">Next: Upload Documents</button>
</div>
</div>
</div>
<!-- Document Upload Form (Fourth Step) -->
<div class="tab-content" id="documentUploadForm">
<div class="card instruction-card">
<h3>Step 4: Document Upload</h3>
<p>Please upload the required documents to support your loan
application. Clear, legible copies of all documents will help us process your
application faster. Accepted formats are PDF, JPG, and PNG.</p>
</div>

<div class="card">
<h2 class="form-title">Document Upload</h2>

<div class="form-section">
<div class="form-row">
<div class="form-group full-width">
<label for="identityProof" class="required">Identity
Proof (National ID/Passport/Driver's License)</label>
<input type="file" id="identityProof"
accept=".pdf,.jpg,.jpeg,.png" required>
</div>
</div>

<div class="form-row">
<div class="form-group full-width">
<label for="incomeProof" class="required">Income
Proof (Recent Pay Stubs/Tax Returns)</label>
<input type="file" id="incomeProof"
accept=".pdf,.jpg,.jpeg,.png" required>
</div>
</div>

<div class="form-row">
<div class="form-group full-width">
<label for="bankStatements" class="required">Bank
Statements (Last 3 months)</label>
<input type="file" id="bankStatements"
accept=".pdf,.jpg,.jpeg,.png" required>
</div>
</div>

<div class="form-row">
<div class="form-group full-width">
<label for="propertyDocuments">Property Documents
(If refinancing or available)</label>
<input type="file" id="propertyDocuments"
accept=".pdf,.jpg,.jpeg,.png">
</div>
</div>

<div class="form-row">
<div class="form-group full-width">
<label for="additionalDocuments">Additional
Supporting Documents (Optional)</label>
<input type="file" id="additionalDocuments"
accept=".pdf,.jpg,.jpeg,.png" multiple>
</div>
</div>
</div>

<div class="form-section">
<h3 class="form-section-title">Terms & Conditions</h3>

<div class="form-row">
<div class="form-group full-width">
<div class="checkbox-group">
<input type="checkbox" id="termsAccepted"
required>
<label for="termsAccepted" class="required">I
have read and agree to NLB Bank's terms and conditions for home loan
applications.</label>
</div>
</div>
</div>

<div class="form-row">
<div class="form-group full-width">
<div class="checkbox-group">
<input type="checkbox" id="dataConsent"
required>
<label for="dataConsent" class="required">I
consent to NLB Bank collecting, processing, and storing my personal data for the
purpose of evaluating my loan application.</label>
</div>
</div>
</div>
</div>

<div class="buttons">
<button type="button" class="btn btn-outline"
onclick="showTab('employmentDetailsForm', 3)">Previous</button>
<button type="submit" class="btn btn-primary">Submit
Application</button>
</div>
</div>
</div>
</div>

<script>
// Function to show the selected tab and update progress
function showTab(tabId, stepNumber) {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});

// Show the selected tab


document.getElementById(tabId).classList.add('active');

// Update progress bar and steps


document.querySelectorAll('.step').forEach(step => {
step.classList.remove('active');
step.classList.remove('completed');
});

// Set the current step as active


document.getElementById('step' +
stepNumber).classList.add('active');

// Set all previous steps as completed


for (let i = 1; i < stepNumber; i++) {
document.getElementById('step' + i).classList.add('completed');
}

// Update progress bar fill


const progressPercentage = (stepNumber - 1) * 33.33;
document.querySelector('.progress-bar-fill').style.width =
progressPercentage + '%';
// Scroll to top
window.scrollTo(0, 0);
}

// Calculate down payment percentage


document.getElementById('loanAmount').addEventListener('input',
calculateDownPaymentPercentage);
document.getElementById('propertyValue').addEventListener('input',
calculateDownPaymentPercentage);
document.getElementById('downPayment').addEventListener('input',
calculateDownPaymentPercentage);

function calculateDownPaymentPercentage() {
const propertyValue =
parseFloat(document.getElementById('propertyValue').value) || 0;
const downPayment =
parseFloat(document.getElementById('downPayment').value) || 0;

if (propertyValue > 0 && downPayment > 0) {


const percentage = (downPayment / propertyValue *
100).toFixed(2);
document.getElementById('downPaymentPercentage').value =
percentage + '%';
} else {
document.getElementById('downPaymentPercentage').value = '';
}
}

// Form validation
document.querySelector('.btn-
primary[type="submit"]').addEventListener('click', function(e) {
e.preventDefault();

// Perform validation here

// If validation passes, show success message


alert('Your home loan application has been submitted successfully!
We will review your application and contact you shortly.');
});
</script>
</body>
</html>

You might also like