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

Week 3: Targeting with Selectors

Browse Source
This commit is contained in:
Llewellyn van der Merwe 2022-02-06 22:52:59 +02:00
parent 0d31b6d150
commit 3190d81d49
Signed by: Llewellyn
GPG Key ID: EFC0C720A240551C
7 changed files with 356 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
activities.html
View File

@ -1,53 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Describes activities at Pacific Trails Resort. Activities are Hiking,Kayaking, and Bird Watching">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort :: Yurts</title>
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<meta name="description"
content="Describes activities at Atlantic Fishing Resort. Activities are Hiking,Kayaking, and Bird Watching">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlantic Fishing Resort :: Units</title>
<link rel="stylesheet" href="css/atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!-- Completed files -->
<![endif]-->
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
<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>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tackle.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</nav>
<div id="trailhero"></div>
<main>
<h2>Activities at Pacific Trails Resort</h2>
<h2>Activities while staying at Atlantic Fishing Resort</h2>
<h3>Hiking</h3>
<p><span class="resort">Pacific Trails Resort</span> has 5 miles of hiking trails and is adjacent to a state park. Go it alone or join one of our guided hikes.</p>
<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>
<h3>Kayaking</h3>
<p>Ocean kayaks are available for guest use.</p>
<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>
<h3>Bird Watching</h3>
<p>While anytime is a good time for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise several times a week.</p>
<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>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</div>
</body>
</html>

0
atlantic.css
View File

131
css/atlantic.css Normal file
View File

@ -0,0 +1,131 @@
/* Nav Bar */
header nav {
padding: 0;
}
header nav a {
text-decoration: none;
}
header .active {
text-decoration-color: lightblue;
padding: 0 10px;
background: rgb(34,34,34);
background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(84,84,84,1) 50%, rgba(34,34,34,1) 100%);
box-shadow: inset 0 0 10px #000000;
}
header nav ul {
padding-left: 0;
list-style-type: none;
background: rgb(46,44,47);
background: linear-gradient(0deg, rgba(46,44,47,1) 0%, rgba(110,121,122,1) 50%, rgba(46,44,47,1) 100%);
display: flex;
justify-content: flex-start;
align-items: center;
font-family: "Liberation Sans", sans-serif;
}
header 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%);
display: flex;
flex-grow: inherit;
}
header 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%);
display: flex;
flex-grow: inherit;
}
header ul li *[href]:hover {
color: lightskyblue;
padding: 0 10px;
background: rgb(34,34,34);
background: linear-gradient(0deg, rgba(34,34,34,1) 0%, rgba(84,84,84,1) 50%, rgba(34,34,34,1) 100%);
box-shadow: inset 0 0 10px #000000;
}
/* Mobile devices */
@media screen and (max-width: 480px) {
/* flex container */
header nav ul {
height: 40px;
font-size: 0.9rem;
}
/* flex item */
header ul li *[href] {
line-height: 40px;
height: 40px;
}
}
/* iPads, Tablets. */
@media screen and (min-width: 481px) {
/* flex container */
header nav ul {
height: 40px;
font-size: 1rem;
}
/* flex item */
header ul li *[href] {
line-height: 40px;
height: 40px;
}
}
/* Small screens, laptops */
@media screen and (min-width: 769px) {
header nav ul {
height: 50px;
font-size: 1.4rem;
}
/* flex item */
header ul li *[href] {
line-height: 50px;
height: 50px;
}
}
/* Desktops, large screens. */
@media screen and (min-width: 1025px) {
/* flex container */
header nav ul {
height: 50px;
font-size: 1.6rem;
}
/* flex item */
header ul li *[href] {
line-height: 50px;
height: 50px;
}
}
/* Extra large screens, TV. */
@media screen and (min-width: 1201px) {
/* flex container */
header nav ul {
height: 50px;
font-size: 2rem;
}
/* flex item */
header ul li *[href] {
line-height: 50px;
height: 50px;
}
}

30
index.html
View File

