Below is the entirety of my main page. Any suggestions will be appreciated:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Holistic Healing Simplified</title>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #339;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
img {
border-radius:50%;
margin-bottom:5px }
</style>
</head>
<body>
<table style="border-color: blue; vertical-align: top;">
<tr>
<td style="width: 33vw; text-align: center; vertical-align: middle;">
<img src="Sun1.jpeg" height="328px" width="490px" alt="Sun"> </img> <!-- Sun -->
</td>
<td style="width: 34vw; text-align: center; vertical-align: top;">
<b style="font-size: 4vw; color:#00f;">Holistic Health Simplified
<br>
<b style="font-size: 2vw; color:blue;">A Philosophy for Holistic Healing</b>
<br>
<b style="font-size: 1.4vw; color:black;">Practical tools to help you progress <em>insightfully!</em></b>
</td>
<td style="width: 33vw; text-align: center; vertical-align: middle;">
<img src="Moon.jpg" height="328px" width="490px"; alt="Moon"> </img> <!-- Moon -->
</td>
</tr>
</table>
<ul>
<li><a href="Principles.html" target="myIframe">Principles</a> </li>
<li><a href="Practices.html" target="myIframe">Practices</a> </li>
<li><a href="Sources.html" target="myIframe">Sources</a> </li>
<li><a href="Notes.html" target="myIframe">Notes</a> </li>
<li><a href="Forum.html" target="myIframe">Forum</a> </li>
</ul>
<iframe style="width:100%;" height="1000" src="Principles.html" title="myIframe" name="myIframe"> </iframe>
</body>
</html>