API tools faq
paste
Guest User

Untitled

a guest
Oct 20th, 2015
157
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.56 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang=en>
  3. <head>
  4. <title></title>
  5. <link href="css.css" rel="stylesheet" type="text/css" />
  6. <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  8. <meta charset=utf-8>
  9. <style>
  10. #ex3::-webkit-scrollbar {
  11.     width: 12px;
  12.     background: #4F4F4F;
  13. }
  14.  
  15. #ex3::-webkit-scrollbar-track {
  16.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  17.     height: 10px;
  18. }
  19.  
  20. #ex3::-webkit-scrollbar-thumb {
  21.     -webkit-box-shadow: inset 0 0 100px rgba(25,25,25,1);
  22.     height: 10px;
  23. }
  24. body{
  25. overflow-x: hidden;
  26. }
  27. .bot{
  28. position:   absolute;
  29. margin-top: 52.44%;
  30. }
  31. .top_menu {
  32. position:fixed;
  33. right:0;
  34. top:0;
  35. min-width:  100%;
  36. height:     45px;      
  37. background: #666666;
  38. text-align: right;
  39. padding-top:    22.5px;
  40. opacity:        0;
  41. }
  42. .top_menu:hover {
  43. position:fixed;
  44. right:0;
  45. top:0;
  46. min-width:  100%;
  47. height:     45px;      
  48. background: #666666;
  49. text-align: right;
  50. padding-top:    22.5px;
  51. opacity:        1;
  52. }
  53.  
  54. .top_menu2 {
  55. position:fixed;
  56. right:0;
  57. top:0;
  58. min-width:  100%;
  59. height:     45px;
  60. margin-top: 100%;      
  61. background: #666666;
  62. text-align: right;
  63. padding-top:    22.5px;
  64. opacity:        0;
  65. }
  66. .top_menu2:hover {
  67. position:fixed;
  68. right:0;
  69. top:0;
  70. min-width:  100%;
  71. height:     45px;
  72. margin-top: 100%;      
  73. background: #666666;
  74. text-align: right;
  75. padding-top:    22.5px;
  76. opacity:        1;
  77. }
  78.  
  79. a:link {
  80.     text-decoration: none;
  81. }
  82.  
  83. a:visited {
  84.     text-decoration: none;
  85. }
  86.  
  87. a:hover {
  88.     text-decoration: none;
  89.     text-shadow: 0 0 3px #FF0000;
  90. }
  91.  
  92. a:active {
  93.     text-decoration: none;
  94. }
  95.  
  96. .kontakt{
  97. margin-top: 156.5%;
  98. }
  99. .up{
  100. margin-top: -26.25%;
  101. }
  102. .sluzby{
  103. position: absolute;
  104. margin-top: 57.5%;
  105. margin-left:    20%;
  106. }
  107. .kontaktuj{
  108. position: absolute;
  109. margin-top: -15.5%;
  110. margin-left:    25%;
  111. }
  112. .sloganed{
  113. font-size:      xx-large;
  114. }
  115. .sloganed_div{
  116. position:       absolute;
  117. min-width:      35%;
  118. max-width:      100%;
  119. margin-top:     20%;
  120. margin-left:    30%;
  121. }
  122. </style>
  123. </head>
  124. <body id='ex3'>                          
  125. <!-- JS Video SHOW START !-->
  126. <div class='videoFA'>
  127. <video autoplay loop id="bgvid">
  128. <source src="4036335.mp4" type="video/mp4">
  129. </video>            
  130. </div>                    
  131. <!-- JS Video SHOW END !-->
  132. <div class='logo'></div>
  133. <div class='div' id="polina">
  134. <div id='but' class='button'></div>
  135. </div>
  136. <a href='#' onclick='scrollTobox()' class='help'>How we can help</a>
  137.  
  138. <div class=top_menu>
  139. <table style='text-align:   right; width:   75%; height:    25px;'>
  140.     <tr>
  141.         <td>
  142.             <a href='#'><font color='#FFF'>Hudba</a></font>
  143.         </td>
  144.         <td>
  145.             <a href='#'><font color='#FFF'>Vůně</a></font>
  146.         </td>
  147.         <td>
  148.             <a href='#'><font color='#FFF'>Videa</a></font>
  149.         </td>
  150.         <td>
  151.             <a href='#'><font color='#FFF'>Digital</a></font>
  152.         </td>
  153.         <td>
  154.             <a href='#' onclick='kontakt()'><font color='#FFF'>Kontakt</a></font>
  155.         </td>
  156.     </tr>
  157. </table>
  158. </div>
  159. <!-- JS SLOGANY END !-->
  160. <div class='sloganed_div'>
  161. <p id="display" class='sloganed'></p>
  162. </div>
  163. <script>
  164. // Seznam Sloganů
  165. var quoteArray = ['Zabýváme se <font color="#00FFEE">Vůní</font>', 'Zpravujeme pro vás <font color="orange">Video</font>', 'Potřebujete <font color="#FF0000">Hudbu</font> ? -Jsme ti Pravý', 'Zpravujeme pro vás <font color="orange">Video</font>'];
  166.  
  167. // Kde ho chceme zobrazit
  168. display = document.getElementById('display');
  169.  
  170. var currentElement;
  171.  
  172. // nahodně zabíchat slogany
  173. function shuffle(array) {
  174.   var currentIndex = array.length, temporaryValue, randomIndex ;
  175.  
  176.   // nesmi se opakovat
  177.   while (0 !== currentIndex) {
  178.  
  179.     // Vzit slogan
  180.     randomIndex = Math.floor(Math.random() * currentIndex);
  181.     currentIndex -= 1;
  182.  
  183.     // a vyměnit s aktuálním sloganem
  184.     temporaryValue = array[currentIndex];
  185.     array[currentIndex] = array[randomIndex];
  186.     array[randomIndex] = temporaryValue;
  187.   }
  188.  
  189.   return array;
  190. }
  191.  
  192.  
  193. // funkce na výměnu
  194. function updateDisplay() {
  195.     // generuj náhodně
  196.     var randomElement = quoteArray[Math.floor(Math.random() * quoteArray.length)];
  197.  
  198.     // pokud vybraný element není current element
  199.     if (randomElement != currentElement) {
  200.         // fade out
  201.         $("#display").fadeOut("slow", function () {
  202.             // fade out
  203.             display.innerHTML = randomElement;
  204.             // fade in
  205.             $("#display").fadeIn("slow");
  206.         });
  207.         currentElement = randomElement;
  208.     } else {
  209.         // call update
  210.         updateDisplay();
  211.     }
  212. }
  213.  
  214. // znovu call update
  215. updateDisplay();
  216.  
  217. // menit každých 5000ms
  218. setInterval(function () {
  219.     updateDisplay();
  220. }, 5000);
  221. </script>
  222. <!-- JS SLOGANY END !-->
  223.  
  224. <!-- JS MOVE-TO blocky START !-->
  225. <script>
  226.         function scrollTobox() {
  227.             $('html, body').animate({ scrollTop: $('#hhhh').offset().top }, 'slow');
  228.             return false;
  229.         }
  230. </script>
  231. <!-- JS MOVE-TO blocky END !-->
  232.  
  233. <!-- JS MOVE-TO kontakty START !-->
  234. <script>
  235.         function kontakt() {
  236.             $('html, body').animate({ scrollTop: $('#kontakty').offset().top }, 'slow');
  237.             return false;
  238.         }
  239. </script>
  240. <!-- JS MOVE-TO kontakty END !-->
  241.  
  242. <!-- JS Video START !-->
  243. <script>
  244. var video = document.getElementById("bgvid"),
  245. pauseButton = document.querySelector("#polina .button");
  246.  
  247. function vidFade() {
  248.   video.classList.add("stopfade");
  249. }
  250.  
  251. video.addEventListener("ended", function()
  252. {
  253. video.pause();
  254. vidFade();
  255. }, false);
  256. pauseButton.addEventListener("click", function() {
  257.   if (video.muted) {
  258. video.muted= false;
  259. document.getElementById("but").className = "button";
  260.   } else {
  261.  
  262. video.muted= true;
  263. document.getElementById("but").className = "buttons";
  264.   }
  265. }, false);
  266. </script>
  267. <!-- JS Video END !-->
  268. <center>
  269. <div class='sluzby'>
  270. <div class='line'>
  271. </div>
  272. <h2>Naše Služby</h2>
  273. <div class='line'>
  274. </div>
  275. </div>
  276. </center>
  277. <div class='block1'><p>
  278. <center><font color='#000'>
  279. <h3>Easy Music</h3><br>
  280. </center>
  281. <li>Návrhy Hudebního Programu</li>
  282. <li>Instalace a Dodávka HW</li>
  283. <li>Dodávka a Instalace AV</li>
  284. <li>Záruční a Pozáruční Servis</li>
  285. <li>Poskytnutí Hud. ors.<br>
  286. včetně veř. produkce<br></li></p></div>
  287. <div class='block2'><p>
  288. <center><font color='#000'>
  289. <h3>Easy Music</h3><br>
  290. </center>
  291. <li>Návrhy Hudebního Programu</li>
  292. <li>Instalace a Dodávka HW</li>
  293. <li>Dodávka a Instalace AV</li>
  294. <li>Záruční a Pozáruční Servis</li>
  295. <li>Poskytnutí Hud. ors.<br>
  296. včetně veř. produkce<br></li></p></div>
  297. <div class='block3'><p>
  298. <center><font color='#000'>
  299. <h3>Easy Music</h3><br>
  300. </center>
  301. <li>Návrhy Hudebního Programu</li>
  302. <li>Instalace a Dodávka HW</li>
  303. <li>Dodávka a Instalace AV</li>
  304. <li>Záruční a Pozáruční Servis</li>
  305. <li>Poskytnutí Hud. ors.<br>
  306. včetně veř. produkce<br></li></p></div>
  307.  
  308. <div class='block1b'><p>
  309. <center><font color='#000'>
  310. <h3>Easy Music</h3><br>
  311. </center>
  312. <li>Návrhy Hudebního Programu</li>
  313. <li>Instalace a Dodávka HW</li>
  314. <li>Dodávka a Instalace AV</li>
  315. <li>Záruční a Pozáruční Servis</li>
  316. <li>Poskytnutí Hud. ors.<br>
  317. včetně veř. produkce<br></li></p></div>
  318. <div class='block2b'><p>
  319. <center><font color='#000'>
  320. <h3>Easy Music</h3><br>
  321. </center>
  322. <li>Návrhy Hudebního Programu</li>
  323. <li>Instalace a Dodávka HW</li>
  324. <li>Dodávka a Instalace AV</li>
  325. <li>Záruční a Pozáruční Servis</li>
  326. <li>Poskytnutí Hud. ors.<br>
  327. včetně veř. produkce<br></li></p></div>
  328. <div class='block3b'><p>
  329. <center><font color='#000'>
  330. <h3>Easy Music</h3><br>
  331. </center>
  332. <li>Návrhy Hudebního Programu</li>
  333. <li>Instalace a Dodávka HW</li>
  334. <li>Dodávka a Instalace AV</li>
  335. <li>Záruční a Pozáruční Servis</li>
  336. <li>Poskytnutí Hud. ors.<br>
  337. včetně veř. produkce<br></li></p>
  338. </div>
  339. <div class=bot id=hhhh>
  340. </div>
  341. <center>
  342. <div class='kontaktuj'>
  343. <div class='line'>
  344. </div>
  345. <h2>Kontaktujte Nás</h2>
  346. <div class='line'>
  347. </div>
  348. </div>
  349. </center>
  350. <div class=kontakt id=kontakty>
  351. <div class='up'>
  352. <center>
  353. <form class="pure-form">
  354.     <fieldset class="pure-group">
  355.         <input type="text" class="pure-input-1-2" placeholder="Jméno a Příjmení">
  356.         <input type="text" class="pure-input-1-2" placeholder="Mobil">
  357.         <input type="email" class="pure-input-1-2" placeholder="Email">
  358.     </fieldset>
  359.  
  360.     <fieldset class="pure-group">
  361.         <input type="text" class="pure-input-1-2" placeholder="Předmět">
  362.         <textarea class="pure-input-1-2" placeholder="Zde zadejte Text"></textarea>
  363.     </fieldset>
  364.  
  365.     <button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Napsat</button>
  366. </form><br><br><br><br><br><br><br><br><br><br><br><br>
  367. </div>
  368. </div>
  369. </body>
  370. </html>
Advertisement
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!