Build an interactive multi-page website with media
Complete a 3-page travel website with 5 destinations, unique images, and navigation links between all pages. Research HTML entities for next week.
Recognition:
Beautiful website design with perfect navigation and image optimization
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel Destinations</title>
</head>
<body>
<header>
<h1>Amazing Travel Destinations</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="destinations.html">Destinations</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="destinations">
<h2>Top Destinations</h2>
<article>
<h3>Paris, France</h3>
<img src="images/paris.jpg" alt="Eiffel Tower in Paris" width="300" height="200">
<p>The city of lights offers amazing culture and cuisine.</p>
<a href="https://en.wikipedia.org/wiki/Paris" target="_blank">Learn more about Paris</a>
</article>
<article>
<h3>Tokyo, Japan</h3>
<img src="images/tokyo.jpg" alt="Tokyo skyline at night" width="300" height="200">
<p>Experience the perfect blend of tradition and modernity.</p>
<ul>
<li>Sushi restaurants</li>
<li>Cherry blossoms</li>
<li>Modern technology</li>
</ul>
</article>
</section>
</main>
<footer>
<p>© 2024 Travel Guide. All rights reserved.</p>
</footer>
</body>
</html>A multi-page travel website showcasing destinations with images, navigation between pages, and organized content using lists and links.
Try different device sizes using the buttons above. Click maximize for full-screen preview.
Pro tip: Copy the code above and practice building it yourself! Check out the GitHub repo for the complete project files and additional resources.