<!DOCTYPE html>
<html lang="et">
<head>
<meta charset="UTF-8">
<title>Darja 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.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<script>
// Funkcii dlya izmeneniya tsvetov
function roosaks() {
$('h1, #tekst').css('color', 'saddlebrown');
}
function pruun() {
$('h1').css('color', 'saddlebrown');
}
function mustaks() {
$('h1, #tekst').css('color', 'black');
}
// Peida / Pokazat' tekst
var lahti = true;
function naitapeida(){
$('tekst').slideToggle();
if (lahti){
lahti = false;
$('knopka').val("Näita");
} else{
lahti = true;
$('knopka').val("Peida");
}
}
// Efekty pri navedenii myshi
function navedenieMenu() {
$('nav ul li').hover(function() {
$(this).css('color', 'blue');
}, function() {
$(this).css('color', 'red');
});
}
// Efekt pri klike na knopku
function klikanieKnopki() {
$('#knopka').click(function() {
$(this).css('background-color', 'orange');
$('#tekst').toggle();
});
}
// Efekt pri skrolinge
function skroling() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('header').css('background-color', 'gray');
} else {
$('header').css('background-color', '');
}
});
}
// Slideshow (karusel')
function slideshow() {
var i = 5;
var images = ['monkey2.png', 'monkey3.png', 'monkey.png', 'monkey4.png'];
setInterval(function() {
$('#pilt').attr('src', images[i]);
i++;
if (i >= images.length) i = 0;
}, 1200);
}
// Perekladenie tem
function peremeshchenieTem() {
$('#tema').click(function() {
$('body').toggleClass('temnaya');
if ($('body').hasClass('temnaya')) {
$(this).val('Svetlaya Tema');
} else {
$(this).val('Temnaya Tema');
}
});
}
function fadeOutEffect() {
$('#tekst').fadeOut(1000);
}
// Efekt Fade In / Out
function fadeEffect() {
$('#tekst').fadeIn(1000);
}
// Start funkcii
function start() {
$('h1, #tekst').mouseenter(roosaks);
$('h1').mouseenter(pruun);
$('h1, #tekst').mouseleave(mustaks);
$('#pilt').draggable();
$('#tekst').draggable();
navedenieMenu();
klikanieKnopki();
skroling();
slideshow();
peremeshchenieTem();
}
</script>
</head>
<body onload="start()">
<header>
<h1>Darja 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="kasulikudLingid.html">Kasulikud lingid</a>
</li>
</ul>
</nav>
<main>
<section>
<h2>Info minust...</h2>
<div id="tekst">
Minu olen TTHK õpilane
<br>
Minu hobbyd on joonistamine
<br>
Minu erala on tööstusinformaatika
</div>
</section>
<input type="button" value="--->" onclick="$('#tekst, h1').animate({left:'600px'}, 1000)">
<input type="button" value="<---" onclick="$('#tekst, h1').animate({left:'0px'}, 1000)">
<input type="button" value="peida" id="knopka" onclick="naitapeida()">
<input type="button" value="Fade Out" onclick="fadeOutEffect()">
<input type="button" value="Fade In" onclick="fadeEffect()">
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<img src="monkey.png" alt="monkey" id="pilt" width="300px">
<br><br>
</main>
<br><br>
<h3>Avalehel saate: </h3>
<br>
<article>
<div id="zadania">
1. Hõljutage kursorit üleval teksti kohal ja Info minust (värv muutub).
<br>
2. Kui klõpsate teksti kohal olevatel nooltel, liigub tekst vasaku nupuga vasakule ja parema nupuga paremale.
<br>
3. Nupp "paide" eemaldatakse ja kuvatakse tekst.
<br>
4. "Fade out" nupp kaob, peites teksti.
<br>
5. Nupp "Fade in" näitab teksti aeglaselt.
<br>
6. Teksti "info minust" saab liigutada.
<br>
7. Ahvidega fotosid saab teisaldada.
<br>
8. Ahvide fotod muutuvad.
</div>
</article>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<footer>
<strong>Darja Kovalenko © 2024</strong>
</footer>
</body>
</html>
Minu css
/* Stil' dlya header h1 */
header h1 {
border: solid 1px revert; /* Obozhdenie */
padding: 3%; /* Razryv ot teksta do ogranicheniya */
margin: 10px;
border-radius: 60px;
width: 70%;
background-color: pink;
letter-spacing: 0.1cm;
font-variant: small-caps;
text-align: left; /* Tekst v header budet nakhodytsya sleva */
}
h3{
border-radius: 10px;
margin: 0px;
border: solid 1px revert;
padding: 0%;
background-color: pink;
width: 20%;
}
/* Menu (ul) */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: saddlebrown;
text-align: center; /* Otsentriruem menu */
}
/* Stil' dlya kazhdogo elementa v menu (li) */
li {
float: left;
display: block;
text-align: center;
padding: 10px;
}
/* Stil' dlya ssylok (a) */
li a {
text-decoration: none;
color: pink;
padding: 10px;
border-radius: 5px; /* Okruglenie uglov knopok */
transition: background-color 0.3s, color 0.3s; /* Animatsiya pri izmenenii */
}
/* Efekt pri navedenii myshi na ssylku (hover) */
li a:hover {
background-color: rosybrown;
color: white; /* Tsvet teksta pri hover */
}
/* Efekt pri nazhatii na ssylku (active) */
li a:active {
background-color: #d4a6a6; /* Tsvet knopki pri nazhatii */
color: white; /* Belyy tsvet teksta pri active */
}
/* Stil' dlya footer */
footer {
text-align: center;
margin: auto;
background-color: rosybrown;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
color: white; /* Tsvet teksta v footer */
}
/* Stil' dlya sektsii */
section {
text-align: left; /* Tekst budet sleva */
margin: auto;
background-color: pink;
position: absolute; /* Sektsiya otvechaet za nastrojku raspolozheniya */
top: 30%; /* Ustanovka otstupa ot verkhnego kraja */
left: 0%; /* Sektsiya nachinayetsya s leva */
width: 40%; /* Sektsiya budet zanyat' 80% ot shiriny */
border-radius: 10px;
padding: 20px;
}
/* Stil' dlya zagolovka v sektsii */
section h2 {
margin: auto;
padding: 10px;
text-align: center;
background-color: rosybrown;
color: saddlebrown;
}
/* Efekt pri navedenii myshi na sektsiyu (hover) */
section:hover {
background-color: #f3b9b9; /* Svetlyy tsvet sektsii pri hover */
}
/* Stil' dlya knopok v kontentnykh zonyakh */
button {
background-color: pink; /* Tsvet knopki */
color: white; /* Tsvet teksta na knopke */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
display: block; /* Knopka budet nakhodytsya na novoy stroke */
margin: 20px auto; /* Otsentriruem knopku po otnosheniyu k sektsii */
}
/* Efekt pri navedenii myshi na knopku */
button:hover {
background-color: rosybrown;
transform: scale(1.1); /* Uvelichivaem knopku pri hover */
}
/* Efekt pri nazhatii na knopku */
button:active {
background-color: saddlebrown;
transform: scale(1); /* Vozvrashchaem knopku v original'nye razmery pri nazhatii */
}
zadania {
text-align: left; /* Tekst budet sleva */
margin: auto;
background-color: pink;
position: absolute; /* Sektsiya otvechaet za nastrojku raspolozheniya */
top: 30%; /* Ustanovka otstupa ot verkhnego kraja */
left: 0%; /* Sektsiya nachinayetsya s leva */
width: 40%; /* Sektsiya budet zanyat' 80% ot shiriny */
border-radius: 10px;
padding: 20px;
}
article{
text-align: left;
border: 5px solid saddlebrown;
border-radius: 20px;
margin-bottom: 50px;
width: 50%;
background-color: pink;
}