16 files changed, 501 insertions, 0 deletions
diff --git a/HTML/Tests/Test3/PacificTrailsResort.mov b/HTML/Tests/Test3/PacificTrailsResort.mov
new file mode 100644
index 0000000..602aee4
--- /dev/null
+++ b/HTML/Tests/Test3/PacificTrailsResort.mov
diff --git a/HTML/Tests/Test3/PacificTrailsResort.mp4 b/HTML/Tests/Test3/PacificTrailsResort.mp4
new file mode 100644
index 0000000..30db84d
--- /dev/null
+++ b/HTML/Tests/Test3/PacificTrailsResort.mp4
diff --git a/HTML/Tests/Test3/PacificTrailsResort.ogv b/HTML/Tests/Test3/PacificTrailsResort.ogv
new file mode 100644
index 0000000..b19c45a
--- /dev/null
+++ b/HTML/Tests/Test3/PacificTrailsResort.ogv
diff --git a/HTML/Tests/Test3/activities.html b/HTML/Tests/Test3/activities.html
new file mode 100644
index 0000000..9bd9af5
--- /dev/null
+++ b/HTML/Tests/Test3/activities.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Pacific Trails Resort :: Activities</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href=pacific.css>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Pacific Trails Resort is a site that contains information about the activities and registration for the resort.">
+
+    </head>
+    <body class=content>
+        <div id=wrapper>
+        <header>
+            <h1><a href=index.html>Pacific Trails Resort</a></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>
+            <section>
+            <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>
+            </section>
+            <section>
+            <h3>Kayaking</h3>
+            <p>Ocean kayaks are available for guest use.</p>
+            </section>
+            <section>
+            <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>
+            </section>
+        </main>
+        <footer>
+            Copyright &copy; 2022 Pacific Trails Resort
+            <br />
+            <!--"Place your name in an email link". I'm assuming that this is what was meant by this.-->
+            <a href=mailto:msglm@techchud.xyz>msglm</a>
+        </footer>
+        </div>
+    </body>
+</html>
diff --git a/HTML/Tests/Test3/coast.jpg b/HTML/Tests/Test3/coast.jpg
new file mode 100644
index 0000000..af3fef0
--- /dev/null
+++ b/HTML/Tests/Test3/coast.jpg
diff --git a/HTML/Tests/Test3/coast2.jpg b/HTML/Tests/Test3/coast2.jpg
new file mode 100644
index 0000000..ac2b452
--- /dev/null
+++ b/HTML/Tests/Test3/coast2.jpg
diff --git a/HTML/Tests/Test3/favicon.ico b/HTML/Tests/Test3/favicon.ico
new file mode 100644
index 0000000..ad98119
--- /dev/null
+++ b/HTML/Tests/Test3/favicon.ico
diff --git a/HTML/Tests/Test3/index.html b/HTML/Tests/Test3/index.html
new file mode 100644
index 0000000..0a60a50
--- /dev/null
+++ b/HTML/Tests/Test3/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Pacific Trails Resort</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Pacific Trails Resort is a site that contains information about the activities and registration for the resort.">
+        <link rel="stylesheet" href=pacific.css>
+    </head>
+    <body>
+        <div id=wrapper>
+            <header>
+                <h1><a href=index.html>Pacific Trails Resort</a></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 class=resort>Enjoy Nature in Luxury</h2>
+                <p><span class=resort>Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>
+                <video width=320 height=240 poster="pacifictrailsresort.jpg" controls>
+                    <source src="PacificTrailsResort.mp4">
+                    <source src="PacificTrailsResort.ogv">
+                    <source src="PacificTrailsResort.mov">
+                </video>
+                <ul>
+                    <li>Unwind in the heated outdoor pool and whirlpool</li>
+                    <li>Explore the coast on your own or join our guided tours</li>
+                    <li>Relax in our lodge while enjoying complimentary appetizers and beverages </li>
+                    <li>Savor nightly fine dining with an ocean view</li>
+                </ul>
+                <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>
+
+
+            </main>
+            <footer>
+                Copyright &copy; 2022 Pacific Trails Resort
+                <br />
+                <!--"Place your name in an email link". I'm assuming that this is what was meant by this.-->
+                <small><a href=mailto:msglm@techchud.xyz>msglm</a></small>
+            </footer>
+            <div>
+    </body>
+</html>
diff --git a/HTML/Tests/Test3/marker.gif b/HTML/Tests/Test3/marker.gif
new file mode 100644
index 0000000..318f8b0
--- /dev/null
+++ b/HTML/Tests/Test3/marker.gif
diff --git a/HTML/Tests/Test3/pacific.css b/HTML/Tests/Test3/pacific.css
new file mode 100644
index 0000000..67fc6e5
--- /dev/null
+++ b/HTML/Tests/Test3/pacific.css
@@ -0,0 +1,242 @@
+* {
+    box-sizing: border-box; 
+}
+
+body {
+    background-color: #EAEAEA;
+    color:#555555;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+header {
+    background-color: #002171;
+    color: #FFFFFF;
+    letter-spacing: 0.25em;
+    text-align: center;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+}
+
+header a {
+    text-decoration: none;
+}
+
+header a:link {
+    color: #FFFFFF
+}
+
+header a:visited {
+    color: #FFFFFF
+}
+
+header a:hover {
+    color:#90C7E3;
+}
+
+
+h1 {
+    text-align: center;
+    margin-top 0;
+    font-family: Georgia, 'Times New Roman', Times, serif
+}
+
+nav {
+    text-align: center;
+    font-weight: bold;
+    padding: 0;
+    font-size: 120%;
+}
+
+nav ul {
+    list-style-type: none;
+    margin 0;
+    padding-left: 0;
+    font-size 1.2em;
+}
+
+
+nav li {
+    border-bottom: 1px solid #002171;
+}
+
+nav a {
+    text-decoration: none;
+}
+
+nav a:link {
+    transition: 3s ease-out;
+    color:#5C7FA3;
+}
+
+nav a:visited {
+    color: #344873;
+}
+
+nav a:hover {
+    color: #A52A2A;
+}
+
+main {
+    background-color: #FFFFFF;
+    padding: 1px 20px 20px 30px;
+    display: block;
+    overflow: auto;
+}
+
+h2 {
+    color: #197602;
+    text-shadow: 1px 1px #CCCCCC;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+h3 {
+    color: #000033;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+main il {
+    list-style-image: url(marker.gif);
+}
+
+dt {
+color: #002171
+}
+
+footer {
+    background-color: #FFFFFF;
+    font-size: 75%;
+    font-style: italic;
+    text-align: center;
+    padding: 2em;
+    font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+.resort {
+    color: #1976D2;
+    font-weight: bold;
+}
+
+#contact {
+    font-size: 90%;
+}
+
+#homehero {
+    height:300px;
+    background-image: url(coast2.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+#yurthero {
+    height: 300px;
+    background-image: url(yurt.jpg);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+  form { display: flex; 
+         flex-flow: column nowrap; }    
+  input, textarea { margin-bottom: .5em; }
+
+
+@media (min-width: 600px) {
+
+    form {
+        width: 60%;
+        display: grid;
+        grid-gap: 1em;
+        grid-column: 6em / 1fr;
+    }
+
+
+
+    input[type="submit"] {
+        grid-column: 2;
+        width: 9em;
+    }
+
+    nav ul {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-around;
+    }
+
+    nav li {
+        border-bottom: none;
+    }
+
+    section {
+        margin-left: 2em;
+        margin-right: 2em;
+        flex 1;
+    }
+
+    .flow {
+        display: flex;
+        flex-direction: row;
+    }
+}
+
+@media (min-width: 1024px) {
+    #wrapper {
+        margin: auto;
+        width: 80%;
+        border: 1px solid #002171;
+        box-shadow: 3px 3px 3px #002171;
+    }
+
+    nav {
+        text-align: left;
+        padding-left: 1em;
+    }
+
+    @supports (display: grid) {
+        nav ul {
+            flex-direction: column;
+            padding-top: 1em;
+        }
+        .hero {grid-area: hero;}
+        header {grid-area: header;}
+        nav {grid-area: nav;}
+        main {grid-area: main;}
+        footer {grid-area: footer;}
+        
+        #wrapper {
+            display: grid;
+            grid-template:
+            "header header"
+            "nav hero"
+            "nav main"
+            "nav footer"
+            / 180px 1fr;
+        }
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border: 2px solid #3399CC;
+}
+
+td,th {
+    padding: 0.5em;
+    border: 2px solid #3399CC;
+}
+
+td {
+    text-align: center;
+}
+
+.text {
+    text-align: left;
+}
+
+tr:nth-last-of-type(even) {
+    background-color: #F5FAFC;
+}
+
+video, embed { 
+    float: right; 
+    padding-left: 20px; 
+}
diff --git a/HTML/Tests/Test3/pacifictrailsresort.jpg b/HTML/Tests/Test3/pacifictrailsresort.jpg
new file mode 100644
index 0000000..b5caf3e
--- /dev/null
+++ b/HTML/Tests/Test3/pacifictrailsresort.jpg
diff --git a/HTML/Tests/Test3/reservations.html b/HTML/Tests/Test3/reservations.html
new file mode 100644
index 0000000..181220b
--- /dev/null
+++ b/HTML/Tests/Test3/reservations.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Pacific Trails Resort :: Reservations</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href=pacific.css>
+        <meta name="description" content="Pacific Trails Resort is a site that contains information about the activities and registration for the resort.">
+
+    </head>
+    <body>
+        <div id=wrapper>
+            <header>
+                <h1><a href=index.html>Pacific Trails Resort</a></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</a></li>
+                </ul>
+            </nav>
+            <main>
+                <h2 class=resort>Reservations at Pacific Trails</h2>
+                <h3>Contact Us Today!</h3>
+                <p>Required fields are marked with an asterisk *.</p>
+                <form method="post" action=https://webdevbasics.net/scripts/pacific.php>
+                    <label for="myFName">* First Name: </label>
+                    <input type="text" id="myFName" required></input>
+
+                    <label for="myLName">* Last Name: </label>
+                    <input type="text" id="myLName" required></input>
+                    
+                    <label for="myEmail">* Email Address: </label>
+                    <input type="email" id="myEmail" required></input>
+
+                    <label for="myPhone">Phone:</label>
+                    <input type="tel" name="myPhone" id="myPhone" max="12">
+                    
+                    <label for="myArrival">Calander: </label>
+                    <input type="date" id="myArrival"></input>
+                    
+                    <label for="myNights">Nights: </label>
+                    <input type="range" min=1 max=14 id="myNights"></input>
+                    
+                    <label for="myComments">* Comments: </label>
+                    <textarea id="myComments" name="myComments" rows="2" cols="30"> 
+                    </textarea>
+                    
+                    <input type="submit">
+                </form>
+                <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>
+
+
+            </main>
+            <footer>
+                Copyright &copy; 2022 Pacific Trails Resort
+                <br />
+                <!--"Place your name in an email link". I'm assuming that this is what was meant by this.-->
+                <small><a href=mailto:msglm@techchud.xyz>msglm</a></small>
+            </footer>
+            <div>
+    </body>
+</html>
diff --git a/HTML/Tests/Test3/sunset.jpg b/HTML/Tests/Test3/sunset.jpg
new file mode 100644
index 0000000..3ce0adc
--- /dev/null
+++ b/HTML/Tests/Test3/sunset.jpg
diff --git a/HTML/Tests/Test3/trail.jpg b/HTML/Tests/Test3/trail.jpg
new file mode 100644
index 0000000..cdb05c3
--- /dev/null
+++ b/HTML/Tests/Test3/trail.jpg
diff --git a/HTML/Tests/Test3/yurt.jpg b/HTML/Tests/Test3/yurt.jpg
new file mode 100644
index 0000000..535de06
--- /dev/null
+++ b/HTML/Tests/Test3/yurt.jpg
diff --git a/HTML/Tests/Test3/yurts.html b/HTML/Tests/Test3/yurts.html
new file mode 100644
index 0000000..61b0fb8
--- /dev/null
+++ b/HTML/Tests/Test3/yurts.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Pacific Trails Resort :: Yurts</title>
+        <meta charset="utf-8">
+        <link rel="stylesheet" href=pacific.css>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Pacific Trails Resort is a site that contains information about the activities and registration for the resort.">
+
+    </head>
+    <body class=content>
+        <div id=wrapper>
+            <header>
+                <h1><a href=index.html>Pacific Trails Resort</a></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>
+                <section>
+                    <h3>What is a yurt?</h3>
+                    <p>Our luxury yurts are permanent structures four feet off the ground. Each yurt is fully enclosed with canvas walls, a wooden floor, and a roof dome that can be opened.</p>
+                </section>
+                <section>
+                    <h3>How are the yurts furnished?</h3>
+                    <p>Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove. Your luxury camping experience includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge.</p>
+                </section>
+                <section>
+                    <h3>What should I bring?</h3>
+                    <p>Most guests pack comfortable walking shoes and plan to dress for changing weather with light layers of clothing. It's also helpful to bring a flashlight and a sense of adventure!</p>
+                </section>
+                <div>
+                    <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>
+                        <th>Package Name</th>
+                        <th>Description</th>
+                        <th>Nights</th>
+                        <th>Cost Per Person</th>
+                        <tr>
+                            <td>Weekend Escape</td>
+                            <td class=text>Two breakfasts, a trail map, and 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 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 class=text>Two breakfasts, two hours of kayak rental daily, and a trail map</td>
+                            <td>2</td>
+                            <td>$500</td>
+
+                        </tr>
+                    </table>
+                </div>
+            </main>
+            <footer>
+                Copyright &copy; 2022 Pacific Trails Resort
+                <br />
+                <!--"Place your name in an email link". I'm assuming that this is what was meant by this.-->
+                <a href=mailto:msglm@techchud.xyz>msglm</a>
+            </footer>
+        </div>
+    </body>
+</html>