@ -6,7 +6,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlantic Fishing Resort</title>
<link rel="stylesheet" href="atlantic.css">
<link rel="stylesheet" href="css/atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
@ -21,10 +21,18 @@
<h1>Atlantic Fishing Resort</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tackle.html">Tackle</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
<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>
</header>
@ -47,7 +55,7 @@
<ul>
<li>Private apartments with beach front views</li>
<li>Activities in and around town</li>
<li>shops in walking distance</li>
<li>Shops in walking distance</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated jacuzzi and sauna</li>
<li>Guided fishing tours</li>
@ -65,14 +73,14 @@
<!--Position information will be inserted here-->
<div id="result" ></div>
</div>
<div style="padding: 50px 0px; ">
<img id="default-image" src="/images/default.jpg" alt="Atlantic Holiday Resort"
<div style="padding: 50px 0">
<img id="default-image" src="images/default.jpg" alt="Atlantic Holiday Resort"
style="width: 100%;">
<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="width: 100%; display: none;">
<img id="rent-car-image" src="/images/rent_car.jpg" alt="Rent a car in Namibia"
<img id="rent-car-image" src="images/rent_car.jpg" alt="Rent a car in Namibia"
style="width: 100%; display: none;">
<img id="walking-distance-image" src="/images/walking_distance.jpg" alt="Walking in the dunes"
<img id="walking-distance-image" src="images/walking_distance.jpg" alt="Walking in the dunes"
style="width: 100%; display: none;">
</div>
</div>

111
reservations.html
View File

@ -1,70 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content=" Reservations page for Pacific Trails Resort. Set a reservation at a luxurious resort in California.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort :: Reservations</title>
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<meta name="description"
content=" Reservations page for Atlantic Fishing Resort. Set a reservation at a luxurious resort in Namibia.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlantic Fishing Resort :: Reservations</title>
<link rel="stylesheet" href="css/atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!-- Completed files -->
<![endif]-->
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
<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>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tackle.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</nav>
<main>
<h2>Reservations at Pacific Trails</h2>
<h2>Reservations at Atlantic Fishing Resort</h2>
<h3>Contact Us</h3>
<p>Required information is marked with an asterisk (*).</p>
<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>
<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>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</div>
</body>
</html>

88
tackle.html
View File

@ -1,88 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Describes what a Yurt is and what it is make of.Displays Yurts packages and prices.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacific Trails Resort :: Yurts</title>
<link rel="stylesheet" href="atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="tackle.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</nav>
<div id="yurthero"></div>
<main>
<h2>The Yurts at Pacific Trails</h2>
<dl>
<dt>What is a yurt?</dt>
<dd>Our luxury yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor, and a roof dome that can be opened.</dd>
<dt>How are the yurts furnished?</dt>
<dd>Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove. The luxury camping experience also includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge.</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to dress for changing weather with layers of clothing.</dd>
</dl>
<h3>Yurt Packages</h3>
<p>A variety of luxury yurt 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>Zen Retreat</td>
<td class="text">Four breakfasts, a trail map, a pass for daily yoga</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td>Kayak Away</td>
<td class="text">Two breakfasts, two hours of kayak rental daily, a trail map</td>
<td>2</td>
<td>$500</td>
</tr>
</table>
</main>
<footer>
Copyright © 2016 Pacific Trails Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>

104
units.html Normal file
View File

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Describes how to prepare your tackle wither by renting or buying">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Atlantic Fishing Resort :: Tackle</title>
<link rel="stylesheet" href="css/atlantic.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<!-- Completed files -->
</head>
<body>
<div id="wrapper">
<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>
</header>
<div id="yurthero"></div>
<main>
<h2>Prepare for your stay at Atlantic Fishing Resort</h2>
<dl>
<dt>Our Units</dt>
<dd>Our luxury units sleep 6 or 8 people comfortably. They have outside BBQ's with ocean-front views. Each
unit is serviced daily (except Sundays and public holidays) by our friendly staff to help you to take a
break.
</dd>
<dt>How are the units furnished?</dt>
<dd>Each unit is furnished with a king-size bed and double and single beds to accommodate all guests.
The luxury unit has a fully furnished kitchen, dining room and living room with at least 2 toilets, a
bath and shower facilities with hot water. Each unit also has a garage available.
</dd>
<dt>What should I bring?</dt>
<dd>Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and
plan to dress for changing weather with layers of clothing.
</dd>
</dl>
<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>
</main>
<footer>
Copyright © 1999 Atlantic Fishing Resort<br>
<a href="mailto:yourfirstname@yourlastname.com">yourfirstname@yourlastname.com</a>
</footer>
</div>
</body>
</html>