Index html lehe kood

Minu index.html leht https://markosuvorov24.thkit.ee/

HTML Kood:

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <title>Marko Suvorov 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>
        var lahti = true;
        function punaseks() {
            $('h1, #tekst').css('color', 'red');
        }

        function siniseks() {
            $('h1').css('color', 'blue');
        }

        function mustaks() {
            $('h1, #tekst').css('color', 'black');
        }
        function naitapeida() {
            $('#tekst').slideToggle();
            if (lahti) {
                lahti = false;
                $('#knopka').val("Näita");
            } else {
                lahti = true;
                $('#knopka').val("Peida");
            }
        }

        function start() {
            $('h1, #tekst').mouseenter(punaseks);
            $('h1').mouseenter(siniseks);
            $('h1, #tekst').mouseleave(mustaks);

            $('#pilt').draggable();
            $('#tekst').draggable();

        }

        function animateLeft() {
            $('#tekst, h1').animate({ left: '600px' }, 1000);
        }

        function animateRight() {
            $('#tekst, h1').animate({ left: '0px' }, 1000);
        }
    </script>
</head>
<body onload="start()">
<header>
    <h1>Marko veebirakenduste tööde leht</h1>
</header>
<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>
<main>
    <section>
        <h2 >Info minust...</h2>
        <div id="tekst">Ma olen õpilane. Minu hobbi on programeerimine. Ma programeerin HTML, CSS, JavaScript ja Python keeles. Ma õpin TiTpv24 rühmas</div>
    </section>
    <input type="button" value="--->" onclick="animateLeft()">
    <input type="button" value="<---" onclick="animateRight()">
    <input type="button" value="peida" id="knopka" onclick="naitapeida()">
    <br>
    <img src="point.png" alt="samosval" id="pilt" width="200px">
</main>
<footer>
    <strong>Marko Suvorov &copy; 2024</strong>
</footer>

</body>
</html>

CSS Kood:

header h1{
    border: solid 1px purple;
    padding: 3%;
    margin: 10px;
    text-align: center;
    border-radius: 60px;
    width: 60%;
    background-color: lightcoral;
    letter-spacing: 0.2cm;
    font-variant: small-caps;
    background-position: center;
    position: relative;
    left: 0;

}
ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: darkviolet;
}
li{
    float: left;
    display: block;
    text-align: center;
    padding: 10px;
}
li a{
    text-decoration: none;
    color: white;
    padding: 10px;
}
li a:hover{
    background-color: teal;
}
footer{
    text-align: center;
    margin: auto;
    background-color: darkred;
    color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
title{
    background-position: center;
    text-align: center;
}
section{
    background-color: lawngreen ;
}
section h2{
    text-align: center;
    background-position: center;
    border-radius: 60%;
    font-weight: bold;
}
section div{
    text-align: center;
    font-weight: bold;
}
ul li{
    text-align: center;
}
section#lingid{
    
}