API tools faq
paste
View difference between Paste ID: ezTVCvUk and 3VcVxLKS
SHOW: | | - or go back to the newest paste.
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
24
<!-- ###########################Naviagtion#######################-->
25
26
  <nav class="navbar navbar-expand-lg bg-info navbar-dark  sticky-top ">
27
28
  <a class="navbar-brand" href="#"> <img
29
      src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/Royal_arms_of_England.svg.png?v=1704271931506"
30
      alt="Logo" style="width:60px;"></a>
31
32
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
33
    <span class="navbar-toggler-icon"></span>
34
  </button>
35
36
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
37
38
    <ul class="navbar-nav mr-auto">
39
      <li class="nav-item">
40
        <a class="nav-link active" href="#">Homepage</a>
41
      </li>
42
      <li class="nav-item">
43
        <a class="nav-link" href="#sights">Sights</a>
44
      </li>
45
46
      <li class="nav-item dropdown">
47
        <a class="nav-link dropdown-toggle " href="#" id="navbardrop" data-toggle="dropdown">
48
          London live
49
        </a>
50
        <div class="dropdown-menu">
51
          <a class="dropdown-item" href="https://www.youtube.com/watch?v=R6J2jttryk8" target="_blank">Buckingham Palace</a>
52
          <a class="dropdown-item" href="https://www.youtube.com/watch?v=r2wBcCIlMGw" target="_blank">London Eye</a>
53
          <a class="dropdown-item" href="https://www.youtube.com/watch?v=VgRo9SBQW3U" target="_blank">Big Ben</a>
54
        </div>
55
      </li>
56
      <li class="nav-item">
57
        <a id="link1" class="nav-link" href="#photos">Photos</a>
58
      </li>
59
60
      <li class="nav-item">
61
        <a class="nav-link" href="#info">Information</a>
62
      </li>
63
64
    </ul>
65
  </div>
66
</nav>
67
68
69
<!-- ###########################Carousel#######################-->
70
71
<div class="mt-3 container">
72
73
  <div class="row">
74
75
    <div id="carousel" class="carousel slide" data-ride="carousel">
76
77
      <!-- Indicators -->
78
      <ul class="carousel-indicators">
79
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
80
        <li data-target="#carousel" data-slide-to="1"></li>
81
        <li data-target="#carousel" data-slide-to="2"></li>
82
      </ul>
83
84
      <!-- Photos -->
85
      <div class="carousel-inner">
86
        <div class="carousel-item active">
87
          <img class="img-fluid"
88
            src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/l1.jpg?v=1704275256995"
89
            alt="img1">
90
        </div>
91
        <div class="carousel-item">
92
          <img class="img-fluid"
93
            src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/l3.jpg?v=1704275261880"
94
            alt="img2">
95
          <!-- Captions on the slides -->
96
          <div class="carousel-caption">
97
            <h3>London</h3>
98
            <p>capital of England</p>
99
          </div>
100
        </div>
101
        <div class="carousel-item">
102
          <img class="img-fluid"
103
            src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/l2.jpg?v=1704275258807"
104
            alt="img3">
105
106
        </div>
107
      </div>
108
109
      <!-- Left and right arrow -->
110
      <a class="carousel-control-prev" href="#carousel" data-slide="prev">
111
        <span class="carousel-control-prev-icon"></span>
112
      </a>
113
      <a class="carousel-control-next" href="#carousel" data-slide="next">
114
        <span class="carousel-control-next-icon"></span>
115
      </a>
116
117
    </div>
118
  </div>
119
</div>
120
121
122
<!-- ###########################Sights#######################-->
123
124
 <div class="container">
125
126
  <div class="row">
127
    <div class="col-md-12 text-center">
128
      <h1 id="sights">Sights <i class=" ml-1 fas fa-archway"></i>
129
        <hr>
130
      </h1>
131
    </div>
132
  </div>
133
134
135
  <div class="row">
136
    <div class="col-md-3 col-sm-6">
137
      <h3>Buckingham Palace</h3>
138
      <img class="img-fluid img-thumbnail"
139
        src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/buckingham_palace.jpg?v=1704273279986">
140
      <p>It is the official London residence of British monarchs.</p><button
141
        type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights1">Read more</button>
