THE CODE SHOULD MAKE THE WEBSITE LOOK LIKE SHOWN IN THE PICTURE!! ***PLEAS

ID: 3585389 • Letter: #

Question

***THE CODE SHOULD MAKE THE WEBSITE LOOK LIKE SHOWN IN THE PICTURE!!***

***PLEASE COMPLETE THE CODE!!***

***THE PROVIDED IMAGES ARE TO BE USED ON THE WEBSITE***

Pacific Trails See Chapter 2 for an introduction to the Pacific Trails Case Study. Figure 2.38 shows a site map for Pacific Trails. The Home page and Yurts page were created in earlier chapters. Using the existing website as a starting point you will modify the design of the pages to display a large image on each page, as indicated in the wireframe in Figure 4.52. You will also create a new page, the Activities page. You have five tasks in this case study wrapper header nav div with large image main 1. Create a new folder for this Pacific Trails case study, and obtain the starter image files 2. Modify the Home page to display a logo image and scenic photograph as shown in Figure 4.53 div with contact info 3. Modify the Yurts page to be consistent with the Home page footer 4. Create a new Activities page, as shown in Figure 4.54 5. Modify the style rules in the pacific.css file as needed. Figure 4.52 New Pacific Trails wireframe Hands-On Practice Case Task 1: Create a folder on your hard drive or portable storage device called pacific4 Copy all the files from your Chapter 3 pacificcss folder into the pacific4 folder. Obtain the images used in this case study from the student files. The images are located in the chapter4/casestudystarters/pacific folder. The images are sunset.jpg, coast.jpg, yurt.jpg, trail jpg, and background.jpg. Save the files in your pacific4 folder Task 2 The Home Page. Launch a text editor, and open the index.html file from your pa 4 folder. Modify the index.html file to look similar to the web page shown in Figure nfigure a div element to display the coast.jpg image. Code an opening div tag ass gned to the id named homehero after the closing nav tag. Next, code a closing div tag in the wireframe in Figure 4.52, this div is located between the nav element and the main element. There is no HTML or text content for this div. The purpose of this div is to display a large image (configured with CSS in Task 5) and validate your new index.html page. It will not yet be similar to Figure 4.53; you'll configure CSS in Task b Task 3: The Yurts Page. Launch a text editor, and open the yurts.html page from your cific4 folder. Configure a div element to display the yurt.jpg image. Code an opening di lag assigned to the id named yurthero after the closing nav tag. Next, code a closing div ag. As shown in the wireframe in Figure 4.52, this div is located between the nav element and the main element. There is no HTML or text content for this div. The purpose of this dlv is to display a large image (configured with CSS in Task 5). Save and validate your new yurts.html page

Explanation / Answer

activities.html
------------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort :: Activities</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

<div id="gallery">


   <figure>
    <img src="photo2.jpg" alt="Pacific Trails" width="200" height="150">
    </figure>


    <ul>
   <li><a href="photo2.jpg"><img src="photo2thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo2.jpg" width="200" height="150" alt="Pacific Trails"><br>Ocean View</span></a></li>
     <li><a href="photo3.jpg"><img src="photo3thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo3.jpg" width="200" height="150" alt="Pacific Trails"><br>Mountain View</span></a></li>
     <li><a href="photo4.jpg"><img src="photo4thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo4.jpg" width="200" height="150" alt="Pacific Trails"><br>Beach View</span></a></li>
     <li><a href="photo6.jpg"><img src="photo6thumb.jpg" width="100" height="75" alt="Pacific Trails">
<span><img src="photo6.jpg" width="200" height="150" alt="Sunset"><br>Sunset View</span></a></li>
   </ul>

</div>
</div>

<div id="footer">
    Copyright © 2017 Pacific Trails Resort<br>
    <a href="mailto:xyz@pacifictrails.com">xyz@pacifictrails.com</a>
</div>
    </div>
</body>
</html>
---------------------------------------------------------------------
index.html
--------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

<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>
<div id="content">
    <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>
