JakubJaneczek

Projekt

Apr 13th, 2021 (edited)
215
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Stronka projekt</title>
  6.   <style>
  7.     header {
  8. background: #21c812;
  9. height: 50px;
  10. font-family: Brush Script MT;
  11. text-align: center;
  12. }
  13. right {
  14. background: #9ecb9a;
  15. height: 600px;
  16. width: 20%;
  17. float: left;
  18. }
  19. main {
  20. background: #44de38;
  21. height: 600px;
  22. width: 60%;
  23. text-align: center;
  24. float: left
  25. }
  26. left {
  27. background: #77ff6b;
  28. height: 600px;
  29. width: 20%;
  30. float: left;
  31. }
  32.  
  33. footer {
  34. height: 50px;
  35. background: #214d1d;
  36. font-family: Arial;
  37. text-align: right;
  38. clear: both;
  39. }
  40.  
  41.  
  42.  
  43.     </style>
  44.  </head>
  45.  <body>
  46.   <header>
  47.     <h1>Bonsai</h1>
  48.   </header>
  49.   <right class="rightclass">
  50.     <h4>Podstawowe style bonsai</h4>
  51.     <ul class ="lista"><li>Styl Bunjingi</li>
  52.         <li>Styl Chokkan</li>
  53.         <li>Styl Fukinagashi</li>
  54.         <li>Styl Hōkidachi</li>
  55.         <li>Styl Ikadabuki</li>
  56.     </ul>
  57.     <button id="myBtn">Wciśnij</button>
  58. </right>
  59.   <main>
  60.    <top class="topclass">
  61.     <h1 id="t">Bonsai dla każdego</h1>
  62.     <h2>Czy kiedykolwiek marzyłeś o swoim własnym drzewku?</h2>
  63.     <p>Pomożemy Ci wybrać najlepsze do Twojego wnętrza</p><a href="#">link</a>
  64.     <p>
  65.       Bonsai – sztuka miniaturyzowania drzew lub krzewów uprawianych w odpowiednio dobranych, płaskich pojemnikach. Efekt ten jest uzyskiwany poprzez specyficzne przycinanie oraz pielęgnację. W potocznym znaczeniu – zminiaturyzowane rośliny o sztucznie wymuszonym, płytkim systemie korzeniowym umieszczone w płaskim naczyniu.
  66.     </p>
  67.    
  68.  
  69.    </top>
  70.    <bottom class="bottom class">
  71.     <form id=formularz>
  72.       <h4>Zapisz się do naszego newslettera</h4>
  73.       <label for="fname">Imię:</label><br>
  74.       <input type="text" id="fname" name="fname"><br>
  75.       <label for="lname">Adres e-mail:</label><br>
  76.       <input type="text" id="email" name="email"><br>
  77.       <label for="numb">Numer telefonu:</label><br>
  78.       <input type="number" id="numb" name="numb"><br>
  79.       <input type="checkbox" id="zgoda" name="zgoda" value="zgd">
  80.       <label for="zgoda"> Zapoznałem się z regulaminem strony</label><br>
  81.       <input type="radio" id="new" name="new" value="newsletter">
  82.       <label for="new">Chcę być informowany o nowościach</label><br>
  83.       <input type="submit" id="zapisz" value="Zapisuję się">
  84.   </form>
  85.   </main>
  86. <left class="leftclass">
  87.  
  88. </left>
  89.   <footer>
  90.    <h3>Stopka</h3>
  91.   </footer>
  92.   <script>
  93. console.log(document.getElementById("email"));
  94. console.log(document.querySelector("right"));
  95. console.log(document.getElementsByClassName("topclass"));
  96. console.log(document.getElementsByTagName("li"));
  97. console.log(document.querySelectorAll("div"));
  98.  
  99. var titl=document.getElementById("t");
  100. t.style.color="lightblue";
  101.  
  102. var list=document.getElementsByTagName("li");
  103. list[1].textContent="Styl Kengai"
  104. list[2].textContent="Styl Kengai"
  105.  
  106. var par=document.querySelector("h4");
  107. par.outerHTML="<p><b>Podstawowe style bonsai</b><p>";
  108.  
  109.   var element=document.createElement('li');
  110.         var textl=document.createTextNode('Styl Ikadabuki');
  111.         element.appendChild(textl);
  112.         var position=document.getElementsByTagName('ul')[0];
  113.         position.appendChild(element);
  114.  
  115.  
  116. document.getElementById("myBtn").addEventListener("click", function() {
  117.   alert("Wiesz co znaczą te nazwy?");
  118.   console.log("Powinno działać");
  119. });
  120.  
  121. var input=document.querySelector('input')
  122. ;
  123. input.addEventListener('blur', ()=> {
  124.   input.style.backgroundColor="grey";
  125.  
  126. });
  127.  
  128. var kolor=document.getElementById('formularz');
  129. kolor.addEventListener('keydown', kolorek);
  130.  
  131.   function kolorek() {
  132.   kolor.style.color="blue"; }
  133.  
  134.  
  135.   document.getElementById("zapisz").addEventListener("click", function() {
  136.   alert("Gratulacje");
  137.  
  138. });
  139. document.forms['formularz'].reset();
  140. </script>
  141.  </body>
  142. </html>
RAW Paste Data