RafalSobala

Rafał Sobala projekt html+js

Apr 9th, 2021
405
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="style.css">
  8.     <title>Document</title>
  9. </head>
  10. <body>
  11.    
  12. <div class="container">
  13. <header>
  14.    
  15.     <div class="ikony">
  16.         <div class="jezyk"><button name="en" id="en">EN</button></div>
  17.         <div class="jezyk"><button name="pl" id="pl">PL</button></div>
  18.     </div>
  19.     <h1>Zaplanuj wakacje!</h1>
  20. </header>
  21.  
  22. <div class="content">
  23.     <div class="menu">
  24.         <ul class="menu">
  25.             <li><a>Strona główna</a></li>
  26.             <li><a>Zdjęcia</a></li>
  27.             <li><a>Katalog</a></li>
  28.             <li><a>Kontakt</a></li>
  29.         </ul>
  30.     </div>
  31.     <h2>Witam!</h2>
  32. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet consectetur libero. Donec hendrerit ligula at dui sollicitudin, interdum pellentesque leo tincidunt. Maecenas sagittis, magna nec lobortis ultrices, magna augue efficitur augue, eget scelerisque nisi magna ac mi. Mauris in auctor purus. Mauris eget magna tellus. Duis vulputate laoreet ligula, non accumsan sem tincidunt vel. Quisque a sagittis diam, a pellentesque ante. Praesent placerat tortor justo, vel accumsan nibh convallis quis. Sed gravida metus nec fermentum sodales. Aenean ullamcorper mi odio, at euismod velit ornare ac. Nullam tellus metus, placerat non nibh iaculis, imperdiet sollicitudin lacus. Nunc porta maximus nisi, id maximus sapien facilisis consequat. Pellentesque nibh neque, porta ac nibh et, aliquet aliquam eros.
  33.  
  34.     Phasellus vitae aliquam leo. Vestibulum nisl est, tincidunt sed pellentesque ac, iaculis ac orci. Duis nec lacinia eros, eu tincidunt dolor. Vestibulum dolor sem, suscipit ac erat nec, consequat faucibus enim. Donec tempor quam a arcu ornare suscipit. Nam eu dolor et neque ullamcorper rutrum id ut lorem. Nunc tristique ullamcorper sollicitudin.
  35. <div class="sonda">
  36. <h2>Wybierz co lubisz:</h2>
  37.  
  38.   <form id ='f1' action="" method="">
  39.   <ul>
  40.       <input type="checkbox" name="gory">Góry
  41.       <input type="checkbox" name="morze">Morze
  42.       <input type="checkbox" name="lasy">Lasy
  43.       <input type="checkbox" name="jeziora">Jeziora
  44.       <input class="wyslij" type="submit" value="wyslij">
  45.  
  46.   </ul>
  47. </form>
  48.  
  49. </div>
  50. <p id="akapit">Vestibulum sagittis rutrum ipsum, at lobortis lorem elementum sed. Maecenas imperdiet imperdiet faucibus. Etiam cursus nulla diam, eget egestas arcu mollis id. Fusce maximus ante nisi, non condimentum felis aliquam aliquet. Suspendisse eu mattis libero, elementum viverra nunc. Maecenas hendrerit iaculis vehicula. Sed risus erat, gravida eget velit ut, placerat dictum risus. Donec semper neque a leo dictum suscipit. Duis faucibus faucibus elit, vel suscipit turpis gravida non. Duis pellentesque tortor sit amet odio finibus, vitae euismod massa commodo. Vivamus pharetra turpis orci, vitae tempor sapien congue gravida. Integer condimentum at metus ut lacinia. Sed non tellus orci.</p>    
  51. <p>    Nulla condimentum sit amet ipsum id suscipit. Suspendisse vulputate odio vitae convallis laoreet. Etiam imperdiet sed justo eget finibus. Suspendisse potenti. Ut hendrerit sem sit amet turpis porttitor sodales. Donec id posuere elit, in aliquet nisi. Nunc consequat orci sed hendrerit rutrum. Donec eget massa in diam dictum consectetur. Sed nec justo lacus.
  52. </p>    
  53. <p>
  54.     Pellentesque varius, nisl ut dictum tempor, urna libero pharetra leo, id pellentesque metus sem eu odio. Duis arcu nisi, semper at vestibulum nec, rutrum eget enim. Praesent a dapibus lacus. Donec felis magna, eleifend et sapien tincidunt, molestie iaculis mi. Proin et rutrum ex. Integer hendrerit neque eu nisl commodo molestie. Aliquam erat volutpat. Nullam eu quam in eros fermentum molestie. Nunc eleifend blandit orci, at finibus nibh gravida ac. Curabitur hendrerit commodo lacus, sed suscipit magna tristique non. Nam ac lacinia ante, et blandit dolor. Vestibulum venenatis neque ac nisl tincidunt, at maximus orci rhoncus. Donec at volutpat risus. Aenean placerat tristique ex, vitae pretium erat laoreet at.</p>
  55.  
  56. </p>
  57. <h2 id="nagloweklisty">Naglowek listy</h2>
  58. <ul>
  59.     <li>morze</li>
  60.     <li>gory</li>
  61.     <li>lasy</li>
  62.     <li>jeziora</li>
  63. </ul>
  64.  
  65.  
  66.  
  67. </div>
  68.  
  69. <footer>
  70. <p>Phasellus vitae aliquam leo. Vestibulum nisl est, tincidunt sed pellentesque ac, iaculis ac orci. Duis nec lacinia eros, eu tincidunt dolor. Vestibulum dolor sem, suscipit ac erat nec, consequat faucibus enim. Donec tempor quam a arcu ornare suscipit. Nam eu dolor et neque ullamcorper rutrum id ut lorem. Nunc tristique ullamcorper sollicitudin.</p>
  71. </footer>
  72. </div>
  73. </body>
  74. </html>
  75.  
  76.  
  77. <script>
  78. //-----------------------------------------------------------------------------------
  79.  
  80. var a=document.getElementById("akapit");
  81. var b=document.getElementsByClassName("menu");
  82. var c=document.querySelector("h1");
  83. var d=document.querySelectorAll("p");
  84. var e=document.getElementsByTagName("li");
  85. console.log(a);
  86. console.log(b);
  87. console.log(c);
  88. console.log(d);
  89. console.log(e);
  90.  
  91.  
  92. var h2=document.getElementsByTagName("h2")[0];
  93.     //console.log(h2);
  94. h2.style.color="blue";
  95. h2.textContent="nowy tekst";
  96.  
  97. var f=document.querySelector("h1");
  98. f.classList.add("czarny");
  99. //-----------------------------------------------------------------------------------
  100.  
  101. var nowyelement=document.createElement('li');
  102. var tekst2=document.createTextNode('staw');
  103. nowyelement.appendChild(tekst2);
  104. var chwytak=document.getElementsByTagName('ul')[2];
  105. chwytak.appendChild(nowyelement);
  106.  
  107. //-----------------------------------------------------------------------------------
  108. var button=document.getElementById("en");
  109. button.addEventListener('click', function (){  
  110. f.textContent="Let's planing your holidays!";
  111. });
  112.  
  113. var button=document.getElementById("pl");
  114. button.addEventListener('click', function (){  
  115. f.textContent="Zaplanuj swoje wakacje!";
  116. });
  117. //-----------------------------------------------------------------------------------
  118. var full=document.getElementsByClassName("content")[0];
  119.     //console.log(full);
  120. var liczba=0;
  121. full.addEventListener('contextmenu', function(){  
  122.     //console.log(liczba);
  123.     if(liczba==0){
  124.     liczba=1;
  125.     full.classList.add("czarnetlo");}
  126.     else{
  127.     liczba=0;
  128.     full.classList.remove("czarnetlo");
  129.     }
  130.     //console.log(liczba);
  131. });
  132. //----------------------------------------------------------------------------------
  133. var marginesy=document.getElementsByClassName("container")[0];
  134. console.log(marginesy);
  135.  
  136. document.body.addEventListener('keypress', (e) => {
  137.     //console.log(e);
  138.     //console.log(e.keyCode);
  139.  
  140.     if(e.keyCode == 100){
  141.         //lewo
  142.         marginesy.classList.remove("c100");
  143.         marginesy.classList.add("c40");
  144.     }
  145. });
  146.  
  147. document.body.addEventListener('keypress', (e) => {
  148.     if(e.keyCode == 97){
  149.         //prawo
  150.         marginesy.classList.remove("c40");
  151.         marginesy.classList.add("c100");
  152.     }
  153. });
  154. document.body.addEventListener('keypress', (e) => {
  155.     if(e.keyCode == 114){
  156.         //prawo
  157.         marginesy.classList.remove("c40");
  158.         marginesy.classList.remove("c100");
  159.     }
  160. });
  161. //----------------------------------------------------------------------------------
  162. </script>
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×