</div>

<div id="contact">
    <span class="resort">Pacific Trails Resort</span><br>
    12010 Pacific Trails Road<br>
    Zephyr, CA 95555<br><br>
    888-555-5555<br><br>
</div>
</div>
<div id="footer">
    Copyright © 2017 Pacific Trails Resort<br>
    <a href="mailto:xyz@pacifictrails.com">xyz@pacifictrails.com</a>
</div>

</body>
</html>
------------------------------------------------------------------
reservations.html
---------------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort :: Reservations</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

<body>
    <div id="wrapper">
<h1>Pacific Trails Resort</h1>
<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="content">
    <h2>Reservations at Pacific Trails</h2>
    <h3>Contact Us Today!</h3>

    <p>Required fields are 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"><br>
<label for="myLName">*Last Name</label>
<input type="text" name="myLName" id="myLName" required="required"><br>
<label for="myEmail">*E-mail</label>
<input type="email" name="myEmail" id="myEmail" size="40" required="required"><br>
<label for="mobile">Phone Number:</label>
<input type="tel" name="myPhone" id="myPhone" maxlength="12"><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" min="1" max="14"><br>
<label for="mycomments">*Comments:</label>
<textarea name="mycomments" id="mycomments" rows="2" cols="32" required="required"></textarea><br>

</form>
<br>

</body>
</html>
--------------------------------------------------------------------------
yurts.html
-----------------------------------------------
<!DOCTYPE html>

<html>
<head>
    <title>Pacific Trails Resort :: Yurts</title>
    <link rel="stylesheet" href="pacific.css">
    <link rel="shortcut icon" href="favicon.ico" />

</head>

    <h3>What is a yurt?</h3>
    <p>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.</p>

    <h3>How are the yurts furnished?</h3>
    <p>Each yurt is furnished with a queen-size bed with down quilt and a 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.</p>
    <h3>What should I bring?</h3>
    <p>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.</p>


    <h3>Yurts 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 border="1">
<tr>
<th>Package Name</th>
<th>Description</th>
<th>Nights</th>
<th>Cost per Person</th>
</tr>
<tr>
<td>Weekend Escape</td>
<td id="text">Two breakfasts, a trail map, and a picnic snack</td>
<td>2</td>
<td>$450</td>
</tr>
<tr>
<td>Zen Retreat</td>
<td id="text">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>Kayak Away</td>
    <td id="text">Two breakfasts, two hours of kayak rental daily, and a trail map</td>
    <td>2</td>
    <td>$500</td>
</tr>
</table>

</div>

<div id="footer">
    Copyright © 2017 Pacific Trails Resort<br>
    <a href="mailto:xyz@pacifictrails.com">xyz@pacifictrails.com</a>
</div>
    </div>
</body>
</html>
----------------------------------------------------------------------------------------
pacific.css
----------------------------------------------------------
body {
   color: #666666;
   background-color: #FFFFFF;
   }

h1 {
   color: #FFFFFF;
   background-color: #000033;
   }

nav {
   float: left; width: 160px;
       font-weight: bold;
   }

h2 {
   color: #3399CC;
   font-family: Georgia, "Times New Roman", serif;
   }

dt {
color: #000033
}

.resort {
   color: #5C7FA3;
   font-weight: bold;
   }

h1 {
   background-image: url(sunset.jpg);
   background-repeat: no-repeat;
   background-position: right top;
   padding: 10px;
   font-family: Georgia, "Times New Roman", serif;
   margin-bottom: 0;
   }

h3 {
   color: #000033;
   font-family: Georgia, "Times New Roman", serif;
   }

body {
   background-image: url(ptrbackground.jpg);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 97%;
   }

#wrapper {
   margin-left: auto;
   margin-right: auto;
   min-width: 960px;
   width: 80%;
   background-color: #90c7e3;
   }

#content {
       padding: 1px 20px 55px 30px;
       margin-left: 190px;
       list-style-position: inside;
       list-style-image: url(marker.gif);
       background-color: #ffffff;
   }

