champlain
/
WEBD-225-40
1
0
Fork 0
Code Releases Activity

Week 7: Device-Specific Layouts

This commit is contained in:
Llewellyn van der Merwe 2022-03-05 04:21:01 +02:00
parent 20520e287e
commit 23dd0c1ca1
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
6 changed files with 571 additions and 280 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
activities.html
View File

@ -12,55 +12,67 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]--> <![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files --> <!-- Completed files -->
</head> </head>
<body> <body>
<div id="wrapper"> <div>
<header> <header>
<h1>Atlantic Fishing Resort</h1> <h1>Atlantic Fishing Resort</h1>
<nav> <div id="mySidenav" class="sideNav">
<ul> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<li> <a href="index.html">Home</a>
<a href="index.html">Home</a> <a href="units.html">Units</a>
</li> <a href="#" class="active">Activities</a>
<li> <a href="reservations.html">Reservations</a>
<a href="units.html">Units</a> </div>
</li> <div id="main">
<li> <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
<a href="#" class="active">Activities</a> </div>
</li> <div class="mainNav">
<li> <nav>
<a href="reservations.html">Reservations</a> <ul>
</li> <li>
</ul> <a href="index.html">Home</a>
</nav> </li>
<li>
<a href="units.html">Units</a>
</li>
<li>
<a href="#" class="active">Activities</a>
</li>
<li>
<a href="reservations.html">Reservations</a>
</li>
</ul>
</nav>
</div>
</header> </header>
<main> <main>
<h2>Activities while staying at Atlantic Fishing Resort</h2> <h2>Activities while staying at Atlantic Fishing Resort</h2>
<article id="activity-focus"> <article id="activity-focus">
<div> <div>
<h3>Dune Adventures</h3> <h3>Dune Adventures</h3>
<p><span class="resort">Atlantic Fishing Resort</span> in situated in the dune belt of the Namib. Take a <p><span class="resort">Atlantic Fishing Resort</span> in situated in the dune belt of the Namib. Take a
guided guided
scenic drive either on camels or quadbikes for the more adventurous.</p> scenic drive either on camels or quadbikes for the more adventurous.</p>
</div> </div>
<div> <div>
<h3>Shore Fishing</h3> <h3>Shore Fishing</h3>
<p>Fast open stretches of cold Atlantic shore gives ample opportunity for fishing from the beach. Buy or rent <p>Fast open stretches of cold Atlantic shore gives ample opportunity for fishing from the beach. Buy or
fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of rent
sunscreens.</p> fishing tackle. Find guided tours or venture out by yourself geared up with 4x4 and plenty of
</div> sunscreens.</p>
<div> </div>
<h3>Dolphin &amp; Bird Watching</h3> <div>
<p>While anytime is a good time for bird watching at the Atlantic coast, we can organize dolphin and <h3>Dolphin &amp; Bird Watching</h3>
birdwatching <p>While anytime is a good time for bird watching at the Atlantic coast, we can organize dolphin and
boat trips available daily.</p> birdwatching
</div> boat trips available daily.</p>
</div>
</article> </article>
</main> </main>
<footer> <footer>
Copyright © 1999 Atlantic Fishing Resort<br> Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a> <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>

444
css/atlantic.css
View File

@ -1,13 +1,100 @@
/* Nav Bar */ table {
header nav { width: 100%;
font-size: 12px;
border-collapse: collapse;
}
th {
text-align: left;
}
tr {
border: 1px solid;
}
/* Form style */
fieldset {
margin: 10px 2px;
padding: 10px 20px;
}
/* submit button */
input[type=submit] {
background: rgb(35, 55, 55);
background: linear-gradient(180deg, rgba(35, 55, 55, 1) 0%, rgba(100, 131, 131, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 1px 13px 23px 0 rgba(0, 0, 0, 0.75);
color: white;
padding: 15px 60px;
border: none;
border-radius: 5px;
cursor: pointer;
float: right;
font-weight: bold;
}
/* change the submit button style on hover */
input[type=submit]:hover {
background: rgb(35, 55, 55);
background: linear-gradient(0deg, rgba(35, 55, 55, 1) 0%, rgba(103, 140, 140, 1) 7%, rgba(47, 79, 79, 1) 24%, rgba(9, 14, 14, 1) 100%);
box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.75);
color: lightgrey;
font-weight: bold;
}
/* Focus on field that is being entered*/
input:focus {
background-color: darkslategrey;
color: white;
}
.form-padding {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 50px;
}
/* container */
.container {
margin-top: 20px;
border-radius: 5px;
background-color: #f2f2f2;
padding: 30px 30px 80px;
box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
-webkit-box-shadow: 2px 0 31px 0 rgba(145, 145, 145, 0.75);
}
/* remove floats after columns*/
.row {
max-width: 100%;
margin-bottom: 10px;
}
/* Center the contact form */
#contactForm {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
/* Sizing of input fields */
input {
padding: 5px 5px;
font-size: 14px;
}
/* Main Nav Bar */
.mainNav nav {
padding: 0; padding: 0;
} }
header nav a { .mainNav nav a {
text-decoration: none; text-decoration: none;
} }
header .active { .mainNav .active {
text-decoration-color: lightblue; text-decoration-color: lightblue;
padding: 0 10px; padding: 0 10px;
background: rgb(34, 34, 34); background: rgb(34, 34, 34);
@ -15,7 +102,7 @@ header .active {
box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;
} }
header nav ul { .mainNav nav ul {
padding-left: 0; padding-left: 0;
list-style-type: none; list-style-type: none;
background: rgb(46, 44, 47); background: rgb(46, 44, 47);
@ -23,10 +110,9 @@ header nav ul {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
font-family: "Liberation Sans", sans-serif;
} }
header ul li *[href]:link { .mainNav ul li *[href]:link {
color: whitesmoke; color: whitesmoke;
padding: 0 10px; padding: 0 10px;
background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%); background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
@ -34,7 +120,7 @@ header ul li *[href]:link {
flex-grow: inherit; flex-grow: inherit;
} }
header ul li *[href]:visited { .mainNav ul li *[href]:visited {
color: aliceblue; color: aliceblue;
padding: 0 10px; padding: 0 10px;
background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%); background: linear-gradient(0deg, rgba(46, 44, 47, 1) 0%, rgba(110, 121, 122, 1) 50%, rgba(46, 44, 47, 1) 100%);
@ -42,7 +128,7 @@ header ul li *[href]:visited {
flex-grow: inherit; flex-grow: inherit;
} }
header ul li *[href]:hover { .mainNav ul li *[href]:hover {
color: lightskyblue; color: lightskyblue;
padding: 0 10px; padding: 0 10px;
background: rgb(34, 34, 34); background: rgb(34, 34, 34);
@ -50,6 +136,41 @@ header ul li *[href]:hover {
box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000;
} }
/* Side nav bar */
.sideNav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sideNav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sideNav a:hover {
color: #f1f1f1;
}
.sideNav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.flex-container { .flex-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -58,6 +179,15 @@ header ul li *[href]:hover {
flex-direction: column; flex-direction: column;
} }
.geoLoc {
text-align: center;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#hero { #hero {
background-color: white; background-color: white;
padding: 20px; padding: 20px;
@ -88,51 +218,9 @@ header ul li *[href]:hover {
text-align: center; text-align: center;
} }
@keyframes image-fun {
0% {
left: -500px;
top: -300px;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
width: 10px;
}
100% {
left: 0px;
top: 0px;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
width: 320px;
}
}
@keyframes image-spin {
0% {
left: 0;
top: 100px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
width: 320px;
}
}
#default-image { #default-image {
border-radius: 20px; border-radius: 20px;
width: 320px; width: 300px;
position: relative; position: relative;
animation-name: image-fun; animation-name: image-fun;
animation-duration: 2s; animation-duration: 2s;
@ -163,89 +251,127 @@ header ul li *[href]:hover {
font-size: 16px; font-size: 16px;
} }
/* Mobile devices */ @keyframes image-fun {
@media screen and (max-width: 320px) { 0% {
left: -500px;
top: -300px;
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
transform: rotateZ(0deg);
width: 10px;
}
100% {
left: 0px;
top: 0px;
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
width: 300px;
}
}
header nav ul { @keyframes image-spin {
height: 40px; 0% {
font-size: 0.9rem; left: 0;
top: 100px;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
-webkit-transform: rotateY(360deg);
-moz-transform: rotateY(360deg);
-o-transform: rotateY(360deg);
transform: rotateY(360deg);
width: 300px;
}
}
/* iPhone and Android (Portrait) */
@media screen and (max-width: 320px) {
.sidenav {
padding-top: 15px;
} }
header ul li *[href] { .sidenav a {
line-height: 40px; font-size: 18px;
height: 40px; }
.mainNav {
display: none;
} }
h1 { h1 {
font-size: 20px; font-size: 20px;
} }
video {
display: none;
}
} }
/* iPads, Tablets. */ @media screen and (max-width: 479px) {
@media screen and (min-width: 321px) { .mainNav {
display: none;
}
header nav ul { h1 {
font-size: 20px;
}
video {
display: none;
}
img#small_image {
width: 100%;
}
}
/* iPhone and Android (Landscape) */
@media screen and (min-width: 480px) {
table {
font-size: 16px;
}
.sideNav {
display: none;
}
/* column for the label */
.col-25 {
float: left;
text-align: left;
width: 150px;
}
/* column for the input fields */
.col-75 {
margin-left: 130px;
max-width: 100%;
padding-top: 10px;
}
#main {
display: none;
}
.mainNav nav ul {
height: 40px; height: 40px;
font-size: 1rem; font-size: 1rem;
} }
header ul li *[href] { .mainNav ul li *[href] {
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
} }
img#large_image {
display: none;
}
img#small_image {
display: block;
width: 100%;
}
h1 {
font-size: 26px;
}
video {
display: none;
}
}
/* Small screens, laptops */
@media screen and (min-width: 768px) {
header nav ul {
height: 50px;
font-size: 1.4rem;
}
header ul li *[href] {
line-height: 50px;
height: 50px;
}
img#small_image {
display: none;
}
img#large_image {
display: block;
width: 100%;
}
.flex-container {
flex-direction: row;
}
h1 {
font-size: 36px;
}
video {
display: inline-block;
}
@keyframes image-fun { @keyframes image-fun {
0% { 0% {
left: -500px; left: -500px;
@ -266,6 +392,7 @@ header ul li *[href]:hover {
width: 650px; width: 650px;
} }
} }
@keyframes image-spin { @keyframes image-spin {
0% { 0% {
left: 0; left: 0;
@ -276,6 +403,7 @@ header ul li *[href]:hover {
transform: rotateY(0deg); transform: rotateY(0deg);
width: 10px; width: 10px;
} }
100% { 100% {
left: 0; left: 0;
top: 0; top: 0;
@ -289,7 +417,7 @@ header ul li *[href]:hover {
#default-image { #default-image {
border-radius: 20px; border-radius: 20px;
width: 650px; width: 100%;
position: relative; position: relative;
animation-name: image-fun; animation-name: image-fun;
animation-duration: 2s; animation-duration: 2s;
@ -302,38 +430,106 @@ header ul li *[href]:hover {
animation-name: image-spin; animation-name: image-spin;
animation-duration: 2s; animation-duration: 2s;
} }
h1 {
font-size: 24px;
}
video {
display: none;
}
img#small_image {
width: 100%;
}
} }
/* iPad (portrait) */
@media screen and (min-width: 768px) {
/* Desktops, large screens. */ .mainNav nav ul {
height: 50px;
font-size: 1.4rem;
}
.mainNav ul li *[href] {
line-height: 50px;
height: 50px;
}
.form-padding {
padding-left: 100px;
padding-right: 100px;
}
img#small_image {
display: none;
}
#default-image {
width: 650px;
}
img#large_image {
display: block;
width: 100%;
}
.flex-container {
flex-direction: row;
}
h1 {
font-size: 36px;
}
video {
display: inline-block;
}
}
/* Standard Resolution Monitors */
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {
table {
font-size: 24px;
}
header nav ul { .mainNav nav ul {
height: 50px; height: 50px;
font-size: 1.6rem; font-size: 1.6rem;
} }
header ul li *[href] { .mainNav ul li *[href] {
line-height: 50px; line-height: 50px;
height: 50px; height: 50px;
} }
.form-padding {
padding-left: 200px;
padding-right: 200px;
}
h1 { h1 {
font-size: 46px; font-size: 46px;
} }
} }
/* Extra large screens, TV. */ /* High Resolution Monitors */
@media screen and (min-width: 1401px) { @media screen and (min-width: 1366px) {
header nav ul { .mainNav nav ul {
height: 50px; height: 50px;
font-size: 2rem; font-size: 2rem;
} }
header ul li *[href] { .mainNav ul li *[href] {
line-height: 50px; line-height: 50px;
height: 50px; height: 50px;
} }
.form-padding {
padding-left: 300px;
padding-right: 300px;
}
} }

