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

Week 7: Device-Specific Layouts

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

444
css/atlantic.css
View File

@ -1,13 +1,100 @@
/* Nav Bar */
header nav {
table {
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;
}
header nav a {
.mainNav nav a {
text-decoration: none;
}
header .active {
.mainNav .active {
text-decoration-color: lightblue;
padding: 0 10px;
background: rgb(34, 34, 34);
@ -15,7 +102,7 @@ header .active {
box-shadow: inset 0 0 10px #000000;
}
header nav ul {
.mainNav nav ul {
padding-left: 0;
list-style-type: none;
background: rgb(46, 44, 47);
@ -23,10 +110,9 @@ header nav ul {
display: flex;
justify-content: flex-start;
align-items: center;
font-family: "Liberation Sans", sans-serif;
}
header ul li *[href]:link {
.mainNav ul li *[href]:link {
color: whitesmoke;
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%);
@ -34,7 +120,7 @@ header ul li *[href]:link {
flex-grow: inherit;
}
header ul li *[href]:visited {
.mainNav ul li *[href]:visited {
color: aliceblue;
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%);
@ -42,7 +128,7 @@ header ul li *[href]:visited {
flex-grow: inherit;
}
header ul li *[href]:hover {
.mainNav ul li *[href]:hover {
color: lightskyblue;
padding: 0 10px;
background: rgb(34, 34, 34);
@ -50,6 +136,41 @@ header ul li *[href]:hover {
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 {
display: flex;
flex-wrap: wrap;
@ -58,6 +179,15 @@ header ul li *[href]:hover {
flex-direction: column;
}
.geoLoc {
text-align: center;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#hero {
background-color: white;
padding: 20px;
@ -88,51 +218,9 @@ header ul li *[href]:hover {
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 {
border-radius: 20px;
width: 320px;
width: 300px;
position: relative;
animation-name: image-fun;
animation-duration: 2s;
@ -163,89 +251,127 @@ header ul li *[href]:hover {
font-size: 16px;
}
/* Mobile devices */
@media screen and (max-width: 320px) {
@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: 300px;
}
}
header nav ul {
height: 40px;
font-size: 0.9rem;
@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: 300px;
}
}
/* iPhone and Android (Portrait) */
@media screen and (max-width: 320px) {
.sidenav {
padding-top: 15px;
}
header ul li *[href] {
line-height: 40px;
height: 40px;
.sidenav a {
font-size: 18px;
}
.mainNav {
display: none;
}
h1 {
font-size: 20px;
}
video {
display: none;
}
}
/* iPads, Tablets. */
@media screen and (min-width: 321px) {
@media screen and (max-width: 479px) {
.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;
font-size: 1rem;
}
header ul li *[href] {
.mainNav ul li *[href] {
line-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 {
0% {
left: -500px;
@ -266,6 +392,7 @@ header ul li *[href]:hover {
width: 650px;
}
}
@keyframes image-spin {
0% {
left: 0;
@ -276,6 +403,7 @@ header ul li *[href]:hover {
transform: rotateY(0deg);
width: 10px;
}
100% {
left: 0;
top: 0;
@ -289,7 +417,7 @@ header ul li *[href]:hover {
#default-image {
border-radius: 20px;
width: 650px;
width: 100%;
position: relative;
animation-name: image-fun;
animation-duration: 2s;
@ -302,38 +430,106 @@ header ul li *[href]:hover {
animation-name: image-spin;
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) {
table {
font-size: 24px;
}
header nav ul {
.mainNav nav ul {
height: 50px;
font-size: 1.6rem;
}
header ul li *[href] {
.mainNav ul li *[href] {
line-height: 50px;
height: 50px;
}
.form-padding {
padding-left: 200px;
padding-right: 200px;
}
h1 {
font-size: 46px;
}
}
/* Extra large screens, TV. */
@media screen and (min-width: 1401px) {
/* High Resolution Monitors */
@media screen and (min-width: 1366px) {
header nav ul {
.mainNav nav ul {
height: 50px;
font-size: 2rem;
}
header ul li *[href] {
.mainNav ul li *[href] {
line-height: 50px;
height: 50px;
}
.form-padding {
padding-left: 300px;
padding-right: 300px;
}
}

52
index.html
View File

@ -13,29 +13,41 @@
<![endif]-->
<script src="/js/geo.js"></script>
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<header id="wrapper">
<header>
<h1>Atlantic Fishing Resort</h1>
<nav>
<ul>
<li>
<a href="#" class="active">Home</a>
</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 id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#" class="active">Home</a>
<a href="units.html">Units</a>
<a href="activities.html">Activities</a>
<a href="reservations.html">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
<a href="#" class="active">Home</a>
</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>
<main>
<div id="hero">
@ -62,7 +74,7 @@
</article>
</div>
<article>
<div style="padding: 50px 50px;">
<div style="padding: 50px 10px;">
<div class="flex-container">
<div>
<h3>Find us</h3>
@ -73,7 +85,7 @@
<!--Position information will be inserted here-->
<div id="result"></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="book-flight-image" src="images/book_flight.jpg" alt="Book a flight to Namibia"
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>
<![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div>
<header>
<h1>Atlantic Fishing Resort</h1>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<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 id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="index.html">Home</a>
<a href="units.html">Units</a>
<a href="activities.html">Activities</a>
<a href="#" class="active">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<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>
<main>
<h2>Reservations at Atlantic Fishing Resort</h2>
<h3>Contact Us</h3>
<p>Required information is marked with an asterisk (*).</p>
<form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<label for="myFName">* First Name:</label>
<input type="text" name="myFName" id="myFName" required="required">
<label for="myLName">* Last Name:</label>
<input type="text" name="myLName" id="myLName" required="required">
<label for="myEmail">* E-mail:</label>
<input type="email" name="myEmail" id="myEmail" required="required">
<label for="myPhone">Phone:</label>
<input type="tel" name="myPhone" id="myPhone">
<label for="myDate">Arrival Date:</label>
<input type="date" name="myDate" id="myDate">
<label for="myNights">Nights:</label>
<input type="number" name="myNights" id="myNights" min="1" max="14">
<label for="myComments">* Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20" required="required"></textarea>
<input type="submit" id="mySubmit" value="Submit">
</form>
<div class="form-padding">
<form method="post" action="http://webdevbasics.net/scripts/pacific.php">
<div class="container">
<h3>Contact Us</h3>
<p>Required information is marked with an asterisk (*).</p>
<fieldset>
<legend>Personal Information</legend>
<div class="row">
<div class="col-25">
<label for="myFName">* First Name:</label>
</div>
<div class="col-75">
<input type="text" name="myFName" id="myFName" required="required">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myLName">* Last Name:</label>
</div>
<div class="col-75">
<input type="text" name="myLName" id="myLName" required="required">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="myEmail">* E-mail:</label>
</div>
<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>
<footer>
Copyright © 1999 Atlantic Fishing Resort<br>
<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>
<![endif]-->
<script src="/js/hiddenNav.js"></script>
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div>
<header>
<h1>Atlantic Fishing Resort</h1>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<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 id="mySidenav" class="sideNav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="index.html">Home</a>
<a href="#" class="active">Units</a>
<a href="activities.html">Activities</a>
<a href="reservations.html">Reservations</a>
</div>
<div id="main">
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
</div>
<div class="mainNav">
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<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>
<main>
<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">
</div>
<div id="hero">
@ -74,38 +85,35 @@
<h3>Unit Packages</h3>
<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>
<table>
<tr>
<th>Package Name</th>
<th>Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
<tr>
<td>Weekend Escape</td>
<td class="text">Two breakfasts, a trail map, a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Weekday Retreat</td>
<td class="text">Four breakfasts, a trail map, guided shore fishing tour</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td>Full Adventure</td>
<td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td>
<td>7</td>
<td>$800</td>
</tr>
</table>
<div style="padding-left: 20px; padding-right: 20px; padding-bottom: 50px">
<table>
<tr>
<th>Package Name</th>
<th>Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
<tr>
<td>Weekend Escape</td>
<td class="text">Two breakfasts, a trail map, a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Weekday Retreat</td>
<td class="text">Four breakfasts, a trail map, guided shore fishing tour</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td>Full Adventure</td>
<td class="text">Six breakfasts, full fishing tackle rental daily, a trail map</td>
<td>7</td>
<td>$800</td>
</tr>
</table>
</div>
</main>
<footer>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>