Index HTML lehe kood | Sofia ÕPIMAPP / Portfoolio

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <title>Sofia koduleht</title>
  <link rel="stylesheet" href="kodulehtStyle.css">
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js" integrity="sha256-AlTido85uXPlSyyaZNsjJXeCs07eSv3r43kyCVc8ChI=" crossorigin="anonymous"></script>
  

  <script>
    function purpleseks(){
      $('section').css('color', 'purple');
    }
    function greenseks(){
      $('h1').css('color', 'green');
    }
    function mustaks(){
      $('h1, section').css('color', 'black');
    }
    var lahti=true;
    function naitapeida(){

      $('section').slideToggle();
      if(lahti){
        lahti=false;
        $('#knopka').val("Näita")
      } else{
        lahti=true;
        $('#knopka').val("Peida")
      }
    }

    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown("slow");
      });
    });
    function start(){
      $('section').mouseenter(purpleseks);
      $('h1').mouseenter(greenseks);
      $('h1, section').mouseleave(mustaks);
      $('#pilt').draggable();
    }


  </script>
</head>
<body onload="start()">
<!--päis-->
<header>
<h1>Sofia veebirakenduste tööde leht</h1>
</header>
<!--navigeerimismenüü-->
<nav>
  <ul>
    <li>
      <a href="index.html">Kodu</a>
    </li>
    <li>
      <a href="synavara.html">Sõnavara</a>
    </li>
    <li>
      <a href="tehtudTood.html">Tehtud tööd</a>
    </li>
    <li>
      <a href="kasutatudLingid.html">Kasulikud lingid</a>
    </li>
  </ul>
</nav>
<!--sisu-->
<main>
  <section>
    <h2>Info minust...</h2>
    <div>
      Mina olen õpilane.
      <br>
      Ma õpin TTHK.
      <br>
      Minu eriala on Tööstusinformaatik
      <br>
      Minu hobi on sport
    </div>
  </section>
</main>
<!--jalus-->
<footer>
  <strong>Sofia Vertsyukh &copy; 2024</strong>
</footer>


<br>
<br> <br> <br> <br> <br><br> <br> <br> <br> <br>
<br><br> <br> <br> <br>
<input type="button" value="-->" onclick="$('section').animate({left:'600px'},1000)">
<input type="button" value="<--" onclick="$('section').animate({left:'0px'},1000)">
<input type="button" value="peida" onclick="naitapeida()" id="knopka">

<img src="shark.jpg" alt="shark" id="pilt" width="300px">


<div id="flip">Click to slide down panel!</div>
<div id="panel">Ma õpin programmeerimist, veebirakendusi, elektrotehnikat ja paljusid teisi aineid.</div>






</body>
</html>

css fail:

header h1{
    border:solid 1px blue;
    padding: 2%; /*vahe tekstist ääriseni*/
    margin: 10px;
    text-align: center;
    border-radius:10px;
    width: 60%;
    background-color: cornflowerblue;
    letter-spacing: 0.2cm;
    font-variant: small-caps;
}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: lightsteelblue;
}
li{
    float: left;
    display: block;
    text-align: center;
    padding: 10px;
}
li a{
    text-decoration: none;
    color: black;
    padding: 8px;
}
li a:hover{ /*lingid fookuses*/
    background-color: darkblue;
}
footer{
    text-align: center;
    margin-top: auto;
    background-color: lightskyblue;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

}
section{
    text-align: center;
    margin-top: auto;
    background-color:aqua;
    position: fixed;
    padding: 2%;
    width: 12%;
    margin: 10px;
    position: absolute;
    left: 0;
}
section h2{
    font-family: Amiri;
    border:dotted 10px;
    background-color: dodgerblue;
    padding: 2%;
    width: 100%;



}

#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: lightskyblue;
    border: solid 1px black;
}

#panel {
    padding: 50px;
    display: none;
}