52
index.html
View File

@ -13,29 +13,41 @@
<![endif]--> <![endif]-->
<script src="/js/geo.js"></script> <script src="/js/geo.js"></script>
<script src="/js/hiddenNav.js"></script>
<!-- Completed files --> <!-- Completed files -->
</head> </head>
<body> <body>
<header id="wrapper"> <header>
<h1>Atlantic Fishing Resort</h1> <h1>Atlantic Fishing Resort</h1>
<nav> <div id="mySidenav" class="sideNav">
<ul> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<li> <a href="#" class="active">Home</a>
<a href="#" class="active">Home</a> <a href="units.html">Units</a>
</li> <a href="activities.html">Activities</a>
<li> <a href="reservations.html">Reservations</a>
<a href="units.html">Units</a> </div>
</li> <div id="main">
<li> <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
<a href="activities.html">Activities</a> </div>
</li> <div class="mainNav">
<li> <nav>
<a href="reservations.html">Reservations</a> <ul>
</li> <li>
</ul> <a href="#" class="active">Home</a>
</nav> </li>
<li>
<a href="units.html">Units</a>
</li>
<li>
<a href="activities.html">Activities</a>
</li>
<li>
<a href="reservations.html">Reservations</a>
</li>
</ul>
</nav>
</div>
</header> </header>
<main> <main>
<div id="hero"> <div id="hero">
@ -62,7 +74,7 @@
</article> </article>
</div> </div>
<article> <article>
<div style="padding: 50px 50px;"> <div style="padding: 50px 10px;">
<div class="flex-container"> <div class="flex-container">
<div> <div>
<h3>Find us</h3> <h3>Find us</h3>
@ -73,7 +85,7 @@
<!--Position information will be inserted here--> <!--Position information will be inserted here-->
<div id="result"></div> <div id="result"></div>
</div> </div>
<div style="padding: 50px 0; text-align: center"> <div class="geoLoc">
<img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort"> <img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort">
<img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia" <img id="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
style="display: none;"> style="display: none;">

