Projekt

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Stronka projekt</title>
  <style>
    header {
background: #21c812;
height: 50px;
font-family: Brush Script MT;
text-align: center;
}
right {
background: #9ecb9a;
height: 600px;
width: 20%;
float: left;
}
main {
background: #44de38;
height: 600px;
width: 60%;
text-align: center;
float: left
}
left {
background: #77ff6b;
height: 600px;
width: 20%;
float: left;
}

footer {
height: 50px;
background: #214d1d;
font-family: Arial;
text-align: right;
clear: both;
}


    </style>
 </head>
 <body>
  <header>
    <h1>Bonsai</h1>
  </header>
  <right class="rightclass">
    <h4>Podstawowe style bonsai</h4>
    <ul class ="lista"><li>Styl Bunjingi</li>
        <li>Styl Chokkan</li>
        <li>Styl Fukinagashi</li>
        <li>Styl Hōkidachi</li>
        <li>Styl Ikadabuki</li>
    </ul>
    <button id="myBtn">Wciśnij</button>
</right>
  <main>
   <top class="topclass">
    <h1 id="t">Bonsai dla każdego</h1>
    <h2>Czy kiedykolwiek marzyłeś o swoim własnym drzewku?</h2>
    <p>Pomożemy Ci wybrać najlepsze do Twojego wnętrza</p><a href="#">link</a>
    <p>
      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.
    </p>


   </top>
   <bottom class="bottom class">
    <form id=formularz>
      <h4>Zapisz się do naszego newslettera</h4>
      <label for="fname">Imię:</label><br>
      <input type="text" id="fname" name="fname"><br>
      <label for="lname">Adres e-mail:</label><br>
      <input type="text" id="email" name="email"><br>
      <label for="numb">Numer telefonu:</label><br>
      <input type="number" id="numb" name="numb"><br>
      <input type="checkbox" id="zgoda" name="zgoda" value="zgd">
      <label for="zgoda"> Zapoznałem się z regulaminem strony</label><br>
      <input type="radio" id="new" name="new" value="newsletter">
      <label for="new">Chcę być informowany o nowościach</label><br>
      <input type="submit" id="zapisz" value="Zapisuję się">
  </form>
  </main>
<left class="leftclass">

</left>
  <footer>
   <h3>Stopka</h3>
  </footer>
  <script>
console.log(document.getElementById("email"));
console.log(document.querySelector("right"));
console.log(document.getElementsByClassName("topclass"));
console.log(document.getElementsByTagName("li"));
console.log(document.querySelectorAll("div"));

var titl=document.getElementById("t");
t.style.color="lightblue";

var list=document.getElementsByTagName("li");
list[1].textContent="Styl Kengai"
list[2].textContent="Styl Kengai"

var par=document.querySelector("h4");
par.outerHTML="<p><b>Podstawowe style bonsai</b><p>";

  var element=document.createElement('li');
        var textl=document.createTextNode('Styl Ikadabuki');
        element.appendChild(textl);
        var position=document.getElementsByTagName('ul')[0];
        position.appendChild(element);


document.getElementById("myBtn").addEventListener("click", function() {
  alert("Wiesz co znaczą te nazwy?");
  console.log("Powinno działać");
});

var input=document.querySelector('input')
;
input.addEventListener('blur', ()=> {
  input.style.backgroundColor="grey";

});

var kolor=document.getElementById('formularz');
kolor.addEventListener('keydown', kolorek);

  function kolorek() {
  kolor.style.color="blue"; }


  document.getElementById("zapisz").addEventListener("click", function() {
  alert("Gratulacje");

});
document.forms['formularz'].reset();
</script>
 </body>
</html>