forked from madeleinel/OurStory
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
236 lines (211 loc) · 13.6 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
<!DOCTYPE html>
<html>
<head>
<title>Our Story</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nova+Oval" rel="stylesheet">
</head>
<body>
<header>
<!-- Use this to style the landing page? http://getbootstrap.com/components/#jumbotron) -->
<div id="landingPage" class="jumbotron">
<h1 class="text-center" id="title">Our Story</h1>
</div>
</header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Our Story</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- Closing ".navbar-header" -->
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#about">About us</a></li>
<li class="active"><a href="#stories">Stories</a></li>
<li class="active"><a href="#facts">Facts</a></li>
<li class="active"><a href="#resources">Resources</a></li>
<li class="active"><a href="#contact">Contact us</a></li>
</ul>
</div> <!-- Closing ".collapse navbar-collapse" -->
</div>
</nav>
<div class="main">
<div class="container" id="about">
<h2 class="text-center">About Us</h2>
<div class="row">
<p class="text-center">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.</p>
</div>
</div> <!-- Closing the About div -->
<div class="container" id="stories">
<h2 class="text-center">Stories</h2>
<!-- Create a profile for each person, including their photo and their story -->
<div class="row bg-success" id="firstStory">
<img class="img-circle img-responsive pull-left" src="images/profile1.jpeg" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
</div>
<div class="row bg-warning" id="secondStory">
<img class="img-circle img-responsive pull-right" src="images/profile2.jpeg" />
<p>I've lived in England for several years now, and I love it here! I moved here for work (I'm a teacher, and I found a great secondary school to work in) but within the first year I met my now-husband. I have a life here; a husband, a house, a job, friends.</p>
<p>But recently I asked the kids in my class to write an argumentative essay, either for or against immigration, and each and every one of them argumented against it. Reading them, it broke my heart that they have such negative views of immigrants, and that they felt comfortable handing those essays to me, when they know that I am one.</p>
</div>
<div class="row bg-success" id="thirdStory">
<img class="img-circle img-responsive pull-left" src="images/profile3.jpeg" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
</div>
<div class="row bg-warning" id="fourthStory">
<img class="img-circle img-responsive pull-right" src="images/profile4.jpeg" />
<p>I moved to London five years ago, and during that time I have started and finished a university degree, and worked three different jobs. I love living in London, but I wish it wasn’t so expensive! I had to work part-time throughout my degree to be able to afford it, and that was after getting a student loan!</p>
<p>It really frustrates me when people talk about how immigrant come into this country just to claim benefits and “loaf” off of the British people; during my time here I have paid huge sums in tuition (that I have loaned from my own government), worked and paid taxes, and been to my GP twice — I really feel that I’m contributing a lot more to the community than I am taking from it.</p>
</div>
</div> <!-- Closing the Stories div -->
<div class="container text-center" id="facts">
<h2 class="text-center">Common myths de-mystified</h2>
<div class="row bg-success" id="firstFact">
<p class="perception">Immigration is the main reason the NHS is in shambles; they put a lot of pressure on it as they come over here and use up its resources.</p>
<!-- Each "fact" has TRUE / FALSE buttons > The button id's indicate whether it's the correct choice or not -->
<button type="button" class="btn btn-block btn-success choice incorrect" id="btn-first">True</button>
<button type="button" class="btn btn-block btn-danger choice correct" id="btn-first">False</button>
</div>
<div class="row bg-warning" id="secondFact">
<p class="perception">UK prisons are filling up with foreigners; soon there will be more foreigners than UK citizens in our prisons.</p>
<button type="button" class="btn btn-block btn-success choice incorrect" id="btn-second">True</button>
<button type="button" class="btn btn-block btn-danger choice correct" id="btn-second">False</button>
</div>
<div class="row bg-success" id="thirdFact">
<p class="perception">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
<button type="button" class="btn btn-block btn-success choice correct" id="btn-third">True</button>
<button type="button" class="btn btn-block btn-danger choice incorrect" id="btn-third">False</button>
</div>
<div class="row bg-warning" id="fourthFact">
<p class="perception">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis.</p>
<button type="button" class="btn btn-block btn-success choice correct" id="btn-fourth">True</button>
<button type="button" class="btn btn-block btn-danger choice incorrect" id="btn-fourth">False</button>
</div>
<!-- Create a pop-up window to display after the user clicks on true or False -->
<div class="web_dialog text-center">
<div class="web_dialog_title title_correct btn-success">You chose correctly!</div>
<div class="web_dialog_title title_incorrect btn-danger">You chose incorrectly!</div>
<div class="fact_popup" id="first_fact">
<p>Immigrants contribute to both sides of the NHS; while they affects the number of people requiring treatment, they also contribute to its resources by paying taxes and working as medical professionals.</p>
<p><small>Source: <a href="https://fullfact.org/europe/eu-immigration-and-pressure-nhs/" target="_blank">Full Fact</a></small></p>
</div>
<div class="fact_popup" id="second_fact">
<p>Currently, about one in eight prisoners in England and Wales is a foreign citizen, and this percentage has been falling over the last few years.</p>
<p><small>Source: <a href="https://fullfact.org/immigration/foreigners-prison/" target="_blank">Full Fact</a></small></p>
</div>
<div class="fact_popup" id="third">
<p>More info about the third fact.</p>
<p><small>Source: <a href="" target="_blank">Source</a></small></p>
</div>
<div class="fact_popup" id="fourth">
<p>More info about the fourth fact.</p>
<p><small>Source: <a href="" target="_blank">Source</a></small></p>
</div>
<div class="web_dialog_title">
<button type="button" class="btn btn-close btn-warning">Close</button>
</div>
</div> <!-- Done setting up the pop-up window -->
</div> <!-- Closing the Facts div -->
<div class="container" id="resources">
<h2 class="text-center">Resources</h2>
<div class="row">
<p class="text-center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<table class="table table-responsive bg-success" id="information">
<thead>
<tr>
<th colspan="3" class="text-center">More information</th>
</tr>
<tr>
<th>Statistics</th>
<th>Resources</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody>
</table>
<table class="table table-responsive bg-warning" id="organisations">
<thead>
<tr>
<th colspan="4" class="text-center">Local organisations to get involved with</th>
</tr>
<tr>
<th>London</th>
<th>South East England</th>
<th>South West England</th>
<th>Midlands & North of England</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
<td>Row 1, Column 4</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
<td>Row 2, Column 4</td>
</tr>
</tbody>
</table>
</div>
</div> <!-- Closing the Resources div -->
<div class="container" id="contact">
<h2 class="text-center">Contact</h2>
<div class="row">
<h3 class="text-center">Follow us on social media!</h3>
<div class="icons">
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-snapchat"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
</div>
<!-- Create a contact form (http://getbootstrap.com/components/#navbar-forms) -->
<form class="navbar-form navbar-center" role="search">
<h3 >Send us a message!</h3>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
<br>
<input type="text" class="form-control" placeholder="Write your message here">
<br>
<input type="text" class="form-control" placeholder="Your email">
</div>
<br />
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div> <!-- Closing the Contact div -->
</div> <!-- Closing the Main tag -->
<footer>
This page was created by Elizabeth Jegede and Madeleine Linder
</footer>
<!-- Link to the jQuery library and our jQuery code
Note that the jQuery and Bootstrap libraries needs to be linked before our code, so that our code can use the library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>