Aquarium | Computer Studies 11

_Users_ea000032_Desktop_aquarium_index_e

<!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="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<style>
.dragon {
background-image: url("dragons.png");
background-size: cover;
background-position: 50% 25%;
height: min(calc(100vw / 1440 * 576), 60vh);
position: relative;
}
.dragon h1 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1.5em var(--main-hor-margin) 20px;
color: white;
font-size: 3em;
background-image: linear-gradient(transparent, black);
}

.buy-button {
display: inline-block;
padding: 20px;
color: white;
border-radius: 10px;
background-color: var(--primary);
text-decoration: none;
align-self: center;
}

.waterbg { position: relative }
.waterbg:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -100px;
z-index: -1;
background-image:
linear-gradient(to top, white, transparent 150px),
url("water.png");
background-size: cover;
}

.review-grid {
display: grid;
--gap: 15px;
gap: var(--gap);
justify-content: center;
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 1400px) {
.review-grid {
grid-template-columns: repeat(3, 400px);
}
}
.review-grid > div {
display: flex;
flex-direction: column;
gap: var(--gap);
}
.review {
padding: 15px;
border-radius: 10px;
backdrop-filter: blur(3px) brightness(120%);
text-align: center;
}
.review .quote {
font-size: 1.5em;
margin-bottom: 5px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<img src="logo.png" alt="Vancouver Aquarium" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="exhibits.html">Exhibits</a></li>
</ul>
</nav>
</header>
<main>
<div class="section dragon">
<h1>New Exhibit: Dragons. Visit Today!</h1>
</div>
<div class="section column-2">
<div class="flex-col">
<h1>Visit the Aquarium!</h1>
<div class="flex-col" style="font-size: 1.2em">
Discover a sea of knowledge in Canada's largest aquarium!
Located in the heart of Stanley Park, the Vancouver Aquarium features
over 65,000 amazing animals, including but not limited to:
<ol>
<li>Sea Otters</li>
<li>Sea Lions</li>
<li>Sloths</li>
<li>Axolotls</li>
</ol>
<a href="exhibits.html">Learn more about our various exhibits here!</a>
<br>
<a class="buy-button" href="tickets.html">Buy Tickets</a>
</div>
</div>
<div>
<img class="responsive-img" style="border-radius: 15px;" src="seal.png" alt="Seal">
</div>
</div>
<div class="section waterbg">
<h1 style="color: white">Sea What our Guests Think!</h1>
<div class="review-grid">
<div>
<div class="review">
<div class="quote">"Must see in Vancouver. Definitely try to take some time to watch the sea lion training. It's really worth it!"</div>
<div class="author">Google Review, 202</div>
</div>
<div class="review">
<div class="quote">"Lost in the depths of the ocean's embrace 🌊✨ Today, I immersed myself in the enchanting world of sea life at Vancouver Aquarium."</div>
<div class="author">Instagram Review, 2024</div>
</div>
</div>
<div>
<div class="review">
<div class="quote">"Can't recommend it enough! An amazing experience and should definitely be on your list of things to check out if you ever find yourself in the Vancouver area."</div>
<div class="author">Google Review, 2025</div>
</div>
<div class="review">
<div class="quote">"It was a lot of fun! I got to <i>sea</i> all kinds of animals like seals"</div>
<div class="author">Aquarium Guest, 2015</div>
</div>
</div>
<div>
<div class="review">
<div class="quote">"I went as a kid, and I finally got to take my kids. We all loved it! I loved seeing it through the eyes of my kids. So much excitement! The staff we talked to were super knowledgeable and friendly!"</div>
<div class="author">Guest Review, 2024</div>
</div>
<div class="review">
<div class="quote">"Sharing a moment like this with my daughter is priceless."</div>
<div class="author">Instagram Review, 2024</div>
</div>
</div>
</div>
</div>
<div class="section column-2" style="gap: 30px">
<div>
<img class="responsive-img" style="border-radius: 15px;" src="app.png" alt="App">
</div>
<div class="flex-col">
<h1>Download our App!</h1>
Explore more with our official mobile app!
Discover real-time showtimes, fishy facts about aquarium residents, and an interactive map!
<br>
<br>
Available on the Apple App Store and Google Play.
</div>
</div>
</main>
<footer class="column-3">
<div class="flex-col">
<strong class="heading">Pages</strong>
<a href="index.html">Home</a>
<a href="tickets.html">Tickets</a>
<a href="exhibits.html">Exhibits</a>
</div>
<div class="flex-col">
<strong class="heading">Address</strong>
<div>845 Avison Way</div>
<div>Vancouver, BC, V6G 3E2</div>
<div>778-655-9554</div>
</div>
<div class="flex-col" style="font-size: 0.8em;">
In 2017, the Ocean Wise Conservation Association (Ocean Wise)
was created as a new global non-profit ocean conservation
organization focused on protecting and restoring our world’s oceans.
In the spring of 2021, after an incredibly difficult year due to
COVID-19, Ocean Wise transferred ownership of the Aquarium to a new
operator, Herschend Enterprises. Ocean Wise will continue as an
independent charitable non-profit. Its important work will continue
to be supported by the Vancouver Aquarium through a commitment by
Herschend to make an annual donation of 1% of gross profits towards
Ocean Wise’s conservation and education programs.
</div>
</footer>
</body>
</html>

_Users_ea000032_Desktop_aquarium_tickets

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vancouver Aquarium | Tickets</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<style>
.banner {
position: relative;
background-image: url("bigseal.png");
background-size: cover;
height: min(calc(100vw / 1366 * 540), 50vh);
}
.banner h1 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1.5em var(--main-hor-margin) 20px;
color: white;
font-size: 3em;
background-image: linear-gradient(transparent, black);
}

