Added assets and fixed the membership form
This commit is contained in:
@@ -3,21 +3,42 @@
|
||||
|
||||
{% block pagetitle %}
|
||||
<title>Stonehedge Community Homeowners Association</title>
|
||||
<style type="text/css">
|
||||
.hero-section {
|
||||
background: url({% static 'images/header.gif' %});
|
||||
height: 60vh;
|
||||
display: flex;
|
||||
background-repeat:no-repeat;
|
||||
background-position: center center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="py-5 bg-success bg-opacity-10">
|
||||
|
||||
<div class="container py-5">
|
||||
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8 mb-4 mb-lg-0">
|
||||
<h1 class="display-4 fw-bold mb-3">Welcome to Stonehedge Community Homeowners Association</h1>
|
||||
|
||||
<h1 class="display-4 fw-bold mb-3">Welcome to Stonehedge Community Homeowners Association</h1>
|
||||
<p class="lead mb-4">A premier community dedicated to maintaining beautiful homes, safe neighborhoods, and a high quality of life for all residents.</p>
|
||||
<a href="{% url 'about_us2' %}" class="btn btn-success btn-lg px-4">Learn More</a>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<img src='{% static "images/bricks.jpg" %}' alt="Stonehedge Community Homeowners Association" class="img-fluid rounded-circle shadow">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="col-lg-4">
|
||||
<img src="{% static 'images/header.gif' %}" alt="Stonehedge Community Homeowners Association" class="img-fluid rounded-circle shadow">
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -74,7 +74,8 @@
|
||||
<h2 class="h4 mb-0">New Member Information</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="membershipForm" class="needs-validation" novalidate>
|
||||
<form id="membershipForm" method="POST" action='{% url "membership_form2" %}' class="needs-validation" novalidate>
|
||||
{% csrf_token %}
|
||||
<!-- Household Information -->
|
||||
<fieldset class="mb-4">
|
||||
<legend class="h5 text-success border-bottom pb-2">Household Information</legend>
|
||||
@@ -83,30 +84,27 @@
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-6">
|
||||
<label for="streetAddress" class="form-label">Street Address*</label>
|
||||
<input type="text" class="form-control" id="streetAddress" required>
|
||||
<input type="text" class="form-control" id="streetAddress" name="streetAddress" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide your street address.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="unit" class="form-label">Unit/Apt #</label>
|
||||
<input type="text" class="form-control" id="unit">
|
||||
<input type="text" class="form-control" id="unit" name="unit">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="city" class="form-label">City*</label>
|
||||
<input type="text" class="form-control" id="city" required>
|
||||
<input type="text" class="form-control" id="city" name="city" value="Wheaton" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide your city.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="state" class="form-label">State*</label>
|
||||
<select class="form-select" id="state" required>
|
||||
<select class="form-select" id="state" name="state" value="Illinois" required>
|
||||
<option value="" selected disabled>Choose...</option>
|
||||
<option>Alabama</option>
|
||||
<option>Alaska</option>
|
||||
<!-- Add all states -->
|
||||
<option>Wyoming</option>
|
||||
<option>IL</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select your state.
|
||||
@@ -114,7 +112,7 @@
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="zipCode" class="form-label">ZIP Code*</label>
|
||||
<input type="text" class="form-control" id="zipCode" required>
|
||||
<input type="text" class="form-control" id="zipCode" value="zipCode" value="60189" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide your ZIP code.
|
||||
</div>
|
||||
@@ -128,28 +126,28 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="firstName1" class="form-label">First Name*</label>
|
||||
<input type="text" class="form-control" id="firstName1" required>
|
||||
<input type="text" class="form-control" id="firstName1" name="firstName1" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide first name.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="lastName1" class="form-label">Last Name*</label>
|
||||
<input type="text" class="form-control" id="lastName1" required>
|
||||
<input type="text" class="form-control" id="lastName1" name="lastName1" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide last name.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email1" class="form-label">Email*</label>
|
||||
<input type="email" class="form-control" id="email1" required>
|
||||
<input type="email" class="form-control" id="email1" name="email1" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid email.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone1" class="form-label">Phone*</label>
|
||||
<input type="tel" class="form-control" id="phone1" required>
|
||||
<input type="tel" class="form-control" id="phone1" name="phone1" required>
|
||||
<div class="invalid-feedback">
|
||||
Please provide phone number.
|
||||
</div>
|
||||
@@ -174,19 +172,19 @@
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="firstName2" class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" id="firstName2">
|
||||
<input type="text" class="form-control" id="firstName2" name="firstName2">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="lastName2" class="form-label">Last Name</label>
|
||||
<input type="text" class="form-control" id="lastName2">
|
||||
<input type="text" class="form-control" id="lastName2" name="lastName2">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="email2" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="email2">
|
||||
<input type="email" class="form-control" id="email2" name="email2">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="phone2" class="form-label">Phone</label>
|
||||
<input type="tel" class="form-control" id="phone2">
|
||||
<input type="tel" class="form-control" id="phone2" name="phone2">
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
@@ -199,50 +197,82 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="socialCommittee">
|
||||
<label class="form-check-label" for="socialCommittee">
|
||||
Social & Events Committee
|
||||
<input class="form-check-input" type="checkbox" id="block_captain" for="block_captain" name="block_captain">
|
||||
<label class="form-check-label" id="block_captain">
|
||||
BlockCaptain
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="landscapeCommittee">
|
||||
<label class="form-check-label" for="landscapeCommittee">
|
||||
Landscape & Maintenance Committee
|
||||
<input class="form-check-input" type="checkbox" id="coordinator" for="coordinator" name="coordinator">
|
||||
<label class="form-check-label" id="coordinator">
|
||||
Coordinator
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="safetyCommittee">
|
||||
<label class="form-check-label" for="safetyCommittee">
|
||||
Safety & Neighborhood Watch
|
||||
<input class="form-check-input" type="checkbox" id="egg_hunt" for="egg_hunt" name="egg_hunt">
|
||||
<label class="form-check-label" id="egg_hunt">
|
||||
Easter Egg Hunt
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="spring_garage_sale" for="spring_garage_sale" name="spring_garage_sale">
|
||||
<label class="form-check-label" id="spring_garage_sale">
|
||||
Spring Garage Sale
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="golf_outing" for="golf_outing" name="golf_outing">
|
||||
<label class="form-check-label" id="golf_outing">
|
||||
Golf Outing
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="ice_cream_social" for="ice_cream_social" name="ice_cream_social">
|
||||
<label class="form-check-label" id="ice_cream_social">
|
||||
Ice Creame Social
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="architecturalCommittee">
|
||||
<label class="form-check-label" for="architecturalCommittee">
|
||||
Architectural Review Committee
|
||||
<input class="form-check-input" type="checkbox" id="fall_garage_sale" for="fall_garage_sale" name="fall_garage_sale">
|
||||
<label class="form-check-label" id="fall_garage_sale">
|
||||
Fall Garage Sale
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="communicationsCommittee">
|
||||
<label class="form-check-label" for="communicationsCommittee">
|
||||
Communications Committee
|
||||
<input class="form-check-input" type="checkbox" id="halloween_party" for="halloween_party" name="halloween_party">
|
||||
<label class="form-check-label" id="halloween_party">
|
||||
Halloween Party
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="welcomingCommittee">
|
||||
<label class="form-check-label" for="welcomingCommittee">
|
||||
Welcoming Committee
|
||||
<input class="form-check-input" type="checkbox" id="santa_visit" for="santa_visit" name="santa_visit">
|
||||
<label class="form-check-label" id="santa_visit">
|
||||
Santa Visits
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="civic_affair" for="civic_affair" name="civic_affair">
|
||||
<label class="form-check-label" id="civic_affair">
|
||||
Civic Affairs Journalist
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="phone_directory" for="phone_directory" name="phone_directory">
|
||||
<label class="form-check-label" id="phone_directory">
|
||||
Annual Phone Director
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="no_preference" for="no_preference" name="no_preference">
|
||||
<label class="form-check-label" id="no_preference">
|
||||
No Preference
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label for="otherCommitteeInterest" class="form-label">Other interests or skills you'd like to contribute:</label>
|
||||
<textarea class="form-control" id="otherCommitteeInterest" rows="2"></textarea>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<!-- Services Section -->
|
||||
@@ -253,44 +283,54 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="babysitting">
|
||||
<input class="form-check-input" type="checkbox" id="babysitting" for="babysitting" name="babysitting">
|
||||
<label class="form-check-label" for="babysitting">
|
||||
Babysitting
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="lawnMowing">
|
||||
<label class="form-check-label" for="lawnMowing">
|
||||
<input class="form-check-input" type="checkbox" id="lawn_mowing" for="lawn_mowing" name="lawn_mowing">
|
||||
<label class="form-check-label" for="lawn_mowing">
|
||||
Lawn Mowing
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="snowShoveling">
|
||||
<label class="form-check-label" for="snowShoveling">
|
||||
<input class="form-check-input" type="checkbox" id="snow_shoveling" for="snow_shoveling" name="snow_shoveling">
|
||||
<label class="form-check-label" for="snow_shoveling">
|
||||
Snow Shoveling
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="leaf_raking" for="leaf_raking" name="leaf_raking">
|
||||
<label class="form-check-label" for="leaf_raking">
|
||||
Lead Raking
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="houseSitting">
|
||||
<label class="form-check-label" for="houseSitting">
|
||||
<input class="form-check-input" type="checkbox" id="house_sitting" for="house_sitting" name="house_sitting">
|
||||
<label class="form-check-label" for="house_sitting">
|
||||
House Sitting
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="petCare">
|
||||
<label class="form-check-label" for="petCare">
|
||||
Pet Care
|
||||
<input class="form-check-input" type="checkbox" id="petsitting" for="petsitting" name="petsitting">
|
||||
<label class="form-check-label" for="petsitting">
|
||||
Pet Sitting
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check mb-2">
|
||||
<input class="form-check-input" type="checkbox" id="otherService">
|
||||
<label class="form-check-label" for="otherService">
|
||||
<input class="form-check-input" type="checkbox" id="other" for="other" name="other">
|
||||
<label class="form-check-label" for="other">
|
||||
Other (please specify)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<label for="other_desc" class="form-label">Other interests or skills you'd like to contribute:</label>
|
||||
<textarea class="form-control" id="other_desc" for="other_desc" name="other_desc" rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3" id="otherServiceSpecify" style="display: none;">
|
||||
@@ -313,6 +353,9 @@
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
|
||||
{% if captchaForm %}
|
||||
{{ captchaForm }}
|
||||
{% endif %}
|
||||
<button class="btn btn-outline-secondary me-md-2" type="reset">Reset Form</button>
|
||||
<button class="btn btn-success" type="submit">Submit Membership</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user