Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="pl">
- <head>
- <title>Moja miejscowość-Stary Sącz</title>
- <meta charset="utf-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link
- rel="stylesheet"
- href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
- integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
- crossorigin="anonymous"
- />
- <!-- import the webpage's stylesheet -->
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384- lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
- <link rel="stylesheet" href="/style.css" />
- </head>
- <body>
- <!-- ###########################POWIADOMIENIE-ALERT#######################-->
- <div class="alert alert-info fade show" role="alert">
- Dostępna jest już mapa atrakcji Starego Sącza. <a href="https://cdn.glitch.com/523cb00b-b265-4028-bd98-f5abc2c091aa%2FStary-Sacz-folderek-mapka-A4-2019-IT.pdf?v=1623322347854" class="alert-link">Kliknij tutaj</a>, aby pobrać mapę
- <button type="button" class="close" data-dismiss="alert" >
- <span >×</span>
- </button>
- </div>
- <!-- ###########################NAWIGACJA#######################-->
- <nav class="navbar navbar-expand-lg bg-info navbar-dark sticky-top ">
- <a class="navbar-brand" href="#"> <img
- src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Findeks-removebg-preview.png?v=1587285730501"
- alt="Logo" style="width:60px;"></a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
- <span class="navbar-toggler-icon"></span>
- </button>
- <div class="collapse navbar-collapse" id="collapsibleNavbar">
- <ul class="navbar-nav mr-auto">
- <li class="nav-item">
- <a class="nav-link active" href="#">Strona główna</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#zabytki">Zabytki</a>
- </li>
- <li class="nav-item dropdown">
- <a class="nav-link dropdown-toggle " href="#" id="navbardrop" data-toggle="dropdown">
- Stary Sącz na żywo
- </a>
- <div class="dropdown-menu">
- <a class="dropdown-item" href="https://www.youtube.com/watch?v=fGAiiIEXz0U" target="_blank">Rynek</a>
- <a class="dropdown-item" href="https://youtu.be/QNe8gYUvJ9A" target="_blank">Góra parkowa</a>
- <a class="dropdown-item" href="https://www.youtube.com/watch?v=yQN2nmsN3cE" target="_blank">Kościół Św.
- Elżbiety</a>
- </div>
- </li>
- <li class="nav-item">
- <a id="link1" class="nav-link" href="#galeria">Galeria</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#informacje">Informacje</a>
- </li>
- </ul>
- </div>
- </nav>
- <!-- ###########################KARUZELA#######################-->
- <div class="mt-3 container">
- <div class="row">
- <div id="karuzela" class="carousel slide" data-ride="carousel">
- <!-- Wskaźniki -->
- <ul class="carousel-indicators">
- <li data-target="#karuzela" data-slide-to="0" class="active"></li>
- <li data-target="#karuzela" data-slide-to="1"></li>
- <li data-target="#karuzela" data-slide-to="2"></li>
- </ul>
- <!-- Zdjęcia -->
- <div class="carousel-inner">
- <div class="carousel-item active">
- <img class="img-fluid"
- src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fkaruzela1.jpg?v=1587221255995"
- alt="img1">
- </div>
- <div class="carousel-item">
- <img class="img-fluid"
- src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fkaruzela2.jpg?v=1587221328166"
- alt="img2">
- <!-- Podpisy na slajdach -->
- <div class="carousel-caption">
- <h3>Stary Sącz</h3>
- <p>perła Beskidu</p>
- </div>
- </div>
- <div class="carousel-item">
- <img class="img-fluid"
- src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fkaruzela3.jpg?v=1587221335253"
- alt="img3">
- </div>
- </div>
- <!-- Lewa i prawa strzałka -->
- <a class="carousel-control-prev" href="#karuzela" data-slide="prev">
- <span class="carousel-control-prev-icon"></span>
- </a>
- <a class="carousel-control-next" href="#karuzela" data-slide="next">
- <span class="carousel-control-next-icon"></span>
- </a>
- </div>
- </div>
- </div>
- <!-- ###########################Zabytki#######################-->
- <div class="container">
- <div class="row">
- <div class="col-md-12 text-center">
- <h1 id="zabytki">Zabytki <i class=" ml-1 fas fa-archway"></i>
- <hr></h1>
- </div>
- </div>
- <div class="row">
- <div class="col-md-3 col-sm-6" >
- <h3>Brama Szeklerska</h3>
- <img class="img-fluid img-thumbnail" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fbrama1.jpg?v=1587225761805">
- <p>Starosądecka brama Szeklerska jest darem Siedmiogrodzkiego Stowarzyszenia Światowego Związku Węgrów.</p><button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj więcej</button>
- </div>
- <div class="col-md-3 col-sm-6">
- <h3>Klasztor</h3>
- <img class="img-fluid img-thumbnail" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fklasztor3.jpg?v=1587225766131">
- <p>Zanim przekroczymy bramę klasztoru i z wewnętrznego dziedzińca wejdziemy w półmrok niezwykłego wnętrza klasztornego kościoła</p>
- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj więcej</button>
- </div>
- <div class="col-md-3 col-sm-6">
- <h3>Źródełko</h3>
- <img class="img-fluid img-thumbnail" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fzrodelko.jpg?v=1587225781963">
- <p>Źródełko św. Kingi znane jest ze swej cudownej mocy od kilkuset lat.Istnieje wiele dziesiątków opisów uzdrowień za sprawą tej właśnie wody. </p>
- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj więcej</button>
- </div>
- <div class="col-md-3 col-sm-6">
- <h3>Zabytkowy Rynek</h3>
- <img class="img-fluid img-thumbnail" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Frynek2.jpg?v=1587225775657">
- <p>Stary Sącz ma klarowny układ miejski oparty o prawo magdeburskie i znając go nie zabłądzimy bez naszej woli… </p>
- <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#zabytki1">Czytaj więcej</button>
- </div>
- </div>
- </div>
- <!-- ###########################Zabytki -------Czytaj więcej #######################-->
- <div class="modal fade" id="zabytki1">
- <div class="modal-dialog modal-dialog-scrollable modal-lg">
- <div class="modal-content">
- <div class="modal-header">
- <h4 class="modal-title">Brama Szeklerska</h4>
- <button type="button" class="close" data-dismiss="modal">×</button>
- </div>
- <div class="modal-body">
- <img src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fbrama1.jpg?v=1587225761805">
- <p>
- Starosądecka brama Szeklerska jest darem Siedmiogrodzkiego Stowarzyszenia Światowego Związku Węgrów. Jest pamiątką ważnych wydarzeń w roku 1999 (Msza kanonizacyjna Bł. Kingi, na przyklasztornych błoniach, prowadzona przez Jana Pawła II) , wyrazem sympatii i dowodem żywotności niegdysiejszych ścisłych związków politycznych jakie łączyły Węgry i Polskę. Bramę ozdabiają dwa wielkie drzeworyty przedstawiające twarze św. Kingi (od strony placu) i św. Jadwigi (od strony zejścia do źródełka św. Kingi). Brama jest kryta tradycyjnym gontem, a pod nim znajduje się wspaniały gołębnik! Postawienie jej tuż obok klasztoru Klarysek, który ufundowała węgierska księżniczka Kinga oraz umieszczenie na niej elementów nawiązujących do współczesności ma dla tych związków specjalne znaczenie.
- </p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-danger" data-dismiss="modal">Zamknij</button>
- </div>
- </div>
- </div>
- </div>
- <!-- ###########################Galeria#######################-->
- <div class="container" id="galeria">
- <div class="row text-center">
- <div class="col-12">
- <h1>
- Galeria<i class=" ml-1 fas fa-images"></i>
- <hr>
- </h1>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6 col-lg-3">
- <a href="#" class="thumbnail" data-toggle="modal" data-target="#img1">
- <img class="img-fluid galeria " src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fbrama1.jpg?v=1587225761805">
- </a>
- </div>
- <div class="col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fklasztor3.jpg?v=1587225766131">
- </div>
- <div class="col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fela1.jpg?v=1587225766698">
- </div>
- <div class="col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fmuzeum1.jpg?v=1587225769575">
- </div>
- </div>
- <div class="row">
- <div class=" col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Foltarz1.jpg?v=1587225772221">
- </div>
- <div class=" col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Frynek2.jpg?v=1587225775657">
- </div>
- <div class=" col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fturystyka.jpg?v=1587225780581">
- </div>
- <div class=" col-md-6 col-lg-3">
- <img class="img-fluid galeria" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fzrodelko.jpg?v=1587225781963">
- </div>
- </div>
- </div>
- <!-- ###########################Galeria ------okna modalne#######################-->
- <!-- The Modal -->
- <div class="modal fade" id="img1">
- <div class="modal-dialog">
- <div class="modal-content">
- <!-- Modal Header -->
- <div class="modal-header">
- <h4 class="modal-title">Brama szeklerska</h4>
- <button type="button" class="close" data-dismiss="modal">×</button>
- </div>
- <!-- Modal body -->
- <div class="modal-body">
- <img class="img-fluid" src="https://cdn.glitch.com/9c59589b-19bd-4a2f-b89d-3a4b8d3af389%2Fbrama1.jpg?v=1587225761805">
- </div>
- </div>
- </div>
- </div>
- <!-- ###########################Informacje#######################-->
- <div class="container">
- <div class="row">
- <div class="col-md-12 text-center">
- <h1 id="informacje">Informacje<i class="ml-1 fas fa-info-circle"></i>
- <hr></h1>
- </div>
- </div>
- <div id="accordion">
- <div class="card ">
- <div class="card-header">
- <a class="card-link" data-toggle="collapse" href="#collapseOne">
- Bezpłatny parking
- </a>
- </div>
- <div id="collapseOne" class="collapse show" data-parent="#accordion">
- <div class="card-body">
- <div class="row">
- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d508.77077696166504!2d20.630757829204146!3d49.566525998710226!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNDnCsDMzJzU5LjUiTiAyMMKwMzcnNTIuNyJF!5e1!3m2!1spl!2spl!4v1587290460246!5m2!1spl!2spl" width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
- </div>
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header">
- <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
- Gastronomia
- </a>
- </div>
- <div id="collapseTwo" class="collapse" data-parent="#accordion">
- <div class="card-body">
- <h4>
- Restauracja MARYSIEŃKA – Stary Sącz, Rynek 12, Tel. 18 446 00 72,
- </h4>
- </div>
- </div>
- </div>
- <div class="card">
- <div class="card-header">
- <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
- Park Wodny
- </a>
- </div>
- <div id="collapseThree" class="collapse" data-parent="#accordion">
- <div class="card-body">
- <h4>
- Korzystanie z Zespołu Rekreacyjnego Park Wodny ” Stawy ” (kąpieliska oraz wypożyczalni) jest płatne .
- Opłaty za korzystanie z Zespołu Rekreacyjnego Park Wodny STAWY w Starym Sączu oraz wypożyczalni sprzętu pływającego
- Opłaty za wypożyczanie sprzętu pływającego pobiera się w okresie od 1 maja do 15-go września
- Opłaty za wejście na teren Zespołu Rekreacyjnego Park Wodny ” Stawy ” pobiera się w sezonie kąpielowym określonym w uchwale Rady Miejskiej w Starym Sączu na dany rok. ( 8 czerwiec do 1 września 2019) </h4>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- ###########################Stopka#######################-->
- <footer class="page-footer bg-secondary mt-5 text-light">
- <div class="container">
- <div class="row text-left">
- <div class="col-12">
- <h1>
- Kontakt<i class=" ml-1 far fa-envelope"></i>
- <hr>
- </h1>
- </div>
- </div>
- <div class="row">
- <div class="col-md-6 ">
- <form>
- <div class="form-row">
- <div class="form-group col-md-12">
- <!-- Pole na imię-->
- <label for="poleImie">Imię</label>
- <input type="text" class="form-control" id="poleImie" required>
- </div>
- <!-- Pole na e-mail-->
- <div class="form-group col-md-12">
- <label for="poleEmail">E-mail</label>
- <input type="email" class="form-control" id="poleEmail" required>
- </div>
- <!-- Pole tematu-->
- <div class="form-group col-md-12">
- <label for="poleTematu">Wybierz temat</label>
- <select id="poleTematu" class="form-control">
- <option selected>Atrakcje</option>
- <option>Gastronomia</option>
- <option>Noclegi</option>
- <option>Komunikacja</option>
- <option>Ścieżki rowerowe</option>
- <option>Inne</option>
- </select>
- </div>
- <!-- Pole na treść-->
- <div class="form-group col-md-12 ">
- <label for="polePytania">Twoje pytanie</label>
- <textarea class="form-control" id="polePytania" rows="3" required></textarea>
- </div>
- </div>
- <!-- Przycisk wyślij-->
- <button id="btnWyslij" type="submit" class="btn btn-success btn-lg btn-block mb-5">Wyślij</button>
- </form>
- </div>
- <!-- Przycisk mapa-->
- <div class="col-md-6">
- <h2>
- Lokalizacja<i class=" ml-1 fas fa-map-marked-alt"></i>
- </h2>
- <iframe class="col-md-12 pb-5"
- src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d41406.11888081926!2d20.600050612217377!3d49.562241489035486!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473dfca9444a282d%3A0x4fe62bbfd3be89f2!2s33-340%20Stary%20S%C4%85cz!5e0!3m2!1spl!2spl!4v1623320011746!5m2!1spl!2spl"
- width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
- </div>
- </div>
- </div>
- <div class="footer-copyright text-center py-3">© 2021 Copyright:
- <a class="social" href="https://www.giganciprogramowania.edu.pl/">GP</a>
- <a class="social" href="https://www.facebook.com/"><i class="fab fa-facebook-square"></i></a>
- <a class="social" href="https://www.youtube.com/"><i class="fab fa-youtube-square"></i></a>
- </div>
- </footer>
- <script
- src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
- integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
- crossorigin="anonymous"
- ></script>
- <script
- src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
- integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
- crossorigin="anonymous"
- ></script>
- <script
- src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
- integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
- crossorigin="anonymous"
- ></script>
- </body>
- </html>
- /////////////////////////////////////CSS////////////////////////////////////////////
- li{
- font-size:24px;;
- }
- h1{
- margin:50px 0px 50px 0px;
- }
- .galeria{
- border-radius:5px;
- margin-bottom:10px;
- }
- .galeria:hover{
- opacity:0.8;
- cursor:pointer;
- animation-name: animacjaGalerii;/*nazwa animacji*/
- animation-duration: 0.9s;/*czas trwania animacji*/
- animation-direction: alternate;/*animacja jest odtwarzana najpierw do przodu później do tyłu*/
- animation-timing-function: ease-in-out;/*prędkość wprowadzania zmian stylów*/
- animation-iteration-count: 2;/*ilość powtózeń animacji*/
- }
- .social{
- color:black;
- font-size:30px;
- }
- .social:hover{
- opacity:0.9;
- text-decoration:none;
- transition-duration:0.7s;
- }
- #logo{
- animation-name: animacjaLogo;
- animation-duration: 1s;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
- animation-iteration-count: infinite;
- }
- #btnWyslij:hover{
- cursor:pointer;
- position: relative;
- animation-name: handShake;
- animation-duration: 0.2s;
- animation-direction: alternate;
- animation-timing-function: ease-in-out;
- animation-iteration-count: 4;
- }
- .czytaj-wiecej:hover{
- position: relative;
- animation-name: czytajWiecej;
- animation-duration: 0.2s;
- animation-fill-mode: forwards;
- animation-timing-function: ease-in-out;
- animation-iteration-count: 1;
- cursor:pointer;
- }
- @keyframes czytajWiecej{
- from {
- top:0px;
- }
- to {
- top:10px;
- }
- }
- @keyframes handShake{
- from {
- left:-10px;
- }
- to {
- left:10px;
- }
- }
- @keyframes animacjaGalerii {
- from {
- transform: scale(1,1);
- transform: rotate(-5deg);
- }
- to {
- transform: rotate(5deg);
- transform: scale(1.1,1.1);
- }
- }
- @keyframes animacjaLogo {
- from {
- transform: scale(1,1);
- }
- to {
- transform: scale(1.1,1.1);
- }
- }
Add Comment
Please, Sign In to add comment