.ticket {
font-size: 1.3em;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
border: 1px solid lightgray;
border-radius: 15px;
padding-bottom: 10px;
overflow: hidden;
box-shadow: 7px 7px 10px gray;
transition: transform 0.3s, box-shadow 0.3s;
}
.ticket:hover {
transform: scale(1.02);
box-shadow: 14px 14px 15px gray;
}
.ticket > *:not(img) { margin: 0px 15px; }
.ticket > img {
width: 100%;
height: auto;
}
.ticket .age { font-size: 1.2em }
.ticket .small { font-size: 0.8em }
.ticket .price { font-size: 2em }
.ticket a {
font-size: 1.1em;
padding: 15px;
color: white;
border-radius: 10px;
background-color: var(--primary);
align-self: center;
}

.ticket-info-container {
display: flex;
flex-direction: column;
align-items: center;
}
.ticket-info {
border: 1px solid black;
border-collapse: collapse;
}
.ticket-info td, .ticket-info th {
padding: 10px;
border: 1px solid black;
}

.inbox > input, .inbox > button {
padding: 15px;
background-color: var(--primary);
color: white;
border-radius: 10px;
border: 0;
}
.inbox > input::placeholder {
color: white;
opacity: 0.85;
}
.inbox > .invalid {
display: none;
}
.inbox > input:invalid ~ .invalid {
display: block;
color: red;
text-align: center;
margin-top: 5px;
}
.inbox > button:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<img src="logo.png" alt="Vancouver Aquarium" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="exhibits.html">Exhibits</a></li>
</ul>
</nav>
</header>
<main>
<div class="section banner">
<h1>Tickets</h1>
</div>
<div class="section">
<div class="column-2" style="gap: 30px">
<div class="ticket">
<img src="turtle.png" alt="Turtle">
<h2 style="margin: 10px 0">Daily Tickets</h2>
<div class="description">
<ul style="margin: 0">
<li>General Admission</li>
<li>Save by purchasing ahead!</li>
<li>Prices vary daily</li>
</ul>
</div>
<div class="age">Adult</div>
<em class="small">Ages 13-64</em>
<strong class="price">$41.95 - $57.95</strong>
<i class="small">+ tax</i>
<a>Buy Now</a>
<i class="small">Taxes are automatically applied at checkout.
Ticket prices displayed when selecting the date of your visit
include tax. Child (3-12), Student (19+) and Senior (65+)
tickets available. Toddlers under 3 get in free and do not need a ticket.</i>
</div>
<div class="ticket">
<img src="otter.png" alt="Otter">
<h2 style="margin: 10px 0">Annual Memberships</h2>
<div class="description">
<ul style="margin: 0">
<li>Enjoy unlimited entry for an entire year!</li>
<li>Exclusive Perks and Discounts</li>
</ul>
</div>
<div class="age">Silver Tier - Adult</div>
<em class="small">Ages 13-64</em>
<strong class="price">$80</strong>
<i class="small">+ tax</i>
<a>Buy Now</a>
<i class="small">Explore <strong>Gold</strong> and
<strong>Platinum</strong> tiers
for extra saviings and benefits. Child (3-12),
Student (19+) and Senior (65+)
Memberships available.</i>
</div>
</div>
</div>
<hr>
<div class="section">
<h1 class="centre" style="margin-top: 0">Ticket Information</h1>
<div class="ticket-info-container">
<table class="ticket-info">
<tr>
<th>Question</th>
<th>Answer</th>
</tr>
<tr>
<td>Is there a time limit?</td>
<td>Please try to arrive at your entry time. There is no limit to how long you can stay once you arrive.</td>
</tr>
<tr>
<td>Do I have to buy a ticket online?</td>
<td>
We highly recommend purchasing online to guarantee your timeslot due to limited capacity.
<br>
If you decide to purchase a ticket at the door, we are unable to guarantee entry.
<br>
It is highly recommended to purchase in advanced in order to reserve an entry time.
</td>
</tr>
<tr>
<td>Can I purchase a ticket at the door?</td>
<td>
There are a very limited amounts of tickets available at the door due to reduced capacity.
<br>
It is highly recommended to purchase a ticket online.
</td>
</tr>
<tr>
<td>Is parking included with my ticket?</td>
<td>Parking in Stanley Park is wholly administered by EasyPark. It is not included
in Aquarium admission.
<br><br>
For more information please check the EasyPark website.</td>
</tr>
</table>
</div>
</div>
<div class="section flex-col" style="align-items: center;">
<h1 style="margin: 0">Receive Updates In Your Inbox</h1>
<p>Subscribe to our newsletter for updates on ticket prices and other events within the aquarium</p>
<form class="inbox" id="inbox">
<input id="email" autocomplete="email" type="email" placeholder="Email address" style="width: 300px">
<button type="reset">Sign Up</button>
<div class="invalid">Please enter a valid email address</div>
</form>
</div>
</main>
<footer class="column-3">
<div class="flex-col">
<strong class="heading">Pages</strong>
<a href="index.html">Home</a>
<a href="tickets.html">Tickets</a>
<a href="exhibits.html">Exhibits</a>
</div>
<div class="flex-col">
<strong class="heading">Address</strong>
<div>845 Avison Way</div>
<div>Vancouver, BC, V6G 3E2</div>
<div>778-655-9554</div>
</div>
<div class="flex-col" style="font-size: 0.8em;">
In 2017, the Ocean Wise Conservation Association (Ocean Wise)
was created as a new global non-profit ocean conservation
organization focused on protecting and restoring our world’s oceans.
In the spring of 2021, after an incredibly difficult year due to
COVID-19, Ocean Wise transferred ownership of the Aquarium to a new
operator, Herschend Enterprises. Ocean Wise will continue as an
independent charitable non-profit. Its important work will continue
to be supported by the Vancouver Aquarium through a commitment by
Herschend to make an annual donation of 1% of gross profits towards
Ocean Wise’s conservation and education programs.
</div>
</footer>
</body>
</html>

