API tools faq
paste
giganciprogramowania

młody expert wymarzone wakacje

giganciprogramowania
Jun 11th, 2021 (edited)
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.82 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3. <head>
  4. <title>Wymarzone wakacje-Malta</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. <link
  10. rel="stylesheet"
  11. href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
  12. integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
  13. crossorigin="anonymous"
  14. />
  15.  
  16. <!-- import fontAwesome -->
  17. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  18.  
  19. <!-- import the webpage's stylesheet -->
  20. <link rel="stylesheet" href="/style.css" />
  21.  
  22.  
  23.  
  24. </head>
  25.  
  26.  
  27. <body>
  28. <!-- ###########################POWIADOMIENIE-ALERT#######################-->
  29. <div class="alert alert-dark fade show" role="alert">
  30. Dostępny jest już przewodnik po Malcie. <a href="https://cdn.glitch.com/aa5080f4-633a-4583-986f-f0b32b93a615%2FMalta%20smart%20guide.pdf?v=1623399730627" class="alert-link">Kliknij tutaj</a>, aby pobrać.
  31.  
  32. <button type="button" class="close" data-dismiss="alert" >
  33. <span >&times;</span>
  34. </button>
  35. </div>
  36.  
  37.  
  38.  
  39. <!-- ###########################NAWIGACJA#######################-->
  40.  
  41.  
  42. <nav class="navbar navbar-expand-lg bg-warning navbar-light sticky-top ">
  43.  
  44. <a class="navbar-brand" href="#"> <img src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2FRelax-03-512.png?v=1587297835668" alt="Logo" style="width:50px;"></a>
  45.  
  46. <div class="collapse navbar-collapse" id="collapsibleNavbar">
  47.  
  48. <ul class="navbar-nav mr-auto">
  49. <li class="nav-item">
  50. <a class="nav-link active " href="#">Strona główna</a>
  51. </li>
  52.  
  53.  
  54.  
  55.  
  56. <li class="nav-item">
  57. <a class="nav-link" href="#atrakcje">Atrakcje</a>
  58. </li>
  59.  
  60. <li class="nav-item dropdown">
  61. <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
  62. Malta na żywo
  63. </a>
  64. <div class="dropdown-menu">
  65. <a class="dropdown-item " href="https://www.youtube.com/watch?v=np1myc1P16k" target="_blank">Fontanna Trytona</a>
  66. <a class="dropdown-item" href="https://www.youtube.com/watch?v=TSpqCBPfh1Q" target="_blank">Malta</a>
  67.  
  68. </div>
  69. </li>
  70.  
  71.  
  72.  
  73. <li class="nav-item">
  74. <a id="link1" class="nav-link" href="#galeria">Galeria</a>
  75. </li>
  76.  
  77. <li class="nav-item">
  78. <a class="nav-link" href="#informacje">Informacje</a>
  79. </li>
  80.  
  81. </ul>
  82.  
  83. </div>
  84.  
  85. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
  86. <span class="navbar-toggler-icon"></span>
  87. </button>
  88.  
  89. </nav>
  90.  
  91.  
  92.  
  93. <!-- ###########################KARUZELA#######################-->
  94. <div class="mt-3 container">
  95.  
  96. <div class="row">
  97.  
  98. <div id="karuzela" class="carousel slide" data-ride="carousel">
  99.  
  100. <!-- Wskaźniki -->
  101. <ul class="carousel-indicators">
  102. <li data-target="#karuzela" data-slide-to="0" class="active"></li>
  103. <li data-target="#karuzela" data-slide-to="1"></li>
  104. <li data-target="#karuzela" data-slide-to="2"></li>
  105. </ul>
  106.  
  107. <!-- Zdjęcia -->
  108. <div class="carousel-inner">
  109. <div class="carousel-item active">
  110. <img class="img-fluid"
  111. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F5fe3e9fa-acc5-4762-a60a-0558cfdb12aa.obraz.png?v=1587299004599"
  112. alt="img1">
  113. </div>
  114. <div class="carousel-item">
  115. <img class="img-fluid"
  116. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fb960207f-01a0-403f-8980-a0ddcdddf823.obraz.png?v=1587299416983"
  117. alt="img2">
  118. <!-- Podpisy na slajdach -->
  119. <div class="carousel-caption">
  120. <h3>Malta</h3>
  121. <p>Valetta</p>
  122. </div>
  123. </div>
  124. <div class="carousel-item">
  125. <img class="img-fluid"
  126. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fad233aed-8ed1-48f3-bbf8-f30e7b630e82.obraz.png?v=1587299190673"
  127. alt="img3">
  128.  
  129. </div>
  130. </div>
  131.  
  132. <!-- Lewa i prawa strzałka -->
  133. <a class="carousel-control-prev" href="#karuzela" data-slide="prev">
  134. <span class="carousel-control-prev-icon"></span>
  135. </a>
  136. <a class="carousel-control-next" href="#karuzela" data-slide="next">
  137. <span class="carousel-control-next-icon"></span>
  138. </a>
  139.  
  140. </div>
  141. </div>
  142. </div>
  143.  
  144.  
  145.  
  146.  
  147. <!-- ###########################Atrakcje#######################-->
  148.  
  149. <div class="container">
  150.  
  151. <div class="row">
  152. <div class="col-md-12 text-center">
  153. <h1 id="atrakcje">Warto zobaczyć <i class=" ml-1 fas fa-archway"></i>
  154. <hr>
  155. </h1>
  156. </div>
  157. </div>
  158.  
  159.  
  160.  
  161. <div class="row">
  162. <div class="col-md-3 col-sm-6">
  163. <h3>Azure Window</h3>
  164. <img class="img-fluid img-thumbnail"
  165. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F4dca97a0-0bcf-4d24-8881-ad66c7cc97a8.obraz.png?v=1587299946584">
  166. <p>Niestniejący już most skalny u wybrzeży wyspy Gozo w Republice Malty, położony przy Dwejra na terenie gminy San
  167. Lawrenz</p><button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
  168. data-target="#atrakcje1">Czytaj więcej</button>
  169. </div>
  170. <div class="col-md-3 col-sm-6">
  171. <h3>Comino</h3>
  172. <img class="img-fluid img-thumbnail"
  173. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fa9d1358a-ef74-4e6a-afc0-27e79d1f5d26.obraz.png?v=1587300223563">
  174. <p>Comino trzecia co do wielkości i najmniejsza zamieszkana wyspa archipelagu Wysp Maltańskich, położona pomiędzy
  175. Maltą a Gozo.</p>
  176. <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj
  177. więcej</button>
  178. </div>
  179. <div class="col-md-3 col-sm-6">
  180. <h3>Ħaġar Qim</h3>
  181. <img class="img-fluid img-thumbnail"
  182. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F670fc409-2474-48d6-b8af-d52816d50f48.obraz.png?v=1587300361848">
  183. <p>Stanowisko archeologiczne w Republice Malty. Zachowały się tu pozostałości megalitycznych świątyń, datowanych
  184. na IV i III tysiąclecie p.n.e. </p>
  185. <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj
  186. więcej</button>
  187. </div>
  188.  
  189. <div class="col-md-3 col-sm-6">
  190. <h3>Klify Dingli</h3>
  191. <img class="img-fluid img-thumbnail"
  192. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F45fd39f9-c250-4246-9a48-a50abfaeeb5e.obraz.png?v=1587300569160">
  193. <p>Formacja skalna na wybrzeżu wyspy Malta, na Morzu Śródziemnym i najwyższy punkt archipelagu maltańskiego.</p>
  194. <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj
  195. więcej</button>
  196. </div>
  197. </div>
  198. </div>
  199.  
  200.  
  201. <!-- ###########################Atrakcje-------Czytaj więcej #######################-->
  202.  
  203.  
  204. <div class="modal fade" id="atrakcje1">
  205. <div class="modal-dialog modal-dialog-scrollable modal-lg">
  206. <div class="modal-content">
  207.  
  208.  
  209.  
  210. <div class="modal-header">
  211. <h4 class="modal-title">Azure Window</h4>
  212. <button type="button" class="close" data-dismiss="modal">&times;</button>
  213. </div>
  214.  
  215.  
  216. <div class="modal-body">
  217. <img class="img-fluid" src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F4dca97a0-0bcf-4d24-8881-ad66c7cc97a8.obraz.png?v=1587299946584">
  218.  
  219. <p>
  220. Azure Window – nieistniejący już most skalny u wybrzeży wyspy Gozo w Republice Malty, położony przy Dwejra na terenie gminy San Lawrenz. Pod formacją przepływała woda morska. Lazurowe okno było jedną z najbardziej znanych atrakcji turystycznych Malty. W pobliżu znajdują się także wewnętrzna zatoka morska Inland Sea oraz skała Fungus Rock, chroniona niegdyś przez Wieżę Dwejra, jedna z tzw. wież Lascarisa.
  221. </p>
  222. </div>
  223.  
  224.  
  225. <div class="modal-footer">
  226. <button type="button" class="btn btn-danger" data-dismiss="modal">Zamknij</button>
  227. </div>
  228.  
  229. </div>
  230. </div>
  231. </div>
  232.  
  233.  
  234.  
  235. <!-- ###########################Galeria#######################-->
  236.  
  237. <div class="container" id="galeria">
  238. <div class="row text-center">
  239. <div class="col-12">
  240. <h1>
  241. Galeria<i class=" ml-1 fas fa-images"></i>
  242. <hr>
  243. </h1>
  244.  
  245. </div>
  246. </div>
  247. <div class="row">
  248.  
  249. <div class="col-md-6 col-lg-3">
  250. <a href="#" class="thumbnail" data-toggle="modal" data-target="#img1">
  251. <img class="img-fluid galeria "
  252. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F670fc409-2474-48d6-b8af-d52816d50f48.obraz.png?v=1587300361848">
  253. </a>
  254. </div>
  255.  
  256. <div class="col-md-6 col-lg-3">
  257.  
  258. <img class="img-fluid galeria"
  259. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F45fd39f9-c250-4246-9a48-a50abfaeeb5e.obraz.png?v=1587300569160">
  260.  
  261. </div>
  262.  
  263. <div class="col-md-6 col-lg-3">
  264.  
  265. <img class="img-fluid galeria"
  266. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fa9d1358a-ef74-4e6a-afc0-27e79d1f5d26.obraz.png?v=1587300223563">
  267.  
  268. </div>
  269.  
  270. <div class="col-md-6 col-lg-3">
  271.  
  272. <img class="img-fluid galeria"
  273. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F4dca97a0-0bcf-4d24-8881-ad66c7cc97a8.obraz.png?v=1587299946584">
  274.  
  275. </div>
  276.  
  277. </div>
  278.  
  279.  
  280. <div class="row">
  281.  
  282. <div class=" col-md-6 col-lg-3">
  283.  
  284. <img class="img-fluid galeria"
  285. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fa9d1358a-ef74-4e6a-afc0-27e79d1f5d26.obraz.png?v=1587300223563">
  286.  
  287. </div>
  288.  
  289. <div class=" col-md-6 col-lg-3">
  290.  
  291. <img class="img-fluid galeria"
  292. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fa9d1358a-ef74-4e6a-afc0-27e79d1f5d26.obraz.png?v=1587300223563">
  293.  
  294. </div>
  295.  
  296. <div class=" col-md-6 col-lg-3">
  297.  
  298. <img class="img-fluid galeria"
  299. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fa9d1358a-ef74-4e6a-afc0-27e79d1f5d26.obraz.png?v=1587300223563">
  300.  
  301. </div>
  302.  
  303. <div class=" col-md-6 col-lg-3">
  304.  
  305. <img class="img-fluid galeria"
  306. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2Fa9d1358a-ef74-4e6a-afc0-27e79d1f5d26.obraz.png?v=1587300223563">
  307.  
  308. </div>
  309.  
  310. </div>
  311.  
  312. </div>
  313.  
  314. <!-- ###########################Galeria ------okna modalne#######################-->
  315.  
  316. <!-- The Modal -->
  317. <div class="modal fade" id="img1">
  318. <div class="modal-dialog">
  319. <div class="modal-content">
  320.  
  321. <!-- Modal Header -->
  322. <div class="modal-header">
  323. <h4 class="modal-title">Ħaġar Qim</h4>
  324. <button type="button" class="close" data-dismiss="modal">&times;</button>
  325. </div>
  326.  
  327. <!-- Modal body -->
  328. <div class="modal-body">
  329. <img class="img-fluid"
  330. src="https://cdn.glitch.com/bfaea3a8-a5c8-4029-9ec1-9f6c2b6672db%2F670fc409-2474-48d6-b8af-d52816d50f48.obraz.png?v=1587300361848">
  331.  
  332. </div>
  333.  
  334. </div>
  335. </div>
  336. </div>
  337.  
  338.  
  339.  
  340. <!-- ###########################Informacje#######################-->
  341.  
  342.  
  343.  
  344. <div class="container">
  345.  
  346. <div class="row">
  347. <div class="col-md-12 text-center">
  348. <h1 id="informacje">Informacje<i class="ml-1 fas fa-info-circle"></i>
  349. <hr>
  350. </h1>
  351. </div>
  352. </div>
  353.  
  354. <div id="accordion">
  355.  
  356. <div class="card ">
  357. <div class="card-header">
  358. <a class="card-link" data-toggle="collapse" href="#collapseOne">
  359. Jaka waluta obowiązuje na Malcie?
  360. </a>
  361. </div>
  362. <div id="collapseOne" class="collapse show" data-parent="#accordion">
  363. <div class="card-body">
  364. <h4>
  365. Waluta
  366. euro (EUR), 1 EUR = 100 centów
  367. </h4>
  368. </div>
  369. </div>
  370. </div>
  371.  
  372. <div class="card">
  373. <div class="card-header">
  374. <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
  375. Pogoda na Malcie
  376. </a>
  377. </div>
  378. <div id="collapseTwo" class="collapse" data-parent="#accordion">
  379. <div class="card-body">
  380. Malta leży w śródziemnomorskiej strefie klimatycznej. Średnia temperatura waha się od 14 st. C
  381. (listopad-kwiecień) do 32 st. C latem. Opady przeważają w okresie zimy. Strefa czasowa: czas
  382. środkowoeuropejski (taki sam jak w Polsce).
  383. </div>
  384. </div>
  385. </div>
  386.  
  387. <div class="card">
  388. <div class="card-header">
  389. <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
  390. Informacje dla kierowców
  391. </a>
  392. </div>
  393. <div id="collapseThree" class="collapse" data-parent="#accordion">
  394. <div class="card-body">
  395. W czasie wyjazdów turystycznych można posługiwać się polskim prawem jazdy. Nie ma żadnych specjalnych wymagań
  396. związanych z ubezpieczeniami samochodowymi i wypadkowymi. Ruch samochodowy jest lewostronny. Obowiązują
  397. ograniczenia prędkości.
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. </div>
  403.  
  404.  
  405. <!-- ###########################Stopka#######################-->
  406.  
  407.  
  408. <footer class="page-footer bg-secondary mt-5 text-light">
  409.  
  410. <div class="container" >
  411. <div class="row text-left">
  412. <div class="col-12">
  413. <h1>
  414. Kontakt<i class=" ml-1 far fa-envelope"></i>
  415. <hr>
  416. </h1>
  417. </div>
  418.  
  419. </div>
  420.  
  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. <!-- Pole na imię-->
  430. <label for="poleImie">Imię</label>
  431. <input type="text" class="form-control" id="poleImie" required>
  432. </div>
  433.  
  434. <!-- Pole na e-mail-->
  435. <div class="form-group col-md-12">
  436. <label for="poleEmail">E-mail</label>
  437. <input type="email" class="form-control" id="poleEmail" required>
  438. </div>
  439.  
  440. <!-- Pole tematu-->
  441. <div class="form-group col-md-12">
  442. <label for="poleTematu">Wybierz temat</label>
  443. <select id="poleTematu" class="form-control">
  444. <option selected>Atrakcje</option>
  445. <option>Gastronomia</option>
  446. <option>Noclegi</option>
  447. <option>Komunikacja</option>
  448. <option>Ścieżki rowerowe</option>
  449. <option>Inne</option>
  450. </select>
  451. </div>
  452. <!-- Pole na treść-->
  453. <div class="form-group col-md-12">
  454. <label for="polePytania">Twoje pytanie</label>
  455. <textarea class="form-control" id="polePytania" rows="3" required></textarea>
  456. </div>
  457. </div>
  458. <!-- Przycisk wyślij-->
  459. <button id="btnWyslij" type="submit" class="btn btn-success btn-lg btn-block mb-5">Wyślij</button>
  460. </form>
  461. </div>
  462.  
  463. <div class="col-md-6">
  464. <h2>
  465. Lokalizacja<i class=" ml-1 fas fa-map-marked-alt"></i>
  466. </h2>
  467.  
  468. <iframe class="col-md-12 pb-5" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d413465.35242595157!2d14.098162978854317!3d35.94212443612404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x130e45281d8647c5%3A0xf582d86136be4239!2sMalta!5e0!3m2!1spl!2spl!4v1623399429882!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
  469.  
  470.  
  471. </div>
  472.  
  473. </div>
  474.  
  475. </div>
  476. </footer>
  477.  
  478.  
  479.  
  480.  
  481. <script
  482. src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  483. integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
  484. crossorigin="anonymous"
  485. ></script>
  486. <script
  487. src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  488. integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  489. crossorigin="anonymous"
  490. ></script>
  491. <script
  492. src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  493. integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  494. crossorigin="anonymous"
  495. ></script>
  496.  
  497.  
  498. </body>
  499. </html>
  500.  
  501.  
  502.  
  503.  
  504. ////////////////////////////////////CSS////////////////////////////////////
  505.  
  506. li{
  507. font-size:24px;;
  508. }
  509.  
  510.  
  511. h1{
  512.  
  513. margin:50px 0px 50px 0px;
  514. }
  515.  
  516. .galeria{
  517.  
  518. border-radius:5px;
  519. margin-bottom:10px;
  520. }
  521.  
  522. .galeria:hover{
  523. opacity:0.8;
  524. cursor:pointer;
  525. animation-name: animacjaGalerii;/*nazwa animacji*/
  526. animation-duration: 0.9s;/*czas trwania animacji*/
  527. animation-direction: alternate;/*animacja jest odtwarzana najpierw do przodu później do tyłu*/
  528. animation-timing-function: ease-in-out;/*prędkość wprowadzania zmian stylów*/
  529. animation-iteration-count: 2;/*ilość powtózeń animacji*/
  530.  
  531. }
  532. @keyframes animacjaGalerii {
  533. from {
  534.  
  535. transform: scale(1,1);
  536. transform: rotate(-5deg);
  537. }
  538. to {
  539. transform: rotate(5deg);
  540. transform: scale(1.1,1.1);
  541. }
  542. }
  543.  
  544. #btnWyslij:hover{
  545. cursor:pointer;
  546. position: relative;
  547. animation-name: handShake;
  548. animation-duration: 0.2s;
  549. animation-direction: alternate;
  550. animation-timing-function: ease-in-out;
  551. animation-iteration-count: 4;
  552.  
  553. }
  554. @keyframes handShake{
  555. from {
  556. left:-10px;
  557. }
  558. to {
  559. left:10px;
  560. }
  561. }
  562.  
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!