142
    </div>
143
    <div class="col-md-3 col-sm-6">
144
      <h3>London Eye</h3>
145
      <img class="img-fluid img-thumbnail"
146
        src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/londnon_eye.jpg?v=1704273293001">
147
      <p>It is a Ferris wheel with a height of 135 metres. </p>
148
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights2">Read more</button>
149
    </div>
150
    <div class="col-md-3 col-sm-6">
151
      <h3>Big Ben</h3>
152
      <img class="img-fluid img-thumbnail"
153
        src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/big_ben.jpg?v=1704273284178">
154
      <p>The common name for the clock tower of the Elizabeth Tower. </p>
155
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights3">Read more</button>
156
    </div>
157
158
    <div class="col-md-3 col-sm-6">
159
      <h3>National Gallery</h3>
160
      <img class="img-fluid img-thumbnail"
161
        src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/national_gallery.jpg?v=1704274610176">
162
      <p>An art gallery in London, on the north side of Trafalgar Square.
163
      </p>
164
      <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sights4">Read more</button>
165
    </div>
166
167
  </div>
168
</div>
169
170
<!-- ########################### Sights --- Read more #######################-->
171
172
<div class="modal fade" id="sights1">
173
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
174
    <div class="modal-content">
175
176
177
      <div class="modal-header">
178
        <h4 class="modal-title">Buckingham Palace</h4>
179
        <button type="button" class="close" data-dismiss="modal">&times;</button>
180
      </div>
181
182
      <div class="modal-body">
183
        <img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/buckingham_palace.jpg?v=1704273279986">
184
185
        <p>
186
      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,
187
          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,
188
          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
189
          (Victoria Memorial), who designated the palace as a private permanent royal residence. The white marble sculpture was created by Thomas Brock in 1931.
190
        </p>
191
      </div>
192
193
      <div class="modal-footer">
194
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
195
      </div>
196
197
    </div>
198
  </div>
199
</div>
200
<div class="modal fade" id="sights2">
201
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
202
    <div class="modal-content">
203
204
205
      <div class="modal-header">
206
        <h4 class="modal-title">Lodon Eye</h4>
207
        <button type="button" class="close" data-dismiss="modal">&times;</button>
208
      </div>
209
210
      <div class="modal-body">
211
        <img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/londnon_eye.jpg?v=1704273293001">
212
213
        <p>
214
        Completed in 1999, also known as the Millennium Wheel, an observation wheel (Ferris wheel) located in the London Borough of Lambeth,
215
          on the south bank of the River Thames between Westminster and Hungerford bridges. It was designed by David Marks, Julia Barfield,
216
          Malcolm Cook, Mark Sparrowhawk, Steven Chilton and Nic Bailey. The wheel is 135 metres high and takes approximately 30 minutes to fully rotate.
217
          There are 32 air-conditioned passenger capsules on the wheel.
218
          The low linear speed of these cabins allows passengers to be picked up and dropped off without stopping the wheel.
219
        </p>
220
      </div>
221
222
      <div class="modal-footer">
223
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
224
      </div>
225
226
    </div>
227
  </div>
228
</div>
229
    <div class="modal fade" id="sights3">
230
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
231
    <div class="modal-content">
232
233
234
      <div class="modal-header">
235
        <h4 class="modal-title">Big Ben</h4>
236
        <button type="button" class="close" data-dismiss="modal">&times;</button>
237
      </div>
238
239
      <div class="modal-body">
240
        <img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/big_ben.jpg?v=1704273284178">
241
242
        <p>
243
        The name originally referred to the bell from St Stephen's Tower, also known as The Clock Tower, part of the Palace of Westminster.
244
        Today, the name Big Ben often refers to both the bell and the clock, as well as the tower itself. On 12 September 2012,
245
        the tower was officially named Elizabeth Tower to honour the 60-year reign of Elizabeth II.
246
          The construction of this neo-Gothic tower was undertaken after a fire on 16 October 1834 consumed much of the Palace.
247
          Only the 900-year-old Westminster Hall and St Stephen's Chapel have survived.
248
        </p>
249
      </div>
250
251
      <div class="modal-footer">
252
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
253
      </div>
254
255
    </div>
256
  </div>
