API tools faq
paste
coding_giants

bootstrap_my_town_cg

coding_giants
Jan 11th, 2024
20
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.27 KB | None | 0 0
raw download clone embed print report diff
  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. }
Add Comment
Please, Sign In to add comment
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!