Pacific Trails Resort Case Study Melanie Bowie is the owner of Pacific Trails Resort, located right...
Pacific Trails Resort Case Study Melanie Bowie is the owner of Pacific Trails Resort, located right on the California North Coast. The resort offers a quiet getaway with luxury camping in yurts along with an upscale lodge for dining and visiting with fellow guests. The target audience for Pacific Trails Resort is couples who enjoy nature and hiking. Melanie would like a website that emphasizes the uniqueness of the location and accommodations. She would like the website to include a home page, a page about the special yurt accommodations, a reservations page with a contact form, and a page to describe the activities available at the resort.
You have three tasks in this case study:
1. Create a folder for the Pacific Trails Resort website.
2. Create the Home page: index.html.
3. Create the Yurts page: yurts.html.
Please put the code in a file with a .html file extension. You should submit two files for this assignment: index.html and yurts.html.
Homework Answers
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<link href="css/styles.css" rel="stylesheet">
</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="yurts.html">Yurts</a></li>
<li><a href="activities.html">Activities</a></li>
<li><a href="reservations.html">Reservations</a></li>
</ul>
</nav>
<div id="homehero"></div>
<main>
<h2>
Enjoy Nature in Luxury
</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California
North Coast.
Relax in serenity with panoramic views of the Pacific Ocean.
</p>
<ul>
<li>Private yurts with decks overlooking the ocean</li>
<li>Activities lodge with fireplace and gift shop</li>
<li>Nightly fine dining at the Overlook Cafe</li>
<li>Heated outdoor pool and whirlpool</li>
<li>Guided hiking tours of the redwoods</li>
</ul>
<div id="contact">
<br>Pacific Trails Resort<br>
12010 Pacific Trails Road<br>
Zephyr, CA 95555<br>
<span id="desktop"> 888-555-5555 </span>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
</div>
</main>
<footer>
<p>Copyright © 2016 Pacific Trails Resort<br>
<u>[email protected]</u></p>
</footer>
</div>
</body>
</html>
yurts.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort :: Yurts</title>
<link href="css/styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</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="yurts.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><strong>What is a yurt?</strong></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 be opened.</dd>
<dt><strong>How are the yurts furnished?</strong></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><strong>What should I bring?</strong></dt>
<dd>Bring a sense of adventure and some time to relax! Most guests aslo pack comfortable walking shoes and
plan to dress for changing weather with layers and 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>Descriptions</th>
<th>Nights</th>
<th>Cost Per Person</th>
</tr>
<tr>
<td class="text">Weekend escape</td>
<td>Two breakfasts, a trail map, and a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td class="text">Zen Retreat</td>
<td>Four breakfasts, a trail map, a picnic snack, and a pass for the daily sunrise Yoga session</td>
<td>4</td>
<td>$600</td>
</tr>
<tr>
<td class="text">Kayak Away</td>
<td> Two breakfasts, two hours of kayak rental daily, and a trail map </td>
<td>2</td>
<td>$500</td>
</tr>
</table>
</main>
<div id="contact">
<footer>
<p>Copyright © 2016 Pacific Trails Resort<br>
<u>[email protected]</u></p>
</footer>
</div>
</div>
</body>
</html>
reservations.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<link href="css/styles.css" rel="stylesheet">
</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="yurts.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>
<h3>Contact Us Today!</h3>
<form method="post" action="spacific.php">
<p>Required fields are marked with an asterik *.</p>
<label for="Name">*First Name:</label>
<input type="text" name="myName" id="Name" required="required"><br>
<label for="myName">*Last Name:</label>
<input type="text" name="myName" id="myName" required="required"><br>
<label for="myE-mail">*E-mail:</label>
<input type="email" name="myE-mail" id="myE-mail" required="required"><br>
<label for="myPhone">*Phone:</label>
<input type="number" name="myPhone" id="myPhone" required="required"><br>
<label for="myDate">Arrival Date:</label>
<input type="date" name="myDate" id="myDate"><br>
<label for="Nights">Nights:</label>
<input type="number" name="Nights" id="Nights" max="14" min="1"><br>
<label for="myComment">*Comments:</label>
<textarea name="myComment" id="myComment" cols="30" rows="7" required="required"></textarea><br>
<input type="submit" value="Submit">
</form>
</main>
<div id="contact">
<footer>
<p>Copyright © 2016 Pacific Trails Resort<br>
<u>[email protected]</u></p>
</footer>
</div>
</div>
</body>
</html>
activities.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pacific Trails Resort</title>
<link href="css/styles.css" rel="stylesheet">
</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="yurts.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
</h2>
<h3>Hiking</h3>
<p>Pacific Trails Resort 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>Kayaking</h3>
<p>Ocean kayaks are available for guest use.</p>
<h3>Bird Watching</h3>
<p>While anytime is a good tine for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise
several times a week.</p><br><br>
<div id="fade">
<div><img src="css/images/ocean.jpg" alt="Forest with Ocean"></div>
<div><img src="css/images/beach.jpg" alt="Scenic Beach"></div>
<div><img src="css/images/sunset-beach.jpg" alt="Sunset Beach"></div>
</div>
</main>
<div id="contact">
<footer>
<p>Copyright © 2016 Pacific Trails Resort<br>
<u>[email protected]</u></p>
</footer>
</div>
</div>
</body>
</html>
styles.css:
body {
background-color: #4F6D94;
background-image:linear-gradient(to bottom, #FFFFFF, #4F6D94);
color: #666666;
font-family: Arial, Verdana,Sans-Serif;
}
header {
background-color: #000033;
background-image: url(images/sunset.jpg);
background-repeat: no-repeat;
background-position: right;
text-align: center;
height: 60px;
padding-top: 15px;
color: #FFFFFF;
}
nav {
font-weight: bold;
float: left;
width: 180px;
padding: 20px;
}
nav a {
margin: 20px;
text-decoration: none;
}
nav ul {
list-style-type: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
h1 {
margin-bottom: 0px;
margin-top: 0px;
font-family: Arial, Verdana, Sans-Serif;
text-align: left;
text-align: center;
}
h2 {
color: #3399CC;
/* text-shadow: 1px 1px 1px #CCCCCC; */
}
h3 {
font-family: Arial,Sans-Serif, Times;
}
dt {
color: #000033;
}
.resort {
font-weight: bold;
}
main ul {
list-style-image: url(images/marker.gif);
}
footer {
font-size: 75%;
padding: 20px;
margin-left: 190px;
background-color: #FFFFFF;
font-style: italic;
text-align: center;
font-family: Arial, Sans-Serif, Times;
clear: right;
}
#contact {
font-size: 90%;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 80%;
background: linear-gradient(to bottom, #ffffff 0%, #3399ff 100%);
min-width: 960px;
max-width: 2048px;
box-shadow: 3px 3px 3px #333333;
}
#homehero {
height: 300px;
background-image: url(images/coasthero.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#yurthero {
height: 300px;
background-image: url(images/yurthero.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
#trailhero {
height: 300px;
background-image: url(images/trailhero.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-left: 190px;
}
main {
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
margin-left: 190px;
display: block;
background-color: white;
}
dt {
padding: 10px;
}
table {
border: solid 1px #3399CC;
width: 80%;
border-spacing: 0;
}
td,
th {
padding: 10px;
border: solid 1px #3399CC;
}
td {
text-align: center;
}
.text {
text-align: left;
}
tr:nth-of-type(odd) {
background-color: #F5FAFC;
}
label {
float: left;
display: block;
width: 120px;
text-align: right;
padding-right: 10px;
}
input,
textarea {
display: block;
margin-bottom: 20px;
}
input[type="submit"] {
margin-left: 130px;
}
video,
embed {
float: right;
padding-left: 20px;
width: 320px;
height: 240px;
}
/*Support of HTML5*/
header,
main,
nav footer,
figure,
figcaption,
aside,
section,
article {
display: block;
}
#mobile {
display: none;
}
#desktop {
display: inline;
}
/*Media query for mobile phones*/
@media only screen and (max-width:37.5em) {
video,
embed {
float: right;
padding: 20px;
}
nav {
padding: 0px;
}
nav a {
display: block;
}
nav li {
display: block;
margin: 0;
}
header {
padding-top: 1em;
}
main {
padding-top: 0.1em;
padding-bottom: 0.1em;
padding-left: 1em;
padding-right: 1em;
font-size: 90%;
}
h1 {
font-size: 1.5em;
}
#homehero {
display: none;
height: auto;
}
#yurthero {
display: none;
height: auto;
}
#trailhero {
display: none;
height: auto;
}
#mobile {
display: inline;
}
#desktop {
display: none;
}
table {
border: solid 1px #3399CC;
width: 80%;
border-spacing: 0;
}
td,
th {
padding: 5px;
border: solid 1px #3399CC;
}
td {
text-align: center;
}
.text {
text-align: left;
}
tr:nth-of-type(odd) {
background-color: #F5FAFC;
}
label {
float: none;
text-align: left;
}
input[type="submit"] {
margin-left: 0;
}
#fade {
width: 100%;
}
}
/*Media query for tablet devices*/
@media only screen and (max-width:64em) {
body {
margin: 0;
background-color: #FFFFFF;
}
main {
margin-left: 0;
}
#wrapper {
min-width: 0;
width: auto;
box-shadow: none;
}
nav {
float: none;
width: auto;
text-align: center;
padding: 0.5em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
margin: 1px 50px 1px 50px;
text-decoration: none;
}
#homehero {
margin: 0;
height: 200px;
}
#yurthero {
margin: 0;
height: 200px;
}
#trailhero {
margin: 0;
height: 200px;
}
#pathhero {
margin: 0;
height: 200px;
}
footer {
margin: 0;
}
}
sample output:
Add Answer to:
Pacific Trails Resort Case Study Melanie Bowie is the owner of
Pacific Trails Resort, located right...
I'm need help in the Pacific Trails section of the assignment. I posted my chapter 2...
I'm need help in the Pacific Trails section of
the assignment. I posted my chapter 2 assignment on the bottom of
the picture. I'm using Notepad++.
This was the previous assignment: CHAPTER 2
ASSIGMENT
paste the first content to index.html file and second to
yurts.html.
First: (index.html contents are below)
<!DOCTYPE html>
<head>
<title>Pacific Trails Resorts</title>
</head>
<style>
a{
padding-right:14px; /* padding anchor tage to right
15px for nav menu */
}
</style>
<body>
<header>
<h1>Pacific Trails Resort</h1>
...
Hi, can someone explain to me why my image is not in the middle but all...
Hi, can someone explain to me why my image is not in the middle but all the way to the top of the page? <!DOCTYPE html> <html lang=”en”> <head> <title> Pacific Trails Resort :: Yurts </title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="pacific.css"> <div id="yurthero"></div> </head> <body> <div id="wrapper"></div> <header> <h1 id="hh"> Pacific Trails Resort </h1> </header> <div id=”navbar”></div> <b><a href=”index.html”> Home </a> <a href=”yurt.html”> Yurt </a> <a href=”activities.html”> Activities</a> <a href=”reservation.html”> Reservation </a> </ul> </b> <div> <img src="images/yurts.jpg" alt="Yurt" height="250"...
You might be familiar with Crazy Eddy, an owner of the “Crazy Eddy’s” home electronics stores...
You might be familiar with Crazy Eddy, an owner of the “Crazy Eddy’s” home electronics stores that used to exist when you were younger (though maybe too young to remember). Some of the larger superstores like Best Buy and Circuit City moved in and began squeezing Eddy. As it turned out his tagline, “where the prices are insane,” was quite true, and he was forced out of business. Unbeknownst to many, Eddy was an avid skier, and his desire to...
I'm need help in the Pacific Trails section of
the assignment. I posted my chapter 2 assignment on the bottom of
the picture. I'm using Notepad++.
This was the previous assignment: CHAPTER 2
ASSIGMENT
paste the first content to index.html file and second to
yurts.html.
First: (index.html contents are below)
<!DOCTYPE html>
<head>
<title>Pacific Trails Resorts</title>
</head>
<style>
a{
padding-right:14px; /* padding anchor tage to right
15px for nav menu */
}
</style>
<body>
<header>
<h1>Pacific Trails Resort</h1>
...
Most questions answered within 3 hours.
-
M. Laing has suggested a new arrangement of the periodic table
(J.Chem.Ed.1989, 66,
746). Answer the following...
asked 15 minutes ago -
Café Michigan's manager, Gary Stark, suspects that demand for
mocha latte coffees depends on the price...
asked 14 minutes ago -
A US merchant purchases wine from a vineyard outside of Paris.
The wine is transported to...
asked 20 minutes ago -
we have (TTN)*
We have to use just one 2-bit counter with 1-bit global
history?
and...
asked 21 minutes ago -
Firms that fail to compete with lower prices and/or better
products will go bankrupt. Does this...
asked 22 minutes ago -
Question 1 Current and Resistance
Part A: A current of -14.5 nanoamperes is how many electrons...
asked 23 minutes ago -
The population standard deviation for the height of college
basketball players is 3.4 inches. If we...
asked 35 minutes ago -
6.) Use valence bond theory to describe the number and types of
hybrid bonding orbitals on...
asked 37 minutes ago -
2. Define/explain the following traits that are important
adaptations for different types of vertebrate animals:
Jaws...
asked 38 minutes ago -
Firm K produced 45,000 radios using 9,000 hours of labor in
2003; total labor costs were...
asked 38 minutes ago -
Use the information in the table to answer the
question.
Year
2015
2016
2017
2018
Nominal...
asked 43 minutes ago -
Kelso Corporation just paid a dividend of D_0 = $1.50 per
share, and that dividend is...
asked 45 minutes ago