Index.html lehe kood

Minu kodulehe HTML

<!DOCTYPE html>
<html lang="et">
<head>
    <meta charset="UTF-8">
    <title>Elina 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 lillaks(){
            $('h1').css('color', 'DarkMagenta');

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

        }
        function sinine(){
            $('h2').css('color', 'blue');
        }
        function go(){
            $('h2').css('color', '#31065e');
        }


        function slideshow() {
            var i = 0;
            var images = ['spin.png', 'spin2.png', 'spin3.png', 'spin4.png', 'spin5.png', 'spin6.png', 'spin7.png', 'spin8.png'];

            setInterval(function() {
                $('#spin').attr('src', images[i]);
                i++;
                if (i >= images.length) i = 0;
            }, 120);
        }


        function start(){
            $('h1').mouseenter(lillaks);
            $('h1').mouseleave(black);
            $('h2').mouseenter(sinine);
            $('h2').mouseleave(go);

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


        }
        var lahti=true
        function naitapeida(){

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

            }
        }

        $(document).ready(function(){
            $("#button1").click(function(){
                $("li").fadeOut();
                $("li").fadeOut("slow");
                $("li").fadeOut(3000);
            });
        });

        $(document).ready(function(){
            $("#button2").click(function(){
                $("li").fadeIn();
                $("li").fadeIn("slow");
                $("li").fadeIn(3000);
            });
        });
        $(document).ready(function() {
            $("#switch1").click(function() {
                let img = $(this);
                let currentSrc = img.attr("src");

                if (currentSrc === "begpravo.png") {
                    img.attr("src", "begvlevo.png");
                } else {
                    img.attr("src", "begpravo.png");
                }
            });
        });


    </script>
</head>
<body onload="start()">

<!--päis-->
<header>
    <h1>Elina veebirakenduste tööde leht</h1>
    <img src="kabantik.png" alt="kaban" id="pilt" width="200px">
</header>

<input type="button" value="<----"
       onclick="$('h1').animate({left:'0px'}, 1050)">
<input type="button" value="---->"
       onclick="$('h1').animate({left:'600px'}, 1050)">
<br>
<button id="button1">Fade out</button>
<button id="button2">Fade in</button><br>


<!--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="kasulikudLingid.html">Kasulikud lingid</a>
        </li>
    </ul>
</nav>
<!--sisu-->

<input type="button" value="Peida" id="knopka" onclick="naitapeida()">


<main>
    <section>
        <h2>Info minust!</h2>
        <div>Mina olen Tallinna
            Tööstushariduskeskuse õpilane
        <br>
        Minu hobi on joonistamine
        <br>
        Ma õpin rühmas TITpv24
        </div>
    </section>
</main>

<img src="begpravo.png" alt="kaban" id="switch1" width="300px">
<img src="spin.png" alt="spin" id="spin" width="200px" height="200px">
<br><br><br>
<article>
    <h3>Funktsioonid, mis on lisatud jQuery abil:</h3>
    <div>
        1.Veebilehe päise tähed muudavad värvi, kui hiir nende peale liigub.
        <br>

        2. "Info minust!" muudab värvi, kui hiir selle peale liigub.
        <br>

        3. Päis liigub paremale ja vasakule noolte "--->" ja "<---" abil.
        <br>

        4. Navigeerimismenüü saab avada efektiga "fade in".
        <br>

        5. Navigeerimismenüü saab sulgeda efektiga "fade out".
        <br>

        6. Metssea pilti saab liigutada.
        <br>

        7. Infot "info minust" saab peita, vajutades nupule "Peida", ja avada, vajutades nupule "Näita".
        <br>
        8.Kui vajutada all olevale metsseale, muudab ta suunda, kuhu ta jookseb.
        <br>
        9.Teine metssiga pöörleb tänu funktsioonile "slideshow".
    </div>
</article>



<!--jalus-->
<footer>
    <strong>Elina Kotšur &copy; 2024</strong>
</footer>

</body>
</html>

Minu kodulehe CSS

