Index.html lehe kood – Aleksander Makovski ÕPIMAPP / Portfoolio

Aleksander Makovski ÕPIMAPP / Portfoolio

HTML:

<!DOCTYPE html>
<html lang="et">
<!--tehniline info-->
<head>
 <title>Koduleht</title>
 <meta charset="utf-8">
 <!--CSS faili ühendamine index failiga-->
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--veebilehe sisu-->
<body onload="start()">
<!--päis-->
<header>
 <h1>Aleksander Koduleht</h1>
</header>
<!--navigeerimismenüü-->
<nav>
 <ul>
  <li>
   <a href="index.html">
    Koduleht
   </a>
  </li>
  <li>
   <a href="lingid.html">
    Lingid
   </a>
  </li>
  <li>
   <a href="tood.html">
    Minu tööd
   </a>
  </li>
 </ul>
</nav>
<!--põhisisu-->

<main>
 <section Id="reede">
  <div id="reede">
   <h2>Info minust</h2>
   <div>
    <h4>Ma olen TiTpv24 õpilane.</h4>
    <h4>Ma olen 17 aastad vana.</h4>
    <h4>Mulle meeldib HTML õppima.</h4>
    <h4>Ma teen muusika, see on minu tööd:<a href="muusika/index.html" target="_blank">Muusika</a></h4>
  </div>
  </div>
  <img src="right.png" alt="piltike" width="80">
  <img src="ricardo.jpg" alt="piltike" width="150"id="rico">
  <img src="left.jpg" alt="piltike" width="80">
  <div id="koord"></div>
 </section>
</main>
<!--jalus-->
<footer>
  <p>Site by: Aleksander Makovski &copy; 2024</p>
</footer>
</body>
</html>

CSS:

/*style.css*/
header{
	color: black; /* цвет текста*/
	background-color: steelblue; /*цвет фона*/
	font-family: Arial; /*тип шрифта*/
	letter-spacing: 0.1cm; /*растояние между букв*/
	text-align: center; /*местоположение заглавия*/
}
footer{
	text-align: center;
	background-color: steelblue;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	color: black;
}
main section{
	border-top: 6pt solid steelblue; /*dotted dashed*/
	border-bottom: 6pt solid steelblue;
	border-radius: 50px;
	padding: 1%;
	width: 30%;
}
/*h2 mis on section sees*/
main section h2{
	color: black;
	background-color: steelblue;
	font-family: Arial;
	letter-spacing: 0.1cm;
	text-align: center;

}
/*navigeerimismenüü w3shools lehed*/
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: lightblue;
}

li {
	float: left;
}

li a {
	display: block;
	color: black;
	text-align: center;
	padding: 20px 30px;
	text-decoration: none;
}

li a:hover {
	background-color: steelblue;
}

h4 {
	color: black;
	background-color: lightblue;
	text-align: left;
	letter-spacing: 0px;
	border-top: 3pt solid steelblue;
	border-bottom: 3pt solid steelblue;
	border-radius: 20px;
	padding: 2px;
	width: 40%
}

Tere tulemast minu Wordpressi!