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.
-
Please answer question 3.
2. A city has learned that by buying larger garbage trucks, it...
asked 2 minutes ago -
What is “power” in communication interactions, according to
Martin & Nakayama (2018)?
asked 2 minutes ago -
Hydrogen fluoride is used in the manufacture of Freons (which
destroy ozone in the stratosphere) and...
asked 5 minutes ago -
Would the color red look different if you were immersed in water
rather than in air?
asked 13 minutes ago -
A steel piping is to be produced by centrifugal casting. The
length is 3.5 meters and...
asked 15 minutes ago -
3...
The following information was taken from Indriks Company’s cash
budget for the month of July:...
asked 28 minutes ago -
Country Company had the following partially completed payroll
register:
Partial payroll register:
Earnings
Withholdings
Salaries
Beginning...
asked 32 minutes ago -
I
have to separate 5 ions into 5 different test tubes
-> I CAN’T MAKE THE...
asked 41 minutes ago -
Juanita took a business trip from Houston to New York. She
worked for 4 days, then...
asked 40 minutes ago -
4. If we had
assumed the q for the calorimeter to be zero, would this have...
asked 49 minutes ago -
The following table reports real income per person for several
different economies in the years 1960...
asked 47 minutes ago -
Since the Great Recession, the trade deficit has been
decreasing
staying about the same
increasing
none...
asked 47 minutes ago