Just finished the tribute page certification project. I would love some feedback on the project and specifically areas for improvement.
The page is hosted on github at the following link.
here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tribute: Alexander the Great</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header id="header">
<nav id="page-links">
<a href="#tribute-info" class="nav-link">Bio</a>
<a href="#timeline" class="nav-link">Timeline</a>
<a href="#additional-info" class="nav-link">Additional Info</a>
</nav>
</header>
<main id="main">
<h1 id="title">Alexander the Great</h1>
<figure id="img-div">
<img id="image" src="/alexander-img.jpg" alt="Partial Mosaic of Alexander the Great">
<figcaption id="img-caption">Fragmented mosaic of Alexander the Great (found in the ruins of Pompeii)</figcaption>
</figure>
<section class="tibute-info" aria-labelledby="tribute-info">
<h2 id="tribute-info">Biography</h2>
<p>Alexander the Great (356-323 BC) was the king of Macedonia who conquered an empire that stretched from the Balkans to modern-day Pakistan. The son of King Philip II of Macedon and Queen Olympias, Alexander was educated by the philosopher Aristotle. He ascended to the throne in 336 BC and spent most of his ruling years on an unprecedented military campaign through Asia and northeast Africa. By the age of thirty, he had created one of the largest empires of the ancient world, stretching from Greece to Egypt and into the northwest Indian subcontinent.</p>
<p>Alexander is celebrated as one of history's most successful military commanders. His tactics and strategies are still studied in military academies around the world. Despite his early death at the age of 32 in Babylon under mysterious circumstances, Alexander's legacy as a powerful ruler and a brilliant strategist endures. His empire fragmented shortly after his death, but his conquests spread Greek culture throughout the known world, marking the beginning of the Hellenistic period which featured a blend of Greek, Middle Eastern, and Asian cultures.</p>
</section>
<div id="section-separator"><img class="banner" src="/banner-1.jpeg" alt=""></div>
<section class="timeline" aria-labelledby="timeline">
<h2 id="timeline">Timeline</h2>
<ul id="ul-timeline">
<li>356 BC: Alexander the Great is born in Pella, Macedonia, to King Philip II and Queen Olympias.</li>
<li>343 BC: Aristotle begins tutoring the young Alexander, instilling in him a love for knowledge and the arts.</li>
<li>336 BC: Alexander ascends to the throne of Macedonia after the assassination of his father, Philip II.</li>
<li>334 BC: Begins his conquest of the Persian Empire with a victory at the Battle of Granicus.</li>
<li>333 BC: Defeats Persian King Darius III at the Battle of Issus.</li>
<li>332 BC: Captures Tyre after a seven-month siege and then Egypt, where he is proclaimed a pharaoh and founds the city of Alexandria.</li>
<li>331 BC: Achieves a decisive victory at the Battle of Gaugamela, leading to the fall of the Persian Empire.</li>
<li>326 BC: Wins the Battle of the Hydaspes River against King Porus in India; his troops refuse to march further east, prompting their return.</li>
<li>324 BC: Holds a mass wedding at Susa to unify his Macedonian and Persian elites; begins planning further campaigns.</li>
<li>323 BC: Dies in Babylon at the age of 32 under mysterious circumstances, leaving his empire without a clear successor, which eventually leads to its division among his generals.</li>
</ul>
</section>
<div id="section-separator"><img class="banner" src="/banner-2.jpeg" alt=""></div>
<section class="additional-info" aria-labelledby="additional-info">
<h2 id="additional-info">Additional Resources</h2>
<p>Don't forget to checkout Arrian of Nicomedia's <a href="https://www.gutenberg.org/files/46976/46976-h/46976-h.htm" target="_blank" id="tribute-link">work</a> on Alexander the Great</p>
</section>
</main>
</body>
</html>
here is the CSS:
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
nav {
position: fixed;
display: flex;
justify-content: space-around;
height: 35px;
width: 100%;
background-color: #B4B4B8;
top: 0;
margin: 0;
align-items: center;
gap: 100px;
}
main {
width: 80%;
margin: 0 auto;
}
#title {
margin-top: 50px;
}
.nav-link {
color: white;
text-decoration: none;
font-size: 24px;
}
.nav-link:hover {
background-color: white;
color: #B4B4B8;
cursor: pointer;
}
#image {
height: auto;
width: 90%;
max-width: 100%;
display: block;
margin: 5px auto;
}
li {
list-style-type: none;
margin: 5px 0;
}
h1, h2 {
text-align: center;
}
.banner {
width: 100%;
height: auto;
padding-top: 20px;
}
Looking forward to hearing what people think! 
Thanks,
David Bentley