API tools faq
paste
Advertisement
KarolWozniak

strona

KarolWozniak
Apr 12th, 2021
1,259
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 33.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pl">
  3.  
  4. <head>
  5.  
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  8.  
  9.     <title>NowHoliday</title>
  10.     <meta name="description" content="travel">
  11.     <meta name="keywords" content="travel">
  12.     <meta name="author" content="Karol Woźniak">
  13.     <meta http-equiv="X-Ua-Compatible" content="IE=edge">
  14.  
  15.     <link rel="stylesheet" href="css/bootstrap.min.css">
  16.     <link rel="stylesheet" href="css/bootstrap.css">
  17.  
  18.     <link rel="stylesheet" href="swiper.min.css">
  19.     <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed&display=swap" rel="stylesheet">
  20.  
  21. </head>
  22.  
  23. <style>
  24. @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  25.  
  26. html {
  27.     scroll-behavior: smooth;
  28. }
  29.  
  30. ::-webkit-scrollbar {
  31.     width: 13px;
  32. }
  33.  
  34. ::-webkit-scrollbar-track {
  35.     background: #fff;
  36. }
  37.  
  38. ::-webkit-scrollbar-thumb {
  39.     background: #640064;
  40. }
  41.  
  42. ::-webkit-scrollbar-thumb:hover {
  43.     background: #640064;
  44. }
  45.  
  46. body {
  47.     background-color: white;
  48.     color: #000000;
  49.     font-family: 'Montserrat', sans-serif;
  50.     position: relative;
  51. }
  52.  
  53. .display_none {
  54.     display: none;
  55. }
  56.  
  57. h1 {
  58.     font-size: 36px;
  59.     font-weight: 400;
  60.     color: rgb(38, 82, 156);
  61.     margin: 20px;
  62. }
  63.  
  64. .modal {
  65.     color: black;
  66. }
  67.  
  68. .navbar {
  69.     min-height: 57px;
  70. }
  71.  
  72. .nav-link {
  73.     border-bottom: solid #ffffff00;
  74.  
  75. }
  76.  
  77. .bg-nawigacja {
  78.     background-color: black !important;
  79. }
  80.  
  81. #container {
  82.     width: 100%;
  83.     height: 100%;
  84.     margin-top: 58px;
  85. }
  86.  
  87. #kontakt {
  88.  
  89.     width: 90%;
  90.     margin: auto;
  91.     margin-top: 50px;
  92.     padding: 30px;
  93.     color: #640064;
  94.  
  95. }
  96.  
  97. .btnsend {
  98.     color: white;
  99.     background: #640064;
  100. }
  101.  
  102. #regulamin {
  103.     width: 90%;
  104.     margin: auto;
  105.  
  106. }
  107.  
  108. #regulamintresc {
  109.     text-align: center;
  110.  
  111. }
  112.  
  113. #stworzone {
  114.     margin-top: 50px;
  115.     text-align: center;
  116. }
  117.  
  118. .form-control {
  119.     border: 0px !important;
  120.     border-bottom: 1.5px solid #640054 !important;
  121.     border-radius: 5%;
  122.     background: #64006424;
  123.     transition: background 0.5s;
  124. }
  125.  
  126. .form-control:focus {
  127.     background: purple;
  128.     color: white;
  129. }
  130.  
  131. #portfolio {
  132.     height: 100%;
  133. }
  134.  
  135. #portfolio h1 {
  136.     text-align: center;
  137. }
  138.  
  139. iframe {
  140.     margin-top: 20px;
  141.     height: 400px;
  142.     width: 100%;
  143. }
  144.  
  145. .kontaktsend {
  146.     width: 10px;
  147. }
  148.  
  149. .bd-color {
  150.     background-color: white;
  151. }
  152.  
  153. body > main {
  154.     font-size: 14px;
  155.     max-width: 1920px;
  156.     margin: auto;
  157. }
  158.  
  159. #omnie {
  160.     background-image: url(tlo_gora.jpg);
  161.     background-attachment: fixed;
  162.     background-position: bottom;
  163.     background-repeat: no-repeat;
  164.     min-height: 500px;
  165.     padding-top: 50px;
  166. }
  167.  
  168.  
  169. #produkty {
  170.     padding: 20px;
  171.  
  172. }
  173.  
  174. .card {
  175.  
  176.     position: relative;
  177.     background: #fff;
  178.     max-width: 400px;
  179.     height: 500px;
  180.     margin: 0 auto;
  181.     padding: 10px;
  182.     border: 2px solid rgba(100, 0, 100, 0.3);
  183.  
  184. }
  185.  
  186. .card .content {
  187.     widows: 400px;
  188.     padding: 30px;
  189.     box-sizing: border-box;
  190.     color: #000;
  191. }
  192.  
  193. .card .content a {
  194.     display: inline-block;
  195.     margin: 10px 0 0;
  196.     padding: 10px 20px;
  197.     text-decoration: none;
  198.     border: 2px solid #000;
  199.     color: #000;
  200.     font-weight: 600;
  201. }
  202.  
  203. .card .sliderText {
  204.     position: relative;
  205.     width: 100%;
  206.     height: 200px;
  207.     display: flex;
  208.     justify-content: center;
  209.     align-items: center;
  210.     background: #640064;
  211. }
  212.  
  213. .card .sliderText h3 {
  214.     color: #fff;
  215.     font-size: 3em;
  216. }
  217.  
  218. #klienci h1 {
  219.     text-align: center;
  220. }
  221.  
  222. #omnie img {
  223.  
  224.     max-width: 500px;
  225.  
  226. }
  227.  
  228. #infoomnie {
  229.     text-align: center;
  230.     margin-top: 100px;
  231. }
  232.  
  233. #zdjecie img {
  234.     width: 100%;
  235. }
  236.  
  237. #omnietekst {
  238.     width: 100%;
  239.     color: white;
  240.     background: rgba(100, 0, 100, 0.4);
  241.     opacity:
  242. }
  243.  
  244. #textarea {
  245.     max-width: 500px;
  246.     margin: auto;
  247.     opacity: 1;
  248.     padding: 1px 0px 15px 0px;
  249.     font-size: 26px
  250. }
  251.  
  252. #textarea > h1 {
  253.     color: white;
  254.     font-size: 50px;
  255. }
  256.  
  257. .row {
  258.     width: 100%;
  259.     margin: auto;
  260. }
  261.  
  262. .alert {
  263.     text-align: left;
  264. }
  265.  
  266. .cookies {
  267.     font-size: 14px;
  268. }
  269.  
  270. #acc_cookies {
  271.     font-size: 16px;
  272. }
  273.  
  274. #motywtxt {
  275.     float: left;
  276.     margin-right: 8px;
  277.  
  278. }
  279.  
  280. @media screen and (min-width: 992px) {
  281.     #motywtxt {
  282.         transition: 0.5s;
  283.         transform: scaleX(0);
  284.         transform-origin: 100% 100%;
  285.     }
  286. }
  287.  
  288. .scalex {
  289.     transform: scaleX(1) !important;
  290. }
  291.  
  292. .img-thumbnail{
  293.     border: 1px solid #640064 !important;
  294.     box-shadow: 1px 2px 8px 1px black;
  295. }
  296.    
  297. </style>
  298.  
  299. <body>
  300.  
  301.     <header>
  302.         <!-- START: REGULAMIN  -->
  303.         <div class="modal fade" id="regulamin" tabindex="-1" aria-labelledby="regulamin_naglowek" aria-hidden="true">
  304.             <div class="modal-dialog modal-lg">
  305.                 <div class="modal-content">
  306.                     <div class="modal-header">
  307.                         <h5 class="modal-title" id="regulamin_naglowek">Regulamin</h5>
  308.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  309.                             <span aria-hidden="true">&times;</span>
  310.                         </button>
  311.                     </div>
  312.                     <div class="modal-body">
  313.                         <ul id="regulations">
  314.                             <li class="regulaminli">Nacisnij klawisz na klawiaturze</li>
  315.                             <li class="regulaminli">Pellentesque tincidunt augue quis felis pretium, ut venenatis turpis auctor.</li>
  316.                             <li class="regulaminli">Maecenas at felis tincidunt, faucibus sapien vel, iaculis eros.</li>
  317.                             <li class="regulaminli">Pellentesque eget arcu vitae ligula sollicitudin aliquam ut ac leo.</li>
  318.                             <li class="regulaminli">Phasellus convallis sem rhoncus, tempor nisl in, bibendum ipsum.</li>
  319.                             <li class="regulaminli">Integer pulvinar urna quis fermentum dignissim.</li>
  320.                             <li class="regulaminli">Morbi tincidunt sem vitae nulla egestas, a pharetra nibh malesuada.</li>
  321.                             <li class="regulaminli">Sed porttitor erat sed finibus iaculis.</li>
  322.                             <li class="regulaminli">Mauris quis turpis sodales, pharetra eros sit amet, porttitor elit.</li>
  323.                             <li class="regulaminli">Sed eget nibh tempus, accumsan neque eu, tempor libero.</li>
  324.                             <li class="regulaminli">Maecenas ac odio id orci faucibus semper.</li>
  325.                             <li class="regulaminli">Donec tincidunt dui id quam dictum viverra.</li>
  326.                         </ul>
  327.                     </div>
  328.                 </div>
  329.             </div>
  330.         </div>
  331.  
  332.         <div class="modal fade" id="login" tabindex="-1" aria-labelledby="login" aria-hidden="true">
  333.             <div class="modal-dialog modal-lg">
  334.                 <div class="modal-content">
  335.                     <div class="modal-header">
  336.                         <h5 class="modal-title" id="login_header">Zaloguj / Zarejestruj się</h5>
  337.  
  338.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  339.                             <span aria-hidden="true">&times;</span>
  340.                         </button>
  341.                     </div>
  342.                     <div class="modal-body">
  343.                         <div class="row">
  344.                             <div class="col-md-6 col-xl-6">
  345.                                 <h5>Zaloguj się</h5>
  346.                                 <p>Masz już u nas konto? Zaloguj się :)</p>
  347.                                 <form id="contact-form1" name="contact-form" action="mail.php" method="POST">
  348.  
  349.                                     <div class="row">
  350.  
  351.                                         <div class="col-md-12">
  352.                                             <div class="md-form">
  353.                                                 <input type="text" id="loginlog" name="Login" class="form-control" placeholder="Login">
  354.                                                 <br>
  355.                                             </div>
  356.                                         </div>
  357.  
  358.                                     </div>
  359.                                     <div class="row">
  360.                                         <div class="col-md-12">
  361.                                             <div class="md-form">
  362.                                                 <input type="password" id="passwordlog" name="password" class="form-control" placeholder="Hasło">
  363.                                                 <br>
  364.  
  365.                                             </div>
  366.                                         </div>
  367.                                     </div>
  368.  
  369.                                     <div class="center-on-small-only">
  370.                                         <a id="formsend" class="btn btn-lg btn-block btnsend" onclick="" style="color: white;">Zaloguj się</a>
  371.                                     </div>
  372.  
  373.                                 </form>
  374.                             </div>
  375.  
  376.                             <div class="col-md-6 col-xl-6">
  377.                                 <h5>Zarejestruj się</h5>
  378.                                 <p>Nie masz jeszcze u nas konta? Zarejestruj się!</p>
  379.                                 <form id="contact-form2" name="contact-form" action="mail.php" method="POST">
  380.  
  381.                                     <div class="row">
  382.  
  383.                                         <div class="col-md-12">
  384.                                             <div class="md-form">
  385.                                                 <input type="text" id="loginreg" name="Login" class="form-control" placeholder="Login">
  386.                                                 <br>
  387.                                             </div>
  388.                                         </div>
  389.  
  390.                                     </div>
  391.                                     <div class="row">
  392.  
  393.                                         <div class="col-md-12">
  394.                                             <div class="md-form">
  395.                                                 <input type="text" id="Emailreg" name="Email" class="form-control" placeholder="Email">
  396.                                                 <br>
  397.                                             </div>
  398.                                         </div>
  399.  
  400.                                     </div>
  401.                                     <div class="row">
  402.                                         <div class="col-md-12">
  403.                                             <div class="md-form">
  404.                                                 <input type="password" id="passwordreg" name="password" class="form-control" placeholder="Hasło">
  405.                                                 <br>
  406.  
  407.                                             </div>
  408.                                         </div>
  409.                                     </div>
  410.  
  411.                                     <div class="center-on-small-only">
  412.                                         <a id="formsend" class="btn btn-lg btn-block btnsend" onclick="" style="color: white;">Zarejestruj się</a>
  413.                                     </div>
  414.  
  415.                                 </form>
  416.                             </div>
  417.                         </div>
  418.  
  419.                     </div>
  420.                 </div>
  421.             </div>
  422.         </div>
  423.  
  424.         <!-- KONIEC: REGULAMIN -->
  425.  
  426.         <nav id="navgora" class="navbar fixed-top navbar-expand-lg navbar-light bd-color">
  427.             <a class="navbar-brand" href="#">NowHoliday</a>
  428.             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4" aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
  429.                 <span class="navbar-toggler-icon"></span>
  430.             </button>
  431.             <div class="collapse navbar-collapse nawigacja" id="navbarSupportedContent-4">
  432.                 <ul class="navbar-nav nawigacja2 ml-auto">
  433.                     <li class="nav-item">
  434.                         <a class="nav-link light" id="motyw">
  435.                             <p id="motywtxt">Zmień motyw </p> <i id="mtw" class="fas fa-moon"></i>
  436.                         </a>
  437.                     </li>
  438.                     <li class="nav-item">
  439.                         <a class="nav-link" id="nvbttn1" href="#omnie"><i class="fa fa-home" aria-hidden="true"></i> Start</a>
  440.                     </li>
  441.                     <li class="nav-item">
  442.                         <a class="nav-link" id="nvbttn2" href="#produkty"><i class="fa fa-plane" aria-hidden="true"></i> Wyjazdy</a>
  443.                     </li>
  444.                     <li class="nav-item">
  445.                         <a class="nav-link" id="nvbttn3" href="#galeria"><i class="fa fa-camera" aria-hidden="true"></i> Galeria</a>
  446.                     </li>
  447.                     <li class="nav-item">
  448.                         <a class="nav-link" id="nvbttn4" href="#kontakt"><i class="fa fa-phone" aria-hidden="true"></i> Kontakt</a>
  449.                     </li>
  450.                     <li class="nav-item">
  451.                         <a class="nav-link" id="nvbttn5" type="button" data-toggle="modal" data-target="#regulamin"><i class="fa fa-list-alt" aria-hidden="true"></i> Regulamin</a>
  452.                     </li>
  453.                     <li class="nav-item">
  454.                         <a class="nav-link" id="nvbttn6" type="button" data-toggle="modal" data-target="#login"><i class="fa fa-sign-in" aria-hidden="true"></i> Logowanie</a>
  455.                     </li>
  456.                 </ul>
  457.             </div>
  458.         </nav>
  459.  
  460.     </header>
  461.  
  462.     <main>
  463.         <div id="container">
  464.             <div id="omnie" data-spy="scroll" data-target="#navgora" data-offset="0">
  465.                 <div id="infoomnie">
  466.                     <div id="omnietekst">
  467.                         <div id="textarea">
  468.                             <h1>NowHoliday</h1>Lecimy tam gdzie wiatr nas niesie!
  469.                         </div>
  470.                     </div>
  471.                 </div>
  472.             </div>
  473.  
  474.             <div id="portfolio">
  475.  
  476.                 <div id="produkty">
  477.                     <h1> Najbliższe wycieczki:</h1>
  478.  
  479.                     <div class="bd-example">
  480.                         <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  481.                             <ol class="carousel-indicators">
  482.                                 <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
  483.                                 <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
  484.                                 <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  485.                             </ol>
  486.                             <div class="carousel-inner">
  487.                                 <div class="carousel-item active">
  488.                                     <img src="zdjecie1.jpg" class="d-block w-100" alt="Grecja">
  489.                                     <div class="carousel-caption d-none d-md-block">
  490.                                         <h5>Grecja</h5>
  491.                                         <p>14 dniowy wyjazd. Cena 6000zł</p>
  492.                                     </div>
  493.                                 </div>
  494.                                 <div class="carousel-item">
  495.                                     <img src="zdjecie2.jpg" class="d-block w-100" alt="Hiszpania">
  496.                                     <div class="carousel-caption d-none d-md-block">
  497.                                         <h5>Hiszpania</h5>
  498.                                         <p>5 dniowy wyjazd. Cena 1600zł</p>
  499.                                     </div>
  500.                                 </div>
  501.                                 <div class="carousel-item">
  502.                                     <img src="zdjecie3.jpg" class="d-block w-100" alt="Amsterdam">
  503.                                     <div class="carousel-caption d-none d-md-block">
  504.                                         <h5>Amsterdam</h5>
  505.                                         <p>7 dniowy wyjazd. Cena 11000zł</p>
  506.                                     </div>
  507.                                 </div>
  508.                             </div>
  509.                             <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
  510.                                 <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  511.                                 <span class="sr-only">Poprzednie</span>
  512.                             </a>
  513.                             <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
  514.                                 <span class="carousel-control-next-icon" aria-hidden="true"></span>
  515.                                 <span class="sr-only">Następne</span>
  516.                             </a>
  517.                         </div>
  518.                     </div>
  519.                 </div>
  520.  
  521.                 <div id="galeria">
  522.  
  523.                     <h1>Galeria zdjęć</h1>
  524.  
  525.                     <hr class="mt-2 mb-5">
  526.  
  527.                     <div class="row text-center text-lg-left">
  528.  
  529.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  530.                             <a href="#" class="d-block mb-4 h-100">
  531.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/pWkk7iiCoDM/400x300" alt="">
  532.                             </a>
  533.                         </div>
  534.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  535.                             <a href="#" class="d-block mb-4 h-100">
  536.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
  537.                             </a>
  538.                         </div>
  539.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  540.                             <a href="#" class="d-block mb-4 h-100">
  541.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
  542.                             </a>
  543.                         </div>
  544.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  545.                             <a href="#" class="d-block mb-4 h-100">
  546.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt="">
  547.                             </a>
  548.                         </div>
  549.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  550.                             <a href="#" class="d-block mb-4 h-100">
  551.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt="">
  552.                             </a>
  553.                         </div>
  554.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  555.                             <a href="#" class="d-block mb-4 h-100">
  556.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt="">
  557.                             </a>
  558.                         </div>
  559.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  560.                             <a href="#" class="d-block mb-4 h-100">
  561.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/2gYsZUmockw/400x300" alt="">
  562.                             </a>
  563.                         </div>
  564.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  565.                             <a href="#" class="d-block mb-4 h-100">
  566.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/EMSDtjVHdQ8/400x300" alt="">
  567.                             </a>
  568.                         </div>
  569.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  570.                             <a href="#" class="d-block mb-4 h-100">
  571.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/8mUEy0ABdNE/400x300" alt="">
  572.                             </a>
  573.                         </div>
  574.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  575.                             <a href="#" class="d-block mb-4 h-100">
  576.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/G9Rfc1qccH4/400x300" alt="">
  577.                             </a>
  578.                         </div>
  579.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  580.                             <a href="#" class="d-block mb-4 h-100">
  581.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/aJeH0KcFkuc/400x300" alt="">
  582.                             </a>
  583.                         </div>
  584.                         <div class="col-lg-3 col-md-4 col-sm-6 col-12">
  585.                             <a href="#" class="d-block mb-4 h-100">
  586.                                 <img class="img-fluid img-thumbnail" src="https://source.unsplash.com/p2TQ-3Bh3Oo/400x300" alt="">
  587.                             </a>
  588.                         </div>
  589.                     </div>
  590.  
  591.                 </div>
  592.                 <div style="clear: both"></div>
  593.  
  594.                 <div id="kontakt">
  595.                     <section class="section">
  596.  
  597.                         <h2 class="section-heading h1 pt-4">Kontakt</h2>
  598.                         <p class="section-description">Masz jakieś pytanie? Chcesz złożyć u mnie zlecenie. Skontaktuj się ze mną!</p>
  599.  
  600.                         <div class="row">
  601.  
  602.                             <div class="col-md-4 col-xl-3">
  603.                                 <ul class="contact-icons">
  604.                                     <li><i class="fa fa-map-marker fa-2x"></i>
  605.                                         <p>Łaska 61, 98-331 Zduńska Wola</p>
  606.                                     </li>
  607.  
  608.                                     <li><i class="fa fa-phone fa-2x"></i>
  609.                                         <p>+42 421 392 2</p>
  610.                                     </li>
  611.  
  612.                                     <li><i class="fa fa-envelope fa-2x"></i>
  613.                                         <p>kontakt@zse-zdwola.pl</p>
  614.                                     </li>
  615.                                 </ul>
  616.                             </div>
  617.  
  618.                             <div class="col-md-8 col-xl-9">
  619.                                 <form id="contact-form3" name="contact-form" action="mail.php" method="POST">
  620.  
  621.                                     <div class="row">
  622.  
  623.                                         <div class="col-md-6">
  624.                                             <div class="md-form">
  625.                                                 <input type="text" id="name" name="name" class="form-control" placeholder="Imię">
  626.                                                 <label class="display_none" for="message">Imię</label><br>
  627.  
  628.                                             </div>
  629.                                         </div>
  630.  
  631.                                         <div class="col-md-6">
  632.                                             <div class="md-form">
  633.                                                 <input type="text" id="email" name="email" class="form-control" placeholder="E-mail">
  634.                                                 <label class="display_none" for="message">E-Mail</label><br>
  635.                                             </div>
  636.                                         </div>
  637.  
  638.                                     </div>
  639.                                     <div class="row">
  640.                                         <div class="col-md-12">
  641.                                             <div class="md-form">
  642.                                                 <input type="text" id="subject" name="subject" class="form-control" placeholder="Temat">
  643.                                                 <label class="display_none" for="message">Temat</label><br>
  644.  
  645.                                             </div>
  646.                                         </div>
  647.                                     </div>
  648.                                     <div class="row">
  649.                                         <div class="col-md-12">
  650.                                             <div class="md-form">
  651.                                                 <textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea" placeholder="Treść"></textarea>
  652.                                                 <label class="display_none" for="message">Treść</label><br>
  653.                                             </div>
  654.  
  655.                                         </div>
  656.                                     </div>
  657.  
  658.                                 </form>
  659.  
  660.                                 <div class="center-on-small-only">
  661.                                     <a id="formsend" class="btn btn-lg btn-block btnsend" onclick="" style="color: white;">Wyślij wiadomość</a>
  662.                                 </div>
  663.                                 <div class="status"></div>
  664.                             </div>
  665.                             <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4325.26923519599!2d18.944823161099706!3d51.5989293977662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x471a5b7a2a1a96cd%3A0x1d7d13942ee3c475!2s%C5%81aska%2061%2C%2098-311%20Zdu%C5%84ska%20Wola!5e1!3m2!1spl!2spl!4v1573750614389!5m2!1spl!2spl" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
  666.                         </div>
  667.  
  668.                     </section>
  669.                 </div>
  670.             </div>
  671.         </div>
  672.     </main>
  673.     <!-- START: STOPKA -->
  674.     <footer>
  675.         <div style="clear: both">
  676.             <div id="stworzone">@2021 by Karol Woźniak. Proudly created for ZSE</div>
  677.  
  678.         </div>
  679.  
  680.  
  681.     </footer>
  682.  
  683.     <!-- KONIEC: STOPKA -->
  684.  
  685.     <!-- START: CIASTECZKA -->
  686.  
  687.     <div class="alert fixed-bottom alert-dark fade show cookies" role="alert">
  688.         <div class="col"><strong>Ciasteczka!</strong> Nasza strona wykorzystuje ciasteczka, aby świadczyć usługi na najwyższym poziomie. Dalsze korzystanie ze strony oznacza, że zgadzasz się na ich użycie</div>
  689.         <div class="col"><button type="button" class="close" data-dismiss="alert" aria-label="Close">
  690.                 <span id="acc_cookies" aria-hidden="true">Zgadzam się!</span>
  691.             </button></div>
  692.     </div>
  693.  
  694.     <!-- KONIEC: CIASTECZKA -->
  695.  
  696.     <!-- START: SKRYPTY -->
  697.  
  698.     <!-- SKRYPT ZMIANY MOTYWU -->
  699.     <script>
  700.         const nvbtn = document.getElementById("motyw");
  701.         console.log(motyw);
  702.         const kontakt = document.getElementById("kontakt");
  703.         console.log(kontakt);
  704.         const h1 = document.getElementsByTagName("h1");
  705.         console.log(h1);
  706.         const navbc = document.getElementsByClassName("bd-color");
  707.         const body = document.querySelector("body");
  708.         console.log(body);
  709.         const nav = document.getElementById("navgora");
  710.         console.log(navgora);
  711.         const mtw = document.getElementById("mtw");
  712.         console.log(mtw);
  713.  
  714.         nvbtn.addEventListener("click", function() {
  715.             // PRZEJSCIE NA CIEMNY MOTYW
  716.             if (nvbtn.classList.contains("light") == true) {
  717.                 nvbtn.classList.remove("light");
  718.                 mtw.classList.remove("fa-moon");
  719.                 mtw.classList.add("fa-sun");
  720.                 mtw.style.color = "yellow";
  721.  
  722.  
  723.                 body.style.backgroundColor = "#18191a";
  724.                 body.style.transition = "1s";
  725.  
  726.  
  727.                 body.style.color = "#ffffff";
  728.                 kontakt.style.color = "#ffffff";
  729.                 if (h1.length > 0) {
  730.                     for (let i = 0; i < h1.length; i++) {
  731.                        h1[i].style.color = "#ffffff";
  732.                    }
  733.                }
  734.                if (navbc.length > 0) {
  735.                     for (let i = 0; i < navbc.length; i++) {
  736.                        navbc[i].style.backgroundColor = "#18191a";
  737.                        navbc[i].style.transition = "1s";
  738.                    }
  739.  
  740.                }
  741.                nav.classList.remove("navbar-light");
  742.                nav.classList.add("navbar-dark");
  743.            }
  744.  
  745.            // PRZEJSCIE NA JASNY MOTYW
  746.            else {
  747.                nvbtn.classList.add("light");
  748.                mtw.classList.remove("fa-sun");
  749.                mtw.classList.add("fa-moon");
  750.                mtw.style.color = "";
  751.                body.style.backgroundColor = "";
  752.                body.style.color = "";
  753.                kontakt.style.color = "";
  754.                if (h1.length > 0) {
  755.                     for (let i = 0; i < h1.length; i++) {
  756.                        h1[i].style.color = "";
  757.                    }
  758.                }
  759.                if (navbc.length > 0) {
  760.                     for (let i = 0; i < navbc.length; i++) {
  761.                        navbc[i].style.backgroundColor = "";
  762.                    }
  763.  
  764.                }
  765.                nav.classList.remove("navbar-dark");
  766.                nav.classList.add("navbar-light");
  767.            }
  768.  
  769.        });
  770.  
  771.        // Kolor przycisku wyślij
  772.        
  773.        const formsend = document.getElementById("formsend");
  774.        formsend.addEventListener("mousemove", function() {
  775.            formsend.style.background = "purple";
  776.            formsend.style.transition = "all 1s ease-out 0s";
  777.        })
  778.        formsend.addEventListener("mouseout", function() {
  779.            formsend.style.background = "";
  780.        })
  781.  
  782.  
  783.        // Podkreślenie przycisków nawigacji
  784.        
  785.        const nvbttn1 = document.getElementById("nvbttn1");
  786.        nvbttn1.addEventListener("mousemove", function() {
  787.            nvbttn1.style.borderBottom = "solid";
  788.            nvbttn1.style.transition = "all 0.2s ease 0s";
  789.        })
  790.        nvbttn1.addEventListener("mouseout", function() {
  791.            nvbttn1.style.borderBottom = "";
  792.        })
  793.        const nvbttn2 = document.getElementById("nvbttn2");
  794.        nvbttn2.addEventListener("mousemove", function() {
  795.            nvbttn2.style.borderBottom = "solid";
  796.            nvbttn2.style.transition = "all 0.2s ease 0s";
  797.        })
  798.        nvbttn2.addEventListener("mouseout", function() {
  799.            nvbttn2.style.borderBottom = "";
  800.        })
  801.        const nvbttn3 = document.getElementById("nvbttn3");
  802.        nvbttn3.addEventListener("mousemove", function() {
  803.            nvbttn3.style.borderBottom = "solid";
  804.            nvbttn3.style.transition = "all 0.2s ease 0s";
  805.        })
  806.        nvbttn3.addEventListener("mouseout", function() {
  807.            nvbttn3.style.borderBottom = "";
  808.        })
  809.        const nvbttn4 = document.getElementById("nvbttn4");
  810.        nvbttn4.addEventListener("mousemove", function() {
  811.            nvbttn4.style.borderBottom = "solid";
  812.            nvbttn4.style.transition = "all 0.2s ease 0s";
  813.        })
  814.        nvbttn4.addEventListener("mouseout", function() {
  815.            nvbttn4.style.borderBottom = "";
  816.        })
  817.        const nvbttn5 = document.getElementById("nvbttn5");
  818.        nvbttn5.addEventListener("mousemove", function() {
  819.            nvbttn5.style.borderBottom = "solid";
  820.            nvbttn5.style.transition = "all 0.2s ease 0s";
  821.        })
  822.        nvbttn5.addEventListener("mouseout", function() {
  823.            nvbttn5.style.borderBottom = "";
  824.        })
  825.        const nvbttn6 = document.getElementById("nvbttn6");
  826.        nvbttn6.addEventListener("mousemove", function() {
  827.            nvbttn6.style.borderBottom = "solid";
  828.            nvbttn6.style.transition = "all 0.2s ease 0s";
  829.        })
  830.        nvbttn6.addEventListener("mouseout", function() {
  831.            nvbttn6.style.borderBottom = "";
  832.        })
  833.  
  834.  
  835.        // Formatowanie nagłówka, Zmiana tekstu i dodanie tekstu
  836.        
  837.        const regulamin = document.getElementById("regulamin_naglowek");
  838.        regulamin.innerHTML = "<p><b>Regulamin</b></p>"
  839.  
  840.         const ul = document.getElementById("regulations").getElementsByTagName("li");
  841.         ul[1].textContent = "Tutaj jakiś tekst";
  842.         ul[2].textContent = "Tutaj też jakiś tekst";
  843.  
  844.  
  845.         var newEl = document.createElement('li');
  846.         var textEl = document.createTextNode('dodany tekst');
  847.         newEl.appendChild(textEl);
  848.         var position = document.getElementsByTagName('ul')[0];
  849.         position.appendChild(newEl);
  850.  
  851.  
  852.         // Zmiana koloru linijki regulaminu po wciśnięciu przycisku na klawiaturze
  853.        
  854.         const html = document.querySelector("html");
  855.         const regulaminli = document.querySelectorAll("li.regulaminli");
  856.         console.log(regulaminli);
  857.         html.addEventListener("keydown", function() {
  858.             regulaminli[0].style.color = "green";
  859.         })
  860.         html.addEventListener("keyup", function() {
  861.             regulaminli[0].style.color = "black";
  862.         })
  863.        
  864.         // Pojawianie się tekstu zmiany motywu
  865.  
  866.         const motywtxt = document.getElementById("motywtxt");
  867.         motyw.addEventListener("mouseover", function() {
  868.             motywtxt.classList.add("scalex");
  869.  
  870.         })
  871.         motyw.addEventListener("mouseout", function() {
  872.             motywtxt.classList.remove("scalex");
  873.         })
  874.        
  875.         const mail = document.getElementById("Emailreg");
  876.        
  877.         mail.addEventListener('blur', function(){
  878.         const i=nick.value;
  879.            
  880.             if(i.Reg)
  881.         })
  882.  
  883.     </script>
  884.     <!-- -->
  885.  
  886.  
  887.     <script src="https://kit.fontawesome.com/0a17ea94fd.js" crossorigin="anonymous"></script>
  888.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  889.     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  890.     <script src="js/bootstrap.min.js"></script>
  891.  
  892.  
  893.     <!-- KONIEC: SKRYPTY -->
  894.  
  895. </body>
  896.  
  897. </html>
  898.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!