-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapplication-process.html
262 lines (241 loc) · 12.4 KB
/
application-process.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application Process - Bar Harbor Police Department</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<style>
/* Add these styles in the head section */
.step-card {
background-color: var(--card-bg);
color: var(--text-color);
border: 1px solid var(--border-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
.dark-mode .step-card {
background-color: var(--dark-card-bg);
border-color: var(--dark-border-color);
}
.dark-mode .requirements-list li {
color: var(--dark-text-color);
}
.dark-mode .step-number {
background-color: var(--primary-color);
color: var(--dark-text-color);
}
.dark-mode .contact-section,
.dark-mode .intro-section {
background-color: var(--dark-bg);
color: var(--dark-text-color);
}
.dark-mode .hero-section {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
</head>
<body class="application-process-page">
<header class="header">
<nav class="main-nav">
<!-- Logo Section -->
<a href="index.html" class="logo-link">
<img src="images/logo.png" alt="Bar Harbor Police Department Logo" class="logo">
</a>
<div class="nav-wrapper">
<ul class="nav-links">
<li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
<li class="dropdown">
<a href="#"><i class="fas fa-building"></i> Divisions <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-content">
<li><a href="harbor-master-division.html"><i class="fas fa-ship"></i> Harbor Master</a></li>
<li><a href="bar-harbor-parking.html"><i class="fas fa-parking"></i> Parking Enforcement</a></li>
<li><a href="admin.html"><i class="fas fa-users"></i> Administrative Services</a></li>
<li><a href="animalcontrol.html"><i class="fas fa-paw"></i> Animal Control</a></li>
<li><a href="mentalhealth.html"><i class="fas fa-heart"></i> Mental Health Unit</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#"><i class="fas fa-hands-helping"></i> Programs <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-content">
<li><a href="good-morning-program.html"><i class="fas fa-sun"></i> Good Morning Program</a></li>
<li><a href="citizens-academy.html"><i class="fas fa-graduation-cap"></i> Citizens Academy</a></li>
<li><a href="community-outreach.html"><i class="fas fa-heart"></i> Community Outreach</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="active"><i class="fas fa-user-tie"></i> Recruitment <i class="fas fa-caret-down"></i></a>
<ul class="dropdown-content">
<li><a href="bhmdrec.html"><i class="fas fa-briefcase"></i> Career Opportunities</a></li>
<li><a href="application-process.html" class="active"><i class="fas fa-file-alt"></i> Application Process</a></li>
<li><a href="benefits.html"><i class="fas fa-medal"></i> Benefits & Salary</a></li>
<li><a href="academy-training.html"><i class="fas fa-chalkboard-teacher"></i> Academy Training</a></li>
</ul>
</li>
<li><a href="forms.html"><i class="fas fa-file-alt"></i> Forms</a></li>
<li><a href="faq.html"><i class="fas fa-question-circle"></i> FAQ</a></li>
<li><a href="events.html"><i class="fas fa-calendar-alt"></i> Events</a></li>
<li><a href="contact.html"><i class="fas fa-envelope"></i> Contact</a></li>
</ul>
</div>
<!-- Mobile Menu Button -->
<button class="mobile-menu-btn">
<i class="fas fa-bars"></i>
</button>
<!-- Dark Mode Toggle -->
<button class="dark-mode-toggle" aria-label="Toggle dark mode">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
</button>
</nav>
</header>
<main>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-content">
<h1>Become a Police Officer</h1>
<p>Join the Bar Harbor Mount Desert Police Department in serving our community</p>
</div>
</section>
<!-- Introduction Section -->
<section class="intro-section">
<div class="container">
<div class="intro-content">
<h2>Protecting Our Community Since 1896</h2>
<p>The Bar Harbor Mount Desert Police Department serves the communities of Bar Harbor and Mount Desert. Our law enforcement professionals help maintain one of the lowest violent crime rates for towns of this size, protecting approximately 5,000 year-round residents and millions of seasonal visitors to Acadia National Park.</p>
</div>
</div>
</section>
<!-- Application Steps -->
<section class="application-steps">
<div class="container">
<h2>Application Process</h2>
<div class="steps-grid">
<div class="step-card">
<div class="step-number">1</div>
<div class="step-content">
<h3>Basic Requirements</h3>
<ul class="requirements-list">
<li><i class="fas fa-graduation-cap"></i> High school diploma/GED</li>
<li><i class="fas fa-id-card"></i> Valid driver's license</li>
<li><i class="fas fa-university"></i> College credits (preferred)</li>
<li><i class="fas fa-shield-alt"></i> Law enforcement/military experience (preferred)</li>
</ul>
</div>
</div>
<div class="step-card">
<div class="step-number">2</div>
<div class="step-content">
<h3>Examinations</h3>
<ul class="requirements-list">
<li><i class="fas fa-file-alt"></i> Pass ALERT exam (minimum score: 40)</li>
<li><i class="fas fa-running"></i> Complete Physical Fitness Test</li>
<li><i class="fas fa-clipboard-check"></i> Submit verification with application</li>
</ul>
<div class="contact-info">
<p>Maine Criminal Justice Academy: <a href="tel:207-877-8000">207-877-8000</a></p>
</div>
</div>
</div>
<div class="step-card">
<div class="step-number">3</div>
<div class="step-content">
<h3>Interview & Background</h3>
<ul class="requirements-list">
<li><i class="fas fa-users"></i> Department panel interview</li>
<li><i class="fas fa-search"></i> Background investigation</li>
<li><i class="fas fa-chart-line"></i> Polygraph test</li>
</ul>
</div>
</div>
<div class="step-card">
<div class="step-number">4</div>
<div class="step-content">
<h3>Medical & Psychological</h3>
<ul class="requirements-list">
<li><i class="fas fa-heartbeat"></i> Medical examination</li>
<li><i class="fas fa-brain"></i> Psychological assessment</li>
<li><i class="fas fa-flask"></i> Drug screening</li>
</ul>
</div>
</div>
<div class="step-card">
<div class="step-number">5</div>
<div class="step-content">
<h3>Academy Training</h3>
<ul class="requirements-list">
<li><i class="fas fa-calendar-alt"></i> 18 weeks basic training</li>
<li><i class="fas fa-book"></i> Law enforcement curriculum</li>
<li><i class="fas fa-certificate"></i> Maine certification</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact-section">
<div class="container">
<h2>Ready to Apply?</h2>
<div class="contact-grid">
<div class="contact-info">
<h3>Contact Us</h3>
<p><i class="fas fa-phone"></i> <a href="tel:207-288-3391">207-288-3391</a></p>
<p><i class="fas fa-map-marker-alt"></i> 37 Firefly Lane, Bar Harbor, ME 04609</p>
</div>
<div class="cta-box">
<a href="#" class="btn btn-primary">Download Application</a>
<p>Submit completed applications to the address listed</p>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3>Emergency Services</h3>
<p><strong>Emergency:</strong> 911</p>
<p><strong>Non-Emergency:</strong> (207) 288-3391</p>
<p><strong>Dispatch:</strong> (207) 288-3391</p>
</div>
<div class="footer-section">
<h3>Department Location</h3>
<p><strong>Address:</strong></p>
<p>37 Firefly Lane</p>
<p>Bar Harbor, ME 04609</p>
<p><strong>Hours:</strong> 24/7</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="forms.html">Forms</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect With Us</h3>
<div class="social-links">
<a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
</div>
<div class="footer-buttons">
<a href="contact.html" class="footer-button">Contact Us</a>
<a href="forms.html" class="footer-button">Download Forms</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Bar Harbor Police Department. All Rights Reserved.</p>
</div>
</footer>
<!-- Scripts -->
<script src="darkmode.js"></script>
<script src="script.js"></script>
</body>
</html>