table#lihtne{
    width: 100px;
    height: 40px;
    border: 4px #264559 solid;
    text-align: center; /*teksti joondamine keskele*/
    padding: 10px; /*vahe tekstist ääriseni*/
    background-color: #97bed3;
    border-collapse: collapse;
    font-size: 30px;
}
/*tabeli pseudoelimentide kasutamine*/
#lihtne tr:nth-child(1) td:nth-child(1){/*1.rida 1.lahter*/
    background-color: #665cbf;
}
#lihtne tr:nth-child(1) td:nth-child(2){/*1.rida 2.lahter*/
    background-color: #9a7ecc;
}
#lihtne tr:nth-child(1) td:nth-child(3){/*1.rida 3.lahter*/
    background-color: #665cbf;
}
#lihtne tr:nth-child(2) td:nth-child(1){/*2.rida 1.lahter*/
    background-color: #9a7ecc;
}
#lihtne tr:nth-child(2) td:nth-child(2){/*2.rida 2.lahter*/
    background-color: #665cbf;
}
#lihtne tr:nth-child(2) td:nth-child(3){/*2.rida 3.lahter*/
    background-color: #9a7ecc;
}
table#keeruline1 td{
    /*html failis id=keeruline1*/
    width: 150px;
    height: 70px;
    border: 4px #2c416c solid;
    text-align: center;
    padding: 10px;
    border-collapse: collapse;
    background-color: #8fa4d1;
    font-size: 30px;
}
table#keeruline2 td{
    width: 200px;
    height: 60px;
    border: 4px #2d2963 solid;
    text-align: center;
    padding: 10px;
    border-collapse: collapse;
    background-color: #928dd1;
    font-size: 30px;
}
table#keeruline3 td{
    width: 150px;
    height: 60px;
    border: 4px #3e235e solid;
    text-align: center;
    padding: 20px;
    font-size: 50px;
    background-color: #ab8ad3;
}
table#iseseisev{
    width: 250px;
    height: 50px;
    border: 4px #3e235e solid;
    text-align: center;
    padding: 20px;
    font-size: 50px;
    background-color: #c3b5d8;
}
#iseseisev tr:nth-child(1) td:nth-child(1){
    background-color: #665cbf;
}
#iseseisev tr:nth-child(1) td:nth-child(2){
    background-color: #9a7ecc;
}
#iseseisev tr:nth-child(1) td:nth-child(3){
    background-color: #7c4191;
}
#iseseisev tr:nth-child(2) td:nth-child(1){
    background-color: #8c3cdd;
}
#iseseisev tr:nth-child(2) td:nth-child(2){
    background-color: #325bbf;
}
#iseseisev tr:nth-child(3) td:nth-child(1){
    background-color: #665cbf;
}
#iseseisev tr:nth-child(3) td:nth-child(2){
    background-color: #7f4abf;
}
#iseseisev tr:nth-child(3) td:nth-child(3){
    background-color: #9a7ecc;
}
#iseseisev tr:nth-child(4) td:nth-child(1){
    background-color: #325bbf;
}
#iseseisev tr:nth-child(4) td:nth-child(2){
    background-color: #7c4191;
}
table#iseseisev2 {
    width: 250px;
    height: 200px;
    border: 4px #3e235e solid;
    padding: 10px;
    background-color: #c3b5d8;
    border-collapse: collapse;
}
#iseseisev2 tr:nth-child(1) td:nth-child(1){
    background-color: #7c4191;
}
#iseseisev2 tr:nth-child(2) td:nth-child(1){
    background-color: #9982c5;
}
#iseseisev2 tr:nth-child(2) td:nth-child(2){
    background-color: #6f3daa;
}
#iseseisev2 tr:nth-child(2) td:nth-child(3){
    background-color: #9a80c8;
}
#iseseisev2 tr:nth-child(3) td:nth-child(1){
    background-color: #8c3cdd;
}
#iseseisev2 tr:nth-child(3) td:nth-child(2){
    background-color: #325bbf;
}
#iseseisev2 tr:nth-child(3) td:nth-child(3){
    background-color: #8c3cdd;
}
#iseseisev2 tr:nth-child(4) td:nth-child(1){
    background-color: #233a7c;
}
#iseseisev2 tr:nth-child(5) td:nth-child(1){
    background-color: #754ea3;
}
#iseseisev2 tr:nth-child(6) td:nth-child(1){
    background-color: #7c4191;
}

Index.html lehe kood

kontaktInfo