Advertisement
aurimas12

Untitled

Jun 22nd, 2018
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.87 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <style>
  6. * {box-sizing: border-box;}
  7. body {font-family: Verdana, sans-serif;}
  8. .mySlides {display: none;}
  9. img {vertical-align: middle;}
  10.  
  11. /* Slideshow container */
  12. .slideshow-container {
  13.   max-width: 1000px;
  14.   position: relative;
  15.   margin: auto;
  16. }
  17.  
  18. /* Caption text */
  19. .text {
  20.   color: #f2f2f2;
  21.   font-size: 15px;
  22.   padding: 8px 12px;
  23.   position: absolute;
  24.   bottom: 8px;
  25.   width: 100%;
  26.   text-align: center;
  27. }
  28.  
  29. /* Number text (1/3 etc) */
  30. .numbertext {
  31.   color: #f2f2f2;
  32.   font-size: 12px;
  33.   padding: 8px 12px;
  34.   position: absolute;
  35.   top: 0;
  36. }
  37.  
  38. /* The dots/bullets/indicators */
  39. .dot {
  40.   height: 15px;
  41.   width: 15px;
  42.   margin: 0 2px;
  43.   background-color: #bbb;
  44.   border-radius: 50%;
  45.   display: inline-block;
  46.   transition: background-color 0.6s ease;
  47. }
  48.  
  49. .active {
  50.   background-color: #717171;
  51. }
  52.  
  53. /* Fading animation */
  54. .fade {
  55.   -webkit-animation-name: fade;
  56.   -webkit-animation-duration: 1.5s;
  57.   animation-name: fade;
  58.   animation-duration: 1.5s;
  59. }
  60.  
  61. @-webkit-keyframes fade {
  62.   from {opacity: .4}
  63.   to {opacity: 1}
  64. }
  65.  
  66. @keyframes fade {
  67.   from {opacity: .4}
  68.   to {opacity: 1}
  69. }
  70.  
  71. /* On smaller screens, decrease text size */
  72. @media only screen and (max-width: 300px) {
  73.   .text {font-size: 11px}
  74. }
  75. </style>
  76. </head>
  77. <body>
  78.  
  79. <?php
  80.  
  81. @ob_start();
  82.  
  83. @session_start();
  84. echo'<meta name="viewport" content="width=device-width, initial-scale=1">';
  85.  
  86. include_once 'cfg/sql.php';
  87.  
  88. $nust = mysql_fetch_assoc(mysql_query("SELECT * FROM nustatymai"));
  89.  
  90. $new = mysql_fetch_assoc(mysql_query("SELECT * FROM news ORDER BY id DESC LIMIT 1"));
  91.  
  92. head();
  93. ////////////////////////////////////////////PAGRINDINIS LOGOTIPAS/////////////////////////
  94.  
  95.  
  96.  
  97.  
  98. echo'<a href="http://www.unikurtilt.us.lt" ><img src="sarnyras.gif" alt="HTML5 Icon" width="100%" height="auto"></a>';
  99.  
  100.  
  101.  
  102.  
  103. if($i == ""){
  104. //////////////////////////////////////////viršutinis meniu///////////////////////
  105. echo'<div class="navbar" width="100%" height="auto">
  106.   <a href="http://www.unikurtilt.us.lt" class="active">Pagrindinis</a>
  107.   <a href="apie.php">Apie mus</a>
  108.   <a href="new.php">News</a>
  109.   <a href="kontaktai.php">Kontaktai</a>
  110. </div> ';
  111.  
  112.      
  113.  
  114.  
  115.   /*
  116. <p>
  117. <div class="topic"><font color="black"><u>PAPASAKOJIMAS APIE PAČIĄ GAMYBĄ AR KOKYBĘ YOU KNOW WHAT I MEAN <u/><b>'.date('H:i:s').'</u></p></font></div></div></div>';
  118.    
  119.    */  
  120.   }
  121.  
  122. ////////////////////////////////////////slideshow////paveikleliai//////////////////////////////
  123. echo'
  124. ?>
  125. <h2>Automatic Slideshow</h2>
  126. <p>Change image every 2 seconds:</p>
  127.  
  128. <div class="slideshow-container">
  129.  
  130. <div class="mySlides fade">
  131.   <div class="numbertext">1 / 3</div>
  132.   <img src="12.jpg" style="width:100%">
  133.  
  134. </div>
  135.  
  136. <div class="mySlides fade">
  137.   <div class="numbertext">2 / 3</div>
  138.   <img src="13.jpg" style="width:100%">
  139.  
  140. </div>
  141.  
  142. <div class="mySlides fade">
  143.   <div class="numbertext">3 / 3</div>
  144.   <img src="nicenum.jpg" style="width:100%">
  145.  
  146. </div>
  147.  
  148. </div>
  149. <br>
  150.  
  151. <div style="text-align:center">
  152.   <span class="dot"></span>
  153.   <span class="dot"></span>
  154.   <span class="dot"></span>
  155. </div>';
  156.  
  157.  
  158.  
  159.  
  160. <script>
  161. var slideIndex = 0;
  162. showSlides();
  163.  
  164. function showSlides() {
  165.     var i;
  166.     var slides = document.getElementsByClassName("mySlides");
  167.     var dots = document.getElementsByClassName("dot");
  168.     for (i = 0; i < slides.length; i++) {
  169.       slides[i].style.display = "none";  
  170.    }
  171.    slideIndex++;
  172.    if (slideIndex > slides.length) {slideIndex = 1}    
  173.     for (i = 0; i < dots.length; i++) {
  174.        dots[i].className = dots[i].className.replace(" active", "");
  175.    }
  176.    slides[slideIndex-1].style.display = "block";  
  177.    dots[slideIndex-1].className += " active";
  178.    setTimeout(showSlides, 2000); // Change image every 2 seconds
  179. }
  180. </script>
  181.  
  182. </body>
  183. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement