generated from tanikair/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
207 lines (194 loc) · 11.9 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/497e577645.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="icon" type="image/png" sizes="48x48" href="../assets/images/red_hand_favicon.jpg">
<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">
<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>
<!-- copied in image styling from home page -->
<div class="container-fluid callout-container">
<div class="opaque-overlay"> </div>
<div class="row">
<div class="col-12">
<p> </p>
<p> </p>
<p> </p>
<!-- jumbotron for Youtube embbedded link case study example, i wanted there to be an opening image or video for visual interest. -->
<section class="callout jumbotron text-center">
<h1 class="jumbotron-header">Gallery</h1>
<p class="lead">The images help illustrate what Prevent is all about...</p>
<div>
<img src="assets/images/Gallery1.jpg" class="rounded-circle mr-3 img-fluid" height=200 width=200 alt="Prevent image">
<img src="assets/images/Gallery3.jpg" class="rounded-circle mr-3 img-fluid" height=200 width=200 alt="prevent duty image">
<img src="assets/images/Gallery4.jpg" class="rounded-circle mr-3 img-fluid" height=200 width=200 alt="masked image">
</div>
</section>
</div>
</div>
</div>
<!-- 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>