View difference between Paste ID: <a href="/DKCSJnRx">DKCSJnRx</a> and <a href="/E6nqRbrr">E6nqRbrr</a>

<!DOCTYPE html>
1		<!DOCTYPE html>
2		<html lang="en">
3		<head>
4		<title>Bootstrap</title>
5		<meta charset="utf-8">
6		<meta http-equiv="X-UA-Compatible" content="IE=edge">
7		<meta name="viewport" content="width=device-width, initial-scale=1">
8
9		<!-- import bootstrap-->
10		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
11
12		<!-- import fontAwesome -->
13		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
14
15		<!-- import the webpage's stylesheet -->
16		<link rel="stylesheet" href="/style.css">
17
18		<!-- import the webpage's javascript file -->
19		<script src="/script.js" defer></script>
20		</head>
21		<body>
22
23		<!-- ###########################Alert#######################-->
24		<div class="alert alert-info fade show" role="alert">
25		A map of the attractions of London is now available. <a href="https://cdn.glitch.global/9f191198-4ad9-4253-ada9-80ef40ee059d/london-walking-map.pdf?v=17042860598544" class="alert-link">Click here</a>, to download the
26
27		<button type="button" class="close" data-dismiss="alert" >
28		<span >×</span>
29		</button>
30		</div>
31
32
33		<!-- ###########################Naviagtion#######################-->
34
35		<nav class="navbar navbar-expand-lg bg-info navbar-dark sticky-top ">
36
37		<a class="navbar-brand" href="#"> <img
38		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/Royal_arms_of_England.svg.png?v=1704271931506"
39		alt="Logo" style="width:60px;"></a>
40
41		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
42		<span class="navbar-toggler-icon"></span>
43		</button>
44
45		<div class="collapse navbar-collapse" id="collapsibleNavbar">
46
47		<ul class="navbar-nav mr-auto">
48		<li class="nav-item">
49		<a class="nav-link active" href="#">Homepage</a>
50		</li>
51		<li class="nav-item">
52		<a class="nav-link" href="#sights">Sights</a>
53		</li>
54
55		<li class="nav-item dropdown">
56		<a class="nav-link dropdown-toggle " href="#" id="navbardrop" data-toggle="dropdown">
57		London live
58		</a>
59		<div class="dropdown-menu">
60		<a class="dropdown-item" href="https://www.youtube.com/watch?v=R6J2jttryk8" target="_blank">Buckingham Palace</a>
61		<a class="dropdown-item" href="https://www.youtube.com/watch?v=r2wBcCIlMGw" target="_blank">London Eye</a>
62		<a class="dropdown-item" href="https://www.youtube.com/watch?v=VgRo9SBQW3U" target="_blank">Big Ben</a>
63		</div>
64		</li>
65		<li class="nav-item">
66		<a id="link1" class="nav-link" href="#photos">Photos</a>
67		</li>
68
69		<li class="nav-item">
70		<a class="nav-link" href="#info">Information</a>
71		</li>
72
73		</ul>
74		</div>
75		</nav>
76
77
78		<!-- ###########################Carousel#######################-->
79
80		<div class="mt-3 container">
81
82		<div class="row">
83
84		<div id="carousel" class="carousel slide" data-ride="carousel">
85
86		<!-- Indicators -->
87		<ul class="carousel-indicators">
88		<li data-target="#carousel" data-slide-to="0" class="active"></li>
89		<li data-target="#carousel" data-slide-to="1"></li>
90		<li data-target="#carousel" data-slide-to="2"></li>
91		</ul>
92
93		<!-- Photos -->
94		<div class="carousel-inner">
95		<div class="carousel-item active">
96		<img class="img-fluid"
97		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/l1.jpg?v=1704275256995"
98		alt="img1">
99		</div>
100		<div class="carousel-item">
101		<img class="img-fluid"
102		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/l3.jpg?v=1704275261880"
103		alt="img2">
104		<!-- Captions on the slides -->
105		<div class="carousel-caption">
106		<h3>London</h3>
107		<p>capital of England</p>
108		</div>
109		</div>
110		<div class="carousel-item">
111		<img class="img-fluid"
112		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/l2.jpg?v=1704275258807"
113		alt="img3">
114
115		</div>
116		</div>
117
118		<!-- Left and right arrow -->
119		<a class="carousel-control-prev" href="#carousel" data-slide="prev">
120		<span class="carousel-control-prev-icon"></span>
121		</a>
122		<a class="carousel-control-next" href="#carousel" data-slide="next">
123		<span class="carousel-control-next-icon"></span>
124		</a>
125
126		</div>
127		</div>
128		</div>
129
130
131		<!-- ###########################Sights#######################-->
132
133		<div class="container">
134
135		<div class="row">
136		<div class="col-md-12 text-center">
137		<h1 id="sights">Sights <i class=" ml-1 fas fa-archway"></i>
138		<hr>
139		</h1>
140		</div>
141		</div>
142
143
144		<div class="row">
145		<div class="col-md-3 col-sm-6">
146		<h3>Buckingham Palace</h3>
147		<img class="img-fluid img-thumbnail"
148		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/buckingham_palace.jpg?v=1704273279986">
149		<p>It is the official London residence of British monarchs.</p><button
150		type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights1">Read more</button>
151		</div>
152		<div class="col-md-3 col-sm-6">
153		<h3>London Eye</h3>
154		<img class="img-fluid img-thumbnail"
155		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/londnon_eye.jpg?v=1704273293001">
156		<p>It is a Ferris wheel with a height of 135 metres. </p>
157		<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights2">Read more</button>
158		</div>
159		<div class="col-md-3 col-sm-6">
160		<h3>Big Ben</h3>
161		<img class="img-fluid img-thumbnail"
162		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/big_ben.jpg?v=1704273284178">
163		<p>The common name for the clock tower of the Elizabeth Tower. </p>
164		<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights3">Read more</button>
165		</div>
166
167		<div class="col-md-3 col-sm-6">
168		<h3>National Gallery</h3>
169		<img class="img-fluid img-thumbnail"
170		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/national_gallery.jpg?v=1704274610176">
171		<p>An art gallery in London, on the north side of Trafalgar Square.
172		</p>
173		<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights4">Read more</button>
174		</div>
175
176		</div>
177		</div>
178
179		<!-- ########################### Sights --- Read more #######################-->
180
181		<div class="modal fade" id="sights1">
182		<div class="modal-dialog modal-dialog-scrollable modal-lg">
183		<div class="modal-content">
184
185
186		<div class="modal-header">
187		<h4 class="modal-title">Buckingham Palace</h4>
188		<button type="button" class="close" data-dismiss="modal">×</button>
189		</div>
190
191		<div class="modal-body">
192		<img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/buckingham_palace.jpg?v=1704273279986">
193
194		<p>
195		The palace was built in 1703 as a town residence for the Duke of Buckingham, John Sheffield. In 1761 King George III of Great Britain took possession of the palace,
196		which was converted into his private residence. Over the next 75 years, the palace was extended several times. There are six hundred chambers in the palace,
197		including nineteen representative rooms, over seventy bathrooms and almost two hundred bedrooms.In front of the current king's residence is a memorial to Queen Victoria
198		(Victoria Memorial), who designated the palace as a private permanent royal residence. The white marble sculpture was created by Thomas Brock in 1931.
199		</p>
200		</div>
201
202		<div class="modal-footer">
203		<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
204		</div>
205
206		</div>
207		</div>
208		</div>
209		<div class="modal fade" id="sights2">
210		<div class="modal-dialog modal-dialog-scrollable modal-lg">
211		<div class="modal-content">
212
213
214		<div class="modal-header">
215		<h4 class="modal-title">Lodon Eye</h4>
216		<button type="button" class="close" data-dismiss="modal">×</button>
217		</div>
218
219		<div class="modal-body">
220		<img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/londnon_eye.jpg?v=1704273293001">
221
222		<p>
223		Completed in 1999, also known as the Millennium Wheel, an observation wheel (Ferris wheel) located in the London Borough of Lambeth,
224		on the south bank of the River Thames between Westminster and Hungerford bridges. It was designed by David Marks, Julia Barfield,
225		Malcolm Cook, Mark Sparrowhawk, Steven Chilton and Nic Bailey. The wheel is 135 metres high and takes approximately 30 minutes to fully rotate.
226		There are 32 air-conditioned passenger capsules on the wheel.
227		The low linear speed of these cabins allows passengers to be picked up and dropped off without stopping the wheel.
228		</p>
229		</div>
230
231		<div class="modal-footer">
232		<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
233		</div>
234
235		</div>
236		</div>
237		</div>
238		<div class="modal fade" id="sights3">
239		<div class="modal-dialog modal-dialog-scrollable modal-lg">
240		<div class="modal-content">
241
242
243		<div class="modal-header">
244		<h4 class="modal-title">Big Ben</h4>
245		<button type="button" class="close" data-dismiss="modal">×</button>
246		</div>
247
248		<div class="modal-body">
249		<img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/big_ben.jpg?v=1704273284178">
250
251		<p>
252		The name originally referred to the bell from St Stephen's Tower, also known as The Clock Tower, part of the Palace of Westminster.
253		Today, the name Big Ben often refers to both the bell and the clock, as well as the tower itself. On 12 September 2012,
254		the tower was officially named Elizabeth Tower to honour the 60-year reign of Elizabeth II.
255		The construction of this neo-Gothic tower was undertaken after a fire on 16 October 1834 consumed much of the Palace.
256		Only the 900-year-old Westminster Hall and St Stephen's Chapel have survived.
257		</p>
258		</div>
259
260		<div class="modal-footer">
261		<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
262		</div>
263
264		</div>
265		</div>
266		</div>
267		<div class="modal fade" id="sights4">
268		<div class="modal-dialog modal-dialog-scrollable modal-lg">
269		<div class="modal-content">
270
271
272		<div class="modal-header">
273		<h4 class="modal-title">National Gallery</h4>
274		<button type="button" class="close" data-dismiss="modal">×</button>
275		</div>
276
277		<div class="modal-body">
278		<img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/national_gallery.jpg?v=1704274610176">
279
280		<p>
281		An art gallery in London, on the north side of Trafalgar Square. It is a state gallery,
282		displaying a collection of 2,300 paintings, mainly Western European, from 1250-1900,
283		including a collection of paintings by the famous French Impressionists and Vincent van Gogh.
284		It is generally open to the public free of charge, with an admission charge for occasional exhibitions.
285		</p>
286		</div>
287
288		<div class="modal-footer">
289		<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
290		</div>
291
292		</div>
293		</div>
294		</div>
295
296		<!-- ###########################Photos#######################-->
297
298		<div class="container" id="photos">
299		<div class="row text-center">
300		<div class="col-12">
301		<h1>
302		Photos<i class=" ml-1 fas fa-images"></i>
303		<hr>
304		</h1>
305
306		</div>
307		</div>
308
309		<div class="row">
310
311		<div class="col-md-6 col-lg-3">
312		<a href="#" class="thumbnail" data-toggle="modal" data-target="#img1">
313		<img class="img-fluid photos "
314		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img1.jpg?v=1704274945530">
315		</a>
316		</div>
317
318		<div class="col-md-6 col-lg-3">
319
320		<img class="img-fluid photos"
321		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img3.jpg?v=1704274947203">
322
323		</div>
324
325		<div class="col-md-6 col-lg-3">
326
327		<img class="img-fluid photos"
328		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img4.jpeg?v=1704274950512">
329
330		</div>
331
332		<div class="col-md-6 col-lg-3">
333
334		<img class="img-fluid photos"
335		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/big_ben.jpg?v=1704273284178">
336
337		</div>
338
339		</div>
340
341		</div>
342
343
344		<!-- ###########################Photos ------modal windows#######################-->
345
346		<!-- The Modal -->
347		<div class="modal fade" id="img1">
348		<div class="modal-dialog">
349		<div class="modal-content">
350
351		<!-- Modal Header -->
352		<div class="modal-header">
353		<h4 class="modal-title">Big Ben</h4>
354		<button type="button" class="close" data-dismiss="modal">×</button>
355		</div>
356
357		<!-- Modal body -->
358		<div class="modal-body">
359		<img class="img-fluid"
360		src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img1.jpg?v=1704274945530">
361
362		</div>
363
364		</div>
365		</div>
366		</div>
367
368		<!-- ###########################Info#######################-->
369
370
371		<div class="container">
372
373		<div class="row">
374		<div class="col-md-12 text-center">
375		<h1 id="info">Information<i class="ml-1 fas fa-info-circle"></i>
376		<hr>
377		</h1>
378		</div>
379		</div>
380
381		<div id="accordion">
382
383		<div class="card ">
384		<div class="card-header">
385		<a class="card-link" data-toggle="collapse" href="#collapseOne">
386		Free parking
387		</a>
388		</div>
389		<div id="collapseOne" class="collapse show" data-parent="#accordion">
390		<div class="card-body">
391
392		<div class="row">
393
394		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.1266683167114!2d-0.12460432311995842!3d51.529236509107605!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761bf30cc32bc3%3A0xcc3c78e935384ac3!2sParking%20Argyle%20Square!5e0!3m2!1spl!2spl!4v1704276455645!5m2!1spl!2spl"
395		width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
396
397		</div>
398
399		</div>
400		</div>
401		</div>
402
403		</div>
404		</div>
405
406
407		<!-- ###########################Footer#######################-->
408
409
410		<footer class="page-footer bg-secondary mt-5 text-light ">
411
412		<div class="container">
413		<div class="row text-left">
414		<div class="col-12">
415		<h1>
416		Contact<i class=" ml-1 far fa-envelope"></i>
417		<hr>
418		</h1>
419		</div>
420		</div>
421		<div class="row">
422		<div class="col-md-6 ">
423
424		<form>
425
426		<div class="form-row">
427
428		<div class="form-group col-md-12">
429		<!-- Name form-->
430		<label for="nameForm">Name</label>
431		<input type="text" class="form-control" id="nameForm" required>
432		</div>
433
434		<!-- E-mail form-->
435		<div class="form-group col-md-12">
436		<label for="emailForm">E-mail</label>
437		<input type="email" class="form-control" id="emailForm" required>
438		</div>
439
440		<!-- Subject form-->
441		<div class="form-group col-md-12">
442		<label for="subjectForm">Select subject</label>
443		<select id="subjectForm" class="form-control">
444		<option selected>Activities</option>
445		<option>Catering</option>
446		<option>Accommodation</option>
447		<option>Transport</option>
448		<option>Bike paths</option>
449		<option>Other</option>
450		</select>
451		</div>
452
453		<!-- Message form-->
454		<div class="form-group col-md-12 ">
455		<label for="messageForm">Your message</label>
456		<textarea class="form-control" id="messageForm" rows="3" required></textarea>
457		</div>
458		</div>
459		<!-- Button send-->
460		<button id="btnSend" type="submit" class="btn btn-success btn-lg btn-block">Send</button>
461		</form>
462		</div>
463
464		<div class="col-md-6">
465		<h2>
466		Location<i class=" ml-1 fas fa-map-marked-alt"></i>
467		</h2>
468		<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158857.83988672637!2d-0.2664034848794909!3d51.528739805029666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2spl!4v1704284910289!5m2!1sen!2spl"
469		width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
470
471		</div>
472
473		</div>
474		</div>
475		<div class="footer-copyright text-center py-3">&copy 2021 Copyright:
476		<a class="social" href="https://www.codinggiants.com/">CG</a>
477		<a class="social" href="https://www.facebook.com/CodingGiantsUK"><i class="fab fa-facebook-square"></i></a>
478		<a class="social" href="https://www.youtube.com/@codinggiants4821"><i class="fab fa-youtube-square"></i></a>
479		</div>
480
481		</footer>
482
483
484
485
486
487
488
489
490
491
492
493		<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
494		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
495		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
496		</body>
497		</html>
498
499
500		<!-- CSS -->
501		li{
502		font-size:24px;}
503		h1{
504		margin:70px 0px 70px 0px;
505		}
506		.photos{
507		border-radius:5px;
508		margin-bottom:10px;
509
510		}
511		.social{
512		color:black;
513		font-size:30px;
514
515		}
516		.social:hover{
517		opacity:0.9;
518		text-decoration:none;
519		transition-duration:0.7s;
520		}
521		.photos:hover{
522		opacity:0.8;
523		cursor:pointer;
524		animation-name: animationPhotos; /animation-name/
525		animation-duration: 0.9s; /animation-duration/
526		animation-direction: alternate; /animation plays first forwards then backwards/
527		animation-timing-function: ease-in-out; /speed of style changes/
528		animation-iteration-count: 2; /number of animation repetitions/
529		}
530		@keyframes animationPhotos {
531		from {
532
533		transform: scale(1,1);
534		transform: rotate(-5deg);
535		}
536		to {
537		transform: rotate(5deg);
538		transform: scale(1.1,1.1);
539		}
540		}
541		#btnSend:hover{
542		cursor:pointer;
543		position: relative;
544		animation-name: handShake;
545		animation-duration: 0.2s;
546		animation-direction: alternate;
547		animation-timing-function: ease-in-out;
548		animation-iteration-count: 4;
549
550		}
551		@keyframes handShake{
552		from {
553		left:-10px;
554		}
555		to {
556		left:10px;
557		}
558		}
559
560
561