Index.html lehe kood

Minu index.html leht

<!DOCTYPE html>
<html lang="et">
<head>
  <meta charset="UTF-8">
  <title>Fjodor koduleht</title>
  <link rel="stylesheet" href="kodulehtStyle.css">
  <!-- Подключаем jQuery и jQuery UI -->
  <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>
  <style>
    /* Стиль для плавных анимаций */
    .moveable {
      position: relative;
      transition: transform 0.3s ease;
    }
  </style>
</head>
<body>

<!-- Поначалу -->

<header>
  <h1 class="moveable">Fjodor veebirakenduste tööde leht</h1>
</header>

<nav>
  <ul class="moveable">
    <li>
      <a href="index.html">Kodu</a></li>
    <li>
      <a href="synavara.html">Sõnavara</a></li>
    <li>
      <a href="tehtudTööd.html">Tehtud tööd</a></li>
    <li>
      <a href="kasutatudLingid.html">Kasulikud lingid</a></li>
  </ul>
</nav>

<!-- Содержание -->
<main>
  <section class="moveable">
    <h2 >Info minust</h2>
    <div >Ma olen õpilane Tallinna TööstusHaridusKeskuses
      <br>
      Ma olen 16 aastat vana
      </br>
      <br>
      Minu hobideks on joonistamine ja jalgpall
      </br>
    </div>

    <!-- Кнопки для движения элементов -->
    <button id="moveLeft">Move Left</button>
    <button id="moveRight">Move Right</button>
  </section>
</main>

<!-- Подвал -->
<footer>
  <strong>Fjodor Ruzanov &copy; 2024</strong>
</footer>

<script>
  $(document).ready(function() {
    // Инициализация позиции
    let position = 0;

    // Двигаем влево
    $('#moveLeft').click(function() {
      position -= 20; // Уменьшаем на 20px
      $('.moveable').animate({
        left: position
      }, 300); // Плавное движение
    });

    // Двигаем вправо
    $('#moveRight').click(function() {
      position += 20; // Увеличиваем на 20px
      $('.moveable').animate({
        left: position
      }, 300); // Плавное движение
    });
  });
</script>

</body>
</html>

CSS kood 

header h1{
    border: solid 1px darkslateblue; /*ääris*/
    padding: 4%; /*vahe tekstist ääreseni*/
    margin: 10px;
    border-radius: 60px;
    width: 60%;
    background-color: mediumorchid;
    letter-spacing: 0.05cm;
    font-variant: small-caps;
}
ul{
    list-style: none;
    margin: 0px;
    padding: 5px;
    overflow: hidden;
    background-color: lightseagreen;
    

}

li{
    float: left;
    display: block;
    text-align: center;
    padding: 0px;
}

li a{
    text-decoration: none;
    color: black;
    padding: 10px;

}
li a:hover{ /*lingid fokuses*/
background-color: darkslateblue;

}
footer{
    text-align: center;
    /* margin-top: 20%;*/
    background-color: peru;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

}

section{
    background-color: lightseagreen;
    color: darkslateblue;
}