9
js/hiddenNav.js Normal file
View File

@ -0,0 +1,9 @@
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}

150
reservations.html
View File

@ -12,64 +12,118 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]--> <![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files --> <!-- Completed files -->
</head> </head>
<body> <body>
<div id="wrapper"> <div>
<header> <header>
<h1>Atlantic Fishing Resort</h1> <h1>Atlantic Fishing Resort</h1>
<div id="mySidenav" class="sideNav">
<nav> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<ul> <a href="index.html">Home</a>
<li> <a href="units.html">Units</a>
<a href="index.html">Home</a> <a href="activities.html">Activities</a>
</li> <a href="#" class="active">Reservations</a>
<li> </div>
<a href="units.html">Units</a> <div id="main">
</li> <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
<li> </div>
<a href="activities.html">Activities</a> <div class="mainNav">
</li> <nav>
<li> <ul>
<a href="#" class="active">Reservations</a> <li>
</li> <a href="index.html">Home</a>
</ul> </li>
</nav> <li>
<a href="units.html">Units</a>
</li>
<li>
<a href="activities.html">Activities</a>
</li>
<li>
<a href="#" class="active">Reservations</a>
</li>
</ul>
</nav>
</div>
</header> </header>
<main> <main>
<h2>Reservations at Atlantic Fishing Resort</h2> <h2>Reservations at Atlantic Fishing Resort</h2>
<div class="form-padding">
<h3>Contact Us</h3> <form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<p>Required information is marked with an asterisk (*).</p> <div class="container">
<h3>Contact Us</h3>
<form method="post" action="http://webdevbasics.net/scripts/pacific.php"> <p>Required information is marked with an asterisk (*).</p>
<label for="myFName">* First Name:</label> <fieldset>
<input type="text" name="myFName" id="myFName" required="required"> <legend>Personal Information</legend>
<div class="row">
<label for="myLName">* Last Name:</label> <div class="col-25">
<input type="text" name="myLName" id="myLName" required="required"> <label for="myFName">* First Name:</label>
</div>
<label for="myEmail">* E-mail:</label> <div class="col-75">
<input type="email" name="myEmail" id="myEmail" required="required"> <input type="text" name="myFName" id="myFName" required="required">
</div>
<label for="myPhone">Phone:</label> </div>
<input type="tel" name="myPhone" id="myPhone"> <div class="row">
<div class="col-25">
<label for="myDate">Arrival Date:</label> <label for="myLName">* Last Name:</label>
<input type="date" name="myDate" id="myDate"> </div>
<div class="col-75">
<label for="myNights">Nights:</label> <input type="text" name="myLName" id="myLName" required="required">
<input type="number" name="myNights" id="myNights" min="1" max="14"> </div>
</div>
<label for="myComments">* Comments:</label> <div class="row">
<textarea name="myComments" id="myComments" rows="2" cols="20" required="required"></textarea> <div class="col-25">
<label for="myEmail">* E-mail:</label>
<input type="submit" id="mySubmit" value="Submit"> </div>
</form> <div class="col-75">
<input type="email" name="myEmail" id="myEmail" required="required">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myPhone">Phone:</label>
</div>
<div class="col-75">
<input type="tel" name="myPhone" id="myPhone">
</div>
</div>
</fieldset>
<fieldset>
<legend>Booking Details</legend>
<div class="row">
<div class="col-25">
<label for="myDate">Arrival Date:</label>
</div>
<div class="col-75">
<input type="date" name="myDate" id="myDate">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myNights">Nights:</label>
</div>
<div class="col-75">
<input type="number" name="myNights" id="myNights" min="1" max="14">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myComments">* Comments:</label>
</div>
<div class="col-75">
<textarea name="myComments" id="myComments" rows="2" cols="20"
required="required"></textarea>
</div>
</div>
</fieldset>
<input type="submit" id="mySubmit" value="Submit">
</div>
</form>
</div>
</main> </main>
<footer> <footer>
Copyright © 1999 Atlantic Fishing Resort<br> Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a> <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>

110
units.html
View File

@ -11,34 +11,45 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]--> <![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files --> <!-- Completed files -->
</head> </head>
<body> <body>
<div id="wrapper"> <div>
<header> <header>
<h1>Atlantic Fishing Resort</h1> <h1>Atlantic Fishing Resort</h1>
<div id="mySidenav" class="sideNav">
<nav> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<ul> <a href="index.html">Home</a>
<li> <a href="#" class="active">Units</a>
<a href="index.html">Home</a> <a href="activities.html">Activities</a>
</li> <a href="reservations.html">Reservations</a>
<li> </div>
<a href="#" class="active">Units</a> <div id="main">
</li> <span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
<li> </div>
<a href="activities.html">Activities</a> <div class="mainNav">
</li> <nav>
<li> <ul>
<a href="reservations.html">Reservations</a> <li>
</li> <a href="index.html">Home</a>
</ul> </li>
</nav> <li>
<a href="#" class="active">Units</a>
</li>
<li>
<a href="activities.html">Activities</a>
</li>
<li>
<a href="reservations.html">Reservations</a>
</li>
</ul>
</nav>
</div>
</header> </header>
<main> <main>
<div id="banner"> <div id="banner">
<img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town"> <img id="large_image" src="banner_units_large.jpg" alt="Atlantic Coastal Town" hidden="">
<img id="small_image" src="banner_units_small.jpg" alt="Atlantic Coastal Town"> <img id="small_image" src="banner_units_small.jpg" alt="Atlantic Coastal Town">
</div> </div>
<div id="hero"> <div id="hero">
@ -74,38 +85,35 @@
<h3>Unit Packages</h3> <h3>Unit Packages</h3>
<p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your <p>A variety of luxury unit packages are available. Choose a package below and contact us to begin your
reservation. We’re happy to build a custom package just for you!</p> reservation. We’re happy to build a custom package just for you!</p>
<div style="padding-left: 20px; padding-right: 20px; padding-bottom: 50px">
<table> <table>
<tr> <tr>
<th>Package Name</th> <th>Package Name</th>
<th>Description</th> <th>Description</th>
<th>Nights</th> <th>Nights</th>
<th>Cost per Person</th> <th>Cost per Person</th>
</tr> </tr>
<tr>
<tr> <td>Weekend Escape</td>
<td>Weekend Escape</td> <td class="text">Two breakfasts, a trail map, a picnic snack</td>
<td class="text">Two breakfasts, a trail map, a picnic snack</td> <td>2</td>
<td>2</td> <td>$450</td>
<td>$450</td> </tr>
</tr> <tr>
<td>Weekday Retreat</td>
<tr> <td class="text">Four breakfasts, a trail map, guided shore fishing tour</td>
<td>Weekday Retreat</td> <td>4</td>
<td class="text">Four breakfasts, a trail map, guided shore fishing tour</td> <td>$600</td>
<td>4</td> </tr>
<td>$600</td> <tr>
</tr> <td>Full Adventure</td>
<td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td>
<tr> <td>7</td>
<td>Full Adventure</td> <td>$800</td>
<td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td> </tr>
<td>7</td> </table>
<td>$800</td> </div>
</tr>
</table>
</main> </main>
<footer> <footer>
Copyright © 1999 Atlantic Fishing Resort<br> Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a> <a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>