257
</div>
258
        <div class="modal fade" id="sights4">
259
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
260
    <div class="modal-content">
261
262
263
      <div class="modal-header">
264
        <h4 class="modal-title">National Gallery</h4>
265
        <button type="button" class="close" data-dismiss="modal">&times;</button>
266
      </div>
267
268
      <div class="modal-body">
269
        <img src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/national_gallery.jpg?v=1704274610176">
270
271
        <p>
272
        An art gallery in London, on the north side of Trafalgar Square. It is a state gallery,
273
          displaying a collection of 2,300 paintings, mainly Western European, from 1250-1900,
274
          including a collection of paintings by the famous French Impressionists and Vincent van Gogh.
275
          It is generally open to the public free of charge, with an admission charge for occasional exhibitions.
276
        </p>
277
      </div>
278
279
      <div class="modal-footer">
280
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
281
      </div>
282
283
    </div>
284
  </div>
285
</div>
286
287
       <!-- ###########################Photos#######################-->
288
289
   <div class="container" id="photos">
290
    <div class="row text-center">
291
      <div class="col-12">
292
        <h1>
293
          Photos<i class=" ml-1 fas fa-images"></i>
294
          <hr>
295
        </h1>
296
297
      </div>
298
    </div>
299
300
    <div class="row">
301
302
      <div class="col-md-6 col-lg-3">
303
        <a href="#" class="thumbnail" data-toggle="modal" data-target="#img1">
304
          <img class="img-fluid photos "
305
            src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img1.jpg?v=1704274945530">
306
        </a>
307
      </div>
308
309
      <div class="col-md-6 col-lg-3">
310
311
        <img class="img-fluid photos"
312
          src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img3.jpg?v=1704274947203">
313
314
      </div>
315
316
      <div class="col-md-6 col-lg-3">
317
318
        <img class="img-fluid photos"
319
          src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img4.jpeg?v=1704274950512">
320
321
      </div>
322
323
      <div class="col-md-6 col-lg-3">
324
325
        <img class="img-fluid photos"
326
          src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/big_ben.jpg?v=1704273284178">
327
328
      </div>
329
330
    </div>
331
332
  </div>
333
334
335
<!-- ###########################Photos ------modal windows#######################-->
336
337
<!-- The Modal -->
338
<div class="modal fade" id="img1">
339
  <div class="modal-dialog">
340
    <div class="modal-content">
341
342
      <!-- Modal Header -->
343
      <div class="modal-header">
344
        <h4 class="modal-title">Big Ben</h4>
345
        <button type="button" class="close" data-dismiss="modal">&times;</button>
346
      </div>
347
348
      <!-- Modal body -->
349
      <div class="modal-body">
350
        <img class="img-fluid"
351
          src="https://cdn.glitch.global/d08051ec-2160-4abc-8766-686fccaaf056/img1.jpg?v=1704274945530">
352
353
      </div>
354
355
    </div>
356
  </div>
357
</div>
358
359
<!-- ###########################Info#######################-->
360
361
362
<div class="container">
363
364
  <div class="row">
365
    <div class="col-md-12 text-center">
366
      <h1 id="info">Information<i class="ml-1 fas fa-info-circle"></i>
367
        <hr>
368
      </h1>
369
    </div>
370
  </div>
371
372
  <div id="accordion">
373
374
    <div class="card ">
375
      <div class="card-header">
376
        <a class="card-link" data-toggle="collapse" href="#collapseOne">
377
          Free parking
378
        </a>
379
      </div>
380
      <div id="collapseOne" class="collapse show" data-parent="#accordion">
381
        <div class="card-body">
382
383
          <div class="row">
384
385
      <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"
386
        width="600" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
387
388
          </div>
389
390
        </div>
391
      </div>
392
    </div>
393
394
  </div>
395
    </div>
396
397
398
399
400
401
402
403
404
405
406
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
407
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
408
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
409
  </body>
410
</html>
411
412
413
<!-- ###########################  CSS  #######################-->
414
li{
415
  font-size:24px;}
416
h1{
417
  margin:70px 0px 70px 0px;
418
}
419
.photos{
420
border-radius:5px;
421
margin-bottom:10px;
422
423
}
424
425
.photos:hover{
426
  opacity:0.8;
427
}
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!