Minu index.html leht
<!DOCTYPE html>
<html lang="et">
<head>
<meta charset="UTF-8">
<title>Vasilisa 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 kollane(){
$('h2').css('color', 'yellow');
}
function roosa(){
$('h1').css('color', 'pink');
}
function mustaks(){
$('h1,h2').css('color', 'black');
}
//kui vajutad nuppu -peida siis tekst vahetakse Näita
var lahti=true;
function naitapeida(){
$('h2').slideToggle();
if(lahti){
lahti=false;
$('#knopka').val("Näita");
}else{
lahti=true;
$('#knopka').val("Peida")
}
}
function start(){
$('h2').mouseenter(kollane);
$('h1').mouseenter(roosa);
$('h1,h2').mouseleave(mustaks);
$('#mandariin').draggable();
$('h2').draggable();
}
</script>
</head>
<body onload="start()">
<!--päis шапка страницы-->
<header>
<h1>Vasilisa veebirakenduste tööde leht</h1>
<img src="mandariin1.png" alt="mandariin1" id="mandariin" width="200px">
</header>
<!--navigeerimismenüü-->
<nav>
<ul id="list">
<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>
<!--sisu-->
<main>
<section>
<h2>Info minust...</h2>
<div>Mina olen õpilane.
<br>
Minu hobi on joonistamine.
<br>
Minu rühm TIT pv 24.</div>
</section>
</main>
<!--jalus- подвал страницы-->
<footer>
<strong>Vasilisa Vasilenko © 2024</strong>
</footer>
<br>
<input type="button" value="-->" onclick="$('h2, h1').animate({left:'600px'}, 1000)">
<input type="button" value="<--" onclick="$('h2, h1').animate({left:'0px'}, 1000)">
<input type="button" value="peida" id="knopka" onclick="naitapeida()">
<section id="teinesec">
<ol>
<li> Saate pilti liigutada
</li>
<li> Hiirega pealkirja peal muutub värv
</li>
<li> Pealkirja "info minust" saab liigutada vasakule ja sisse
</li>
<li> Saate peita ja tagasi näidata pealkirja "Info minust"
</li>
<li>
Saate liigutada pealkirja "info minust"
</li>
</ol>
</section>
</body>
</html>
header h1{
border: solid 1px green; /*ääris*/
padding: 5%; /*vahe tekstist ääriseni*/
margin: 10px;
border-radius: 60px;
width: 60%;
background-color: orange;
letter-spacing: 0.2cm;
font-variant: small-caps;
}
ul#list{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: peachpuff;
}
ul#list li{
float: left;
dispaly: block;
text-align: center;
padding: 10px;
}
ul#list li a{
text-decoration: none;
color: yellow;
padding: 10px;
}
li a:hover{ /*lingid fookuses*/
background-color: pink;
}
footer{
text-align: center;
/* margin-top: auto;*/
background-color: lightpink;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
section{/*min 5 omadust*/
text-align: center;
margin-top: auto;
background-color: orange;
}
section h2{
text-align: center;
border:dotted 10px;
}
h2,h1{
left:0;
}
ol{
text-align: left;
width: 200px;
}
section#teinesec{
width: 300px;
border: solid 1px black;
background-color: orange;
}