#contact {
       font-size: 90%;
       padding: 1px 20px 20px 5px;
   }

#footer {
   padding: 20px;
   font-size: 75%;
   font-style: italic;
   font-family: Georgia, "Times New Roman", serif;
   background-color: #ffffff;
   margin-left: 190px;
   clear: both;
   }

#content img, #content video, #content embed {
       float: left;
       padding-right: 20px;
   }

nav ul {
   list-style-type: none;
   padding: 20px;
   }

nav a {
   font-size: 1.2em;
   text-decoration: none;
   -webkit-transition: color 3s ease-out;
    -moz-transition: color 3s ease-out;
    -o-transition: color 3s ease-out;
    transition: color 3s ease-out;
   }

nav a:visited {
color: #344873;
}

nav a:hover {
color: #ffffff;
}

header, hgroup, nav, footer, figure, figcaption, aside, section,
article {
display: block;
}

#mobile {
display: none;
}

#desktop {
display: inline;
}

img {
   max-width: 100%;
   height: auto;
   }

label {
   float: left;
   display: block;
   text-align: right;
   width: 120px;
   padding-right: 10px;
   }

input, textarea {
   display-block;
   margin-bottom: 20px;
   }

#gallery {
position: relative;
height: 200px; }

#gallery ul {
   list-style-type: none;
       width: 300px;
   }

#gallery li {
   display: inline;
        float: left;
   padding: 10px;
   }

#gallery img {
border-style: none;
}

#gallery a {
   text-decoration: none;
        text-align: left;
   color: blue;
   }

#gallery span {
   position: absolute;
        left: -1000px;
        opacity: 0;
   }

#gallery a:hover span {
           position: absolute;
           top: 16px;
           left: 320px;
           text-align: center;
                   opacity: 1;
       }

figure {
   position: absolute;
   left: 280px;
   text-align: center;
        opacity: .25;
   }

@media only screen and (max-width: 768px) {
body { margin: 0; }
#wrapper { min-width: 0;
   width: auto; }
#content { margin-left: 0; }
nav { float: none;
   width: auto;
   padding: 0; }
nav ul { text-align: center; }
nav li { padding: 0 0.75em 0 .75em;
   display: inline; }
#footer { margin-left: 0; }
}

table {
   border: 1px solid #3399CC;
   width: 80%;
   border-spacing: 0;
   }

td, th {
   padding: 5px;
   border: 1px solid #3399CC;
   }

td {
text-align: center;
}

#text {
text-align: left;
}

tr:nth-of-type(odd) {
background-color: #F5FAFC;
}

@media only screen and (max-width: 480px) {
body { margin: 0; }
#wrapper { width: auto;
   min-width: 0;
   margin: 0; }
#content { padding: 0.1em 1em 0.1em 1em;
   font-size: 90%;
   margin: 0; }
h1 { margin: 0;
   font-size: 1.5em;
   padding-left: 0.3em; }
nav ul { padding: 0; }
nav li { display: block;
   margin: 0;
   border-bottom: 2px solid #330000; }
nav a { display: block; }
#content img { float: none;
   padding: 0;
   margin: 0.1em; }
#content ul { list-style-position: outside; }
#mobile { display: inline; }
#desktop { display: none; }
label { float: none;
text-align: left; }
#gallery { display: none; }
}

iframe {
   position:relative;
   float:left;
   margin-right:20px;
}

Navigate

***StillClock.java***** import java.awt.*; import javax.swing.*; import java.uti

***THIS HAS TO BE CODED IN C#*** Module 7&8 Programming Assignment – OO Design a

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

***THE CODE SHOULD MAKE THE WEBSITE LOOK LIKE SHOWN IN THE PICTURE!!*** ***PLEAS

Question

Explanation / Answer

Related Questions

Navigate

THE CODE SHOULD MAKE THE WEBSITE LOOK LIKE SHOWN IN THE PICTURE!! ***PLEAS