Index.html lehe kood

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Henri Everti koduleht</title>
</head>
<body>
<div class="d-flex flex-column justify-content-center w-100 h-100"></div>
 
    <header>
        <h1>Henri Everti veebirakenduste tööde koduleht</h1>
    </header>
    <main>
        <table border="1">
            <tr>
                <td>Minu HTML/CSS tööd</td>
                <td>
                    <a href="Retseptiraamat/HenriRetseptiraamat.html">Retseptiraamat</a>
                    <br>
                    <a href="Kalkulaatormain/kalk.html">Kalkulaator</a>
                    <br>
                    <a href="Veebileht333-main/admin.html">WebShop</a>
                </td>
            </tr>
            <tr>
                <td>Minu PHP tööd</td>
                <td>
                    <a href="PHPülesanded/ülesanne1.php">PHP(Ei ole tööle saand andmebaasi)</a>
                    <br>
                    <a href="Jalgattaeksam/regristeerimine.php">Jalgrattaeksam</a>
                    <br>
                    <a href="loomad/loomad.php">Loomad</a>
                    <br>
                    <a href="Autoremont/autoremont.php">Autoremont</a>
                </td>
            </tr>
        </table>
    </main>
    
</body>
</html>

Ja css kujundus on lisatud eraldi failis

header {
  padding: 30px;
  text-align: center;
  background: #3498db;
  color: white;
  font-size: 36px;
  font-family: 'Arial', sans-serif;
}

body{
    font-family: Arial, sans-serif;

}

table {
  width: 80%;
  margin: 20px auto;
  border-collapse: collapse;
  border: 2px solid #3498db; 
}

td {
  border: 2px solid #3498db;
  padding: 10px;
  text-align: center;
}

a:link, a:visited, a:active {
  text-decoration: none;
}

a {
  color: black; /* Set the initial color of the link */
  text-decoration: none;
}

a:hover {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 10s ease infinite;
  text-decoration: underline;
  background-clip: text;
  -webkit-background-clip: text; /* For Safari/Chrome */
  -webkit-text-fill-color: transparent; /* Hide the text fill color */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
a {
    font-family: 'Arial', sans-serif;
    text-decoration: none;
    transition: color 0.1s ease;
}

.customtable a {
  text-decoration: none;
  font-weight: bold;
  color: #3498db; 
  text-shadow: 1px 1px 1px #ccc; 
}