:root {
--main-hor-margin: 80px;
--primary: rgb(47, 68, 131);
}

@media (min-width: 1440px) {
:root {
--main-hor-margin: 10vw;
}
}
@media (min-width: 1800px) {
:root {
--main-hor-margin: 20vw;
}
}

html, body {
margin: 0;
font-family: Arial, sans-serif;
}

main {
overflow-x: hidden;
}

* {
box-sizing: border-box;
}

.flex-col {
display: flex;
flex-direction: column;
}

.responsive-img {
width: 100%;
height: auto;
}

header {
position: sticky;
top: 0px;
background-color: white;
z-index: 10;
border-bottom: 1px solid rgb(186, 186, 186);
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
margin: 0px var(--main-hor-margin);
}
.navbar > img {
padding-top: 10px;
height: 100%;
width: auto;
}
.navbar > ul { list-style-type: none; }
.navbar > ul > li {
display: inline-block;
margin: 0px 20px;
font-size: 1.5em;
}
.navbar a { color: rgb(35, 53, 193); }

.section, footer { padding: 20px var(--main-hor-margin); }

.column-2 {
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
}

.column-3 {
display: grid;
gap: 10px;
grid-template-columns: repeat(3, 1fr);
}

.centre { text-align: center; }

a { text-decoration: none; }
a:hover {
text-decoration: underline;
cursor: pointer;
}

