-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
453 lines (397 loc) · 26.4 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
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>British Monarchy: Line of Succession</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/.favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Montserrat:400,500,600,700|Raleway:300,400,700,900&display=swap" rel="stylesheet">
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/styles.css">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/3c5a8d340b.js"></script>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg sticky-top navbar-dark">
<a class="navbar-brand">
<img src="images/crown-img.png" width="55" height="55" class="d-inline-block align-top" alt="crown-image">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#queen-feature">The Sovereign</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history">The History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#succession-feature">The Line of Succession</a>
</li>
</ul>
</nav>
<!-- Title -->
<section class="top-section" id="title">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<h3>The British Monarchy</h3>
<h1>Line of Succession</h1>
<p>The line of succession is the sequence of members of the Royal Family in the order in which they stand in line to the throne.</p>
<button type="button" class="btn btn-light btn-lg download-button"><a class="nav-link button-one" href="#succession-feature"><i class="fas fa-crown"></i> See the line</a></button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><a class="nav-link button-two" href="#history"><i class="far fa-lightbulb"></i> Learn the history</a></button>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<img class="queen-liz" src="images/queen-liz.png" alt="queen-liz-image">
</div>
</div>
</div>
</section>
<!-- Queen Feature -->
<section id="queen-feature">
<div class="container-fluid">
<h3 class="body-subheader">The Sovereign</h3>
<h2 class="body-header">Queen Elizabeth II</h2>
<p>Elizabeth Alexandra Mary Windsor is Queen of the United Kingdom and head of the Commonwealth. She ascended the throne on February 6, 1952 after the death of her father King George VI. </p>
<h5>How She Became Heir</h5>
<p>Elizabeth was born on April 21, 1926 to Prince Albert, Duke of York and Elizabeth Bowes-Lyon, Duchess of York. Although she was third in line to the throne, Elizabeth was not expected to become Queen because her father was the second-born son of the reigning King George V.</p>
<p>But on December 11, 1936 her Uncle, King Edward VIII abdicated the throne so that he could marry the twice divorced Wallis Simpson. Edward didn't have any children, and so as next in the line of succession, Elizabeth's father Prince Albert, became King George VI. Elizabeth was suddenly heir-apparent and destined to become Queen unless her parents produced a son. </p>
<h5>Marriage and Children</h5>
<p>Elizabeth married Prince Philip of Greece and Denmark on November 20, 1947. He is now known as Prince Philip, Duke of Edinburgh. Together they have 4 children, 8 grandchildren, and 8 great-grandchildren. </p>
<h5>Longest and Oldest Ever Reigning Monarch</h5>
<p>On September 9, 2015, Elizabeth II became the longest-reigning British monarch and the longest-reigning female monarch in world history. She has now been Queen of the United Kingdom for 67 years and 217 days. At age 93 she is also the longest-lived monarch in British history.</p>
</div>
</section>
<!-- Feature Image -->
<img class="royal-family-photo container-fluid" src="images/old-royals.jpg" alt="old-royals-photo">
<!-- History Feature -->
<section id="history">
<div class="container-fluid">
<h3>The History</h3>
<h2>Royal Succession Laws</h2>
<p>The basis for succession has always existed in British royal history. But it was not until the 17th and 18th centuries that modern laws of succession were established. After King James II escaped the country in 1688, Parliament determined that succession to the throne should be regulated by Parliament. </p>
<p>The Bill of Rights (1689) and the Act of Settlement (1701) established the new line of succession and laid down various conditions which the Sovereign must meet. Parliament has the power to remove the sovereign and to replace it.</p>
<p>On April 25, 2013, the Parliament of the United Kingdom passed the <em>Succession to the Crown Act</em> and in so doing repealed the <em>Royal Marriages Act 1772</em>. It went into force on March 26, 2015 and enacted the following provisions:</p>
<h5>Gender</h5>
<p>Males born after 28 October 2011 no longer precede their elder sisters in the line of succession. This replaced male-preference primogeniture with absolute primogeniture, which meant the eldest child, regardless of gender, would precede his or her brothers and sisters. Princess Charlotte, for example, retained her place as fourth in line after the birth of her younger brother Prince Louis.</p>
<h5>Marriage to Roman Catholics</h5>
<p>People are no longer disqualified from the line of succession if they marry a Roman Catholic. This had no immediately impact on those closest to the crown. The monarch, who is Supreme Govenor of the Church of England, must still be a Protestant in accordance with the Act of Settlement.</p>
<h5>Royal Marriage Consent</h5>
<p>The Royal Marriages Act 1772 is repealed with this new provision. Now only the first six people in line to the throne require the Sovereign's approval to marry. Marriage without the Sovereign's consent would disqualify the person and the person's descendants from the marriage from succeeding to the Crown.</p>
</div>
</section>
<!-- Feature Image -->
<img class="royal-family-photo container-fluid" src="images/british-royal-family-photo.jpg" alt="royal-family-photo">
<!-- Line of Succession -->
<section id="succession-feature">
<div class="container-fluid">
<div class="succession-text">
<h3 class="body-subheader">Line of Succession</h3>
<h2 class="body-header">The British Monarchy</h2>
<p>Below you will find the current line of succession, which lists members of the Royal family who are closest in line to the British throne. They are the children, grandchildren and great-children of the reigning monarch, Queen Elizabeth II. </p>
</div>
<div class="succession-cards">
<div class="card mb-4 card-gap">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-charles.jpg" class="card-img" alt="prince-charles" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>1. Charles, Prince of Wales</h4>
<p class="featured-text">Born: November 14, 1948 (age 70)</p>
<p class="card-text">Charles is the first-born son of Queen Elizabeth II and Prince Philip, Duke of Edinburgh and heir to the throne. He is married to Camilla, Duchess of Cornwall.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-william.jpg" class="card-img" alt="prince-william" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>2. Prince William, Duke of Cambridge</h4>
<p class="featured-text">Born: June 21, 1982 (age 37 years)</p>
<p class="card-text">William is the first born son of Charles, Prince of Wales and Princess Diana. He is married to Catherine, Duchess of Cambridge.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-george.jpg" class="card-img" alt="prince-george" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>3. Prince George</h4>
<p class="featured-text">Born: July 22, 2013 (age 6 years)</p>
<p class="card-text">George is the first born son of William, Duke of Cambridge and Catherine, Duchess of Cambridge.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/princess-charlotte.jpg" class="card-img" alt="princess-charlotte" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>4. Princess Charlotte</h4>
<p class="featured-text">Born: May 2, 2015 (age 4 years)</p>
<p class="card-text">Charlotte is the first born daughter and second child of William, Duke of Cambridge and Catherine, Duchess of Cambridge.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-louis.png" class="card-img" alt="prince-louis" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>5. Prince Louis</h4>
<p class="featured-text">Born: April 23, 2018 (age 1 year)</p>
<p class="card-text">Louis is the second born son and third child of William, Duke of Cambridge and Catherine, Duchess of Cambridge.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-harry.jpg" class="card-img" alt="prince-harry" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>6. Prince Harry, Duke of Sussex</h4>
<p class="featured-text">Born: September 15, 1984 (age 34 years)</p>
<p class="card-text">Harry is the second born son of Charles, Prince of Wales and Princess Diana. He is married to Meghan, Duchess of Sussex.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/archie mountbatten-windsor.jpg" class="card-img" alt="archie-mountbatten-windsor" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>7. Master Archie Mountbatten-Windsor</h4>
<p class="featured-text">Born: May 6, 2019 (age 4 months)</p>
<p class="card-text">Archie is the first born son of Harry, Duke of Sussex and Meghan, Duchess of Sussex.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-andrew.jpg" class="card-img" alt="prince-andrew" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>8. Prince Andrew, Duke of York</h4>
<p class="featured-text">Born: February 19, 1960 (age 59 years)</p>
<p class="card-text">Andrew is the second born son and third child of Queen Elizabeth II and Prince Philip, Duke of Edinburgh.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/princess-beatrice.jpg" class="card-img" alt="princess-beatrice" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>9. Princess Beatrice </h4>
<p class="featured-text">Born: August 8, 1988 (age 31 years)</p>
<p class="card-text">Beatrice is the first born daughter of Prince Andrew, Duke of York and Sarah, Duchess of York.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/princess-eugenie.jpg" class="card-img" alt="princess-eugenie" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>10. Princess Eugenie </h4>
<p class="featured-text">Born: March 23, 1990 (age 29 years)</p>
<p class="card-text">Eugenie is the second born daughter of Prince Andrew, Duke of York and Sarah, Duchess of York.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/prince-edward.jpg" class="card-img" alt="prince-edward" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>11. Prince Edward, Earl of Wessex </h4>
<p class="featured-text">Born: March 10, 1964 (age 55 years)</p>
<p class="card-text">Edward is the third born son and fourth child of Queen Elizabeth II and Prince Philip, Duke of Edinburgh.He is married to Sophie, Countess of Wessex.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/viscount-james.png" class="card-img" alt="viscount-james" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>12. James, Viscount Severn</h4>
<p class="featured-text">Born: December 17, 2007 (age 11 years)</p>
<p class="card-text">James is the first born son and second child of Prince Edward, Earl of Wessex and Sophie, Countess of Wessex.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/lady-louise.jpg" class="card-img" alt="lady-louise" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>13. Lady Louise Mountbatten-Windsor </h4>
<p class="featured-text">Born: November 8, 2003 (age 15 years)</p>
<p class="card-text">Louise is the first born daughter of Prince Edward, Earl of Wessex and Sophie, Countess of Wessex.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/princess-anne.jpg" class="card-img" alt="princess-anne" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>14. Anne, Princess Royal</h4>
<p class="featured-text">Born: August 15, 1950 (age 69 years)</p>
<p class="card-text">Anne is the first born daughter and second child of Queen Elizabeth II and Prince Philip, Duke of Edinburgh. She is married to Timothy Lawrence.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/peter-phillips.jpg" class="card-img" alt="peter-phillips" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>15. Mr. Peter Phillips</h4>
<p class="featured-text">Born: November 15, 1977 (age 41 years)</p>
<p class="card-text">Mark is the first born son of Anne, Princess Royal and Mark Phillips. He is married to Autumn Phillips.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/savannah-phillips.jpg" class="card-img" alt="savannah-phillips" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>16. Miss Savannah Phillips</h4>
<p class="featured-text">Born: December 29, 2010 (age 8 years)</p>
<p class="card-text">Savannah is the first born daughter of Peter Phillips and Autumn Phillips.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/isla-phillips.jpg" class="card-img" alt="isla-phillips" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>17. Miss Isla Phillips</h4>
<p class="featured-text">Born: March 29, 2012 (age 7 years)</p>
<p class="card-text">Isla is the second born daughter of Peter Phillips and Autumn Phillips.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/zara-tindall.jpg" class="card-img" alt="zara-tindall" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>18. Mrs Zara Tindall </h4>
<p class="featured-text">May 15, 1981 (age 38 years)</p>
<p class="card-text">Zara is the first born daughter and second child of Anne, Princess Royal and Mark Phillips. She is married to Mike Tindall</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/mia-tindall.jpg" class="card-img" alt="mia-tindall" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>19. Miss Mia Tindall </h4>
<p class="featured-text">January 17, 2014 (age 5 years)</p>
<p class="card-text">Mia is the first born daughter of Zara Tindall and Mike Tindall.</p>
</div>
</div>
</div>
</div>
<div class="card mb-4">
<div class="row no-gutters">
<div class="col-lg-4 col-md-12">
<img src="images/lena-tindall.jpg" class="card-img" alt="lena-tindall" width="100%">
</div>
<div class="col-lg-8 col-md-12">
<div class="card-body">
<h4>20. Miss Lena Tindall </h4>
<p class="featured-text">June 18, 2018 (age 1 year)</p>
<p class="card-text">Lena is the second born daughter of Zara Tindall and Mike Tindall.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section id="footer">
<div class="container-fluid">
<p>The British Monarchy: Line of Succession</p>
<p>Created by Josephine Hardy</p>
</div>
</section>
</body>
</html>