NEHC' XAM
Welcome to Max's website!
Code
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vancouver Aquarium | Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<header>
<h1>Vancouver Aquarium</h1>
<p><b>Welcome</b> to Max's computer programming 12 quiz/assignment. This website give a simple look at the Vancoouver Aquarium's animal, main exhibits, and visitor information. </p>
</header>
<nav>
<a href="index.html">Home</a>
<a href="animals.html">Animals</a>
<a href="visit.html">Visit</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container">
<div class="box">
<img src="images/hero.png" alt="Illustration of Vancouver Aquarium" class="hero-image image-zoom">
<p class="caption">Move your mouse over the image to make it bigger.</p>
<h2>About the Aquarium</h2>
<p>The Vancouver Aquarium is in <u>Stanley Park</u> and is one of the most well-known attractions in Vancouver. It is home to <b>65,000+ animals</b> in <i>120 exhibits</i>, so there is a lot to explore in one visit.</p>
<p><b>Quick facts:</b> The aquarium is located at 845 Avison Way, Vancouver, BC V6G 3E2, and the main phone number is 778-655-9554.</p>
<a class="button" href="https://www.vanaqua.org/" target="_blank">Official Website</a>
</div>
<div class="box">
<h2>Main Exhibit Areas</h2>
<div class="cards">
<div class="card">
<img src="images/tropics.png" alt="The Tropics exhibit" class="image-zoom">
<div class="card-text">
<h3>The Tropics</h3>
<p>This area is full of colourful fish and reef life. It feels bright, warm, and lively, so it is one of the most eye-catching parts of the aquarium.</p>
</div>
</div>
<div class="card">
<img src="images/amazon.png" alt="Amazon Gallery exhibit" class="image-zoom">
<div class="card-text">
<h3>Amazon Gallery</h3>
<p>The Amazon section focuses on animals and habitats connected to the rainforest. It adds variety because the aquarium is not only about local marine life.</p>
</div>
</div>
<div class="card">
<img src="images/wildcoast.png" alt="BC's Wild Coast exhibit" class="image-zoom">
<div class="card-text">
<h3>B.C.'s Wild Coast</h3>
<p>This area connects visitors to animals and coastal environments from British Columbia. It makes the experience feel local and more connected to where we live.</p>
</div>
</div>
</div>
</div>
<div class="box clearfix two-col">
<div class="left-col">
<h2>Why People Visit</h2>
<ol>
<li>To see a wide variety of animals in one place</li>
<li>To learn more about ocean life and conservation</li>
<li>To enjoy hands-on experiences like the Wet Lab and 4D Theatre</li>
<li>To spend time with friends or family in Stanley Park</li>
</ol>
</div>
<div class="right-col">
<h2>What You Can Find Here</h2>
<ul>
<li>Animal pages with short descriptions</li>
<li>A visit page with ticket categories and planning tips</li>
<li>Contact details and a practice contact form</li>
<li>Pictures with a hover zoom effect</li>
</ul>
</div>
</div>
<div class="box">
<h2>Short Introduction</h2>
<p>The Vancouver Aquarium combines education, entertainment, and conservation in one place. From rescued sea otters and sea lions to jellyfish and tropical fish, the aquarium gives visitors a chance to see many different animals while learning why ocean care matters.</p>
<hr>
<p class="small-text">ICT:Computer programming 12. Max's quiz</p>
</div>
</div>
<footer>
<p>Vancouver Aquarium Website</p>
</footer>
</body>
</html>
Animals.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vancouver Aquarium | Animals</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<header>
<h1>Animals</h1>
<p>Some of the most popular animals at the Vancouver Aquarium include sea otters, sea lions, jellyfish, and tropical fish.</p>
</header>
<nav>
<a href="index.html">Home</a>
<a href="animals.html">Animals</a>
<a href="visit.html">Visit</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container">
<div class="box clearfix two-col">
<div class="left-col">
<img src="images/otter.png" alt="Sea otter illustration" class="page-image image-zoom">
</div>
<div class="right-col">
<h2>Sea Otters</h2>
<p>Sea otters are one of the most famous animals at the aquarium. They are playful, active, and fun to watch, which is why so many visitors look for them first.</p>
<ul>
<li>They spend a lot of time floating on their backs.</li>
<li>They are often connected to rescue work and rehabilitation.</li>
<li>They help make the aquarium feel lively and memorable.</li>
</ul>
</div>
</div>
<div class="box clearfix two-col">
<div class="left-col">
<h2>Jellyfish</h2>
<p>Jellyfish displays are popular because they look calm and glowing at the same time. Their movement is slow and smooth, which makes the gallery feel very different from the louder animal areas.</p>
<ol>
<li>They stand out because of their shape and motion.</li>
<li>They are good for photos because the tanks usually look dramatic.</li>
<li>They help show that ocean life can be beautiful and unusual.</li>
</ol>
</div>
<div class="right-col">
<img src="images/jellyfish.png" alt="Jellyfish illustration" class="page-image image-zoom">
</div>
</div>
<div class="box">
<h2>More Animals and Exhibits</h2>
<div class="cards">
<div class="card">
<img src="images/tropics.png" alt="Tropical fish exhibit" class="image-zoom">
<div class="card-text">
<h3>Tropical Fish</h3>
<p>Tropical fish add colour and energy to the aquarium. Their bright patterns make them easy to notice, especially for younger visitors.</p>
</div>
</div>
<div class="card">
<img src="images/wildcoast.png" alt="Sea lion and coast exhibit" class="image-zoom">
<div class="card-text">
<h3>Sea Lions</h3>
<p>Sea lions are another crowd favourite because they are large, active, and exciting to watch. They also connect to the aquarium's rescue and care work.</p>
</div>
</div>
<div class="card">
<img src="images/amazon.png" alt="Amazon species exhibit" class="image-zoom">
<div class="card-text">
<h3>Amazon Species</h3>
<p>The Amazon exhibit adds a different environment to the aquarium. It shows visitors that animal diversity goes far beyond cold coastal waters.</p>
</div>
</div>
</div>
</div>
<div class="box">
<h2>Notes</h2>
<p>This page helps visitors understand that the aquarium is not just one tank or one type of animal. It includes local species, tropical animals, and interactive learning areas, which makes the visit more complete.</p>
</div>
</div>
<footer>
<p>Learn more about the aquarium's animals and exhibits</p>
</footer>
</body>
</html>
visit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vancouver Aquarium | Visit</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<header>
<h1>Plan Your Visit</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="animals.html">Animals</a>
<a href="visit.html">Visit</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container">
<div class="box">
<img src="images/building.png" alt="Visit illustration" class="hero-image image-zoom">
<h2>Visitor Information</h2>
<table>
<tr>
<th>Topic</th>
<th>Information</th>
</tr>
<tr>
<td>Location</td>
<td>845 Avison Way, Vancouver, BC V6G 3E2</td>
</tr>
<tr>
<td>Phone</td>
<td>778-655-9554</td>
</tr>
<tr>
<td>Tickets</td>
<td>Tickets are sold online and prices can vary by day.</td>
</tr>
<tr>
<td>Hours</td>
<td>Hours can change, so it is best to check the official calendar before going.</td>
</tr>
<tr>
<td>Main Area</td>
<td>The aquarium is in Stanley Park.</td>
</tr>
</table>
</div>
<div class="box">
<h2>Ticket Categories</h2>
<table>
<tr>
<th>Category</th>
<th>Age / Note</th>
</tr>
<tr>
<td>Adult</td>
<td>Ages 13-64</td>
</tr>
<tr>
<td>Child</td>
<td>Ages 3-12</td>
</tr>
<tr>
<td>Student</td>
<td>Ages 19+ with student option listed on the official site</td>
</tr>
<tr>
<td>Senior</td>
<td>Ages 65+</td>
</tr>
<tr>
<td>Toddler</td>
<td>Under 3, free admission and no ticket needed</td>
</tr>
</table>
</div>
<div class="box clearfix two-col">
<div class="left-col">
<h2>Things To Remember</h2>
<ul>
<li>Buy tickets ahead of time online.</li>
<li>Wear comfortable shoes because the aquarium has many exhibits.</li>
<li>Bring your phone or camera for photos.</li>
<li>Leave time to explore Stanley Park too.</li>
</ul>
</div>
<div class="right-col">
<h2>Simple Visit Order</h2>
<ol>
<li>Start with the main exhibits.</li>
<li>Visit the sea otters and sea lions.</li>
<li>Check out the jellyfish and tropical galleries.</li>
<li>Finish with interactive areas like the Wet Lab or 4D Theatre.</li>
</ol>
</div>
</div>
<div class="box">
<h2>Official Link</h2>
<p>For current ticket prices, timed entry, and daily opening hours, use the official aquarium website.</p>
<a class="button" href="https://www.vanaqua.org/visit/" target="_blank">See Official Visit Page</a>
</div>
</div>
<footer>
<p>Vancouver Aquarium Website</p>
</footer>
</body>
</html>
contact.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vancouver Aquarium | Contact</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="top">
<header>
<h1>Contact</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="animals.html">Animals</a>
<a href="visit.html">Visit</a>
<a href="contact.html">Contact</a>
</nav>
<div class="container">
<div class="box">
<h2>Contact Details</h2>
<p><b>Address:</b> 845 Avison Way, Vancouver, BC V6G 3E2</p>
<p><b>Phone:</b> 778-655-9554</p>
<p><b>Website:</b> <a href="https://www.vanaqua.org/" target="_blank">www.vanaqua.org</a></p>
<p><b>Location note:</b> The aquarium is in Stanley Park, so many visitors also plan time to walk around the park before or after their visit.</p>
<hr>
</div>
<div class="box">
<h2>Contact Form</h2>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter your name">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter your email">
<label for="reason">Reason for Contact</label>
<input type="text" id="reason" placeholder="Tickets, school visit, question, etc.">
<label for="message">Message</label>
<textarea id="message" placeholder="Write your message here"></textarea>
<a class="button" >submit</a>
</form>
</div>
<div class="box">
<h2>Helpful Notes</h2>
<ul>
<li>Check the official website for current hours.</li>
<li>Buy tickets online before you go.</li>
<li>Use the visitor information page for directions and planning details.</li>
</ul>
<a class="button" href="visit.html">Go to Visit Page</a>
</div>
</div>
<footer>
<p>Thanks for visiting this student website project</p>
</footer>
</body>
</html>
CSS
{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
background-color: #eaf7ff;
color: #093b5d;
line-height: 1.6;
}
header {
background-color: #0f6e9c;
color: white;
text-align: center;
padding: 22px 15px;
border-bottom: 5px solid #0b5477;
}
header h1 {
margin: 0;
font-size: 36px;
}
header p {
margin: 8px auto 0;
max-width: 850px;
font-size: 17px;
}
nav {
background-color: #bfeaff;
border-bottom: 2px solid #7cc9ec;
text-align: center;
position: sticky;
top: 0;
z-index: 10;
}
nav a {
display: inline-block;
color: #084766;
text-decoration: none;
padding: 14px 18px;
font-weight: bold;
}
nav a:hover {
background-color: #97ddff;
}
.container {
width: 92%;
max-width: 1050px;
margin: 20px auto;
}
.box {
background-color: white;
border: 3px solid #9ed9f5;
padding: 18px;
margin-bottom: 22px;
border-radius: 12px;
}
.box h2, .box h3 {
margin-top: 0;
color: #0b618b;
}
.hero-image, .page-image {
width: 100%;
border: 3px solid #7fc9eb;
border-radius: 10px;
display: block;
}
.image-zoom {
transition: transform 0.3s ease;
}
.image-zoom:hover {
transform: scale(1.04);
}
.cards {
text-align: center;
}
.card {
display: inline-block;
vertical-align: top;
width: 31%;
margin: 1%;
background-color: #f7fdff;
border: 2px solid #b9e7fb;
border-radius: 10px;
overflow: hidden;
text-align: left;
}
.card img {
width: 100%;
display: block;
border-bottom: 2px solid #b9e7fb;
}
.card-text {
padding: 14px;
}
.two-col {
overflow: hidden;
}
.left-col, .right-col {
width: 48%;
float: left;
}
.right-col {
float: right;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
ul, ol {
padding-left: 24px;
}
li {
margin-bottom: 6px;
}
table {
width: 100%;
border-collapse: collapse;
background-color: white;
}
th, td {
border: 2px solid #8fd0ee;
padding: 10px;
text-align: left;
}
th {
background-color: #dff4ff;
}
.note {
background-color: #eefbff;
border-left: 6px solid #5eb9e1;
padding: 12px;
margin-top: 12px;
}
.button {
display: inline-block;
background-color: #0f6e9c;
color: white;
text-decoration: none;
padding: 10px 16px;
border-radius: 8px;
font-weight: bold;
margin-top: 8px;
}
.button:hover {
background-color: #0b5477;
}
form label {
font-weight: bold;
display: block;
margin-top: 10px;
}
form input, form textarea {
width: 100%;
padding: 10px;
border: 2px solid #9ed9f5;
border-radius: 8px;
margin-top: 5px;
font-family: Arial;
font-size: 15px;
}
form textarea {
height: 120px;
resize: vertical;
}
form input[type="submit"] {
width: auto;
background-color: #0f6e9c;
color: white;
border: none;
padding: 10px 18px;
margin-top: 14px;
cursor: pointer;
font-weight: bold;
}
form input[type="submit"]:hover {
background-color: #0b5477;
}
footer {
background-color: #0f6e9c;
color: white;
text-align: center;
padding: 18px;
margin-top: 30px;
}
.small-text {
font-size: 14px;
}
hr {
border: none;
border-top: 2px solid #cdefff;
margin: 18px 0;
}
.caption {
font-size: 14px;
color: #356984;
margin-top: 6px;
}
@media (max-width: 850px) {
.card, .left-col, .right-col {
width: 100%;
float: none;
margin: 0 0 18px 0;
}
nav a {
display: block;
border-top: 1px solid #a9e3fb;
}
header h1 {
font-size: 28px;
}
}