footer {
color: white;
background-color: rgb(67, 119, 186);
font-size: 1.3em;
gap: 40px !important;
padding-top: 50px;
padding-bottom: 50px;
}
footer .heading {
font-size: 1.3em;
border-color: white;
border-style: solid;
padding-bottom: 10px;
border-width: 0 0 2px 0;
}
footer a { color: white; }
footer > .flex-col { gap: 10px; }

_Users_ea000032_Desktop_aquarium_exhibit

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vancouver Aquarium | Exhibits</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<style>
.sharks-container {
position: relative;
max-height: 45vh;
overflow-y: hidden;
}
.sharks {
width: 100%;
position: relative;
pointer-events: none;
}
.sharks + h1 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 1.5em var(--main-hor-margin) 20px;
color: white;
font-size: 3em;
background-image: linear-gradient(transparent, black);
}

.exhibit-grid {
display: grid;
width: 100%;
justify-content: center;
grid-template-columns: repeat(auto-fit, 300px);
column-gap: 20px;
row-gap: 25px;
font-size: 1.1em;
}

.exhibit > h2 { margin: 10px 0px; }
.exhibit > *:not(img) { margin-left: 5px; margin-right: 5px; }
.exhibit > img {
border-radius: 15px;
transition: transform 0.3s;
}
.exhibit > img:hover {
transform: scale(1.03);
cursor: pointer;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<img src="logo.png" alt="Vancouver Aquarium" class="logo">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tickets.html">Tickets</a></li>
<li><a href="exhibits.html">Exhibits</a></li>
</ul>
</nav>
</header>
<main>
<div class="sharks-container">
<video src="sharks.mp4" autoplay muted loop class="sharks"></video>
<h1>Exhibits & Attractions</h1>
</div>
<div class="section column-2" style="gap: 30px">
<div>
<img src="dragon2.png" alt="Dragon" class="responsive-img" style="border-radius: 15px">
</div>
<div>
<h1>Encounter the Dragons of Today</h1>
<i style="font-size: 1.5em">Limited Time Exhibit</i>
<p style="font-size: 1.2em;">Come face-to-face with incredible creatures that have inspired
dragon myths around the world. Discover how the green tree
python’s graceful movements echo tales of sky serpents, how
the gila monster’s fearsome reputation mirrors stories of
fire-breathing beasts, and why the razor-toothed caiman’s
powerful presence might make you feel like you’ve stumbled
upon a dragon’s lair.</p>
</div>
</div>
<div class="section">
<h1 class="centre">All Exhibits</h1>
<div class="exhibit-grid">
<div class="exhibit">
<img src="exhibits/axolotl.png" alt="Axolotl" class="responsive-img">
<h2>Amazing Axolotls</h2>
<div>Our all-new exhibit celebrates one of nature’s most extraordinary
creatures. Complete with frilly gills, permanent smiles, and incredible
regenerative superpowers, these tiny amphibians are full of big surprises!</div>
</div>
<div class="exhibit">
<img src="exhibits/amazon.png" alt="Amazon Gallery" class="responsive-img">
<h2>Amazon Gallery</h2>
<div>Swing by the Amazon Galllery to explore our newly renovated rainforest canopy!</div>
</div>
<div class="exhibit">
<img src="exhibits/wildcoast.png" alt="B.C. Wild Coast" class="responsive-img">
<h2>B.C. Wild Coast</h2>
<div>Our new Marine Mammal Rescue exhibit offers a sneak peek into our Marine Mammal Rescue Centre -
the only facility of its kind in Canada and one of the largest in the world</div>
</div>
<div class="exhibit">
<img src="exhibits/arctic.png" alt="Canada's Arctic" class="responsive-img">
<h2>Canada’s Arctic</h2>
<div>The Canada’s Arctic exhibit reflects the changes experienced by the people,
land, and animals due to the melting Arctic. It highlights the impact on
people and its uniquely adapted animals.</div>
</div>
<div class="exhibit">
<img src="exhibits/gallery.png" alt="Exploration Gallery" class="responsive-img">
<h2>Exploration Gallery</h2>
<div>The Exploration Gallery contains various jellyfish exhibits, ranging from
mesmerizing, gelatinnous blobs are which are both hunters and hunted. Sea turtles
even travel huge distances to feast on them.</div>
</div>
<div class="exhibit">
<img src="exhibits/frogs.png" alt="Frogs" class="responsive-img">
<h2>Frogs Forever</h2>
<div>Frog, toads, salamanders, and odd-looking caecilians, the Frogs Forever
exhibit contains more than 20 amphibians</div>
</div>
<div class="exhibit">
<img src="exhibits/pacific.png" alt="Pacific Canada" class="responsive-img">
<h2>Pacific Canada</h2>
<div>The Pacific Canada avilion spans two levels and features the marine life along
Vancouvers waterfront. Watch a biologist dive into a habitat and feed the animals!</div>
</div>
<div class="exhibit">
<img src="exhibits/stellarsbay.png" alt="Stellar's Bay" class="responsive-img">
<h2>Stellar’s Bay</h2>
<div>Sea nose to nose with Stellar sea lions at Stellar’s Bay, an exhibit highlighting
these majestic marine animals.</div>
</div>
<div class="exhibit">
<img src="exhibits/tropics.png" alt="The Tropics" class="responsive-img">
<h2>The Tropics</h2>
<div>The Tropics features coral reefs, mangrove forests, rivers, and lakes near the equator.
Some highlights include colourful tropical fishes, stingrays, and blacktip reef sharks.</div>
</div>
<div class="exhibit">
<img src="exhibits/treasures.png" alt="Treasures of the B.C. Coast" class="responsive-img">
<h2>Treasures of the B.C. Coast</h2>
<div>Explore from serene sand flats to swaying kelp beds to wave-swept rocky coasts.
British Columbia has a great diversity of coastal habitats, hosting a large variety of
marine species all uniquely adapted to their habitat.</div>
</div>
<div class="exhibit">
<img src="exhibits/wetlab.png" alt="Wet Lab" class="responsive-img">
<h2>Wet Lab</h2>
<div>Ever wondered what a sea star or moon jelly feels like? Now you’ll know at the Wet Lab,
where family fun, hands-on learning, and discoveries await!</div>
</div>
</div>
</div>
</main>
<footer class="column-3">
<div class="flex-col">
<strong class="heading">Pages</strong>
<a href="index.html">Home</a>
<a href="tickets.html">Tickets</a>
<a href="exhibits.html">Exhibits</a>
</div>
<div class="flex-col">
<strong class="heading">Address</strong>
<div>845 Avison Way</div>
<div>Vancouver, BC, V6G 3E2</div>
<div>778-655-9554</div>
</div>
<div class="flex-col" style="font-size: 0.8em;">
In 2017, the Ocean Wise Conservation Association (Ocean Wise)
was created as a new global non-profit ocean conservation
organization focused on protecting and restoring our world’s oceans.
In the spring of 2021, after an incredibly difficult year due to
COVID-19, Ocean Wise transferred ownership of the Aquarium to a new
operator, Herschend Enterprises. Ocean Wise will continue as an
independent charitable non-profit. Its important work will continue
to be supported by the Vancouver Aquarium through a commitment by
Herschend to make an annual donation of 1% of gross profits towards
Ocean Wise’s conservation and education programs.
</div>
</footer>
</body>
</html>