diff options
Diffstat (limited to 'HTML/Tests')
31 files changed, 1019 insertions, 0 deletions
diff --git a/HTML/Tests/Test1/pacific/index.html b/HTML/Tests/Test1/pacific/index.html new file mode 100644 index 0000000..5e0171a --- /dev/null +++ b/HTML/Tests/Test1/pacific/index.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Pacific Trails Resort</title> + <meta charset="utf-8"> + <link rel="stylesheet" href=pacific.css> + </head> + <body> + <header> + <h1>Pacific Trails Resort</h1> + </header> + <nav> + <!--For some reason there's a margin here and it makes everything look funky.--!> + <b> + <a href="index.html">Home</a> + <a href="yurts.html">Yurts</a> + <a href="">Activities</a> + <a href="">Reservations</a> + </b> + </nav> + <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> + <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> + <small><i>Copyright © 2022 Pacific Trails Resort</i></small> + <br /> + <!--"Place your name in an email link". I'm assuming that this is what was meant by this.--> + <small><i><a href=mailto:msglm@techchud.xyz>msglm</a></i> </small> + </footer> + </body> +</html> diff --git a/HTML/Tests/Test1/pacific/pacific.css b/HTML/Tests/Test1/pacific/pacific.css new file mode 100644 index 0000000..dc77295 --- /dev/null +++ b/HTML/Tests/Test1/pacific/pacific.css @@ -0,0 +1,29 @@ +body { + background-color: #FFFFFF; + color: #666666 +} + +header { + background-color: #002171; + color: #FFFFfF +} + +nav { + background-color: #BBDEFB; +} + +h2 { + color: #1976D2; +} + +h1 { + margin-bottom: 0; +} + +dt { + color: #002171; +} + +.resort { + color: #1976D2; +} diff --git a/HTML/Tests/Test1/pacific/yurts.html b/HTML/Tests/Test1/pacific/yurts.html new file mode 100644 index 0000000..ce35d52 --- /dev/null +++ b/HTML/Tests/Test1/pacific/yurts.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Pacific Trails Resort :: Yurts</title> + <meta charset="utf-8"> + <link rel="stylesheet" href=pacific.css> + </head> + <body> + <header> + <h1>Pacific Trails Resort</h1> + </header> + <nav> + <b> + <a href="index.html">Home</a> + <a href="yurts.html">Yurts</a> + <a href="">Activities</a> + <a href="">Reservations</a> + </b> + </nav> + <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 is fully enclosed with canvas walls, a wooden floor, and a roof dome that can 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. Your luxury camping experience 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>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!</dd> + </dl> + </main> + <footer> + <small><i>Copyright © 2022 Pacific Trails Resort</i></small> + <br /> + <!--"Place your name in an email link". I'm assuming that this is what was meant by this.--> + <small><i><a href=mailto:msglm@techchud.xyz>msglm</a></i> </small> + </footer> + + </body> +</html> diff --git a/HTML/Tests/Test2/INSTRUCTIONS b/HTML/Tests/Test2/INSTRUCTIONS new file mode 100644 index 0000000..4d32520 --- /dev/null +++ b/HTML/Tests/Test2/INSTRUCTIONS @@ -0,0 +1,17 @@ + +Please complete the Pacific Trails Case Study for Chapters 5 - 8. Each chapter may or may not have anything for you to do. + + Create a Test2 folder on Boole to place all of your files. + Ftp(submit) all of the files/graphics needed for this site to Boole. Do NOT zip your test folder to ftp it to Boole. Create the folder on Boole and then ftp the files to that folder. + Submit here, the address for your working website that you have now published on Boole. Try the address of your site in a web browser to see if it is visible when you enter the site address. THEN submit it. Remember, I want the full complete address to your home page of the site on Boole. + +BOTH components of Test 2 are due by 11:59PM on Tuesday, March 15, 2022 +Point Values: + + Hands-On Test - 100 + Concepts Exam - 100 + +Use your email address for the test and and make sure it works! You are required to include an email address as part of the hands-on test. +SUBMIT HERE, the URL to the home page of the site that you've completed for the Pacific Trail Case Study at the end of Chapter 8 It will reflect what you have done in all the chapters up to now. +The beginning of your site address will be similar to the beginning of mine on Boole: http://boole.cs.anonymized.university.url/~tmanly/COMS1333/Test2/....... but yours will take me directly to the home page of your site. + diff --git a/HTML/Tests/Test2/activities.html b/HTML/Tests/Test2/activities.html new file mode 100644 index 0000000..a351793 --- /dev/null +++ b/HTML/Tests/Test2/activities.html @@ -0,0 +1,47 @@ +<!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"> + </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</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 © 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/Test2/coast.jpg b/HTML/Tests/Test2/coast.jpg Binary files differnew file mode 100644 index 0000000..af3fef0 --- /dev/null +++ b/HTML/Tests/Test2/coast.jpg diff --git a/HTML/Tests/Test2/coast2.jpg b/HTML/Tests/Test2/coast2.jpg Binary files differnew file mode 100644 index 0000000..ac2b452 --- /dev/null +++ b/HTML/Tests/Test2/coast2.jpg diff --git a/HTML/Tests/Test2/favicon.ico b/HTML/Tests/Test2/favicon.ico Binary files differnew file mode 100644 index 0000000..ad98119 --- /dev/null +++ b/HTML/Tests/Test2/favicon.ico diff --git a/HTML/Tests/Test2/index.html b/HTML/Tests/Test2/index.html new file mode 100644 index 0000000..372bb22 --- /dev/null +++ b/HTML/Tests/Test2/index.html @@ -0,0 +1,52 @@ +<!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"> + <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</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> + <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 © 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/Test2/marker.gif b/HTML/Tests/Test2/marker.gif Binary files differnew file mode 100644 index 0000000..318f8b0 --- /dev/null +++ b/HTML/Tests/Test2/marker.gif diff --git a/HTML/Tests/Test2/pacific.css b/HTML/Tests/Test2/pacific.css new file mode 100644 index 0000000..bcdfc2c --- /dev/null +++ b/HTML/Tests/Test2/pacific.css @@ -0,0 +1,239 @@ +* { + box-sizing: border-box; +} + +body { + background-color: #EAEAEA; + color: #666666; + font-family: "Times New Roman", Times, serif; +} + +header { + background-color: #002171; + color: #FFFFFF; + text-align: center; +} + +nav { + font-weight: bold; + padding: 0%; + font-size: 120%; +} + +nav ul { + list-style: none; + margin: 0%; + padding-left: 0%; + font-size: 1.2em; +} + +nav li { + border: 1px darkblue solid; + text-align: center; +} + + +nav a { + text-decoration: none; +} + +nav a:link { + text-decoration: none; + color: #5C7FA3; +} + +nav a:visited { + text-decoration: none; + color: #344873; +} + +nav a:hover { + color:#A52A2A; +} + +header a { + text-decoration: none; +} + +header a:link { + text-decoration: none; + color: #FFFFFF; +} + +header a:visited { + text-decoration: none; + color: #FFFFFF; +} + +header a:hover { + text-decoration: none; + color: #90C7E3; +} + + +h2 { + color: #1976D2; + font-family: Georgia, 'Times New Roman', serif; + text-shadow: 1px 1px 1px grey; +} + +h1 { + margin-bottom: 0%; + font-family: Georgia, 'Times New Roman', serif; + margin-top: 0%; + letter-spacing: 0.25em; + padding-top: 0.5em; + padding-bottom: 0.5em; +} + +h3 { + font-family: Georgia, 'Times New Roman', serif; + color: #000033; +} + +main ul { + list-style-image: url(marker.gif); +} + +main { + padding-top: 1px; + padding-right: 20px; + padding-bottom: 20px; + padding-left: 20px; + display: block; + background-color: #FFFFFF; + padding-left: 30px; + overflow: auto; +} + +footer { + font-size: 75%; + font-style: italic; + text-align: center; + font-family: Georgia, 'Times New Roman', serif; + padding: 2em; + background-color: #FFFFFF; +} + +dt { + color: #002171; +} + +.resort { + color: #1976D2; + font-weight: bold; +} + +#contact { + font-size: 90%; +} + +#wrapper { + background-color: #90C7E3; + background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3); + background-repeat: no-repeat; +} + +#homehero { + background-image: url(coast2.jpg); + height: 300px; + background-size: 100% 100%; + background-repeat: no-repeat; +} + +#yurthero { + background-image: url(yurt.jpg); + height: 300px; + background-size: 100% 100%; + background-repeat: no-repeat; +} + +#trailhero { + background-image: url(trail.jpg); + height: 300px; + background-size: 100% 100%; + background-repeat: no-repeat; +} + +@media screen and (min-width: 600px) { + nav ul { + display: flex; + flex-wrap: nowrap; + justify-content: space-around; + } + + nav li { + border: none; + } + + section { + padding-left:2em; + padding-right: 2em; + } + h2 { + grid-row: 1 / 2; grid-column: 1 / 5; + } + + section { + grid-row: 2 / 3; grid-column: auto; + } + + #special { + grid-row: auto; grid-column: 1 / 5; + } + + footer { + grid-row: auto; grid-column: 1 / 5; + } + + .content main { + display: grid; + grid-template-rows: auto; + grid-template-columns: 1fr 1fr 1fr; + } +} + + + +@media screen and (min-width: 1024px) { + nav { + text-align: left; + } + + nav ul { + flex-direction: column; + } + + + #wrapper { + margin: auto; + width: 80%; + border: 1px darkblue solid; + box-shadow: 1px 1px 1px grey; + display: grid; + grid-template-rows: auto; + grid-template-columns: 180px 1fr; + } + + header { + grid-row: 1; grid-column: 1/3; + } + + nav { + grid-row: 2; grid-column: 1; + } + + div { + grid-row: 2; grid-column: 2; + } + + main { + grid-row: 3; grid-column: 2; + } + + footer { + grid-row: 4; grid-column: 2; + } + +} + diff --git a/HTML/Tests/Test2/sunset.jpg b/HTML/Tests/Test2/sunset.jpg Binary files differnew file mode 100644 index 0000000..3ce0adc --- /dev/null +++ b/HTML/Tests/Test2/sunset.jpg diff --git a/HTML/Tests/Test2/trail.jpg b/HTML/Tests/Test2/trail.jpg Binary files differnew file mode 100644 index 0000000..cdb05c3 --- /dev/null +++ b/HTML/Tests/Test2/trail.jpg diff --git a/HTML/Tests/Test2/yurt.jpg b/HTML/Tests/Test2/yurt.jpg Binary files differnew file mode 100644 index 0000000..535de06 --- /dev/null +++ b/HTML/Tests/Test2/yurt.jpg diff --git a/HTML/Tests/Test2/yurts.html b/HTML/Tests/Test2/yurts.html new file mode 100644 index 0000000..8d423d0 --- /dev/null +++ b/HTML/Tests/Test2/yurts.html @@ -0,0 +1,48 @@ +<!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"> + </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</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> + </main> + <footer> + Copyright © 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/PacificTrailsResort.mov b/HTML/Tests/Test3/PacificTrailsResort.mov Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 © 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 © 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 Binary files differnew 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 Binary files differnew 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 © 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 Binary files differnew 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 Binary files differnew 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 Binary files differnew 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 © 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> |
