Code for the index.html page | Anastasia Jušinskaja Learning Portfolio

code

html

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <title>Anastasia Jušinskaja</title>
    <link rel="stylesheet" href="minustyle.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 punaseks(){
            $('h1').css('color', 'red');
        }
        function siniseks(){
            $('h1').css('color', 'blue');
        }
        function mustaks(){
            $('h1').css('color', 'black');
        }

        // Функция для скрытия/показа текста
        var lahti = true;
        function naitapeida(){
            $('main section').slideToggle();
            if (lahti) {
                lahti = false;
                $('#knopka').val("Näita");
            } else {
                lahti = true;
                $('#knopka').val("Peida");
            }
        }

        // Действия при наведении и перетаскивании
        function start() {
            $('h1').mouseenter(punaseks);
            $('h1').mouseleave(mustaks);
            $('h2').mouseenter(siniseks);
            $('h2').mouseleave(mustaks);
            // Изменение цвета текста при наведении
            $('div').mouseenter(function() {
                $(this).css('color', 'green');  // Цвет текста при наведении
            });
            $('div').mouseleave(function() {
                $(this).css('color', 'black');  // Возвращение к исходному цвету
            });

            // Делаем изображения и текст перетаскиваемыми
            $('img, h1, h2, div').draggable();

            // Стрелки для перемещения текста и заголовков
            $('#moveLeft').click(function() {
                $('h1, h2, div').animate({left: '-=100px'}, 500);
            });

            $('#moveRight').click(function() {
                $('h1, h2, div').animate({left: '+=100px'}, 500);
            });
            $('img').click(function() {
  $('body').css('background-color', 'lavender');
});
        }
    </script>
</head>
<body onload="start()">
<header>
  <h1>Anastasia Jušinskaja. See on veebirakenduste tööde leht</h1>
</header>
<nav>
  <ul>
    <li>
      <a href="index.html">kodu</a>
    </li>
    <li>
      <a href="sonavaraleht.html">sõnavara</a>
    </li>
    <li>
      <a href="tehtudtoodleht.html">tehtud tööd</a>
    </li>
    <li>
      <a href="kasulikudlingidleht.html">kasulikud lingid</a>
    </li>
  </ul>
</nav>
<main>
    <br>
  <section>
    <h2>Minu kontaktandmed</h2>
    <div>E-post: jushinskaja.n@gmail.com</div>
    <h2>Elukoht</h2>
    <div>Riik: Eesti</div>
    <div>Linn: Tallinn</div>
    <div>Rajoon: Kopli</div>
    <img src="spongebob.png" id="pilt" width="200px"/>
    <h3>Ma lisasin järgmised funktsioonid:</h3>

        <div>Pealkirja peale hiirega liikumisel muutub värv.</div>
            <div>Teksti peale hiirega liikumisel muutub värv.</div>
                <div>Pealkirja saab hiirega liigutada.</div>
                    <div>Teksti saab hiirega liigutada.</div>
                        <div>Nooled võimaldavad liigutada teksti ja pealkirja.</div>
                            <div>Nuppudega "peida" ja "näida" saab teksti peita ja kuvada.</div>
                                <div>Pildi peale klikates muutub tausta värv.</div>
  </section>
  <!-- Кнопка для скрытия/показа -->
  <input type="button" value="Peida" id="knopka" onclick="naitapeida()">

  <!-- Стрелки для перемещения текста -->
  <input type="button" value="<---" id="moveLeft">
  <input type="button" value="--->" id="moveRight">
</main>
<footer>
  <strong>Anastasia Jušinskaja &copy; 2024</strong>
</footer>
</body>
</html>

css

body{
    font-family: Georgia;/*fondi tüüp*/
    color: blue; /*teksti värv*/
}
h1{
    border: dotted 1px blue; /*dashed, outline, double, soolid, ääris*/
    padding: 5%; /*vahe tekstist ääriseni*/
    margin: 5px;
    border-radius: 40px;
    width: 40%; /*laius*/
    background-color: lavender; /*tausta värv*/
}
ul{
    list-style-type: circle; /*markeri tüüp - square; */
    padding: 5px;
    width: 40%;
    background-color: lavender;
}
ul li{
    background-color: lavender;
    margin: 5px;
}
li{
    float: left;
    display: block;
    text-align: center;
    padding: 10px;
}
footer{
    text-align: center;
   /* margin-top: 20%;*/
    background-color: lavender;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
table, td{
    width: 140%;
    border: solid 1px pink;
    border-collapse: collapse; /*ühine ääris*/
    background-color: lavender;
}