generated from tanikair/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
323 lines (299 loc) · 18.8 KB
/
index.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
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/497e577645.js" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- CSS file -->
<link rel="stylesheet" href="assets/style.css">
<!-- Favicon -->
<link rel="icon" type="image/jpg" sizes="48x48" href="assets/images/red_hand_favicon.jpg">
<!-- Meta tags, kewywords, author for SEO -->
<meta name="description" content="The aim of Prevent is to stop people from becoming terrorists or supporting terrorism.">
<meta name="keywords" content="Prevent, radicalisation, terrorism">
<meta name="author" content="ShakaHacka">
<!-- Topic and Site Title -->
<title>Prevent</title>
</head>
<body>
<!--Nav-->
<!-- Nav bar styles with responsive expansion and fixed positioning as well as colours -->
<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
<!-- Sends user back to home page when clicked -->
<a href="/index.html" class="navbar-brand"><strong>Prevent</strong></a>
<!-- Toggle navigation for smaller devices -->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<!-- Toggle burger icon -->
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<!-- Site pages linked in nav bar -->
<ul class="navbar-nav w-100 d-flex justify-content-between">
<!-- Home page -->
<li class="active nav-item mr-2"><a class="nav-link" href="index.html">Home</a></li>
<!-- Programmes page -->
<li class="nav-item mr-2"><a class="nav-link" href="programmes.html">Programmes</a></li>
<!-- Counter Narrative page leading straight to downloadable document in seperate tab -->
<li class="nav-item mr-2"><a class="nav-link"
href="assets/Radicalisation-the-counter-narrative-and-identifying-the-tipping-point-government-response-Eighth-Report-26-17-Cm-9555.pdf"
target="_blank">Counter
Narrative</a></li>
<!-- Get involved page -->
<li class="nav-item mr-2"><a class="nav-link" href="getinvolved.html">Get Involved</a></li>
<!-- My story page -->
<li class="nav-item mr-2"><a class="nav-link" href="mystory.html">My Story</a></li>
<!-- Gallery page -->
<li class="nav-item mr-2"><a class="nav-link" href="gallery.html">Gallery</a></li>
</ul>
<!-- Sign up button and label -->
<label class="label-button-spacing">Sign up for the Prevent newsletter</label>
<a href="#" id="signup-button" class="btn btn-secondary" data-toggle="modal" data-target="#signupModal">Sign Up</a>
</div>
</nav>
<!-- Sign Up Modal -->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="signupModalLabel">Sign Up</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Sign up form inside modal popup -->
<form>
<div class="form-group">
<label for="first-name">First Name</label>
<input type="text" class="form-control" id="first-name"
placeholder="Enter your first name">
<div class="form-group">
<label for="last">Last Name</label>
<input type="text" class="form-control" id="last"
placeholder="Enter your last name">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email"
placeholder="Enter your email">
</div>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-secondary">Sign Up</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Background image in entrance of home page -->
<div class="container-fluid callout-container">
<div class="opaque-overlay"> </div>
<div class="row">
<div class="col-12">
<!-- Callout style introduction to page with title and brief text -->
<section class="callout jumbotron text-center">
<p> </p>
<h2 class="jumbotron-header">Prevent</h2>
<p class="lead">Prevent is about keeping people and communities safe from the threat of terrorism. It is one part of the government's overall counter-terrorism strategy, CONTEST.</p>
<p class="lead">The objectives of Prevent are: to tackle the ideological causes of terrorism, to intervene early to support people susceptible to radicalisation and to enable people who have already engaged in terrorism to disengage and rehabilitate.</p>
<!-- immediate assistance drop down button section -->
<div class="form-group">
<label for="immediate-assistance-button">I require immediate assistance</label>
<!-- button is added with boostrap -->
<button type="button" class="btn btn-danger" id="immediate-assistance-button">Help</button>
</div>
<div class="form-group" id="text-field-group" style="display: none;">
<p>If you do not work for a sector that falls under the Prevent duty, but you have a
concern
<!-- embedded link in local council -->
about an individual that you would like to share, please contact your <a href="https://www.gov.uk/guidance/making-a-referral-to-prevent">local council</a>
or
call the national police Prevent advice line on 0800 011 3764.
If you're deaf, hard of hearing or have a speech impairment, a police non-emergency
number is available as a text phone service on 18001 101.
</p>
</div>
</section>
</div>
</div>
</div>
<!-- Main content of home page -->
<div class="container-wrapper">
<div class="container quotes-container content-container">
<!-- quotes section -->
<section class="quotes">
<div class="row">
<div class="col-12 page-header">
<h3 class="text-uppercase">Quotes</h3>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="media">
<div class="d-none d-sm-block">
<img src="assets/images/image-sulaf-by-carole-alfarah.jpg" alt = "Nicola image" class="rounded-circle mr-3"
height=100 width=100>
</div>
<div class="media-body">
<blockquote class="blockquote">
<h5>"It was such a shock obviously when it happened. When people talk
about Rasheed they always say that he was the last person that
they ever would have thought would have gone down that path"</h5>
<p><em>Nicola, whose son Rasheed went to Syria to fight with Daesh and
was tragically killed months later</em></p>
</blockquote>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="media">
<div class="d-none d-sm-block">
<img src="assets/images/UNDP_Turkey_2021_mersin_innovation_center_182.jpeg" alt="Zainab image"
class="rounded-circle mr-3" height=100 width=100>
</div>
<div class="media-body">
<blockquote class="blockquote">
<h5>"Prevent called some Inman and they gave him some activities to my son and they
visit places. They are happy to do the activites and he get a big change"</h5>
<p><em>Zainab's son was referred to Prevent when teachers became concerned after he
drew
violent
images and Daesh logo's in class and admitted researching terrorism
online.</em></p>
</blockquote>
</div>
</div>
</div>
</section>
</div>
</div>
<!---features-->
<section class="features">
<div class="container features-container content-container">
<div class="row">
<div class="col-12 page-header">
<h3 class="text-uppercase">Our Stories</h3>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="features">
<h6><i class="fa-solid fa-book-open d-none d-sm-inline"> John's story</i></h6>
<p>John was often in trouble at school for low level disruption and felt he was being left behind. When a friend told him he was going to a right wing group meeting, John went along to support him. He was soon invited to join closed Facebook groups and started sharing extreme right wing posts on social media and attending rallies. After inviting a teacher along to an extremist rally he was referred to the Prevent programme by his college. He was appointed a specialist mentor (also known as an Intervention Provider) who helped increase Johns self-confidence and he realised he wanted to make some changes in his life. With this help and support he was able to move away from extremism. </p>
<!-- Link to my story page -->
<p><a class="btn btn-sm btn-secondary" href="mystory.html">For more stories...</a></p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="features">
<h6><i class="fa-solid fa-book-open d-none d-sm-inline"> Michael's story</i></h6>
<p>Micheal’s brother Thomas was a normal teenager who enjoyed going to the pub and worked as an electrician. He became interested in Islam at the age of 19 and gradually started to change. He insisted on using his own pans to cook and becoming angry at his mother or brother for watching TV and listening to music. He changed his name and his appearance and lost his apprenticeship after repeatedly expressing extremist views at work. He travelled abroad telling his mother he was going to study Arabic, but the following year called to say he had joined a terrorist group. Shortly after, he was killed which devastated his mother and brother.
</p>
<!-- Link to my story page -->
<p><a class="btn btn-sm btn-secondary" href="mystory.html">For more stories...</a></p>
</div>
</div>
<div class="col-12 d-md-none d-lg-block col-lg-4">
<div class="features">
<h6><i class="fa-solid fa-book-open d-none d-sm-inline"> Mustafa's story</i></h6>
<p>Mustafa was a follower of multiple radical clerics and expressed and promoted extreme views. He is now a spoken word artist working within the non-governmental organisation sector as a trainer, facilitator and creator of counter-extremism expertise.
</p>
<!-- Link to my story page -->
<p><a class="btn btn-sm btn-secondary" href="mystory.html">For more stories...</a></p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="text-center" style="background-color:#cccccc;">
<div class="container p-4">
<!-- Social Media contact links -->
<section class="mb-4">
<h6>Connect with us</h6>
<!-- Facebook styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #3b5998" href="https://en-gb.facebook.com/" target="_blank" role="button"><i class="fab fa-facebook-f"></i></a>
<!-- Twitter styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #55acee" href="https://x.com/?lang=en" target="_blank" role="button"><i class="fab fa-twitter"></i></a>
<!-- Instagram styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #ac2bac" href="https://www.instagram.com/" target="_blank" role="button"><i class="fab fa-instagram"></i></a>
<!-- Youtube styled link in footer -->
<a class="btn btn-primary btn-floating m-1" style="background-color: #dd4b39" href="https://www.youtube.com/watch?v=Otc2eaRY32s&t=25s&pp=ygUccHJldmVudCByYWRpY2FsaXNhdGlvbiB2aWRlbw%3D%3D" target="_blank" role="button"><i class="fab fa-youtube"></i></a>
</section>
<!-- signup section of footer with a form for easy access on any page. -->
<section class="">
<h6>Sign-up</h6>
<form>
<!-- bootstrap styles added to layout the footer features -->
<div class="row d-flex justify-content-center">
<div class="col-auto">
<!-- Sign up form part of the footer -->
<p class="pt-2">
<strong>Sign up for our newsletter</strong>
</p>
</div>
<div class="col-md-5 col-12">
<div class="form-outline mb-4">
<input type="email" id="form5Example2" class="form-control">
<label class="form-label" for="form5Example2">Email address</label>
</div>
</div>
<!-- Signup submit button -->
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-4">Subscribe</button>
</div>
</div>
</form>
</section>
<!-- signup section of the footer, adding another accessible option on every page to easily sign up for more information -->
<section class="mb-4">
<h6>Keep informed</h6>
<p>If you would like to keep informed of all of our activities and latest advice in the combatting of radicalisation then sign up to our newsletter for all of your information.</p>
</section>
</div>
</footer>
<!-- modal section for signup -->
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- javascript links -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- script for field entry -->
<script>
document.getElementById('immediate-assistance-button').addEventListener('click', function () {
var textFieldGroup = document.getElementById('text-field-group');
if (textFieldGroup.style.display === 'none') {
textFieldGroup.style.display = 'block';
} else {
textFieldGroup.style.display = 'none';
}
});
</script>
</body>
</html>