diff options
Diffstat (limited to 'HTML')
352 files changed, 9672 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html new file mode 100644 index 0000000..d5b7269 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.1.join.html @@ -0,0 +1,14 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Form Example</title>
+ </head>
+ <body>
+ <h1>Join Our Newsletter</h1>
+ <form method="get">
+ E-mail: <input type="text" name="email" id="email"><br><br>
+ <input type="submit" value="Sign Me Up!">
+ <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html new file mode 100644 index 0000000..b645165 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.2.contact.html @@ -0,0 +1,25 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ First Name: <input type="text" name="fname" id="fname">
+ <br>
+ <br>
+ Last Name: <input type="text" name="lname" id="lname">
+ <br>
+ <br>
+ E-mail: <input type="text" name="email" id="email">
+ <br>
+ <br>
+ Comments:<br>
+ <textarea name="comments" id="comments" rows=4 cols=40></textarea><br>
+ <br>
+ <input type="submit" value="Contact"> <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html new file mode 100644 index 0000000..5c4e64f --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.3.label.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ <label>First Name: <input type="text" name="fname" id="fname"
+ <input type="text" name="fname" id="fname"><br><br>
+ </label>
+ <label>Last Name: <input type="text" name="lname" id="lname"
+ <input type="text" name="lname" id="lname"><br><br>
+ </label>
+ <label>E-mail: <input type="text" name="email" id="email"
+ <input type="text" name="email" id="email"><br><br>
+ </label>
+ <label for="comments">Comments:</label><br>
+ <textarea name="comments" id="comments" rows="4" cols="40"></textarea><br><br>
+ <input type="submit" value="Contact"> <input type="reset">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html new file mode 100644 index 0000000..1893bec --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.4.contactus.html @@ -0,0 +1,49 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+input[type="submit"] {
+ margin-left: 110px;
+}
+
+form {
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px;
+ padding: 10px;
+}
+
+ label {
+ float: left;
+ clear: left;
+ display: block;
+ width: 100px;
+ padding-right: 10px;
+ margin-top: 10px;
+ text-align: right;
+ }
+
+ input {
+ display: block; margin-top: 10px;
+ }
+
+ textarea {
+ display: block; margin-top: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="get">
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input id="mySubmit" type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html new file mode 100644 index 0000000..6977d05 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.5.contact2.html @@ -0,0 +1,55 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+
+
+form { background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px; padding: 10px;}
+label { float: left; clear: left;
+ display: block; width: 100px;
+ text-align: right;
+ padding-right: 10px;
+ margin-top: 10px; }
+input, textarea { margin-top: 10px;
+ display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+ form {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 6em 1fr;
+ grid-gap: 1em;
+ gap: 1em;
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 60%;
+ min-width: 20em;
+ padding: 2em;
+ }
+
+ input[type="submit"] {
+ grid-column: 2 / 3;
+ width: 10em; margin-left: 0;
+ }
+}
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form>
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html new file mode 100644 index 0000000..a922c22 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.6.mycontact.html @@ -0,0 +1,55 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Contact Form</title>
+ <meta charset="utf-8">
+ <style>
+
+
+form { background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 350px; padding: 10px;}
+label { float: left; clear: left;
+ display: block; width: 100px;
+ text-align: right;
+ padding-right: 10px;
+ margin-top: 10px; }
+input, textarea { margin-top: 10px;
+ display: block;}
+input[type="submit"] { margin-left: 110px; }
+
+@supports ( display: grid) {
+
+ form {
+ display: grid;
+ grid-template-rows: auto;
+ grid-template-columns: 6em 1fr;
+ grid-gap: 1em;
+ gap: 1em;
+ background-color: #EAEAEA;
+ font-family: Arial, sans-serif;
+ width: 60%;
+ min-width: 20em;
+ padding: 2em;
+ }
+
+ input[type="submit"] {
+ grid-column: 2 / 3;
+ width: 10em; margin-left: 0;
+ }
+}
+ </style>
+ </head>
+ <body>
+ <h1>Contact Us</h1>
+ <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+ <label for="myName">Name:</label>
+ <input type="text" name="myName" id="myName">
+ <label for="myEmail">E-mail:</label>
+ <input type="text" name="myEmail" id="myEmail">
+ <label for="myComments">Comments:</label>
+ <textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
+ <input type="submit" value="Submit">
+ </form>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html new file mode 100644 index 0000000..f97c3c3 --- /dev/null +++ b/HTML/Chapter/Ch. 10 hands-on assignments/Ch10_msglm/10.7.comment.html @@ -0,0 +1,42 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Comment Form</title>
+ <meta charset="utf-8">
+ <style>
+label { display: block;
+ margin-top: 20px; }
+input { display: block;
+ margin-bottom: 20px; }
+ </style>
+ </head>
+ <body>
+ <h1>Comment Form</h1>
+ <form method="post" action="https://webdevbasics.net/scripts/demo.php">
+ <label for="myFirstName">* First Name</label>
+ <input type="text" name="myFirstName"
+ id="myFirstName" required="required"
+ placeholder="your first name">
+ <label for="myLastName">* Last Name</label>
+ <input type="text" name="myLastName"
+ id="myLastName" required="required"
+ placeholder="your last name">
+ <label for="myEmail">* E-mail</label>
+ <input type="email" name="myEmail" id="myEmail"
+ required="required"
+ placeholder="you@yourdomain.com">
+ <label for="myRating">Rating (1 — 10)
+ </label>
+ <input type="range" name="myRating"
+ id="myRating" min="1" max="10">
+ <label for="myComments">* Comments</label>
+ <textarea name="myComments" id="myComments"
+ rows="2" cols="40"
+ required="required"
+ placeholder="your comments here">
+ </textarea>
+ <input type="submit" value="Submit">
+ </form>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html new file mode 100644 index 0000000..cd50e92 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html @@ -0,0 +1,12 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Podcast</title>
+ </head>
+ <body>
+ <h1>Web Design Podcast</h1>
+ <a href="11.1.podcast.mp3">Podcast Episode 1</a> (MP3)
+ <br>
+ <a href="11.1.podcast.txt">Podcast Transcript</a>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 Binary files differnew file mode 100644 index 0000000..6190438 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt new file mode 100644 index 0000000..8ebd91f --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt @@ -0,0 +1,13 @@ +Welcome to an example podcast.
+
+I'm Terry Morris, the author of your textbook.
+
+If this were an actual podcast it would focus on a topic and perhaps include an interview with an interesting guest.
+
+It's very easy to create a podcast.
+
+If you use a Mac computer, try ou the pre-installed Garageband application.
+
+If you are using Windows, you can download Audacity. It's a free audio recorder and editor.
+
+Have fun creating your own podcast!
\ No newline at end of file diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html new file mode 100644 index 0000000..77739e4 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Podcast</title>
+ </head>
+ <body>
+ <h1>Web Design Podcast</h1>
+ <audio controls>
+ <!--I usually put ogg first because of better compression-->
+ <source src="11.2.podcast.ogg" type="audio/ogg">
+ <source src="11.2.podcast.mp3" type="audio/mpeg">
+ <a href="11.2.podcast.mp3">download the Podcast</a> (MP3)
+ </audio>
+ <br>
+ <a href="11.2.podcast.txt">Podcast Transcript</a>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 Binary files differnew file mode 100644 index 0000000..6190438 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg Binary files differnew file mode 100644 index 0000000..ab1c589 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt new file mode 100644 index 0000000..4c5d526 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt @@ -0,0 +1,13 @@ +Welcome to an example podcast.
+
+I'm Terry Morris, the author of your textbook.
+
+If this were an actual podcast it would focus on a topic and perhaps include an interview with an interesting guest.
+
+It's very easy to create a podcast.
+
+If you use a Mac computer, try ou the pre-installed Garageband application.
+
+If you are using Windows, you can download Audacity. It's a free audio recorder and editor.
+
+Have fun creating your own podcast!
\ No newline at end of file diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html new file mode 100644 index 0000000..5263d3e --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html @@ -0,0 +1,27 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Sedona Scenes</title>
+ <meta charset="utf-8">
+ </head>
+ <style>
+ video {
+ width: 100%;
+ height: auto;
+ max-width:1280px;
+ }
+ </style>
+ <body>
+ <h1>Sedona Scenes</h1>
+ <video controls poster="11.3.sedona.jpg">
+ <!--
+ I prefer to put free formats first
+ I personally would have chose webm over ogv
+ -->
+ <source src="11.3.sedona.ogv" type="video/ogg">
+ <source src="11.3.sedona.m4v" type="video/mp4">
+ <a href="11.3.sedona.mov">Photos of Sedona</a> (.mov)
+ </video>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg Binary files differnew file mode 100644 index 0000000..33d66f0 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v Binary files differnew file mode 100644 index 0000000..73744ca --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov Binary files differnew file mode 100644 index 0000000..87b800c --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv Binary files differnew file mode 100644 index 0000000..5a26118 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html new file mode 100644 index 0000000..8ada3f1 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html @@ -0,0 +1,13 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Iframe Example</title>
+ </head>
+ <body>
+ <h1>iframe example</h1>
+ <iframe src="https://www.youtube.com/embed/2CuOug8KDWI"
+ width="640" height="385">
+ <a href="https://www.youtube.com/embed/2CuOug8KDWI">YouTube Video</a>
+ </iframe>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html new file mode 100644 index 0000000..2911854 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html @@ -0,0 +1,116 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav { background-color: #B3C7E6; }
+nav ul { list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+nav li { border-bottom: 1px solid #ffffff;
+}
+nav a { text-decoration: none;
+ display: block;
+ padding: 1em 2em;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #F8F8F8; }
+nav a:hover { color: #000066;
+ background-color: #eaeaea;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(11.5.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 7em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main { padding: 1em; }
+aside { padding: 1em; }
+figure { margin: auto;
+ padding: 8px;
+ width: 265px;
+ background-color: #FFF;
+ border: 1px solid #CCC;
+ box-shadow: 5px 5px 5px #828282;
+ transform: rotate(3deg);
+}
+figcaption { text-align: center;
+ font-size: .8em;
+ font-style: italic;
+}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+#offer { background-color: #eaeaea;
+ width: 10em;
+ margin: 2em auto 0 auto;
+ text-align: center;
+ transform:scale(2);
+}
+#offer a { text-decoration: none;
+ color: #FF0000;
+}
+header, main, nav, figure, footer { display: block; }
+@media only screen and (min-width: 768px) {
+#content { display: flex; }
+nav { flex: none; }
+main { flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF; }
+aside { flex: 4;
+ background-color: #EAEAEA; }
+header { padding-left: 10em; }
+}
+</style>
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.<br><br></p>
+ <div id="offer">
+ <a href="#">Special Offer</a>
+ </div>
+ </main>
+ <aside>
+ <figure>
+ <img src="11.5.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ </div>
+ <footer>Copyright © </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html new file mode 100644 index 0000000..be94ed7 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html @@ -0,0 +1,115 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav { background-color: #B3C7E6; }
+nav ul { list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+nav li { border-bottom: 1px solid #ffffff;
+}
+nav a { text-decoration: none;
+ display: block;
+ padding: 1em 2em;
+ transition: background-color 2s linear;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #F8F8F8; }
+nav a:hover { color: #000066;
+ background-color: #EAEAEA;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(11.6.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 7em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main { padding: 1em; }
+aside { padding: 1em; }
+figure { margin: auto;
+ padding: 8px;
+ width: 265px;
+ background-color: #FFF;
+ border: 1px solid #CCC;
+ box-shadow: 5px 5px 5px #828282;
+}
+figcaption { text-align: center;
+ font-size: .8em;
+ font-style: italic;
+}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+#offer { background-color: #eaeaea;
+ width: 10em;
+ margin: 2em auto 0 auto;
+ text-align: center;
+}
+#offer a { text-decoration: none;
+ color: #FF0000;
+}
+header, main, nav, figure, footer { display: block; }
+@media only screen and (min-width: 768px) {
+#content { display: flex; }
+nav { flex: none; }
+main { flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF; }
+aside { flex: 4;
+ background-color: #EAEAEA; }
+header { padding-left: 10em; }
+}
+</style>
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.<br><br></p>
+ <div id="offer">
+ <a href="#">Special Offer</a>
+ </div>
+ </main>
+ <aside>
+ <figure>
+ <img src="11.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ </div>
+ <footer>Copyright © </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg Binary files differnew file mode 100644 index 0000000..7c079d6 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg Binary files differnew file mode 100644 index 0000000..daef5a5 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg Binary files differnew file mode 100644 index 0000000..0ca7e32 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg Binary files differnew file mode 100644 index 0000000..428399a --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html new file mode 100644 index 0000000..b062c17 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html @@ -0,0 +1,91 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>First HTML Webpage</title>
+ <meta charset="utf-8">
+ </head>
+ <style>
+
+body {
+ font-family: Trajan Pro, Verdana, Arial;
+}
+
+h1 {
+ padding: .5em;
+ height: 2em;
+}
+
+.gallery {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ width: 70%;
+ margin: auto;
+}
+
+figure {
+ position: relative;
+ opacity: .75;
+ transition: all ease-out 3s;
+ margin: 1em;
+ z-index: 1;
+ background-color: #FFF;
+ color: rgba(0,0,0,0);
+ font-size: .5em;
+ text-align: center;
+}
+
+figure:hover {
+ opacity: 1;
+ transform: scale(3);
+ z-index: 999;
+ box-shadow: 3px 3px 3px #333;
+ color: rgba(0, 0, 0, 1);
+}
+
+ </style>
+ <body>
+ <h1>Image Gallery</h1>
+ <div id=gallery>
+
+ <figure><a href="11.7.broken-arrow-trail.jpg"><img src="11.7.photo1thumb.jpg" width=100 height=100 alt="Broken Arrow Trail, Sedona, Arizona"></a>
+ <figcaption>Broken Arrow</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.thunder-mountain.jpg"><img src="11.7.photo2thumb.jpg" width=100 height=100 alt="Thunder Mountain, Sedona, Arizona"></a>
+ <figcaption>Thunder Mountain</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.bear-mountain.jpg"><img src="11.7.photo3thumb.jpg" width=100 height=100 alt="Bear Mountain, Sedona, Arizona"></a>
+ <figcaption>Bear Mountain</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.aerie-trail.jpg"><img src="11.7.photo4thumb.jpg" width=100 height=100 alt="Aerie Trail, Sedona, Arizona"></a>
+ <figcaption>Aerie Trail</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.cathedral-rock.jpg"><img src="11.7.photo5thumb.jpg" width=100 height=100 alt="Cathedral Rock, Sedona, Arizona"></a>
+ <figcaption>Cathedral Rock</figcaption>
+ </figure>
+
+ <figure>
+ <a href="11.7.oak-creek.jpg"><img src="11.7.photo6thumb.jpg" width=100 height=100 alt="Oak Creek, Sedona, Arizona"></a>
+ <figcaption>Oak Creek</figcaption>
+ </figure>
+
+ </div>
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg Binary files differnew file mode 100644 index 0000000..202b674 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg Binary files differnew file mode 100644 index 0000000..4822af2 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg Binary files differnew file mode 100644 index 0000000..6c318be --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg Binary files differnew file mode 100644 index 0000000..a14d215 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg Binary files differnew file mode 100644 index 0000000..9208138 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg Binary files differnew file mode 100644 index 0000000..cf423e4 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg Binary files differnew file mode 100644 index 0000000..10bdb89 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg Binary files differnew file mode 100644 index 0000000..09b5dca --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css new file mode 100644 index 0000000..f5084fc --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css @@ -0,0 +1,88 @@ +* { box-sizing: border-box; }
+body { font-family: Verdana, Arial, sans-serif;
+ background-color: #EAEAEA;
+ margin: 0;
+}
+#wrapper {
+ color: #000066;
+ background-color: #FFFFFF;
+
+}
+header { font-family: Georgia, "Times New Roman", serif;
+ color: #00005D;
+ background-color: #869dc7;
+ background-image: url(11.8.lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ margin-top: 0;
+ padding-bottom: 1em;
+ min-height: 120px;
+ height: auto;
+}
+header h1 { padding-left: 120px;
+ padding-top: 40px;
+ margin: 0;
+}
+header span { font-style: italic;
+ font-weight: bold;
+ font-size: 95%;
+ color: #FFFFFF;
+ padding-left: 30%;
+}
+nav { background-color: #00005D;
+ letter-spacing: 0.1em;
+ font-weight: bold;
+ padding-right: 2em;
+}
+nav ul { list-style-type: none;
+ margin: 0;
+}
+
+nav li { padding: 0.5em;
+ display: inline-block;
+}
+nav a { text-decoration: none;
+ display: block;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #D3DBEB;}
+main { background-color: #ffffff;
+ color: #000000;
+ padding: 10px 20px;
+
+}
+
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+ margin: 5px;
+}
+
+
+footer {font-size:70%;
+ text-align: center;
+ padding: 10px;
+ clear: both;
+}
+header, main, nav, footer, figure, figcaption { display: block; }
+@media (min-width: 600px) {
+ #wrapper { margin: auto;
+ width: 80%; }
+ header span { padding-left: 25%; }
+}
+
+nav ul ul {
+ position: absolute;
+ background-color: #5564A0;
+ padding: 0;
+ display: none;
+}
+nav ul ul li {
+ border: 1px solid #00005D;
+ display: block;
+ width: 8em;
+ padding-left: 1em;
+ margin-left: 0;
+}
+nav li:hover ul {
+ display: block;
+}
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html new file mode 100644 index 0000000..4464d33 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Breakfast at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Breakfast Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html new file mode 100644 index 0000000..e387b85 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Coffee</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Coffee Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html new file mode 100644 index 0000000..c958c16 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Contact Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Contact Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html new file mode 100644 index 0000000..e597a05 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Cuisine</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Cuisine Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html new file mode 100644 index 0000000..fd20d0b --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Dinner at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Dinner Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html new file mode 100644 index 0000000..aaaeb66 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro Directions</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Directions Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html new file mode 100644 index 0000000..cbfd2f1 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html @@ -0,0 +1,48 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link href="11.8.bistro.css" rel="stylesheet">
+ </head>
+ <body>
+ <div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a>
+ <ul>
+ <li><a href="11.8.breakfast.html">Breakfast</a></li>
+ <li><a href="11.8.lunch.html">Lunch</a></li>
+ <li><a href="11.8.dinner.html">Dinner</a></li>
+ </ul>
+ </li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunch and Light Dinners</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery!</p>
+ <p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..3893f16 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html new file mode 100644 index 0000000..3e2483e --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lunch at Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link href="11.8.bistro.css" rel="stylesheet">
+
+</head>
+<body>
+<div id="wrapper">
+ <nav>
+ <ul>
+ <li><a href="11.8.index.html">Home</a></li>
+ <li><a href="11.8.coffee.html">Coffee</a></li>
+ <li><a href="11.8.cuisine.html">Cuisine</a></li>
+ <li><a href="11.8.directions.html">Directions</a></li>
+ <li><a href="11.8.contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ <span>the best coffee on the coast</span>
+ </header>
+ <main>
+ <h2>Lunch Page</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. <p>
+ </main>
+ <footer>Copyright © 2020
+ </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html new file mode 100644 index 0000000..e9f8d04 --- /dev/null +++ b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html @@ -0,0 +1,27 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Principles of Visual Design</title>
+ </head>
+ <body>
+ <h1>Principles of Visual Design</h1>
+
+ <details>
+ <summary>Repetition</summary>
+ <p>Repeat visual components throughout the design</p>
+ </details>
+ <details>
+ <summary>Contrast</summary>
+ <p>Add visual excitement and draw attention</p>
+ </details>
+ <details>
+ <summary>Proximity</summary>
+ <p>Group related items</p>
+ </details>
+ <details>
+ <summary>Alignment</summary>
+ <p>Align elements to create visual unity</p>
+ </details>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html new file mode 100644 index 0000000..bf901fa --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.1.heading.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png Binary files differnew file mode 100644 index 0000000..c0c553f --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.10.png diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html new file mode 100644 index 0000000..78d7e90 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.11.structure.html @@ -0,0 +1,29 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>Home Services Contact</b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business. </p>
+</main>
+<footer>
+ <i><small>Copyleft 🄯 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</small></i>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html new file mode 100644 index 0000000..a4549b4 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.12.casita.html @@ -0,0 +1,40 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Casita Sedona Bed & Breakfast</h1>
+</header>
+<nav>
+ <b>
+ Home
+ Rooms
+ Events
+ Contact
+ </b>
+</nav>
+<main>
+ <h2>Stay in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you'll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h3>Luxurious Rooms </h3>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, and balcony overlooking the red rocks.</p>
+ <div>
+ <strong>Casita Sedona Bed & Breakfast</strong><br>
+ 612 Tortuga Lane<br>
+ Sedona, AZ 86336<br>
+ 928-555-5555<br><br>
+ </div>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html new file mode 100644 index 0000000..497798f --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.13.blog.html @@ -0,0 +1,46 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro Blog</title>
+<meta charset="utf-8">
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <b>
+ Home
+ Menu
+ Blog
+ Contact
+ </b>
+ </nav>
+ <main>
+ <section>
+ <aside><p><i>Watch for the March Madness Wrap next month!</i></p></aside>
+ <h2>Bistro Blog</h2>
+
+ <article>
+ <header><h3>Valentine Wrap</h3></header>
+ <time datetime="2022-02-01">February 1, 2022</time>
+ <p>The February special sandwich is the Valentine Wrap —
+ heart-healthy organic chicken with roasted red peppers on a
+ whole wheat wrap.</p>
+ </article>
+ <article>
+ <header><h3>New Coffee of the Day Promotion</h3></header>
+ <time datetime="2022-01-12">January 12, 2022</time>
+ <p>Enjoy the best coffee on the coast in the comfort of your
+ home. We will feature a different flavor of our gourmet,
+ locally roasted coffee each day with free bistro tastings and a
+ discount on one-pound bags.</p>
+ </article>
+ </section>
+ </main>
+ <footer>Copyleft 🄯 2022
+ </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html new file mode 100644 index 0000000..815ca8c --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.14.anchor.html @@ -0,0 +1,10 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Anchor Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<a href="http://webdevbasics.net">Basics of Web Design Textbook Companion</a>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html new file mode 100644 index 0000000..8ca9ab7 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/contact.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Contact</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Contact Trillium Media Design Today</h2>
+ <ul>
+ <li>E-mail: <a href="mailto:contact@trilliummediadesign.com">contact@trilliummediadesign.com</a></li>
+ <li>Phone: 555-555-5555</li>
+ </ul>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html new file mode 100644 index 0000000..a933d75 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html new file mode 100644 index 0000000..68cc664 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.16/services.html @@ -0,0 +1,38 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Services</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+ <dt><strong>Website Design</strong></dt>
+ <dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
+ <dt><strong>E-Commerce Solutions</strong></dt>
+ <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
+ <dt><strong>Search Engine Optimization</strong></dt>
+ <dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
+</dl>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html new file mode 100644 index 0000000..60e1fd3 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.2.paragraph.html @@ -0,0 +1,22 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Paragraph Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<p>Sample Test Paragraph. </p>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html new file mode 100644 index 0000000..c7098a7 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.3.linebreak.html @@ -0,0 +1,23 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Line Break Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Test 1</h1>
+<p>This is a sample paragraph. <br /> This is a linebreak test.
+</p>
+<h2>Test 2</h2>
+<h3>Test 3</h3>
+<h4>Test 4</h4>
+<h5>Test 5</h5>
+<h6>Test 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html new file mode 100644 index 0000000..8c95b56 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.4.hr.html @@ -0,0 +1,24 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Horizontal Rule Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Heading Level 1</h1>
+<p>This is a sample paragraph. <br> Heading tags can help to make your pages more accessible and usable. It is good coding practice to use heading tags to outline the structure of your web page content.
+</p>
+<hr>
+<h2>Heading Level 2</h2>
+<h3>Heading Level 3</h3>
+<h4>Heading Level 4</h4>
+<h5>Heading Level 5</h5>
+<h6>Heading Level 6</h6>
+</body>
+</html>
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html new file mode 100644 index 0000000..fa5ce63 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.5.blockquote.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Blockquote Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>The Power of the Web</h1>
+<p>According to Richard Stallman, the inventor of the GNU Operating system and founder of the Free Software Foundation, from the <a href=https://www.gnu.org/gnu/manifesto.en.html>GNU Manifesto</a>:
+</p>
+<blockquote>
+The idea of copyright did not exist in ancient times, when authors frequently copied other authors at length in works of non-fiction. This practice was useful, and is the only way many authors' works have survived even in part.
+</blockquote>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html new file mode 100644 index 0000000..541373b --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ol.html @@ -0,0 +1,16 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ol>
+ <li>Blue</li>
+ <li>Green</li>
+ <li>Teal</li>
+
+</ol>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html new file mode 100644 index 0000000..e5eaead --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.6.ola.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ol type="A">
+ <li>Blue</li>
+ <li>Green</li>
+ <li>Teal</li>
+</ol>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html new file mode 100644 index 0000000..87004b2 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.7.ul.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Heading and List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>My Favorite Colors</h1>
+<ul>
+ <li>Blue</li>
+ <li>Teal</li>
+ <li>Red</li>
+</ul>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html new file mode 100644 index 0000000..e0900e8 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.8.description.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Description List</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Sample Description List</h1>
+<dl>
+ <dt>TCP</dt>
+ <dd>Transmission Control Protocol is a method (protocol) used along with the Internet Protocol (IP) to send data in the form of message units, called packets, between computers over the Internet.</dd>
+ <dt>IP</dt>
+ <dd>Internet Protocol is the method or protocol by which data is sent from one computer to another on the Internet. Each computer on the Internet is uniquely identified by an IP address.</dd>
+ <dt>FTP</dt>
+ <dd>File Transfer Protocol is a protocol used to exchange files between computers on the Internet. </dd>
+ <dt>HTTP</dt>
+ <dd>Hypertext Transfer Protocol is the protocol used for exchanging text, graphic images, sound, video, and other multimedia files on the Web.</dd>
+</dl>
+</body>
+</html>
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html new file mode 100644 index 0000000..140d5cc --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/2.9.design.html @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Creative Commons</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Web Design Steps</h1>
+ <ul>
+ <li><strong>Determine the Intended Audience</strong><br>
+ The colors, images, fonts, and layout should be tailored to the
+ <em>preferences of your audience.</em> The type of site content (reading level, amount of animation, etc.) should be appropriate for your chosen audience.</li>
+ <li><strong>Determine the Goals of the Site</strong><br>
+ Some common goals of web sites are: to be informative, to create a personal home page, to establish a corporate web presence, and to do business in e-commerce.</li>
+ <li><strong>Determine the General Content and Create a Site Map</strong><br>
+ The site map is sometimes called a Storyboard. Common organizational structures for Web sites are: hierarchical, linear, and random.</li>
+ <li><strong>Sketch a Tentative Page Layout</strong><br>
+ <em>Be consistent</em> in your overall layout — color, typefaces, logo location,
+ navigation bar, etc. Plan your Home Page Layout to avoid scrolling.
+ Plan your Content Page Layout to be consistent, with easy navigation.</li>
+</ul>
+
+
+<p><small>Copyleft 🄯 2022 msglm. Licensed under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC BY-SA 4.0</a>.</small></p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html new file mode 100644 index 0000000..073816e --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/block.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Block Anchor</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+<a href="http://www.w3.org/TR/html-markup">
+<h1>HTML5 Reference</h1>
+<p>Bookmark this site for a handy HTML5 reference.</p>
+</a>
+</header>
+<main>
+<p>
+Website content goes here
+</p>
+</main>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html new file mode 100644 index 0000000..7213b6f --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/em.html @@ -0,0 +1,15 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Blockquote Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>The Power of the Web</h1>
+<p>According to Tim Berners-Lee, the inventor of the World Wide Web, at https://www.w3.org/Press/IPO-announce:
+</p>
+<blockquote>
+The power of the Web is in its universality. <em>Access by everyone</em> regardless of disability is an essential aspect.
+</blockquote>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html new file mode 100644 index 0000000..a89283d --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/contact.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Contact</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Contact Trillium Media Design Today</h2>
+ <ul>
+ <li>E-mail: contact@trilliummediadesign.com</li>
+ <li>Phone: 555-555-5555</li>
+ </ul>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html new file mode 100644 index 0000000..a933d75 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design offers a comprehensive range of services to take your company's Web presence to the next level. </p>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html new file mode 100644 index 0000000..68cc664 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/mypractice/services.html @@ -0,0 +1,38 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design - Services</title>
+<meta charset="utf-8">
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav>
+ <b>
+ <a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+ </b>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+ <dt><strong>Website Design</strong></dt>
+ <dd>Whether your needs are large or small, Trillium can get you on the Web!</dd>
+ <dt><strong>E-Commerce Solutions</strong></dt>
+ <dd>Trillium offers quick entry into the e-commerce marketplace.</dd>
+ <dt><strong>Search Engine Optimization</strong></dt>
+ <dd>Most people find new sites using search engines. Trillium can get your website noticed.</dd>
+</dl>
+</main>
+<footer>
+ <small><i>Copyleft 🄯 2022 msglm</i></small>
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html new file mode 100644 index 0000000..9e7949d --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter.html @@ -0,0 +1,36 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Bistro</title>
+<meta charset="utf-8">
+</head>
+<body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <b>
+ Home
+ Menu
+ Blog
+ Contact
+ </b>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery!</p>
+ <p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <footer>Copyright © 2022
+ </footer>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html new file mode 100644 index 0000000..1e45a3d --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/starter1.html @@ -0,0 +1,56 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Favorite Sites</title>
+<meta charset="utf-8">
+</head>
+<body>
+<h1>Favorite Sites</h1>
+<ul>
+ <li>Hobbies</li>
+ <li>HTML5</li>
+ <li>CSS</li>
+</ul>
+<h2>Hobbies</h2>
+ <dl>
+ <dt>Running</dt>
+ <dd><a href="http://www.runningnetwork.com">http://www.runningnetwork.com</a></dd>
+ <dt>Cooking</dt>
+ <dd><a href="http://www.cooking.com">http://www.cooking.com</a></dd>
+ </dl>
+<h2>HTML5</h2>
+ <dl>
+ <dt>Elements</dt>
+ <dd><a href="http://www.w3.org/TR/html5/">http://www.w3.org/TR/html5/</a></dd>
+ <dt>Tutorials</dt>
+ <dd><a href="http://www.w3schools.com/html5">http://www.w3schools.com/html5</a></dd>
+ </dl>
+<h2>CSS</h2>
+ <dl>
+ <dt>W3C Cascading Style Sheets</dt>
+ <dd><a href="http://www.w3.org/Style/CSS">http://www.w3.org/Style/CSS</a></dd>
+ <dt>Tutorials</dt>
+ <dd><a href="http://www.w3schools.com/css3">http://www.w3schools.com/css3</a></dd>
+ </dl>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<br>
+<h2>Back to Top</h2>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html new file mode 100644 index 0000000..b91aef0 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/target.html @@ -0,0 +1,10 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Anchor Example</title>
+<meta charset="utf-8">
+</head>
+<body>
+<a href="http://webdevbasics.net" target="_blank">Basics of Web Design Textbook Companion</a>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html new file mode 100644 index 0000000..6a48229 --- /dev/null +++ b/HTML/Chapter/Ch. 2 hands-on assignments/Ch2_msglm/template.html @@ -0,0 +1,9 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html new file mode 100644 index 0000000..4de4e5f --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Inline CSS Example</title> +</head> +<meta charset="utf-8"> +<body style="background-color:#F5F5F5;color:#008080;"> + <h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1> + <p>This paragraph inherits the styles applied to the body tag.</p> + <!--This is exactly what the book requests, it's so simple that no differentiation or style could really be done--> +</body> +</html> diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html new file mode 100644 index 0000000..bef46cd --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.1.inline2.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <title>Inline CSS Example</title> +</head> +<meta charset="utf-8"> +<body> + <h1 style="background-color:#008080;color:#F5F5F5;">Inline CSS</h1> + <p>This paragraph inherits the styles applied to the body tag.</p> + <p style="color:#333333">This paragraph overrides the text color style applied to the body tag.</p> +<!--This is so simple that any deviation would result in penalties. Please do not consider this copied--> +</body> +</html> diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html new file mode 100644 index 0000000..cb14841 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.2.embedded.html @@ -0,0 +1,53 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+body {
+ background-color: #F9F0FE;
+ color: #5B3256;
+}
+h1 {
+ background-color: #833B83;
+ color: #F9F0FE;
+}
+h2 {
+ background-color: #AD77C3;
+ color: #F9F0FE;
+}
+<!--This is exactly what was asked, please do not consider this copied.-->
+</style>
+
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services:</p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li>Usability Studies</li>
+ <li>Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html new file mode 100644 index 0000000..b959488 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.4.classid.html @@ -0,0 +1,62 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+<!--The Book requests this exactly! This is not copied!-->
+body {
+ background-color: #F9F0FE;
+ color: #5B3256;
+}
+h1 {
+ background-color: #833B83;
+ color: #F9F0FE;
+}
+h2 {
+ background-color: #AD77C3;
+ color: #F9F0FE;
+}
+
+.feature {
+ color: #B33939;
+}
+
+#new {
+ color: #227093;
+}
+<!--Comment for differentiation purposes-->
+</style>
+
+</head>
+<body>
+<header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p>Trillium Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services:</p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li class="feature">Usability Studies</li>
+ <li class="feature">Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p id="new">Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html new file mode 100644 index 0000000..6896758 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.5.span.html @@ -0,0 +1,59 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<style>
+body {
+ background-color: #F9F0FE;
+ color: #5B3256;
+}
+h1 {
+ background-color: #833B83;
+ color: #F9F0FE;
+}
+h2 {
+ background-color: #AD77C3;
+ color: #F9F0FE;
+}
+span {
+ background-color: black;
+}
+span h1 {
+ color: yellow;
+}
+<!--Comment for differentiation purposes-->
+</style>
+
+</head>
+<body>
+<header>
+<span><h1>Trillium Media Design</h1><span>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p><span>Trillium Media Design</span> will bring your company’s Web presence to the next level. <span>We offer a comprehensive range of services:</span></p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li>Usability Studies</li>
+ <li>Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png Binary files differnew file mode 100644 index 0000000..eff3802 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/4.8.validation.png diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css new file mode 100644 index 0000000..0e4f9ac --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.color.css @@ -0,0 +1,6 @@ +/* Ideally these colors shouldn't be as eye-bleachingly bright. Also, since these colors are the "purest form" of colors, css aliases like "blue" and "white" should be used.*/
+
+body {
+ background-color: #0000FF;
+ color: #FFFFFF;
+}
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html new file mode 100644 index 0000000..9f7df07 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/CSS/4.3.external.html @@ -0,0 +1,12 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>External Styles</title>
+<meta charset="utf-8">
+<!--Changing CSS name is a requirement for this to function given the new naming scheme-->
+<link rel="stylesheet" href="4.3.color.css">
+</head>
+<body>
+ <p>This web page uses an external style sheet.</p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html new file mode 100644 index 0000000..6be2f7f --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.index.html @@ -0,0 +1,18 @@ +<!--I just discovered my editor has an auto-indentor for html. Never realized it supported HTML/XML as well. I guess everything I make will have proper indentations too.-->
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>The Cascade in Action</title>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="4.7.site.css">
+ <style>
+body {
+ color: #0000FF;
+}
+ </style>
+ </head>
+ <body>
+ <p>this paragraph applies the external and embedded styles — note hwo the blue text color that is configured in the embedded styles takes precedence over the black text color configured in the external stylesheet.</p>
+ <p style="color: #FF0000">inline styles configure this paragraph to have red text and take precedence over the embedded and external styles.</p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css new file mode 100644 index 0000000..b9f18c5 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/mycascade/4.7.site.css @@ -0,0 +1,4 @@ +body {
+ background-color: #FFFFCC; /*Now this is a good looking color!*/
+ color: #000000;
+}
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html new file mode 100644 index 0000000..6c6f4f4 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.index.html @@ -0,0 +1,38 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="4.6.trillium.css">
+</head>
+<body>
+<header>
+<span><h1>Trillium Media Design</h1><span>
+</header>
+<nav><a href="4.6.index.html">Home</a>
+ <a href="4.6.services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>New Media and Web Design</h2>
+ <p><span>Trillium Media Design</span> will bring your company’s Web presence to the next level. <span>We offer a comprehensive range of services:</span></p>
+ <ul>
+ <li>Website Design</li>
+ <li>Interactive Animation</li>
+ <li>E-Commerce Solutions</li>
+ <li>Usability Studies</li>
+ <li>Search Engine Optimization</li>
+ </ul>
+ <h2>Meeting Your Business Needs</h2>
+ <p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html new file mode 100644 index 0000000..d9d1804 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.services.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Trillium Media Design</title>
+<meta charset="utf-8">
+<link rel="stylesheet" href="4.6.trillium.css">
+</head>
+<body>
+ <header>
+ <h1>Trillium Media Design</h1>
+</header>
+<nav><a href="index.html">Home</a>
+ <a href="services.html">Services</a>
+ <a href="contact.html">Contact</a>
+</nav>
+<main>
+ <h2>Our Services Meet Your Business Needs</h2>
+ <dl>
+ <dt><strong>Website Design</strong></dt>
+ <dd>Whether your needs are large or small, Trillium can get your company on the Web!</dd>
+ <dt><strong>Interactive Animation</strong></dt>
+ <dd>Multimedia training and marketing animations are our specialty.</dd>
+ <dt><strong>E-Commerce Solutions</strong></dt>
+ <dd>Trillium offers quick and easy entry into the e-commerce marketplace.</dd>
+ <dt><strong>Usability Studies</strong></dt>
+ <dd>Trillium can assess the usability of your current site and suggest improvements.</dd>
+ <dt><strong>Search Engine Optimization</strong></dt>
+ <dd>Most people find websites using search engines. Trillium can help you get your site noticed.</dd>
+ </dl>
+</main>
+<footer>
+ Copyright © Your Name Here
+</footer>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css new file mode 100644 index 0000000..c260a61 --- /dev/null +++ b/HTML/Chapter/Ch. 4 Hands-on assignments/Ch4_msglm/trillium/4.6.trillium.css @@ -0,0 +1,18 @@ +body { + background-color: #F9F0FE; + color: #5B3256; +} +h1 { + background-color: #833B83; + color: #F9F0FE; +} +h2 { + background-color: #AD77C3; + color: #F9F0FE; +} +span { + background-color: black; +} +span h1 { + color: yellow; +} diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html new file mode 100644 index 0000000..a8826b3 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/5.7.index.html @@ -0,0 +1,72 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+body {
+ background-image: url(background.jpg);
+ font-family: Verdana, Arial, sans-serif;
+}
+
+header {
+ background-color: #000033;
+ background-image: url(headerbackblue.jpg);
+ background-position: right;
+ background-repeat: no-repeat;
+ color: #FFFF99;
+ line-height: 400%;
+ text-indent: 1em;
+}
+
+h1, h2, h3 {
+ font-family:Georgia, 'Times New Roman', serif;
+}
+
+nav {
+ font-weight: bold;
+ font-size: 1.5em;
+}
+
+nav a {
+ text-decoration:: none;
+}
+
+p {
+ text-indent: 2em;
+}
+
+footer {
+ text-align: center;
+ font-style: italic;
+ font-size: .80em;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>KayakDoorCounty.net</h1>
+ </header>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+ <img src="hero.jpg" alt="tour guide paddling a kayak" width="500" height="350">
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ Copyright © KayakDoorCounty.net
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg Binary files differnew file mode 100644 index 0000000..5d33e9e --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/background.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg Binary files differnew file mode 100644 index 0000000..6ae2660 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/headerbackblue.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg Binary files differnew file mode 100644 index 0000000..363e638 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/ch5practice/hero.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html new file mode 100644 index 0000000..b37bbcf --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.4.index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Coffee House</title>
+ <meta charset="utf-8">
+ <style>
+body { font-size: 150%;
+ font-family: Arial;
+ color: #992435;
+ background-image: url(coffeepour.jpg);
+ background-repeat: no-repeat;
+ background: url(coffee.gif) no-repeat left bottom,
+ url(coffeepour.jpg) no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Coffee House</h1>
+ </header>
+ <main>
+ <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+ <ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ </ul>
+ </main>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html new file mode 100644 index 0000000..4de880a --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.5.coffeepour.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Coffee House</title>
+ <meta charset="utf-8">
+ <style>
+body { font-size: 150%;
+ font-family: Arial;
+ color: #992435;
+ background-image: url(coffeepour.gif);
+ background: url(coffee.gif) no-repeat left bottom,
+ url(coffeeback.gif) no-repeat,
+ url(coffeepour.gif) no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Coffee House</h1>
+ </header>
+ <main>
+ <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+ <ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ </ul>
+ </main>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html new file mode 100644 index 0000000..0257d60 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/5.8.index.html @@ -0,0 +1,39 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Coffee House</title>
+ <meta charset="utf-8">
+ <style>
+body { font-size: 150%;
+ font-family: Arial;
+ color: #992435;
+ background-image: url(coffeepour.jpg);
+ background-repeat: no-repeat;
+ background: url(coffee.gif) no-repeat left bottom,
+ url(coffeepour.jpg) no-repeat;
+}
+ul {
+ list-style-image: url(marker.gif);
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Coffee House</h1>
+ </header>
+ <main>
+ <p>Enjoy a great cup of coffee<br>or tea at Coffee House!</p>
+ <ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ </ul>
+ </main>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ <p> </p>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif Binary files differnew file mode 100644 index 0000000..de749d0 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffee.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif Binary files differnew file mode 100644 index 0000000..8026552 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeeback.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif Binary files differnew file mode 100644 index 0000000..2981542 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg Binary files differnew file mode 100644 index 0000000..4b031f0 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/coffeepour.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif Binary files differnew file mode 100644 index 0000000..7031505 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/coffee5/marker.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html new file mode 100644 index 0000000..c7a8a2f --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/5.10.index.html @@ -0,0 +1,21 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Tropical Island</title>
+ <meta charset="utf-8">
+ <style>
+figcaption {
+ font-weight: bold;
+ font-style: italic;
+ font-family: Papyrus, fantasy;
+ font-size: 1.5em;
+}
+ </style>
+ </head>
+ <body>
+ <figure>
+ <img src=myisland.jpg alt="Tropical Island" height=480 width=640>
+ <figcaption>Tropical Island Getaway</figcaption>
+ </figure>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg Binary files differnew file mode 100644 index 0000000..5d90394 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/figure/myisland.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html new file mode 100644 index 0000000..9070c7d --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.1.index.html @@ -0,0 +1,36 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+ <img height=350 width=500 alt="KayakDorCountry.net" src=hero.jpg>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html new file mode 100644 index 0000000..26cf162 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.2.index.html @@ -0,0 +1,45 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+#bar{
+ background-color:#152420;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+ <img height=350 width=500 alt="KayakDorCountry.net" src=hero.jpg>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html new file mode 100644 index 0000000..e7bae4d --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.3.index.html @@ -0,0 +1,49 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+#bar{
+ background-color:#152420;
+}
+main {
+ background-image: url(heroback.jpg);
+ background-repeat: no-repeat;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html new file mode 100644 index 0000000..e57c2ad --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.6.index.html @@ -0,0 +1,58 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+#bar{
+ background-color:#152420;
+}
+
+body {
+ font-family: Verdana, Arial, sans-serif;
+}
+
+h2, h3 {
+ font-family: Georgia, 'Times New Roman', serif;
+}
+
+main {
+ background-image: url(heroback.jpg);
+ background-repeat: no-repeat;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html new file mode 100644 index 0000000..4806c6c --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/5.9.index.html @@ -0,0 +1,50 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <link rel=icon href=favicon.ico type="image/x-icon">
+ <style>
+#bar{
+ background-color:#152420;
+}
+main {
+ background-image: url(heroback.jpg);
+ background-repeat: no-repeat;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <img src=kayakdc.gif>
+ </header>
+ <nav id=bar>
+ <a href="index.html"><img src=home.gif alt=home width=90 height=35></a>
+ <a href="tours.html"><img src=tours.gif alt=tours width=90 height=35></a>
+ <a href="reservations.html"><img src=reservations.gif alt=reservations width=190 height=35></a>
+ <a href="contact.html"><img src=contact.gif alt=contact width=130 height=35></a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif Binary files differnew file mode 100644 index 0000000..e620a5b --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/contact.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico Binary files differnew file mode 100644 index 0000000..c22c6bb --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/favicon.ico diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg Binary files differnew file mode 100644 index 0000000..363e638 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/hero.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg Binary files differnew file mode 100644 index 0000000..a72a7a0 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/heroback.jpg diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif Binary files differnew file mode 100644 index 0000000..7e0eab6 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/home.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif Binary files differnew file mode 100644 index 0000000..8fd7564 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/kayakdc.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif Binary files differnew file mode 100644 index 0000000..c2189a2 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/reservations.gif diff --git a/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif Binary files differnew file mode 100644 index 0000000..807e4e8 --- /dev/null +++ b/HTML/Chapter/Ch. 5 Hands-On Assignments/Ch5_msglm/kayaykch5/tours.gif diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html new file mode 100644 index 0000000..5adac06 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/6.2.boxborder.html @@ -0,0 +1,27 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Examples of the Box Model</title>
+ <meta charset="utf-8">
+ <style>
+body { background-color: #FFFFFF;
+}
+h1 { background-color: #D1ECFF;
+ padding-left: 60px;
+ border-bottom: 3px ridge #330000;
+}
+#box { background-color: #74C0FF;
+ margin-left: 60px;
+ padding: 5px 10px;
+ border: 1px solid #000000;
+}
+ </style>
+ </head>
+ <body>
+ <h1>Examples of the Box Model</h1>
+ <div id="box">HTML elements display as boxes on web pages. This div element is configured to have a blue background.</div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html new file mode 100644 index 0000000..b9005c1 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/6.3.index.html @@ -0,0 +1,44 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body { background-image: url(background.jpg);
+ font-family: Arial, Verdana, sans-serif;
+}
+h1 {
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 100px;
+ width: 700px;
+ font-size: 3em;
+ padding-left: 150px;
+ padding-top: 30px;
+ border-radius: 15px;
+}
+h2 { color: #000033;
+ font-family: arial, sans-serif;
+}
+footer { font-size: .80em;
+ font-style: italic;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
+ </nav>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh baked, organic pastries, including fresh fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole grain breads with locally grown salad, fruit, and vegetables. </p>
+ <footer>
+ Copyright © Your Name Here
+ </footer>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg Binary files differnew file mode 100644 index 0000000..bd76938 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/background.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..4db3869 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/bistroch6/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html new file mode 100644 index 0000000..007aad5 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/6.4.index.html @@ -0,0 +1,56 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body { background-image: url(background.jpg);
+ font-family: Arial, Verdana, sans-serif;
+}
+h1 {
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 100px;
+ font-size: 3em;
+ background-color: #9DB3DC;
+ margin-top: 0;
+ padding-left: 150px;
+ padding-top: 30px;
+ border-radius: 15px;
+}
+h2 { color: #000033;
+ font-family: arial, sans-serif;
+}
+footer { font-size: .80em;
+ font-style: italic;
+}
+
+#container {
+ background-color: #FFFFFF;
+ padding: 2em;
+ margin-left: auto; margin-right: auto;
+ width: 80%;
+ min-width: 800px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id=container>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
+ </nav>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh baked, organic pastries, including fresh fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole grain breads with locally grown salad, fruit, and vegetables. </p>
+ <footer>
+ Copyright © Your Name Here
+ </footer>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg Binary files differnew file mode 100644 index 0000000..bd76938 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/background.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..4db3869 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/centerch6/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html new file mode 100644 index 0000000..06143b7 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/6.1.index.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Coffee House</title>
+<meta charset="utf-8">
+<style>
+body { color: #221811;
+ font-family: Verdana, Arial, sans-serif;
+ width: 80%;
+ min-width: 750px;
+
+}
+header { background-color: #D2B48C;
+ background-image: url(coffeelogo.jpg);
+ background-repeat: no-repeat;
+}
+
+h1 { text-indent: 4em;
+ font-size: 4em;
+ height: 150px;
+ line-height: 220%;
+
+}
+
+nav { font-weight: bold;
+ text-indent: 1em;
+ font-size: 2em;
+}
+nav a { color: #804D33; text-decoration: none; }
+
+#wrapper { background-color: #FCEBB6; }
+</style>
+</head>
+<body>
+<div id="wrapper">
+<header>
+<h1>Coffee House</h1>
+</header>
+<nav>
+<a href="index.html">Home</a>
+<a href="menu.html">Menu</a>
+<a href="music.html">Music</a>
+<a href="jobs.html">Jobs</a>
+</nav>
+<main>
+<h2>Follow the Winding Road to Coffee House</h2>
+<h3>Coffee House features:</h3>
+<ul>
+ <li>Specialty Coffee and Tea</li>
+ <li>Bagels, Muffins, and Gluten-free Pastries</li>
+ <li>Organic Salads</li>
+ <li>Music and Poetry Readings</li>
+ <li>Open Mic Night</li>
+</ul>
+<div>
+12010 Garrett Bay Road<br>
+Ellison Bay, WI 54210<br>
+888-555-5555<br><br>
+</div>
+</main>
+<footer>
+Copyright © Coffee House<br>
+</footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg Binary files differnew file mode 100644 index 0000000..3c302c7 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/coffeech6/coffeelogo.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html new file mode 100644 index 0000000..18f2ec5 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.linear.html @@ -0,0 +1,23 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Practice with Gradients</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ background-color: #DA70D6;
+ background-image: linear-gradient(to bottom, #FFFFFF, #DA70D6);
+ background-repeat: no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <h1>Linear Gradient</h1>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html new file mode 100644 index 0000000..6cd5e767 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/gradientch6/6.10.index.radial.html @@ -0,0 +1,23 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Practice with Gradients</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ background-color: #DA70D6;
+ background-image: radial-gradient(#FFFFFF, #DA70D6);
+ background-repeat: no-repeat;
+}
+ </style>
+ </head>
+ <body>
+ <h1>Linear Gradient</h1>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+ <h2>Heading 2</h2>
+ <p>This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content. This is content.</p>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html new file mode 100644 index 0000000..c25804b --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/6.6.index.html @@ -0,0 +1,87 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>KayakDoorCounty.net</title>
+ <style>
+body { background-color: #FFFFDD;
+ font-family: Verdana, Arial, sans-serif;
+}
+header { background-color: #000033;
+ color: #FFFFB9;
+ background-image: url(headerbackblue.jpg);
+ background-position: right;
+ background-repeat: no-repeat;
+ height: 80px;
+ padding-top: 5px;
+ padding-left: 2em;
+ text-shadow: 1px 1px 1px #FFF;
+}
+
+h1, h2, h3 {
+ font-family: Georgia, "Times New Roman", serif;
+}
+h1 {
+ margin-bottom: 0;
+}
+nav {
+ font-weight: bold;
+ font-size: 1.25em;
+ background-color: #FFFFCC;
+ text-align: center;
+}
+nav a { text-decoration: none; }
+main {
+ background-color: #004D99;
+ background-image: url(heroback2.jpg);
+ color: #FFFFFF; padding: 2em;
+}
+
+footer {
+ font-style: italic;
+ text-align: center;
+ background-color: #000033;
+ color: #FFFFCC;
+ padding: 0.5em;
+}
+
+#container {
+ margin-left: auto;
+ margin-right: auto;
+ width: 80%;
+ min-width: 650px;
+ max-width: 1280px;
+ background-color: #FFFFFF;
+ box-shadow: 10px 10px 10px #333333;
+ border: 1px solid #000033;
+}
+ </style>
+ </head>
+ <body>
+ <div id=container>
+ <header>
+ <h1>KayakDoorCounty.net</h1>
+ </header>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="tours.html">Tours</a>
+ <a href="reservations.html">Reservations</a>
+ <a href="contact.html">Contact</a>
+ </nav>
+ <main>
+ <h2>Your next adventure is only a paddle away ....</h2>
+
+ <p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
+ <h3>Featured tours this week:</h3>
+ <ul>
+ <li>Cana Island</li>
+ <li>Mink River</li>
+ <li>Europe Lake</li>
+ </ul>
+ </main>
+ <footer>
+ <small><i>Copyright © KayakDoorCounty.net</i></small>
+ </footer>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg Binary files differnew file mode 100644 index 0000000..6ae2660 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/headerbackblue.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg Binary files differnew file mode 100644 index 0000000..b2d66e1 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/kayakch6/heroback2.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html new file mode 100644 index 0000000..f1a9fa1 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.7.index.html @@ -0,0 +1,33 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+#content { background-image: url(fall.jpg);
+ background-repeat: no-repeat;
+ margin: auto;
+ width: 640px;
+ height: 480px;
+ padding-top: 20px;
+}
+
+h1 {
+ background-color: #FFFFFF;
+ opacity: 0.6;
+ font-size: 4em;
+ padding: 10px;
+ margin-left: 40px;
+}
+
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <h1> Fall Nature Hikes</h1>
+ </div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html new file mode 100644 index 0000000..c6ca7ce --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.8.rgba.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+#content { background-image: url(fall.jpg);
+ background-repeat: no-repeat;
+ margin: auto;
+ width: 640px;
+ height: 480px;
+ padding-top: 20px;
+}
+
+h1 {
+ color: #ffffff;
+ color: rgba(255, 255, 255, 0.8);
+ font-family: Verdana, Helvetica, sans-serif;
+ font-size: 5em;
+ padding-right: 10px;
+ text-align: right;
+}
+
+
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <h1> Fall Nature Hikes</h1>
+ </div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html new file mode 100644 index 0000000..d74632e --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/6.9.hsla.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+#content { background-image: url(fall.jpg);
+ background-repeat: no-repeat;
+ margin: auto;
+ width: 640px;
+ height: 480px;
+ padding-top: 20px;
+}
+
+h1 {
+ color: #ffcccc;
+ color: hsla(60, 100%, 90%, 0.8);
+ font-family: Georgia, "Times New Roman", serif;
+ font-size: 6em;
+ padding: 20px;
+}
+
+
+ </style>
+ </head>
+ <body>
+
+ <div id="content">
+ <h1> Fall Nature Hikes</h1>
+ </div>
+
+
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg Binary files differnew file mode 100644 index 0000000..b95e481 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/opacitych6/fall.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html new file mode 100644 index 0000000..2329bd8 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/6.5.index.html @@ -0,0 +1,59 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body { background-image: url(background.jpg);
+ font-family: Arial, Verdana, sans-serif;
+}
+h1 {
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 100px;
+ font-size: 3em;
+ background-color: #9DB3DC;
+ margin-top: 0;
+ padding-left: 150px;
+ padding-top: 30px;
+ border-radius: 15px;
+}
+h2 { color: #000033;
+ font-family: arial, sans-serif;
+ text-shadow: 1px 1px 0 #CCC;
+}
+footer { font-size: .80em;
+ font-style: italic;
+}
+
+#container {
+ background-color: #FFFFFF;
+ padding: 2em;
+ margin-left: auto; margin-right: auto;
+ width: 80%;
+ min-width: 800px;
+ box-shadow: 5px 5px 5px #1E1E1E;
+ text-shadow: 3px 3px 3px #676767;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id=container>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav><a href="index.html">Home</a> <a href="menu.html">Menu</a> <a href="directions.html">Directions</a> <a href="contact.html">Contact</a>
+ </nav>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh baked, organic pastries, including fresh fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole grain breads with locally grown salad, fruit, and vegetables. </p>
+ <footer>
+ Copyright © Your Name Here
+ </footer>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg Binary files differnew file mode 100644 index 0000000..bd76938 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/background.jpg diff --git a/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..4db3869 --- /dev/null +++ b/HTML/Chapter/Ch. 6 hands-on assignments/Ch6_msglm/shadowch6/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html new file mode 100644 index 0000000..318d34c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>CSS</title>
+ <meta charset="utf-8">
+ <style>
+.div1 {
+ width: 200px;
+ height: 200px;
+ background-color: #D1ECFF;
+ border: 3px dashed #000000;
+ padding: 5px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="div1">
+ This is the first box.
+ </div>
+ <div class="div2">
+ This is the second box.
+ </div>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html new file mode 100644 index 0000000..6bcaf53 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>CSS</title>
+ <meta charset="utf-8">
+ <style>
+.div1 {
+ width: 200px;
+ height: 200px;
+ background-color: #D1ECFF;
+ border: 3px dashed #000000;
+ padding: 5px;
+}
+
+.div2 {
+ width: 100px;
+ height: 100px;
+ background-color: #ffffff;
+ border: 3px ridge #000000;
+ padding: 5px;
+ margin: 10px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div class="div1">
+ This is the outer box.
+ <div class="div2">
+ This is the inner box.
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html new file mode 100644 index 0000000..3805264 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Layout Example</title>
+ <meta charset="utf-8">
+ <style>
+nav {
+ float: left;
+ width: 150px;
+}
+main {
+ margin-left: 160px;
+}
+body {
+ background-color: #000066;
+}
+#wrapper {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background-color: #EAEAEA;
+}
+h1 {
+ margin: 0;
+ padding: 10px;
+}
+nav {
+ float: left;
+ width: 150px;
+ padding: 10px;
+}
+main {
+ margin-left: 160px;
+ padding: 10px;
+ background-color: #FFFFFF;
+}
+footer {
+ text-align: center;
+ font-style: italic;
+ background-color: #CCCCFF;
+ clear: both;
+}
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header><h1>Layout Example</h1></header>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="page1.html">Page 1</a>
+ <a href="page2.html">Page 2</a>
+ </nav>
+ <main>
+ <h2>Page Heading</h2>
+ <p>This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence. This is a sentence.</p>
+ </main>
+ <footer>Copyright © </footer>
+ </div>
+ </body>
+</html>
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html new file mode 100644 index 0000000..a9575b3 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html @@ -0,0 +1,40 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <img src="7.7.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery!</p>
+ <p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main> <!-- end of main content -->
+ <footer>Copyright ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css new file mode 100644 index 0000000..e32be27 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css @@ -0,0 +1,91 @@ +*{ + box-sizing: border-box; +} + +body { + background-color: #00005D; + font-family: Verdana, Arial, sans-serif; +} + +#wrapper { + margin: 0 auto; + width: 80%; + min-width: 940px; + background-color: #B3C7E6; + color: #000066; +} + +header { + background-color: #869DC7; + color: #00005D; + font-size: 150%; + padding: 10px 10px 10px 155px; + height: 150px; + background-repeat: no-repeat; + background-image: url(7.7.lighthouselogo.jpg); +} + +nav { + float: right; + width: 150px; + font-weight: bold; + letter-spacing: 0.1em; +} + +main { + background-color: #FFFFFF; + color: #000000; + padding: 10px 20px; + display: block; + overflow: auto; +} + +h2 { + color: #869DC7; + font-family: Arial, sans-serif; +} + +#floatright { + float: right; + margin: 10px; +} + + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +nav a { + text-decoration: none; + padding: 20px; + display: block; + background-color: #B3C7E6; + border-bottom: 1px solid #FFFFFF; +} + +nav a:link { + color: #FFFFFF; +} + +nav a:visited { + color: #EAEAEA; +} + +nav a:hover { + color: #869DC7; + background-color: #EAEAEA; +} + +footer { + font-size: 70%; + text-align: center; + padding: 10px; + background-color: #869DC7; + clear: both; +} + + + + diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html new file mode 100644 index 0000000..e2c4866 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body { width:500px;
+ background-color:#FFFFFF;
+ color:#000000;
+}
+div { background-color:#F3F1BF;
+}
+h1 { background-color:#658B42;
+ padding:10px;
+ color: #E1DB5F;
+}
+p { font-family:Arial,sans-serif;
+ }
+float, margin, and border properties:
+.float { float: left;
+ margin-right: 10px;
+ border: 3px ridge #000000; }
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+ <img class=float src="7.2.yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+ <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways — support organizations dedicated to preserving their habitat. </p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg Binary files differnew file mode 100644 index 0000000..7dd9982 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html new file mode 100644 index 0000000..14226a7 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html @@ -0,0 +1,98 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper {
+ background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+header {
+ background-color: #869dc7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(7.5.lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+}
+
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main {
+ padding: 20px 20px 0 20px;
+ background-color: #ffffff;
+ color: #000000;
+ display: block;
+}
+main img {
+ margin: 10px;
+ float: right;
+}
+
+footer {
+ font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+
+nav li {
+ display: inline;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ font-size: 1.5em;
+ margin: 5px;
+}
+nav a {
+ text-decoration: none;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <img src="7.5.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <footer>Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html new file mode 100644 index 0000000..3d69728 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html @@ -0,0 +1,102 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+nav { float: left;
+ width: 150px;
+}
+main { margin-left: 155px;
+ background-color: #ffffff;
+ color: #000000;
+}
+header { background-color: #869dc7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(7.6.lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+}
+
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+.content {
+ padding: 20px 20px 0 20px;
+}
+main { display: block; }
+#floatright { margin: 10px;
+ float: right;
+}
+
+footer { font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+nav ul {
+ list-style-type: none; padding: 10px;
+}
+nav a {
+ text-decoration: none; padding: 10px;
+ font-weight: bold;
+}
+
+nav a:link {
+ color: #ffffff;
+}
+nav a:visited {
+ color: #EAEAEA;
+}
+nav a:hover {
+ color: #000066;
+}
+
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="menu.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <div class="content">
+ <img src="7.6.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </div>
+ <footer>Copyright ©
+ </footer>
+ </main>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt new file mode 100644 index 0000000..9be3095 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt @@ -0,0 +1 @@ +I am using an older version of the book, so this assignment doesn't match up with the student files. I got the older version as a hand-me-down due to budgeting constraints. So please do understand that this section being different isn't out of laze, mistake, or plagarism, but rather the unaffordability of textbooks, but a willingness to still practice. diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html new file mode 100644 index 0000000..bce1e3b --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>First HTML Webpage</title>
+ <meta charset="utf-8">
+ <style>
+* {
+ box-sizing: border-box;
+}
+
+#gallery {
+ position: relative;
+}
+
+#gallery ul {
+ width: 280px;
+ list-style-type: none;
+}
+
+#gallery li {
+ display: inline;
+ float: left;
+ padding: 10px;
+}
+
+#gallery img {
+ border-style: none;
+}
+
+
+#gallery a {
+ text-decoration: none; color: #333; font-style: italic;
+}
+
+#gallery span {
+ display: none;
+}
+
+#gallery a:hover span {
+ display: block;
+ position: absolute;
+ top: 10px;
+ left: 300px;
+ text-align: center;
+}
+ </style>
+ </head>
+ <body>
+ <div id=gallery>
+ <ul>
+ <li><a href="yls.jpg"><img src="yls.jpg" width="100" height="75" alt="YLS"><span><img src="yls.jpg" width="250" height="150" alt="YLS"><br>YLS</span></li>
+ <li><a href="yogadoor.jpg"><img src="yogadoor.jpg" width="100" height="75" alt="yogadoor"><span><img src="yogadoor.jpg" width="250" height="150" alt="yogadoor"><br>yogadoor</span></li>
+ <li><a href="lighthouselogo.jpg"><img src="lighthouselogo.jpg" width="100" height="75" alt="lighthouselogo"><span><img src="lighthouselogo.jpg" width="250" height="150" alt="lighthouselogo"><br>lighthouselogo</span></li>
+ </ul>
+ </div>
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg Binary files differnew file mode 100644 index 0000000..7dd9982 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg Binary files differnew file mode 100644 index 0000000..fe0de96 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt new file mode 100644 index 0000000..db84d5f --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt @@ -0,0 +1 @@ +Similar to ch7p, this part of the book is missing for me. Textbooks are expensive and all I request is a bit of mercy due to this. diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html new file mode 100644 index 0000000..f4a045e --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html @@ -0,0 +1,90 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+nav a { text-decoration: none;
+ padding: 10px;
+ font-weight: bold;
+}
+nav ul { list-style-type: none;
+ padding: 10px;
+}
+nav { float: left;
+ width: 150px;
+}
+main { margin-left: 155px;
+ background-color: #ffffff;
+ color: #000000;
+}
+header { background-color: #869dc7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+}
+
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px;
+}
+main { display: block; }
+#floatright { margin: 10px;
+ float: right;
+}
+
+footer { font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="menu.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ </nav>
+ <main>
+ <div class="content">
+ <img src="7.4.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </div>
+ <footer>Copyright ©
+ </footer>
+ </main>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html new file mode 100644 index 0000000..7c7e1e2 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html @@ -0,0 +1,109 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper {
+ background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+header {
+ background-color: #869DC7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+ margin-top: 40px;
+}
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main {
+ padding: 20px 20px 0 20px;
+ background-color: #ffffff;
+ color: #000000;
+ display: block;
+}
+main img {
+ margin: 10px;
+ float: right;
+}
+
+footer {
+ font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+
+nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 40px; width: 100%;
+ min-width: 40em;
+ background-color: #B3C7E6;
+ z-index: 9999;
+}
+
+nav li {
+ display: inline;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ font-size: 1.5em;
+ margin: 5px;
+ padding-right: 10%;
+}
+nav a {
+ text-decoration: none;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <img src="7.11.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <footer>Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html new file mode 100644 index 0000000..ecd29f3 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link media="screen" href="bistro.css" rel="stylesheet">
+<link media="print" href="bistroprint.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <img src="7.8.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery!</p>
+ <p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main> <!-- end of main content -->
+ <footer>Copyright ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css new file mode 100644 index 0000000..f47a52d --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css @@ -0,0 +1,47 @@ +* { box-sizing: border-box; }
+body { background-color: #00005D;
+ font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto;
+ width: 80%;
+ min-width: 940px;
+ background-color: #B3C7E6;
+ color: #000066; }
+header { background-color: #869DC7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ height: 150px;
+ background-repeat: no-repeat;
+ background-image: url(7.8.lighthouselogo.jpg); }
+nav { float: right;
+ width: 150px;
+ font-weight: bold;
+ letter-spacing: 0.1em; }
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 10px 20px;
+ display: block;
+ overflow: auto; }
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+ margin: 0;
+ padding: 0; }
+nav a { text-decoration: none;
+ padding: 20px;
+ display: block;
+ background-color: #B3C7E6;
+ border-bottom: 1px solid #FFFFFF;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+ background-color: #EAEAEA; }
+footer { font-size: 70%;
+ text-align: center;
+ padding: 10px;
+ background-color: #869DC7;
+ clear: both;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css new file mode 100644 index 0000000..e165b24 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css @@ -0,0 +1,55 @@ +* {
+ box-sizing: border-box;
+}
+
+body { background-color: #00005D;
+font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto;
+ width: 80%;
+ min-width: 940px;
+ background-color: #B3C7E6;
+color: #000066; }
+header { background-color: #869DC7;
+ color: #000000;
+ font-size: 20pt;
+ padding: 10px 10px 10px 155px;
+ height: 150px;
+ background-repeat: no-repeat;
+background-image: url(7.8.lighthouselogo.jpg); }
+
+nav{
+display:none;
+}
+
+main {
+ background-color: #FFFFFF;
+ color: #000000;
+ padding: 10px 20px;
+ display: block;
+ overflow: auto;
+ font-family: "Times New Roman", serif;
+ font-size: 12pt;
+}
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+ margin: 0;
+padding: 0; }
+nav a { text-decoration: none;
+ padding: 20px;
+ display: block;
+ background-color: #B3C7E6;
+ border-bottom: 1px solid #FFFFFF;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+background-color: #EAEAEA; }
+footer { font-size: 70%;
+ text-align: center;
+ padding: 10px;
+ background-color: #869DC7;
+ clear: both;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html new file mode 100644 index 0000000..60471e6 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<!--The Chapter 7 folder didn't come with any template for this. So I opted to use the 7.7 work as a a base-->
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <img src="7.9.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery!</p>
+ <p>The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main> <!-- end of main content -->
+ <footer>Copyright ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif Binary files differnew file mode 100644 index 0000000..832901a --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css new file mode 100644 index 0000000..b8a0b9d --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css @@ -0,0 +1,95 @@ +*{ + box-sizing: border-box; +} + +body { + background-color: #00005D; + font-family: Verdana, Arial, sans-serif; +} + +#wrapper { + margin: 0 auto; + width: 80%; + min-width: 940px; + background-color: #B3C7E6; + color: #000066; +} + +header { + background-color: #869DC7; + color: #00005D; + font-size: 150%; + padding: 10px 10px 10px 155px; + height: 150px; + background-repeat: no-repeat; + background-image: url(7.9.lighthouselogo.jpg); +} + +nav { + float: right; + width: 150px; + font-weight: bold; + letter-spacing: 0.1em; +} + +main { + background-color: #FFFFFF; + color: #000000; + padding: 10px 20px; + display: block; + overflow: auto; +} + +h2 { + color: #869DC7; + font-family: Arial, sans-serif; +} + +#floatright { + float: right; + margin: 10px; +} + + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +nav a { + text-decoration: none; + padding: 20px; + display: block; + background-color: #B3C7E6; + border-bottom: 1px solid #FFFFFF; + background-image: url(7.9.sprites.gif); + background-repeat: no-repeat; + background-position: right 0; +} + +nav a:link { + color: #FFFFFF; +} + +nav a:visited { + color: #EAEAEA; +} + +nav a:hover { + color: #869DC7; + background-color: #EAEAEA; + background-position: right -100px; +} + +footer { + font-size: 70%; + text-align: center; + padding: 10px; + background-color: #869DC7; + clear: both; +} + + + + diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html new file mode 100644 index 0000000..c8bd7af --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
+ background-color: #227093;
+}
+
+h1 {
+ color: #FFFFFF;
+ font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html new file mode 100644 index 0000000..d338ba2 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex; min-height: 100vh;
+ justify-content: center; align-items: center;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html new file mode 100644 index 0000000..8ac938e --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex; min-height: 100vh;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+ margin: auto;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html new file mode 100644 index 0000000..5cb35ee --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: grid; min-height: 100vh;
+ justify-content: center; align-items: center;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg Binary files differnew file mode 100644 index 0000000..014d773 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html new file mode 100644 index 0000000..2c4b9c1 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html @@ -0,0 +1,145 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <!--Similar situation here to my problem with 8.5, my book didn't actually have instructions on how to do this, so I have to try my best to reverse engineer and figure out the example. I hope this is satisfactory!-->
+ <style>
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+body {
+ font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper {
+ padding: 0;
+ min-width: 900px;
+}
+nav {
+ float: left;
+ width: 150px;
+}
+
+nav ul {
+ list-style-type: none;
+ padding: 1em;
+}
+nav a {
+ text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+header {
+ background-color: #869dc7;
+ color: #00005D;
+ background-image: url(8.6.light2.jpg);
+ padding: 1em 0 1em 190px;
+ font-size: 130%;
+ min-width: 600px;
+ background-repeat: no-repeat;
+ font-family: "Times New Roman", serif;
+}
+
+main {
+ float: left;
+ width: 50%;
+ padding: 1em;
+}
+
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+
+aside {
+ float: right;
+ width: 300px;
+ background-color: #EAEAEA;
+ padding-left: 1em;
+ margin: 0;
+}
+
+figcaption {
+ font-style: italic; padding-left: 2em;
+}
+
+footer {
+ background-color: #869dc7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+
+header {
+ grid-area: header;
+}
+
+nav {
+ grid-area: nav;
+}
+
+main {
+ grid-area: main; width: 100%;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+}
+
+ @supports (display: grid) {
+ #wrapper {
+ display: grid;
+ grid-template:
+ "header header header" 100px
+ "nav main aside" auto
+ "footer footer footer" 50px
+ / 150px 1fr 300px;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <aside>
+ <figure>
+ <img src="8.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Lighthouse Island Bistro</figcaption>
+ </figure>
+ </aside>
+ <footer>Copyright ©</footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg Binary files differnew file mode 100644 index 0000000..4d5d07b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg Binary files differnew file mode 100644 index 0000000..db35321 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg Binary files differnew file mode 100644 index 0000000..816f817 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg Binary files differnew file mode 100644 index 0000000..3a37f44 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg Binary files differnew file mode 100644 index 0000000..a19a586 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg Binary files differnew file mode 100644 index 0000000..c5bd806 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg Binary files differnew file mode 100644 index 0000000..09b35e8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html new file mode 100644 index 0000000..b0bf600 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html @@ -0,0 +1,54 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Flexbox Gallery</title>
+ <meta charset="utf-8">
+ <style>
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #FEFEFE;
+}
+
+header {
+ text-align: center;
+}
+
+#gallery {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+img {
+ margin: 1em;
+ box-shadow: 10px 10px 10px #777;
+}
+
+
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Flexbox Gallery</h1>
+ </header>
+ <main>
+ <div id="gallery">
+ <img src="8.1.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+ <img src="8.1.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+ <img src="8.1.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+ <img src="8.1.bird4.jpg" width="200" height="150" alt="Rock Wren">
+ <img src="8.1.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+ <img src="8.1.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+ </div>
+
+ </main>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html new file mode 100644 index 0000000..4669030 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html @@ -0,0 +1,113 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+
+
+
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+ padding: 1em; }
+nav a { text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(8.2.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 10em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+nav { float: left; }
+main{ padding: 1em; }
+aside { float: right; padding: 1em; }
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+
+#content {
+ display: flex;
+}
+nav {
+ flex: none;
+ background-color: #B3C7E6;
+}
+
+main {
+ flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF;
+}
+
+aside {
+ flex: 4;
+ background-color: #EAEAEA;
+}
+
+header, main, nav, figure, footer {
+ display: block;
+}
+
+nav {
+ order: 1;
+}
+
+main {
+ order: 2;
+}
+
+aside {
+ order: 3;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <aside>
+ <figure>
+ <img src="8.2.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+
+ </div>
+ <footer>Copyright © </footer>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg Binary files differnew file mode 100644 index 0000000..db35321 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg Binary files differnew file mode 100644 index 0000000..816f817 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg Binary files differnew file mode 100644 index 0000000..3a37f44 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg Binary files differnew file mode 100644 index 0000000..a19a586 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg Binary files differnew file mode 100644 index 0000000..c5bd806 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg Binary files differnew file mode 100644 index 0000000..09b35e8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html new file mode 100644 index 0000000..195a419 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html @@ -0,0 +1,43 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Grid Gallery</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body { background-color: #FEFEFE; }
+header { text-align: center; }
+
+#gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 200px);
+ grid-template-rows: auto;
+ grid-gap: 2em; gap: 2em;
+}
+
+
+
+
+
+
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Grid Gallery</h1>
+ </header>
+ <main>
+ <div id="gallery">
+ <img src="8.3.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+ <img src="8.3.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+ <img src="8.3.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+ <img src="8.3.bird4.jpg" width="200" height="150" alt="Rock Wren">
+ <img src="8.3.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+ <img src="8.3.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+ </div>
+ </main>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html new file mode 100644 index 0000000..17854a8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html @@ -0,0 +1,101 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+ <!--I checked my work and compared
+ it to the work provided by the student files
+ My book had some extra stuff in it that I had to remove.
+ Following is what it had:
+ @supports (display: grid) {
+ #wrapper { display: grid;
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 160px auto auto; }
+ header { grid-row: 1 / 2; grid-column: 1 / 3; }
+ nav { grid-row: 2 / 3; grid-column: 1 / 2; }
+ main { grid-row: 2 / 3; grid-column: 2 / 3; }
+ footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+ }
+ I'd love to use the most up to date version, but,
+ as stated, textbooks are incredibly expensive
+ and even renting is taxing.-->
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family: Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+ padding: 1em; }
+nav a { text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+
+
+header { background-color: #869dc7;
+ color: #00005D;
+ background-image: url(8.4.light2.jpg);
+ padding: 1em 0 1em 190px;
+ font-size: 130%;
+ min-width: 700px;
+ background-repeat: no-repeat;
+ font-family: "Times New Roman", serif;
+}
+nav { float: left; }
+main { padding: 1em; }
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869dc7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+
+}
+
+
+#wrapper {
+ display: grid;
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 100px auto 50px;
+}
+
+header { grid-row: 1 / 2; grid-column: 1 / 3; }
+nav { grid-row: 2 / 3; grid-column: 1 / 2; }
+main { grid-row: 2 / 3; grid-column: 2 / 3; }
+footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+
+
+</style>
+</head>
+<body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <footer>Copyright © </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg Binary files differnew file mode 100644 index 0000000..ae6551b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg Binary files differnew file mode 100644 index 0000000..cb611ce --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html new file mode 100644 index 0000000..43a27a8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html @@ -0,0 +1,131 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<!--
+ This assignment was completely missing from my book
+ I tried my best to research how to do it via the internet
+ so if this, well, sucks, do bare in mind that's the case.
+
+ these newer textbooks are just too expensive!
+ they cost more than my gas money for my gas guzzling SUV!
+-->
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Arial, sans-serif;
+ margin: 0;
+}
+
+header { background-image: url(8.5.header.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+header {
+ grid-area: header;
+}
+
+nav {
+ grid-area: nav;
+}
+
+main {
+ grid-area: main;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+}
+
+
+#wrapper {
+ display: grid;
+ grid-template:
+ "header header header" 100px
+ "nav main aside" auto
+ "footer footer footer" 50px
+ / 150px 1fr 30%;
+}
+
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+ color: #F7F1E3;
+ font-size: 300%;
+ text-shadow: 10px 10px 10px #000000;
+}
+nav { font-size: 120%; }
+
+nav ul { padding-left: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; }
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+ min-width: 6em;
+ font-size: 110%;
+ text-align: center;
+ background-color: #003C58;
+ margin: .5em;
+ padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+aside { padding: 1em;}
+
+main { padding: 0 1em 1em; }
+
+footer { background-color: #CCCCCC;
+ text-align: center;
+ font-style: italic;
+ padding: 1em; }
+
+
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Casita Sedona</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Rooms</a></li>
+ <li><a href="specials.html">Specials</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Located in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h2>Luxurious Rooms </h2>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms — each is unique and sure to be a high point of your vacation experience.</p>
+ <h2>Hearty Breakfast</h2>
+ <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+ <h2>About Your Hosts</h2>
+ <p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+ </main>
+ <aside>
+ <img src="8.5.scenery.jpg" alt="Owl Clover wildflowers with red rock mountain">
+ <h2>Guided Hikes</h2>
+ <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+ </aside>
+ <footer>Copyright ©
+ </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg Binary files differnew file mode 100644 index 0000000..25eab07 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg Binary files differnew file mode 100644 index 0000000..e703c63 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html new file mode 100644 index 0000000..4155306 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html @@ -0,0 +1,14 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+ <h1>Image Element</h1>
+ <img src="8.12.fallback.jpg"
+ sizes="100vw"
+ srcset="8.12.large.jpg 1200w, 8.12.medium.jpg 800w, 8.12.small.jpg 320w"
+ alt="waterwheel">
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg Binary files differnew file mode 100644 index 0000000..a79996a --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg Binary files differnew file mode 100644 index 0000000..4478ad8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg Binary files differnew file mode 100644 index 0000000..946c71f --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg Binary files differnew file mode 100644 index 0000000..e703c63 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html new file mode 100644 index 0000000..480b464 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html @@ -0,0 +1,18 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+ <!--The student files had a header, adding just in case my book is missing it.-->
+ <h1>Picture element<h1>
+ <!--Opted to try out the webp images here. I'm a big fan of them and wanted to see if they'd work with this set up as well. -->
+ <picture>
+ <source media="(min-width: 1200px)" srcset="8.11.large.webp">
+ <source media="(min-width: 800px)" srcset="8.11.medium.webp">
+ <source media="(min-width: 320px)" srcset="8.11.small.webp">
+ <img src="8.11.fallback.jpg" alt="waterwheel">
+</picture>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg Binary files differnew file mode 100644 index 0000000..a79996a --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp Binary files differnew file mode 100644 index 0000000..ca3bf54 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg Binary files differnew file mode 100644 index 0000000..4478ad8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp Binary files differnew file mode 100644 index 0000000..b90e766 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg Binary files differnew file mode 100644 index 0000000..946c71f --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp Binary files differnew file mode 100644 index 0000000..5051869 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html new file mode 100644 index 0000000..b1e9bd4 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html @@ -0,0 +1,141 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+* { box-sizing: border-box;
+ margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color: #B3C7E6;
+}
+
+header { color: #00005D;
+ background-color: #869DC7;
+ background-image: url(8.8.light.gif);
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ padding: .5em 0 .5em 5.5em;
+}
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 1em;
+}
+aside { text-align: center; }
+
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+ padding-left: 0;
+ border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;
+ text-align: center;
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+ font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+ color: #FEFEFE; }
+
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+ nav li {
+ display: inline-block;
+ width: 7em;
+ padding: 0.5em;
+ border: none;
+ }
+ nav ul {
+ text-align: center;
+ }
+ main {
+ float: left;
+ width: 55%;
+ }
+ aside {
+ margin-left: 55%;
+ }
+ footer {
+ clear: both;
+ }
+
+}
+
+ @media (min-width: 1024px) {
+ nav li {
+ display: block;
+ }
+ nav ul {
+ text-align: left;
+ }
+ nav {
+ float: left;
+ }
+ #wrapper {
+ width: 80%; margin: auto; max-width: 1200px;
+ }
+ body {
+ background-color: #000066; }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li id="page">Home</li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast free-trade coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <aside>
+ <figure>
+ <img src="8.8.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+ </figure>
+ </aside>
+ <footer>
+ Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html new file mode 100644 index 0000000..c0b856b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html @@ -0,0 +1,170 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+* { box-sizing: border-box;
+ margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color: #B3C7E6;
+}
+
+header { color: #00005D;
+ background-color: #869DC7;
+ background-image: url(8.9.light.gif);
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ padding: .5em 0 .5em 5.5em;
+}
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 1em;
+}
+aside { text-align: center; }
+
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+ padding-left: 0;
+ border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;
+ text-align: center;
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+ font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+ color: #FEFEFE; }
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+ nav ul {
+ display: flex; flex-flow: row nowrap;
+ justify-content: space-around;
+ }
+ nav ul li {
+ border-bottom: none;
+ }
+
+ #wrapper {
+ display: grid;
+ grid-template-columns: 55% auto;
+ grid-template-rows: auto auto auto auto;
+ }
+ header {
+ grid-row: 1 / 2;
+ grid-column: 1 / 3;
+ }
+ nav {
+ grid-row: 2 / 3;
+ grid-column: 1 / 3;
+ }
+ main {
+ grid-row: 3 / 4;
+ grid-column: 1 / 2;
+ }
+ aside {
+ grid-row: 3 / 4;
+ grid-column: 2 / 3;
+ }
+ footer {
+ grid-row: 4 / 5;
+ grid-column: 1 / 3;
+ }
+}
+
+ @media (min-width: 1024px) {
+ body {
+ background-color: #000066;
+ }
+ nav ul {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ }
+ #wrapper {
+ width: 80%;
+ margin: auto; max-width: 1200px;
+ display: grid;
+ grid-template-columns: 150px auto auto;
+ grid-template-rows: auto auto auto ;
+ }
+ header {
+ grid-row: 1 / 2; grid-column: 1 / 4;
+ }
+ nav {
+ grid-row: 2 / 3; grid-column: 1 / 2;
+ }
+ main {
+ grid-row: 2 / 3; grid-column: 2 / 3;
+ }
+ aside {
+ grid-row: 2 / 3; grid-column: 3 / 4;
+ }
+ footer {
+ grid-row: 3 / 4; grid-column: 1 / 4;
+ }
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li id="page">Home</li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast free-trade coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <aside>
+ <figure>
+ <img src="8.9.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+ </figure>
+ </aside>
+ <footer>
+ Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg Binary files differnew file mode 100644 index 0000000..cb611ce --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html new file mode 100644 index 0000000..5eb0f22 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html @@ -0,0 +1,132 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Verdana, Arial, sans-serif;
+ margin: 0;
+}
+
+header { background-image: url(8.10.header.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+img { max-width: 100%;
+ height: auto; }
+
+/* Name Grid Areas */
+header { grid-area: h; }
+nav { grid-area: n; }
+main { grid-area: m; }
+aside { grid-area: a; }
+footer { grid-area: f; }
+#wrapper { background-color: #F7F1E3;
+ color: #0B8781;
+ display: grid;
+ grid-template:
+ "h "
+ "n "
+ "m"
+ "f" ; }
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+ color: #F7F1E3;
+ font-size: 300%;
+ text-shadow: 10px 10px 10px #000000;
+ font-size: 300%;
+}
+nav { font-size: 120%; }
+
+nav ul { padding-left: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; }
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+ min-width: 6em;
+ font-size: 110%;
+ text-align: center;
+ background-color: #003C58;
+ margin: .5em;
+ padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+
+aside { display: none; padding: 1em;}
+
+main { padding: 0 1em 1em; }
+
+footer { text-align: center;
+ font-style: italic;
+ padding: 1em; }
+
+@media (min-width: 38em) {
+ #wrapper { grid-template:
+ " h h "
+ " n n "
+ " m a "
+ " f f "
+ / 60% 40% ; }
+ aside { display: block; }
+}
+@media (min-width: 65em) {
+ nav ul { display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap; }
+ #wrapper { grid-template:
+ " h h h"
+ " n m a"
+ " f f f"
+ / 150px 1fr 30%; }
+}
+
+
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Casita Sedona</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Rooms</a></li>
+ <li><a href="specials.html">Specials</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Located in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h2>Luxurious Rooms </h2>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms — each is unique and sure to be a high point of your vacation experience.</p>
+ <h2>Hearty Breakfast</h2>
+ <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+ <h2>About Your Hosts</h2>
+ <p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+ </main>
+ <aside>
+ <img src="8.10.pools.jpg" alt="Pools of water in the rock">
+ <h2>Guided Hikes</h2>
+ <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+ </aside>
+ <footer>Copyright ©
+ </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg Binary files differnew file mode 100644 index 0000000..b738448 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html new file mode 100644 index 0000000..ce51ed7 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.1.index.html @@ -0,0 +1,32 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+ <table border=1>
+ <caption>School History</caption>
+ <tr>
+ <td><b>School Attended</b></td>
+ <td><b>Years</b></td>
+ <td><b>Degree Awarded</b></td>
+ </tr>
+ <tr>
+ <td>Anonymized High School Name</td>
+ <td>2018-2020</td>
+ <td>High School Diploma</td>
+ </tr>
+ <tr>
+ <td>Artkansas Tech University</td>
+ <td>2020-Present</td>
+ <td>In-Progress Bachelors Degree in Information Technology</td>
+ </tr>
+ </table>
+
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html new file mode 100644 index 0000000..98c4b70 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/9.2.index.html @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+<meta charset="utf-8">
+<style>
+
+</style>
+</head>
+<body>
+
+<table border=1>
+ <tr>
+ <td rowspan=3>Cana Island Lighthouse</td>
+ <td>Built: 1869.</td>
+ </tr>
+ <tr>
+ <td>Automated: 1944.</td>
+ </tr>
+ <tr>
+ <td>Tower Height: 65 Feet.</td>
+ </tr>
+</table>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html new file mode 100644 index 0000000..0a11470 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.3.menu.html @@ -0,0 +1,61 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+table {
+ margin: auto;
+ border: 5px solid #000066;
+ width: 600px;
+ border-spacing: 0;
+}
+
+caption {
+ font-family: Verdana, sans-serif;
+ font-weight: bold;
+ font-size: 1.2em;
+ padding-bottom: 5px;
+}
+
+
+td, th {
+ padding: 5px;
+ font-family: Arial, sans-serif;
+ border-style: none;
+}
+
+.altrow {
+ background-color: #eaeaea;
+}
+
+
+ </style>
+ </head>
+ <body>
+ <table>
+ <caption>Lighthouse Island Bistro Specialty Coffee Menu</caption>
+ <tr>
+ <th>Specialty Coffee</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ <tr class=altrow>
+ <td>Lite Latte</td>
+ <td>Indulge in a shot of espresso with steamed, skim milk</td>
+ <td>$3.50</td>
+ </tr>
+ <tr>
+ <td>Mocha Latte</td>
+ <td>Choose dark or milk chocolate with steamed milk</td>
+ <td>$4.00</td>
+ </tr>
+ <tr class=altrow>
+ <td>MCP Latte</td>
+ <td>A luscious mocha latte with caramel and pecan syrup</td>
+ <td>$4.50</td>
+ </tr>
+ </table>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html new file mode 100644 index 0000000..db73610 --- /dev/null +++ b/HTML/Chapter/Ch. 9 hands-on assignments/Ch9_msglm/ch9table/9.4.menu2.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+table {
+ margin: auto;
+ border: 5px solid #000066;
+ width: 600px;
+ border-spacing: 0;
+}
+
+caption {
+ font-family: Verdana, sans-serif;
+ font-weight: bold;
+ font-size: 1.2em;
+ padding-bottom: 5px;
+}
+
+
+td, th {
+ padding: 5px;
+ font-family: Arial, sans-serif;
+ border-style: none;
+}
+
+tr:nth-of-type(even) {
+ background-color: #eaeaea;
+}
+
+tr:first-of-type {
+ background-color: #006;
+ color: #eaeaea;
+}
+
+
+ </style>
+ </head>
+ <body>
+ <table>
+ <caption>Lighthouse Island Bistro Specialty Coffee Menu</caption>
+ <tr>
+ <th>Specialty Coffee</th>
+ <th>Description</th>
+ <th>Price</th>
+ </tr>
+ <tr>
+ <td>Lite Latte</td>
+ <td>Indulge in a shot of espresso with steamed, skim milk</td>
+ <td>$3.50</td>
+ </tr>
+ <tr>
+ <td>Mocha Latte</td>
+ <td>Choose dark or milk chocolate with steamed milk</td>
+ <td>$4.00</td>
+ </tr>
+ <tr>
+ <td>MCP Latte</td>
+ <td>A luscious mocha latte with caramel and pecan syrup</td>
+ <td>$4.50</td>
+ </tr>
+ </table>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html b/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html new file mode 100644 index 0000000..3d1acf5 --- /dev/null +++ b/HTML/Chapter/Chapter 1 - Hands-On Practice 1.1/chapter1/index.html @@ -0,0 +1,19 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>First HTML Webpage</title>
+<meta charset="utf-8">
+</head>
+<body>
+Test
+</body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Final/sneed/about.html b/HTML/Final/sneed/about.html new file mode 100644 index 0000000..6275ef1 --- /dev/null +++ b/HTML/Final/sneed/about.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - About</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>About</h1> + <h2>Contact and Location</h2> + <b>Address: </b> + <p>13203 Cotton Road</p> + <p>Sneed, AR, 20423 </p> + <b>Phone:</b> + <p>501-616-9176</p> + <h2>Developer Information</h2> + <p>Most text that is found on the store page is wrote by a bot using the <a href=https://huggingface.co/gpt2-large>GPT-2 774M "Large"</a> AI model. The model is released under the MIT license.</p> + <p>The reason for generating via a bot rather than hand writing is to save time. I had to have a lot of "items" on display to make the kits and the shop page itself. This was the most efficient way I could find to make the site "complete" without using generic placeholder text or handwriting descriptions.</p> + </main> + <footer> + <p>Copyleft 2022 <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/assets/Iconography/favicon.png b/HTML/Final/sneed/assets/Iconography/favicon.png Binary files differnew file mode 100644 index 0000000..37c7ac9 --- /dev/null +++ b/HTML/Final/sneed/assets/Iconography/favicon.png diff --git a/HTML/Final/sneed/assets/Iconography/hat.png b/HTML/Final/sneed/assets/Iconography/hat.png Binary files differnew file mode 100644 index 0000000..1583fd5 --- /dev/null +++ b/HTML/Final/sneed/assets/Iconography/hat.png diff --git a/HTML/Final/sneed/assets/Iconography/logo-small.png b/HTML/Final/sneed/assets/Iconography/logo-small.png Binary files differnew file mode 100644 index 0000000..9ee8f6b --- /dev/null +++ b/HTML/Final/sneed/assets/Iconography/logo-small.png diff --git a/HTML/Final/sneed/assets/Iconography/logo.png b/HTML/Final/sneed/assets/Iconography/logo.png Binary files differnew file mode 100644 index 0000000..2fd6c23 --- /dev/null +++ b/HTML/Final/sneed/assets/Iconography/logo.png diff --git a/HTML/Final/sneed/assets/Iconography/purchase.png b/HTML/Final/sneed/assets/Iconography/purchase.png Binary files differnew file mode 100644 index 0000000..b554cc2 --- /dev/null +++ b/HTML/Final/sneed/assets/Iconography/purchase.png diff --git a/HTML/Final/sneed/assets/Kits/Appalachian-Culture.jpg b/HTML/Final/sneed/assets/Kits/Appalachian-Culture.jpg Binary files differnew file mode 100644 index 0000000..0382c3f --- /dev/null +++ b/HTML/Final/sneed/assets/Kits/Appalachian-Culture.jpg diff --git a/HTML/Final/sneed/assets/Kits/First-time-Gardeners-Kit.jpg b/HTML/Final/sneed/assets/Kits/First-time-Gardeners-Kit.jpg Binary files differnew file mode 100644 index 0000000..ac594f0 --- /dev/null +++ b/HTML/Final/sneed/assets/Kits/First-time-Gardeners-Kit.jpg diff --git a/HTML/Final/sneed/assets/Kits/The-Hot-Man's-Kit.jpg b/HTML/Final/sneed/assets/Kits/The-Hot-Man's-Kit.jpg Binary files differnew file mode 100644 index 0000000..baefd42 --- /dev/null +++ b/HTML/Final/sneed/assets/Kits/The-Hot-Man's-Kit.jpg diff --git a/HTML/Final/sneed/assets/Plants/Black_Che.jpg b/HTML/Final/sneed/assets/Plants/Black_Che.jpg Binary files differnew file mode 100644 index 0000000..b7f4bb5 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Black_Che.jpg diff --git a/HTML/Final/sneed/assets/Plants/Carolina_Reaper.jpg b/HTML/Final/sneed/assets/Plants/Carolina_Reaper.jpg Binary files differnew file mode 100644 index 0000000..f0de2b2 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Carolina_Reaper.jpg diff --git a/HTML/Final/sneed/assets/Plants/Habanero.jpg b/HTML/Final/sneed/assets/Plants/Habanero.jpg Binary files differnew file mode 100644 index 0000000..fac9d5e --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Habanero.jpg diff --git a/HTML/Final/sneed/assets/Plants/Native_American_tobacco_flower.jpg b/HTML/Final/sneed/assets/Plants/Native_American_tobacco_flower.jpg Binary files differnew file mode 100644 index 0000000..b51325b --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Native_American_tobacco_flower.jpg diff --git a/HTML/Final/sneed/assets/Plants/Oryza_sativa_of_Kadavoor.jpg b/HTML/Final/sneed/assets/Plants/Oryza_sativa_of_Kadavoor.jpg Binary files differnew file mode 100644 index 0000000..b1315f0 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Oryza_sativa_of_Kadavoor.jpg diff --git a/HTML/Final/sneed/assets/Plants/Soybean.USDA.jpg b/HTML/Final/sneed/assets/Plants/Soybean.USDA.jpg Binary files differnew file mode 100644 index 0000000..e28bb9c --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Soybean.USDA.jpg diff --git a/HTML/Final/sneed/assets/Plants/Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg b/HTML/Final/sneed/assets/Plants/Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg Binary files differnew file mode 100644 index 0000000..031b06e --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg diff --git a/HTML/Final/sneed/assets/Plants/Yellow-Squash.jpg b/HTML/Final/sneed/assets/Plants/Yellow-Squash.jpg Binary files differnew file mode 100644 index 0000000..8e7fd2f --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/Yellow-Squash.jpg diff --git a/HTML/Final/sneed/assets/Plants/cubanelle.jpg b/HTML/Final/sneed/assets/Plants/cubanelle.jpg Binary files differnew file mode 100644 index 0000000..15b96b2 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/cubanelle.jpg diff --git a/HTML/Final/sneed/assets/Plants/cucumber.jpg b/HTML/Final/sneed/assets/Plants/cucumber.jpg Binary files differnew file mode 100644 index 0000000..9e309d1 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/cucumber.jpg diff --git a/HTML/Final/sneed/assets/Plants/entries.template b/HTML/Final/sneed/assets/Plants/entries.template new file mode 100644 index 0000000..bec61ee --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/entries.template @@ -0,0 +1 @@ +{"name" : "", "location": "", "image": "", "price": "", "ai": true, "desc": ""} diff --git a/HTML/Final/sneed/assets/Plants/garlic.jpg b/HTML/Final/sneed/assets/Plants/garlic.jpg Binary files differnew file mode 100644 index 0000000..966933d --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/garlic.jpg diff --git a/HTML/Final/sneed/assets/Plants/green-chilies.jpg b/HTML/Final/sneed/assets/Plants/green-chilies.jpg Binary files differnew file mode 100644 index 0000000..530a1d3 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/green-chilies.jpg diff --git a/HTML/Final/sneed/assets/Plants/onion.jpg b/HTML/Final/sneed/assets/Plants/onion.jpg Binary files differnew file mode 100644 index 0000000..618e96d --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/onion.jpg diff --git a/HTML/Final/sneed/assets/Plants/potato.jpg b/HTML/Final/sneed/assets/Plants/potato.jpg Binary files differnew file mode 100644 index 0000000..61d423c --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/potato.jpg diff --git a/HTML/Final/sneed/assets/Plants/red-chili.jpg b/HTML/Final/sneed/assets/Plants/red-chili.jpg Binary files differnew file mode 100644 index 0000000..3d38d69 --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/red-chili.jpg diff --git a/HTML/Final/sneed/assets/Plants/source b/HTML/Final/sneed/assets/Plants/source new file mode 100644 index 0000000..71edc1d --- /dev/null +++ b/HTML/Final/sneed/assets/Plants/source @@ -0,0 +1,17 @@ +https://en.wikipedia.org/wiki/File:Mature_Carolina_Reaper.jpg +https://en.wikipedia.org/wiki/File:CSA-Yellow-Squash.jpg +https://en.wikipedia.org/wiki/File:Cucumber_BNC.jpg +https://en.wikipedia.org/wiki/File:Soybean.USDA.jpg +https://en.wikipedia.org/wiki/File:Oryza_sativa_of_Kadavoor.jpg +https://en.wikipedia.org/wiki/File:Native_American_tobacco_flower.jpg +https://en.wikipedia.org/wiki/File:Habanero_closeup_edit2.jpg +https://en.wikipedia.org/wiki/File:Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg +https://en.wikipedia.org/wiki/File:Black_Che.jpg +https://en.wikipedia.org/wiki/File:ARS_red_onion.jpg +https://en.wikipedia.org/wiki/File:Allium_sativum_003.JPG +https://en.wikipedia.org/wiki/File:Russet_potato_cultivar_with_sprouts.jpg +https://commons.wikimedia.org/wiki/File:Allium_sativum_004.JPG +https://en.wikipedia.org/wiki/File:Shan_Hills,_Myanmar,_Red_chili_pepper_plant.jpg +https://en.wikipedia.org/wiki/File:Cubanelle_Peppers.jpg +https://en.wikipedia.org/wiki/File:Aesthetic_green_Chillies.JPG +https://en.wikipedia.org/wiki/File:Mother_of_vinegar.png diff --git a/HTML/Final/sneed/assets/Tools/Blue_pitchfork.jpg b/HTML/Final/sneed/assets/Tools/Blue_pitchfork.jpg Binary files differnew file mode 100644 index 0000000..13dbe41 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Blue_pitchfork.jpg diff --git a/HTML/Final/sneed/assets/Tools/Copperadze.jpg b/HTML/Final/sneed/assets/Tools/Copperadze.jpg Binary files differnew file mode 100644 index 0000000..36d7e9a --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Copperadze.jpg diff --git a/HTML/Final/sneed/assets/Tools/Cutter_mattock.jpg b/HTML/Final/sneed/assets/Tools/Cutter_mattock.jpg Binary files differnew file mode 100644 index 0000000..34fd4fc --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Cutter_mattock.jpg diff --git a/HTML/Final/sneed/assets/Tools/Hoe.jpg b/HTML/Final/sneed/assets/Tools/Hoe.jpg Binary files differnew file mode 100644 index 0000000..6ef15a0 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Hoe.jpg diff --git a/HTML/Final/sneed/assets/Tools/Pickaxe.jpg b/HTML/Final/sneed/assets/Tools/Pickaxe.jpg Binary files differnew file mode 100644 index 0000000..14e98c6 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Pickaxe.jpg diff --git a/HTML/Final/sneed/assets/Tools/SoilRake.jpg b/HTML/Final/sneed/assets/Tools/SoilRake.jpg Binary files differnew file mode 100644 index 0000000..ee3bf55 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/SoilRake.jpg diff --git a/HTML/Final/sneed/assets/Tools/Spade.jpg b/HTML/Final/sneed/assets/Tools/Spade.jpg Binary files differnew file mode 100644 index 0000000..8a3c75c --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Spade.jpg diff --git a/HTML/Final/sneed/assets/Tools/Thermometer.jpg b/HTML/Final/sneed/assets/Tools/Thermometer.jpg Binary files differnew file mode 100644 index 0000000..052205e --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Thermometer.jpg diff --git a/HTML/Final/sneed/assets/Tools/Trowel.jpg b/HTML/Final/sneed/assets/Tools/Trowel.jpg Binary files differnew file mode 100644 index 0000000..720e729 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Trowel.jpg diff --git a/HTML/Final/sneed/assets/Tools/Weeder.jpg b/HTML/Final/sneed/assets/Tools/Weeder.jpg Binary files differnew file mode 100644 index 0000000..85caa36 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/Weeder.jpg diff --git a/HTML/Final/sneed/assets/Tools/bucket.jpg b/HTML/Final/sneed/assets/Tools/bucket.jpg Binary files differnew file mode 100644 index 0000000..01728d7 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/bucket.jpg diff --git a/HTML/Final/sneed/assets/Tools/copper-coil.jpg b/HTML/Final/sneed/assets/Tools/copper-coil.jpg Binary files differnew file mode 100644 index 0000000..5bf1daa --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/copper-coil.jpg diff --git a/HTML/Final/sneed/assets/Tools/mason.jpg b/HTML/Final/sneed/assets/Tools/mason.jpg Binary files differnew file mode 100644 index 0000000..41ad178 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/mason.jpg diff --git a/HTML/Final/sneed/assets/Tools/mother-of-vinegar.jpg b/HTML/Final/sneed/assets/Tools/mother-of-vinegar.jpg Binary files differnew file mode 100644 index 0000000..8b46d6f --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/mother-of-vinegar.jpg diff --git a/HTML/Final/sneed/assets/Tools/saucepot.jpg b/HTML/Final/sneed/assets/Tools/saucepot.jpg Binary files differnew file mode 100644 index 0000000..059d269 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/saucepot.jpg diff --git a/HTML/Final/sneed/assets/Tools/sources b/HTML/Final/sneed/assets/Tools/sources new file mode 100644 index 0000000..39178d5 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/sources @@ -0,0 +1,16 @@ +https://en.wikipedia.org/wiki/File:Antique_Mason_jars.jpg +https://en.wikipedia.org/wiki/Baker%27s_yeast +https://commons.wikimedia.org/wiki/File:Mini-pelle_verte_-_%C3%A9chelle.jpg +https://commons.wikimedia.org/wiki/File:Blue_pitchfork.jpg +https://en.wikipedia.org/wiki/File:Cooperadze.jpg +https://en.wikipedia.org/wiki/File:Cutter_mattock.jpg +https://en.wikipedia.org/wiki/File:Pickaxe.jpg +https://en.wikipedia.org/wiki/File:SoilRake.jpg +https://en.wikipedia.org/wiki/File:Weeder.jpg +https://en.wikipedia.org/wiki/File:Trowel.JPG +https://en.wikipedia.org/wiki/File:Spade.jpg +https://commons.wikimedia.org/wiki/File:Hoe_2.jpg +https://commons.wikimedia.org/wiki/File:Tesla_coil_-_Primary_coil.jpg +https://en.wikipedia.org/wiki/File:A_metal_bucket.jpg +https://en.wikipedia.org/wiki/File:Thermometers_in_pitcher.jpg +https://en.wikipedia.org/wiki/File:Copper-saucepot.jpg diff --git a/HTML/Final/sneed/assets/Tools/yeast.jpg b/HTML/Final/sneed/assets/Tools/yeast.jpg Binary files differnew file mode 100644 index 0000000..637f286 --- /dev/null +++ b/HTML/Final/sneed/assets/Tools/yeast.jpg diff --git a/HTML/Final/sneed/assets/kit-pics.sh b/HTML/Final/sneed/assets/kit-pics.sh new file mode 100644 index 0000000..fdb5331 --- /dev/null +++ b/HTML/Final/sneed/assets/kit-pics.sh @@ -0,0 +1,5 @@ +montage Tools/yeast.jpg Tools/mason.jpg Plants/potato.jpg Tools/saucepot.jpg Tools/Thermometer.jpg Tools/bucket.jpg Tools/copper-coil.jpg -geometry 640x480+0+0 -tile 3x3 "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Kits/Appalachian-Culture.jpg" + +montage Plants/Habanero.jpg Plants/Carolina_Reaper.jpg Plants/red-chili.jpg Plants/cubanelle.jpg Tools/mother-of-vinegar.png -geometry 640x480+0+0 -tile 3x2 "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Kits/The-Hot-Man's-Kit.jpg" + +montage "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Plants/Yellow-Squash.jpg" "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Plants/cucumber.jpg" "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Plants/garlic.jpg" "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Plants/potato.jpg" "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Plants/onion.jpg" '/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Tools/Hoe.jpg' '/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Tools/SoilRake.jpg' '/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Tools/Trowel.jpg' -geometry 640x480+0+0 "/home/msglm/Documents/SchoolStuff/Classes/Web Publishing I - COMS 1333/Assignments/Final/assets/Kits/First-time-Gardeners-Kit.jpg" diff --git a/HTML/Final/sneed/index.html b/HTML/Final/sneed/index.html new file mode 100644 index 0000000..8a7f790 --- /dev/null +++ b/HTML/Final/sneed/index.html @@ -0,0 +1,190 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Home</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>Welcome to Sneed's Feed and Seed!</h1> + <p>Here, you will find the best seeds, feed, and tools for your garden or farm. Everyone of all experience levels is invited to purchase our All-American tools, non-GMO seeds, or our low priced kits. All tools come with a 3 year warranty and you are free to return them if you are dissatisfied.</p> + <h1>Latest Bundles</h1> + <h3>First-time Gardeners Kit - <a href=purchase/First-time-Gardeners-Kit.html>Purchase</a></h3> + <p>For those new to the gardening scene and wish to have a simple first year while they learn the ropes. Comes with high yield, low maintenance plants such as squash, cucumbers, potatoes, and onions. Tools for planting also come with the kit.</p> + <div class=shop-box> + <a href=purchase/Yellow-Squash-Seeds.html> + <figure> + <img alt="An image of Yellow Squash" src=assets/Plants/Yellow-Squash.jpg> + <figcaption>Squash Seeds</figcaption> + </figure> + </a> + + <a href=purchase/Cucumbers-Seeds.html> + <figure> + <img alt="An image of A Cucumber" src=assets/Plants/cucumber.jpg> + <figcaption>Cucumber Seeds</figcaption> + </figure> + </a> + + <a href=purchase/Garlic-Cloves.html> + <figure> + <img alt="An image of Garlic" src=assets/Plants/garlic.jpg> + <figcaption>Garlic Cloves</figcaption> + </figure> + </a> + + <a href=purchase/Potato-Tubers.html> + <figure> + <img alt="An image of Potatos" src=assets/Plants/potato.jpg> + <figcaption>Potato Tubers</figcaption> + </figure> + </a> + + <a href=purchase/Red-Onions-Seeds.html> + <figure> + <img alt="An image of Red Onions" src=assets/Plants/onion.jpg> + <figcaption>Onion Cloves</figcaption> + </figure> + </a> + + <a href=purchase/Hoe.html> + <figure> + <img alt="An image of A hoe" src=assets/Tools/Hoe.jpg> + <figcaption>Hoe</figcaption> + </figure> + </a> + + <a href=purchase/Soil-Rake.html> + <figure> + <img alt="An image of A soil rake" src=assets/Tools/SoilRake.jpg> + <figcaption>Soil Rake</figcaption> + </figure> + </a> + + <a href=purchase/Trowel.html> + <figure> + <img alt="An image of a Trowl" src=assets/Tools/Trowel.jpg> + <figcaption>Trowel</figcaption> + </figure> + </a> + </div> + <h3>The Hot Man's Kit - <a href=purchase/The-Hot-Mans-Kit.html>Purchase</a></h3> + <p>A kit for those interested in pepper growing and sauce making. This bundle comes with four different types of hot pepper and the "Mother of Vinegar", an industrial grade solution designed to quickly make vinegar out of any sugars.</p> + <div class=shop-box> + <a href=purchase/Habanero-Pepper-Seeds.html> + <figure> + <img alt="An image of a Habanero pepper" src=assets/Plants/Habanero.jpg> + <figcaption>Habanero Seeds</figcaption> + </figure> + </a> + + <a href=purchase/Carolina-Reapers-Seeds.html> + <figure> + <img alt="An image of a Carolina Reaper" src=assets/Plants/Carolina_Reaper.jpg> + <figcaption>Carolina Reaper</figcaption> + </figure> + </a> + + <a href=purchase/Red-Chilies-Seeds.html> + <figure> + <img alt="An image of a Red chilie" src=assets/Plants/red-chili.jpg> + <figcaption>Red Chili Seeds</figcaption> + </figure> + </a> + + <a href=purchase/Cubanelle-Pepper-Seeds.html> + <figure> + <img alt="An image of Cubanelles" src=assets/Plants/cubanelle.jpg> + <figcaption>Cubanelle</figcaption> + </figure> + </a> + + <a href=purchase/The-Mother-of-Vinegar.html> + <figure> + <img alt="An image of the mother of vinegar" src=assets/Tools/mother-of-vinegar.jpg> + <figcaption><i>"Mother of Vinegar"</i></figcaption> + </figure> + </a> + + </div> + <h3>Appalachian Culture - <a href=purchase/Appalachian-Culture.html>Purchase</a></h3> + <p>A bundle for the celebration of Appalachian culture. All items here are popularly owned by those from the Appalachian region, mostly carrying over from the Scots-Irish immigration. 100% of profits go directly to political alcohol deregulation organizations.</p> + <div class=shop-box> + <a href=purchase/Baking-Yeast.html> + <figure> + <img alt="An image of a yeast culture" src=assets/Tools/yeast.jpg> + <figcaption>Culinary Yeast Culture</figcaption> + </figure> + </a> + + <a href=purchase/Mason-Jars.html> + <figure> + <img alt="An image of mason jars" src=assets/Tools/mason.jpg> + <figcaption>Mason Jars</figcaption> + </figure> + </a> + + <a href=purchase/Potato-Tubers.html> + <figure> + <img alt="An image of potato tubers" src=assets/Plants/potato.jpg> + <figcaption>Potato Tubers</figcaption> + </figure> + </a> + + <a href=purchase/Copper-Saucepot.html> + <figure> + <img alt="An image of a copper saucepot" src=assets/Tools/saucepot.jpg> + <figcaption>Copper Saucepot</figcaption> + </figure> + </a> + + <a href=purchase/Thermometer.html> + <figure> + <img alt="An image of a thermometer" src=assets/Tools/Thermometer.jpg> + <figcaption>Saucepot Thermometer</figcaption> + </figure> + </a> + + <a href=purchase/Bucket.html> + <figure> + <img alt="An image of a bucket" src=assets/Tools/bucket.jpg> + <figcaption>Steel Bucket</figcaption> + </figure> + </a> + + <a href=purchase/Copper-Coil.html> + <figure> + <img alt="An image of a copper coil" src=assets/Tools/copper-coil.jpg> + <figcaption>Copper Coil</figcaption> + </figure> + </a> + </div> + + </main> + <footer> + <p>Copyleft 2022 <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/legal.html b/HTML/Final/sneed/legal.html new file mode 100644 index 0000000..96578fb --- /dev/null +++ b/HTML/Final/sneed/legal.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Legal</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>Legal</h1> + <p>This site is under the <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a> and uses other free content from Wikimedia Commons. All content is under a <a href=https://creativecommons.org/share-your-work/public-domain/freeworks>Free Culture</a> license. Any content not mentioned in the "Works Used" section is likely originating from the site's author and therefore is governed by the CC-BY-SA 4.0.</p> + <h2>Works Used</h2> + <p><a href=https://en.wikipedia.org/wiki/File:Mature_Carolina_Reaper.jpg>Photo of a Carolina Reaper plant</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:CSA-Yellow-Squash.jpg>Photo of a Yellow Squash plant</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Cucumber_BNC.jpg>Photo of a Cucumber </a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Soybean.USDA.jpg>Photo of a Soybean</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Oryza_sativa_of_Kadavoor.jpg>Photo of Asian Rice </a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Native_American_tobacco_flower.jpg>Photo of a Tobacco Flower</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Habanero_closeup_edit2.jpg>Photo of a Habanero pepper</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg>Photo of a Taiwanese Watermelon</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Black_Che.jpg>Photo of a Black Cherry Tree</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:ARS_red_onion.jpg>Photo of a Red Onion</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Allium_sativum_003.JPG>Photo of a Garlic Plant</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Russet_potato_cultivar_with_sprouts.jpg>Photo of a Potato Tuber</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Shan_Hills,_Myanmar,_Red_chili_pepper_plant.jpg>Photo of Red Chilis</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Cubanelle_Peppers.jpg>Photo of Cubanelle Peppers</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Aesthetic_green_Chillies.JPG>Photo of a Green Chilis</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Mother_of_vinegar.png>Photo of a Mother of Vinegar </a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Antique_Mason_jars.jpg>Photo of Mason Jars</a></p> + <p><a href=https://en.wikipedia.org/wiki/Baker%27s_yeast>Photo of a Yeast Colony </a></p> + <p><a href=https://commons.wikimedia.org/wiki/File:Mini-pelle_verte_-_%C3%A9chelle.jpg>Photo of a hand shovel</a></p> + <p><a href=https://commons.wikimedia.org/wiki/File:Blue_pitchfork.jpg>Photo of a Pitchfork</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Cooperadze.jpg>Photo of a Copper Adze</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Cutter_mattock.jpg>Photo of a Mattock</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Pickaxe.jpg>Photo of a Pickaxe</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:SoilRake.jpg>Photo of a Soil Rake</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Weeder.jpg>Photo of a Weeder</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Trowel.JPG>Photo of a Trowel</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Spade.jpg>Photo of a Spade</a></p> + <p><a href=https://commons.wikimedia.org/wiki/File:Hoe_2.jpg>Photo of a Gardening Hoe</a></p> + <p><a href=https://commons.wikimedia.org/wiki/File:Tesla_coil_-_Primary_coil.jpg>Photo of a Copper Coil</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:A_metal_bucket.jpg>Photo of a Metal Bucket</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Thermometers_in_pitcher.jpg>Photo of a Thermometer</a></p> + <p><a href=https://en.wikipedia.org/wiki/File:Copper-saucepot.jpg>Photo of a Copper Saucepot</a></p> + + </main> + <footer> + <p>Copyleft 2022 <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase-form.html b/HTML/Final/sneed/purchase-form.html new file mode 100644 index 0000000..0cdb2bf --- /dev/null +++ b/HTML/Final/sneed/purchase-form.html @@ -0,0 +1,125 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Purchase</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>Purchase Form</h1> + <p>All fields are required.</p> + + <form action="https://webdevbasics.net/scripts/demo.php" method="post"> + <label for="name">Enter your name: </label> + <input type="text" name="name" id="name" required> + <label for="email">Enter your email: </label> + <input type="email" name="email" id="email" required> + <label for="product">Enter the name of the product you wish to purchase: </label> + <input list="productlist" name="product" id="product" required> + <datalist id="productlist"> + <!--Items--> +<option value="Mason Jars"></option> + +<option value="Mattock"></option> + +<option value="Copper Adze"></option> + +<option value="Bucket"></option> + +<option value="Soil Rake"></option> + +<option value="Weeding Shovel"></option> + +<option value="Hoe"></option> + +<option value="Thermometer"></option> + +<option value="Spade"></option> + +<option value="Copper Saucepot"></option> + +<option value="Copper Coil"></option> + +<option value="Trowel"></option> + +<option value="The Mother of Vinegar"></option> + +<option value="Baking Yeast"></option> + +<option value="Pitchfork"></option> + +<option value="Pickaxe"></option> + +<option value="Red Onions Seeds"></option> + +<option value="Carolina Reapers Seeds"></option> + +<option value="Cucumbers Seeds"></option> + +<option value="Red Chilies Seeds"></option> + +<option value="Green Chilies Seeds"></option> + +<option value="Black Cherry Seeds"></option> + +<option value="Soybeans Seeds"></option> + +<option value="Rice Seeds"></option> + +<option value="Tobacco Seeds"></option> + +<option value="Taiwanese Watermelon Seeds"></option> + +<option value="Potato Tubers"></option> + +<option value="Garlic Cloves"></option> + +<option value="Habanero Pepper Seeds"></option> + +<option value="Cubanelle Pepper Seeds"></option> + +<option value="Yellow Squash Seeds"></option> + +<option value="Appalachian Culture"></option> + +<option value="The Hot Man's Kit"></option> + +<option value="First-time Gardeners Kit"></option> + + </datalist> + <label for="reserved">Enter the quantity of the product: </label> + <input type="number" name="reserved" id="reserved" required> + <label for="date">Enter when you will pick your goods up:</label> + <input type="date" name="date" id="date" required> + <input type="submit" value="Place Order"> + </form> + + </main> + <footer> + <p>Copyleft 2022 <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase-form.html.orig b/HTML/Final/sneed/purchase-form.html.orig new file mode 100644 index 0000000..7456612 --- /dev/null +++ b/HTML/Final/sneed/purchase-form.html.orig @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Purchase</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>Purchase Form</h1> + <p>All fields are required.</p> + + <form action="https://webdevbasics.net/scripts/demo.php" method="post"> + <label for="name">Enter your name: </label> + <input type="text" name="name" id="name" required> + <label for="email">Enter your email: </label> + <input type="email" name="email" id="email" required> + <label for="product">Enter the name of the product you wish to purchase: </label> + <input list="productlist" name="product" id="product" required> + <datalist id="productlist"> + <!--Items--> + </datalist> + <label for="reserved">Enter the quantity of the product: </label> + <input type="number" name="reserved" id="reserved" required> + <label for="date">Enter when you will pick your goods up:</label> + <input type="date" name="date" id="date" required> + <input type="submit" value="Place Order"> + </form> + + </main> + <footer> + <p>Copyleft 2022 <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Appalachian-Culture.html b/HTML/Final/sneed/purchase/Appalachian-Culture.html new file mode 100644 index 0000000..4805990 --- /dev/null +++ b/HTML/Final/sneed/purchase/Appalachian-Culture.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Appalachian Culture</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Kits/Appalachian-Culture.jpg> + </div> + <div id=purchase-desc> + <h1>Appalachian Culture</h1> + <a href=../purchase-form.html> + <img alt="A photo of Appalachian Culture" src="../assets/Iconography/purchase.png"> + </a> + <h3>$50</h3> + <p>A bundle for the celebration of Appalachian culture. All items here are popularly owned by those from the Appalachian region, mostly carrying over from the Scots-Irish immigration. 100% of profits go directly to political alcohol deregulation organizations.</p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Baking-Yeast.html b/HTML/Final/sneed/purchase/Baking-Yeast.html new file mode 100644 index 0000000..8e21a90 --- /dev/null +++ b/HTML/Final/sneed/purchase/Baking-Yeast.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Baking Yeast</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/yeast.jpg> + </div> + <div id=purchase-desc> + <h1>Baking Yeast</h1> + <a href=../purchase-form.html> + <img alt="A photo of Baking Yeast" src="../assets/Iconography/purchase.png"> + </a> + <h3>$3</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Baker's yeast is commonly used for brewing wine, making beer and beer-like products such as breads. + +The yeast used in Baker's yeast is commonly used for brewing wine, making beer and beer-like products such as breads. Pilsner Urquell + +Pilsner Urquell is a pale ale with a light yellow and amber color. It is dry, clean and crisp, with a slight carbonation. It is a classic German beer style. + +Pilsner Urquell is a pale ale with a light yellow and amber color. It is dry, clean and crisp, with a slight carbonation. It is a classic German beer style. Pilsner Urquell is also known as "bock" or "pilsner". + +Pilsner Urquell is a pale ale with a light yellow and amber color. It is dry, clean and crisp, with a slight carbonation. It is a classic German</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Black-Cherry-Seeds.html b/HTML/Final/sneed/purchase/Black-Cherry-Seeds.html new file mode 100644 index 0000000..899b21c --- /dev/null +++ b/HTML/Final/sneed/purchase/Black-Cherry-Seeds.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Black Cherry Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Black_Che.jpg> + </div> + <div id=purchase-desc> + <h1>Black Cherry Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Black Cherry Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Black Cherries are known to have a very pleasant flavor, and I find it to be the perfect balance of sweetness and tartness. + +You can see below the finished product after the fruit is added to my mixture. + +The result was a very unique and delicious flavor. + +These cherries are extremely versatile. They can be used in any kind of pies, brownies, and even on their own as a fruit topping. They can also be used in the baking of cakes, cookies, or in other fruit-based desserts. + +I have also included a picture of what they look like when you cut them in half. + +You can also see the result in the picture below. + +I would love to hear your feedback on this product and if you have any questions. If you are interested in ordering the fruit, please fill in the form below. + +Enjoy! + +-Michele + +(Visited 49 times, 1 visits today)</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Bucket.html b/HTML/Final/sneed/purchase/Bucket.html new file mode 100644 index 0000000..b2d4320 --- /dev/null +++ b/HTML/Final/sneed/purchase/Bucket.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Bucket</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/bucket.jpg> + </div> + <div id=purchase-desc> + <h1>Bucket</h1> + <a href=../purchase-form.html> + <img alt="A photo of Bucket" src="../assets/Iconography/purchase.png"> + </a> + <h3>$7</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>An iron bucket, commonly used for urns, is placed over the lid, and in the bottom of the bucket a hole is made for the draught. The draught is passed through a small hole in the lid, and then through holes in the wooden frame of the urn. The contents of the bucket are then placed into the hole in the lid, and in the bottom of the bucket a circular hole is made, through which the draught passes. This hole is covered with a wooden lid, which is then sealed, and the urn is sealed. The shape of the lid is chosen according to the shape of the urn, so that it is possible to put the urn in the top of the bucket, and to have all the contents of the bucket above the top hole in the lid. + +The method of sealing an urn is not easy. It is to be observed that the lid must be closed so that it is not possible to see the contents of</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Carolina-Reapers-Seeds.html b/HTML/Final/sneed/purchase/Carolina-Reapers-Seeds.html new file mode 100644 index 0000000..4a1a9e2 --- /dev/null +++ b/HTML/Final/sneed/purchase/Carolina-Reapers-Seeds.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Carolina Reapers Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Carolina_Reaper.jpg> + </div> + <div id=purchase-desc> + <h1>Carolina Reapers Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Carolina Reapers Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Carolina Reapers are a type of hot pepper that are similar to the Carolina Reaper, but are generally smaller and more rounded in shape. They are found primarily in the southern United States and Canada. + +Carolina Reaper Hot Pepper Facts + +The Carolina Reaper is the only pepper that is known to have the ability to grow to a maximum size of 3.5 inches, and the maximum size available to the plant. The Carolina Reaper pepper plants can grow to up to 10 feet tall and can grow up to eight feet in diameter. The Carolina Reaper is also the only pepper that is capable of growing to a height of six feet. + +The Carolina Reaper pepper is native to southern South Carolina and has been cultivated for millennia. It is currently grown worldwide as a source of spice, seasoning and culinary ingredients. + +The Carolina Reaper peppers have been used to make a variety of foods as well as many traditional medicines. The Carolina Reaper pepper has been used in traditional medicine for centuries as well.</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Copper-Adze.html b/HTML/Final/sneed/purchase/Copper-Adze.html new file mode 100644 index 0000000..9b20e04 --- /dev/null +++ b/HTML/Final/sneed/purchase/Copper-Adze.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Copper Adze</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Copperadze.jpg> + </div> + <div id=purchase-desc> + <h1>Copper Adze</h1> + <a href=../purchase-form.html> + <img alt="A photo of Copper Adze" src="../assets/Iconography/purchase.png"> + </a> + <h3>$20</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A Copper Adze, commonly used for the reduction of swelling. + +How do you get rid of the old stuff? Well, you don't. There's no replacement in the world for it. Just keep drinking and eating more. + +This, my friends, is how the world goes. + +I mean, it is not like you can say 'oh well, they'll get rid of it eventually.' No, you just keep drinking and eating and you'll just keep getting it. + +I mean, if you were to go to jail for drinking too much or smoking too much or something and you're going to spend the rest of your life in jail for that, then I'd be more than happy to tell you to go home and get a life. + +So, I have to say, I'm glad that I'm not going to jail, I mean I have a job. + +Oh, I'm not going to jail. + +No, but</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Copper-Coil.html b/HTML/Final/sneed/purchase/Copper-Coil.html new file mode 100644 index 0000000..a4aa75e --- /dev/null +++ b/HTML/Final/sneed/purchase/Copper-Coil.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Copper Coil</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/copper-coil.jpg> + </div> + <div id=purchase-desc> + <h1>Copper Coil</h1> + <a href=../purchase-form.html> + <img alt="A photo of Copper Coil" src="../assets/Iconography/purchase.png"> + </a> + <h3>$16</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Copper Coil is commonly used for vernier d'air, though it is also used for high-volume applications. + + +The standard resistance is about 1.2KΩ. + +The maximum current is about 5A and the minimum current is about 0.3A. + +The output impedance is 30Ω. + +The maximum current is about 5A and the minimum current is about 0.3A. The output impedance is 30Ω. The maximum current is about 5A and the minimum current is about 0.3A. + +This unit can be used for more than 1A, but the higher the current, the more resistance you will need. + + +The output is not regulated. + +This unit is not a regulated output. This unit is not a regulated output. + + +The output can be powered by 4-6V AC or by DC. + +The output can be powered by 4-6V AC or by DC</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Copper-Saucepot.html b/HTML/Final/sneed/purchase/Copper-Saucepot.html new file mode 100644 index 0000000..0ac2703 --- /dev/null +++ b/HTML/Final/sneed/purchase/Copper-Saucepot.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Copper Saucepot</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/saucepot.jpg> + </div> + <div id=purchase-desc> + <h1>Copper Saucepot</h1> + <a href=../purchase-form.html> + <img alt="A photo of Copper Saucepot" src="../assets/Iconography/purchase.png"> + </a> + <h3>$13</h3> + <p>Copper Saucepot</p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Cubanelle-Pepper-Seeds.html b/HTML/Final/sneed/purchase/Cubanelle-Pepper-Seeds.html new file mode 100644 index 0000000..01db79c --- /dev/null +++ b/HTML/Final/sneed/purchase/Cubanelle-Pepper-Seeds.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Cubanelle Pepper Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/cubanelle.jpg> + </div> + <div id=purchase-desc> + <h1>Cubanelle Pepper Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Cubanelle Pepper Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$5</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Cubanelle Peppers are a type red, hot pepper that comes from the genus Capsicum. They are the most common red pepper in the world, and in the United States, they are found in the following varieties: + +Capsicum annuum - Capsicum annuum is the most popular variety. It's the most popular red pepper in the world. It is the hot pepper that is used for cooking and baking, and is the most commonly grown variety. However, it is also found in a few other hot pepper varieties. + +Capsicum annuum is the most popular variety. It's the most popular red pepper in the world. It is the hot pepper that is used for cooking and baking, and is the most commonly grown variety. However, it is also found in a few other hot pepper varieties. Capsicum annuum var. carne - Capsicum annuum var. carne is the most popular hot pepper in the world, and is often grown in</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Cucumbers-Seeds.html b/HTML/Final/sneed/purchase/Cucumbers-Seeds.html new file mode 100644 index 0000000..451a76e --- /dev/null +++ b/HTML/Final/sneed/purchase/Cucumbers-Seeds.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Cucumbers Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/cucumber.jpg> + </div> + <div id=purchase-desc> + <h1>Cucumbers Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Cucumbers Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Cucumbers are a pretty common food in China. In particular, cucumbers are very popular with the Chinese for their very low calorific value. The Chinese are known to eat cucumbers raw in their winter, especially during the summer months. + +What is the Calorie Content of Chinese Cucumbers? + +Cucumbers have a fairly low calorific value. The calorific value of the average Chinese cucumber is about 5 calories. This is higher than most fruits and vegetables. However, Chinese cucumbers are also a good source of fiber, which is very important for the prevention of heart disease. + +How to Eat Chinese Cucumbers + +The most common way to eat Chinese cucumbers is to prepare them as an appetizer or main dish. You can also eat cucumbers raw and add them to your soup and rice. + +In addition, you can eat Chinese cucumbers as a snack by wrapping them in foil or putting them in a small</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/First-time-Gardeners-Kit.html b/HTML/Final/sneed/purchase/First-time-Gardeners-Kit.html new file mode 100644 index 0000000..ab72fe2 --- /dev/null +++ b/HTML/Final/sneed/purchase/First-time-Gardeners-Kit.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - First-time Gardeners Kit</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Kits/First-time-Gardeners-Kit.jpg> + </div> + <div id=purchase-desc> + <h1>First-time Gardeners Kit</h1> + <a href=../purchase-form.html> + <img alt="A photo of First-time Gardeners Kit" src="../assets/Iconography/purchase.png"> + </a> + <h3>$48</h3> + <p>For those new to the gardening scene and wish to have a simple first year while they learn the ropes. Comes with high yield, low maintainance plants such as squash, cucumbers, potatos, and onions. Tools for planting also come with the kit.</p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Garlic-Cloves.html b/HTML/Final/sneed/purchase/Garlic-Cloves.html new file mode 100644 index 0000000..70ee446 --- /dev/null +++ b/HTML/Final/sneed/purchase/Garlic-Cloves.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Garlic Cloves</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/garlic.jpg> + </div> + <div id=purchase-desc> + <h1>Garlic Cloves</h1> + <a href=../purchase-form.html> + <img alt="A photo of Garlic Cloves" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Garlic is a type of bulb plant that is also known as bulb bulb bulb, bulb bulb weed, bulb bulb herb, bulb bulb root, bulb bulb weed, bulb bulb herb, bulb bulb root, bulb bulb weed, bulb bulb herb, bulb bulb root, bulb bulb weed, bulb bulb herb, bulb bulb root, bulb bulb weed, bulb bulb herb, bulb root, bulb bulb weed, bulb bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb, bulb root, bulb weed, bulb herb</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Green-Chilies-Seeds.html b/HTML/Final/sneed/purchase/Green-Chilies-Seeds.html new file mode 100644 index 0000000..240ccd9 --- /dev/null +++ b/HTML/Final/sneed/purchase/Green-Chilies-Seeds.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Green Chilies Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/green-chilies.jpg> + </div> + <div id=purchase-desc> + <h1>Green Chilies Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Green Chilies Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Green Chilies are a good source of Vitamin C, Vitamin A, Vitamin E, and Vitamin C. + +A healthy diet should include the following: + +2 to 3 servings of fruits and vegetables per day + +1 to 2 servings of vegetables per day + +50 to 60 servings of whole grains per day + +A healthy diet should include the following: + +2 to 3 servings of fruits and vegetables per day + +1 to 2 servings of vegetables per day + +60 to 80 ounces of whole milk, 1 cup of whole-wheat yogurt, or 1 cup of unsweetened almond milk per day + +A healthy diet should include the following: + +2 to 3 servings of fruits and vegetables per day + +1 to 2 servings of vegetables per day + +50 to 60 ounces of whole milk, 1 cup of whole-wheat yogurt, or 1 cup of unsweetened almond milk per day + +A healthy diet should include the following:</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Habanero-Pepper-Seeds.html b/HTML/Final/sneed/purchase/Habanero-Pepper-Seeds.html new file mode 100644 index 0000000..95385ce --- /dev/null +++ b/HTML/Final/sneed/purchase/Habanero-Pepper-Seeds.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Habanero Pepper Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Habanero.jpg> + </div> + <div id=purchase-desc> + <h1>Habanero Pepper Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Habanero Pepper Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$5</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Habanero Peppers are an orange hot peppter that uses a full spectrum of peppers to make it a spicy, unique, and delicious food. + +We've put together a list of the best peppers for this recipe, and you can find more great peppers in our Pepper Recipes section. + +Hot Peppers for this Recipe: + +This recipe is an easy one to make, so let's get to it! + +Peppers are a wonderful part of any meal, and can be a health food or even a healthy side dish. Peppers are easy to grow and can be purchased in bulk, so you can grow your own. + +Peppers are delicious, but it's easy to forget that you're really eating a pepper. + +This is a great recipe to make at home, because it's quick to make, and it's healthy! You'll get a little burn, but I'd say it's worth it. + +There are plenty of peppers for</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Hoe.html b/HTML/Final/sneed/purchase/Hoe.html new file mode 100644 index 0000000..2a7551e --- /dev/null +++ b/HTML/Final/sneed/purchase/Hoe.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Hoe</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Hoe.jpg> + </div> + <div id=purchase-desc> + <h1>Hoe</h1> + <a href=../purchase-form.html> + <img alt="A photo of Hoe" src="../assets/Iconography/purchase.png"> + </a> + <h3>$15</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A farming hoe is a tool used for stacking up fruit for the next harvest. It is generally used in the form of a wooden handle, a pair of tongs, a pick and a shovel. A farming hoe is a tool used for stacking up fruit for the next harvest. It is generally used in the form of a wooden handle, a pair of tongs, a pick and a shovel. A farming hoe is a tool used for stacking up fruit for the next harvest. It is generally used in the form of a wooden handle, a pair of tongs, a pick and a shovel. A farming hoe is a tool used for stacking up fruit for the next harvest. It is generally used in the form of a wooden handle, a pair of tongs, a pick and a shovel. A </span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Mason-Jars.html b/HTML/Final/sneed/purchase/Mason-Jars.html new file mode 100644 index 0000000..d563e63 --- /dev/null +++ b/HTML/Final/sneed/purchase/Mason-Jars.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Mason Jars</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/mason.jpg> + </div> + <div id=purchase-desc> + <h1>Mason Jars</h1> + <a href=../purchase-form.html> + <img alt="A photo of Mason Jars" src="../assets/Iconography/purchase.png"> + </a> + <h3>$6</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A common mason jar, usually used for the glass jars used in the kitchen, is made from a wood or plastic casing, wrapped in a sheet of wood or plastic. Glass jars are typically made from a metal or plastic casing. Some glass jars are made from a cloth casing. + +The mason jar is used for storing and preserving food ingredients. A mason jar is commonly used for storing ingredients for home or commercial products by itself. + +The use of Mason Jars in home or commercial kitchens may be limited by the need for a special container to hold the ingredients. You may need to purchase jars that are suitable for your kitchen layout. + +Mason jars are often used as mason jars for the following reasons: + +Cooking + +Vacuuming + +Making mason jars for the following: + +Cleaning + +Cleaning and sterilization + +Cleaning + +Shopping + +Cleaning + +Vacuuming</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Mattock.html b/HTML/Final/sneed/purchase/Mattock.html new file mode 100644 index 0000000..7a5266b --- /dev/null +++ b/HTML/Final/sneed/purchase/Mattock.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Mattock</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Cutter_mattock.jpg> + </div> + <div id=purchase-desc> + <h1>Mattock</h1> + <a href=../purchase-form.html> + <img alt="A photo of Mattock" src="../assets/Iconography/purchase.png"> + </a> + <h3>$25</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Mattocks are tools used for making a variety of jewelry, such as bracelets, necklaces, earrings, earrings, earrings, earrings, rings, earrings, earrings, rings, earrings, rings, earrings, ring, rings, earrings, rings, rings, rings, earrings, rings, rings, earrings, rings, rings, earrings, rings, earrings, rings, earrings, rings, rings, earrings, rings, rings, earrings, rings, earrings, rings, earrings, rings, earrings, rings, earrings, rings, earrings, rings, earrings, rings, earrings, rings, earrings, rings, rings, rings, earrings, rings, rings, earrings, rings, rings, ring, rings, rings, earrings, rings, rings, earrings, rings, rings, earrings, rings, rings, earrings, rings, rings, ear</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Pickaxe.html b/HTML/Final/sneed/purchase/Pickaxe.html new file mode 100644 index 0000000..c7f9f63 --- /dev/null +++ b/HTML/Final/sneed/purchase/Pickaxe.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Pickaxe</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Pickaxe.jpg> + </div> + <div id=purchase-desc> + <h1>Pickaxe</h1> + <a href=../purchase-form.html> + <img alt="A photo of Pickaxe" src="../assets/Iconography/purchase.png"> + </a> + <h3>$20</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>In gardening, a Pickaxe is used for cutting a plant down to the proper size. A Pickaxe is the most common tool used in the game, and is also used in crafting. + +Pickaxes are found in the game in the following locations: + +Crafting Edit + +Pickaxes can be crafted by using a Pickaxe and a Hammer. + +For the crafting recipe, see: + +Usage Edit + +Pickaxes are used to cut down trees, bushes, and smaller plants. They are the only tool used to chop down trees and bushes. + +An axe used to cut down a tree. + +A pickaxe used to chop down a bush. + +A pickaxe used to chop down a bush. + +Used to chop down a tree. + +Used to chop down a bush. + +Used to chop down a bush. + +Used to chop down a tree. + +A pickaxe used to chop down a</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Pitchfork.html b/HTML/Final/sneed/purchase/Pitchfork.html new file mode 100644 index 0000000..91fc8cf --- /dev/null +++ b/HTML/Final/sneed/purchase/Pitchfork.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Pitchfork</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Blue_pitchfork.jpg> + </div> + <div id=purchase-desc> + <h1>Pitchfork</h1> + <a href=../purchase-form.html> + <img alt="A photo of Pitchfork" src="../assets/Iconography/purchase.png"> + </a> + <h3>$10</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A pitchfork is used for digging in the mud and for extracting buried treasures. It is used as a source of food, protection, and as a weapon of war. + +In the Bible, the word for pitchfork is "pipes" ( Genesis 6:14 ) and the word for the "pitch" itself is "pipes" ( Exodus 7:2 ). + +The Bible uses the word "pitchfork" for digging in the ground. + +In the Bible, the word for pitchfork is "pipes" ( Exodus 7:2 ) and the word for the "pitch" itself is "pipes" (. Genesis 6:14 ). + +The word for pitchfork is "pipes" ( Exodus 7:2 ). + +The Bible uses the word for pitchfork for digging in the ground. + +In the Bible, the word for pitchfork is "pipes" ( Exodus 7:2 ) and the word for the</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Potato-Tubers.html b/HTML/Final/sneed/purchase/Potato-Tubers.html new file mode 100644 index 0000000..88b6b1e --- /dev/null +++ b/HTML/Final/sneed/purchase/Potato-Tubers.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Potato Tubers</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/potato.jpg> + </div> + <div id=purchase-desc> + <h1>Potato Tubers</h1> + <a href=../purchase-form.html> + <img alt="A photo of Potato Tubers" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Potato tubers are used for human consumption, but since potatoes are not a vegetable, no food can be eaten from them. The potato tubers are cut off and boiled in water, and then placed in a bowl of salt. The water is then drained to the top of the tubers. The tubers are then left to soak for a day or two, and the salt is added. After the tubers have soaked, they are added to a pot of boiling water. The water is drained in the same manner. After the tubers are cooked, they are placed on a plate. The salt is then added to the potatoes, while the water is still boiling. The potatoes are then added to the salt, and the potatoes are left to cool. The potatoes are then added to a pot of boiling water. The potatoes are then left to cool, and the salt is added. The potatoes are then removed from the pot of boiling water, and the water is drained. The potatoes are</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Red-Chilies-Seeds.html b/HTML/Final/sneed/purchase/Red-Chilies-Seeds.html new file mode 100644 index 0000000..07e8e4e --- /dev/null +++ b/HTML/Final/sneed/purchase/Red-Chilies-Seeds.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Red Chilies Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/red-chili.jpg> + </div> + <div id=purchase-desc> + <h1>Red Chilies Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Red Chilies Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Red Chilies are a must! So, when I was eating a chili that was supposed to be a vegetarian one, I thought, "Gee, this sounds good, but I'm not sure how to cook it! I'll get some other food." + +So, I decided to go shopping and I was so confused! How can I make a vegetarian chili? How can I make a vegetable chili? I was like, "What is a vegetable chili?" So, I looked in the fridge and I saw all kinds of vegetables, and I was like, "Gee, I'm a vegetable." + +I realized that I need to learn how to cook chili, so I started cooking chili, and it was so good! I had to make a version of it. + +When I started making the vegetarian chili, I knew it would be a lot of work, but at the end of the day, it was worth it! + +I wanted to share this recipe with</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Red-Onions-Seeds.html b/HTML/Final/sneed/purchase/Red-Onions-Seeds.html new file mode 100644 index 0000000..c0432b3 --- /dev/null +++ b/HTML/Final/sneed/purchase/Red-Onions-Seeds.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Red Onions Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/onion.jpg> + </div> + <div id=purchase-desc> + <h1>Red Onions Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Red Onions Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Red Onions are very popular foods in the Middle East. You can find them in many cuisines and even in some Western countries. In fact, in the Philippines, you will find the most popular dish is "Onion" rice. + +In Indonesia, you will find a popular dish called "Lapang" (Honey-rice), that is rice made from fried onions and papaya leaves. Also, the Philippines is also known for their "Onion" rice. + +In the Middle East, you will find a popular dish called "Onion" Rice in Jordan. + +In Indonesia, you can find "Onion" Rice in some places. + +In Malaysia, you will find "Onion" Rice in the Malaysian islands. + +In Iran, you will find "Onion" Rice in the Iranian cities. + +In India, you can find "Onion" Rice in many places, notably in Delhi, Mumbai and Kolkata</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Rice-Seeds.html b/HTML/Final/sneed/purchase/Rice-Seeds.html new file mode 100644 index 0000000..1c29777 --- /dev/null +++ b/HTML/Final/sneed/purchase/Rice-Seeds.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Rice Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Oryza_sativa_of_Kadavoor.jpg> + </div> + <div id=purchase-desc> + <h1>Rice Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Rice Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$3</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Rice is a very good plant, and it is easy to grow in the ground. You can also grow it in the garden if you have the space. + +It is also a very good plant to raise chicks in. The chicks can eat rice and they will grow up to be sturdy and strong chickens. + +Coconut + +Coconut (Cocos nucifera) is a tropical fruit that has been used around the world since ancient times. Coconut is usually eaten as a fruit, especially in Asia. It is also a good source of energy for humans. It is a good source of dietary fiber, potassium and vitamin B6. + +Coconut is a good source of fiber and potassium. It is also a good source of vitamin B6. It is extremely nutritious and can be used for weight management. + +It is also very high in vitamins A and C. It is a good source of protein and is very useful for muscle growth.</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Soil-Rake.html b/HTML/Final/sneed/purchase/Soil-Rake.html new file mode 100644 index 0000000..9fcb8c9 --- /dev/null +++ b/HTML/Final/sneed/purchase/Soil-Rake.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Soil Rake</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/SoilRake.jpg> + </div> + <div id=purchase-desc> + <h1>Soil Rake</h1> + <a href=../purchase-form.html> + <img alt="A photo of Soil Rake" src="../assets/Iconography/purchase.png"> + </a> + <h3>$10</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A Soil Rake is used for the purpose of preparing and maintaining organic soil. It is a tool in the hands of farmers. It is a means of removing soil that has been over-run by weeds and is a means of removing soil that has been washed away by torrential rains. It is an effective tool in the hands of a farmer. It is a tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is a tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer. It is an effective tool in the hands of a farmer</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Soybeans-Seeds.html b/HTML/Final/sneed/purchase/Soybeans-Seeds.html new file mode 100644 index 0000000..2c593ee --- /dev/null +++ b/HTML/Final/sneed/purchase/Soybeans-Seeds.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Soybeans Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Soybean.USDA.jpg> + </div> + <div id=purchase-desc> + <h1>Soybeans Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Soybeans Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$3</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Soybeans are a commonly grown plant that is known to contain high levels of phytic acid. Soy is one of the most widely used plant foods for human consumption. It is a rich source of many nutrients, including protein, fiber, calcium, magnesium, iron, vitamin B12, vitamin K, vitamin D, and vitamin B6. + +Soy is one of the most commonly grown plant foods for human consumption. It is a rich source of many nutrients, including protein, fiber, calcium, magnesium, iron, vitamin B12, vitamin K, vitamin D, and vitamin B6. Soybeans are a good source of fiber, antioxidants, and vitamins A, C, and E. + +Soy is a good source of fiber, antioxidants, and vitamins A, C, and E. Soybeans are a low-calorie food that is the main source of soy protein. Soybeans contain no cholesterol or saturated fat. + +Soybeans are a low-</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Spade.html b/HTML/Final/sneed/purchase/Spade.html new file mode 100644 index 0000000..0eeeaa7 --- /dev/null +++ b/HTML/Final/sneed/purchase/Spade.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Spade</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Spade.jpg> + </div> + <div id=purchase-desc> + <h1>Spade</h1> + <a href=../purchase-form.html> + <img alt="A photo of Spade" src="../assets/Iconography/purchase.png"> + </a> + <h3>$10</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A common spade, or shovel, is a digging insturment used for excavating and flattening soil. It is very versatile in the field and is the tool of choice to help dig in hard, rocky or muddy soil. It is also a good alternative to a ladder to help you work in tight spaces. + +The shovel is a good tool for digging for larger objects, especially to help you reduce the amount of soil that you dig. + +Many people use a combination of tools for different tasks. You may use a spade and a shovel for digging around the house, or you may use a spade and a spade for digging for food. In some cases, you may use both tools for the same task. However, you will need to know which tool you need to use for your job. + +This article will teach you how to use a spade and a shovel. We have also included two helpful tools that can be used for digging in hard soil:</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Squash-Seeds.html b/HTML/Final/sneed/purchase/Squash-Seeds.html new file mode 100644 index 0000000..153bbd2 --- /dev/null +++ b/HTML/Final/sneed/purchase/Squash-Seeds.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91px src="../assets/Iconography/logo-small.png"> + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img width=95% src=../assets/Plants/Yellow-Squash.jpg> + </div> + <div id=purchase-desc> + <h1>Squash Seeds</h1> + <img src="../assets/Iconography/purchase.png"> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Yellow Squash are often eaten in the Mediterranean, but the majority of this is not eaten in Morocco, because of the high rate of obesity in the region. + +The Mediterranean diet is based on high carbohydrate diets and high protein diets. + +For the more extreme Mediterranean diet, the diet is high in fat, with only 3-4 grams of fat per 100 grams. + +The Mediterranean diet also includes some fruits and vegetables, but most of the calories are from fruits and vegetables.</span></p> + + </div> + </main> + <footer> + Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a> + <br /> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + </footer> + <div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Taiwanese-Watermelon-Seeds.html b/HTML/Final/sneed/purchase/Taiwanese-Watermelon-Seeds.html new file mode 100644 index 0000000..f3c893f --- /dev/null +++ b/HTML/Final/sneed/purchase/Taiwanese-Watermelon-Seeds.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Taiwanese Watermelon Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg> + </div> + <div id=purchase-desc> + <h1>Taiwanese Watermelon Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Taiwanese Watermelon Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$2</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Taiwanese Watermelon are a type of watermelon that originated in Taiwan. They were originally grown in Taiwan, but they were transported to China in the 1990s for processing. A similar watermelon is the Chinese watermelon. + +Watermelon is a member of the Cucurbita family of fruits and has a sweet, sticky fruit that is often sold in its natural state. Watermelons are eaten with chopsticks or tongs, which are popular in Japan and South Korea. + +Although watermelons are common in Taiwan, they are not very common in China. The most common varieties are the Chinese watermelon, the Red Delicious, and the American Watermelon. These fruits are relatively small, and are commonly found in the vegetable sections of supermarkets. They are also sometimes found on the streets of Taiwan. + +Watermelon is also sometimes called a "seaweed" for its smooth texture and ability to absorb nutrients. It is used in a wide variety of dishes</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/The-Hot-Mans-Kit.html b/HTML/Final/sneed/purchase/The-Hot-Mans-Kit.html new file mode 100644 index 0000000..34b5eb0 --- /dev/null +++ b/HTML/Final/sneed/purchase/The-Hot-Mans-Kit.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - The Hot Man's Kit</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Kits/The-Hot-Man's-Kit.jpg> + </div> + <div id=purchase-desc> + <h1>The Hot Man's Kit</h1> + <a href=../purchase-form.html> + <img alt="A photo of The Hot Man's Kit" src="../assets/Iconography/purchase.png"> + </a> + <h3>$12</h3> + <p>A kit for those interested in pepper growing and sauce making. This bundle comes with four different types of hot pepper and the Mother of Vinegar, an industrial grade solution designed to quickly make vinegar out of any sugars.</p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/The-Mother-of-Vinegar.html b/HTML/Final/sneed/purchase/The-Mother-of-Vinegar.html new file mode 100644 index 0000000..61145c4 --- /dev/null +++ b/HTML/Final/sneed/purchase/The-Mother-of-Vinegar.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - The Mother of Vinegar</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/mother-of-vinegar.jpg> + </div> + <div id=purchase-desc> + <h1>The Mother of Vinegar</h1> + <a href=../purchase-form.html> + <img alt="A photo of The Mother of Vinegar" src="../assets/Iconography/purchase.png"> + </a> + <h3>$5</h3> + <p>The Mother of Vinegar is a collection of bacteria cells commonly used in fermenting. This will turn any alcoholic beverage into a vinegar for you to use.</p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Thermometer.html b/HTML/Final/sneed/purchase/Thermometer.html new file mode 100644 index 0000000..26a0efc --- /dev/null +++ b/HTML/Final/sneed/purchase/Thermometer.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Thermometer</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Thermometer.jpg> + </div> + <div id=purchase-desc> + <h1>Thermometer</h1> + <a href=../purchase-form.html> + <img alt="A photo of Thermometer" src="../assets/Iconography/purchase.png"> + </a> + <h3>$16</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A Thermometer is used for measuring tempurate. Specifically, it can be used for "Temperature of the room or room", and also for "Temperature of the room or room, and room, and room, and room", as well as "Temperature of the room or room, and room, and room, and room, and room", as well as "Temperature of the room or room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room, and room,</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Tobacco-Seeds.html b/HTML/Final/sneed/purchase/Tobacco-Seeds.html new file mode 100644 index 0000000..fcdc650 --- /dev/null +++ b/HTML/Final/sneed/purchase/Tobacco-Seeds.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Tobacco Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Native_American_tobacco_flower.jpg> + </div> + <div id=purchase-desc> + <h1>Tobacco Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Tobacco Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$7</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>Tobacco plants are the most common of all plants to be burned in tobacco growing. This is because of the high levels of nicotine in them. The burning of the tobacco produces a lot of particulate matter (especially particulates with a diameter of less than 10 micrometers) in the tobacco plant, which is then inhaled by the smoker. + +In the early stages of tobacco growing, the particulates in the tobacco plant are a matter of concern for health professionals. While the amount of tobacco smoke inhaled is small compared to the amount produced by combustion of fossil fuels, it is still a significant problem. + +The amount of particulates in the atmosphere is a function of how much of the smoke is inhaled. The amount of smoke inhaled is directly related to the size of the particulate matter produced. The smaller is the number of carbon monoxide molecules in the smoke, the lower the amount of particulates in the air is. + +The amount of particulates</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Trowel.html b/HTML/Final/sneed/purchase/Trowel.html new file mode 100644 index 0000000..b4a75bc --- /dev/null +++ b/HTML/Final/sneed/purchase/Trowel.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Trowel</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Trowel.jpg> + </div> + <div id=purchase-desc> + <h1>Trowel</h1> + <a href=../purchase-form.html> + <img alt="A photo of Trowel" src="../assets/Iconography/purchase.png"> + </a> + <h3>$5</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A Trowel is a type of tool that is used to cut and remove the wax from the body of a bottle.</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Weeding-Shovel.html b/HTML/Final/sneed/purchase/Weeding-Shovel.html new file mode 100644 index 0000000..f5d0f53 --- /dev/null +++ b/HTML/Final/sneed/purchase/Weeding-Shovel.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Weeding Shovel</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Tools/Weeder.jpg> + </div> + <div id=purchase-desc> + <h1>Weeding Shovel</h1> + <a href=../purchase-form.html> + <img alt="A photo of Weeding Shovel" src="../assets/Iconography/purchase.png"> + </a> + <h3>$5</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>A Weeding shovel is used for vernalization + +A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization A Weeding shovel is used for vernalization</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/Yellow-Squash-Seeds.html b/HTML/Final/sneed/purchase/Yellow-Squash-Seeds.html new file mode 100644 index 0000000..108d850 --- /dev/null +++ b/HTML/Final/sneed/purchase/Yellow-Squash-Seeds.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Yellow Squash Seeds</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=../assets/Plants/Yellow-Squash.jpg> + </div> + <div id=purchase-desc> + <h1>Yellow Squash Seeds</h1> + <a href=../purchase-form.html> + <img alt="A photo of Yellow Squash Seeds" src="../assets/Iconography/purchase.png"> + </a> + <h3>$1</h3> + <p><span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>These Yellow Squash Seeds are great for growing in the garden. They have a nice yellow color which makes for a nice contrast to your garden foliage. They are not hardy to USDA Zones 9 through 12. + +Yellow Squash Seeds are an excellent choice for the home gardener. They have a nice yellow color that makes them a good addition to many garden landscapes. + +Yellow Squash seeds are a popular choice for the home garden and are best suited for the growing season from August through April. They are tolerant of a wide range of soil types and are well adapted to a wide range of growing conditions. Yellow Squash seeds grow quickly and can produce a large crop of seeds in a short period of time. + +These yellow squash seeds are ideal for growing in the garden and are best suited for the growing season from August through April. These yellow seeds are tolerant of a wide range of soil types and are well adapted to a wide range of growing conditions. + +Yellow Squ</span></p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/entries.json b/HTML/Final/sneed/purchase/entries.json new file mode 100644 index 0000000..a0ee354 --- /dev/null +++ b/HTML/Final/sneed/purchase/entries.json @@ -0,0 +1,34 @@ +{"name" : "First-time Gardeners Kit", "location": "Kits","image": "First-time-Gardeners-Kit.jpg", "price": "$48", "ai": false, "desc": "For those new to the gardening scene and wish to have a simple first year while they learn the ropes. Comes with high yield, low maintainance plants such as squash, cucumbers, potatos, and onions. Tools for planting also come with the kit."} +{"name" : "The Hot Man's Kit", "location": "Kits", "image": "The-Hot-Man's-Kit.jpg", "price": "$12", "ai": false,"desc": "A kit for those interested in pepper growing and sauce making. This bundle comes with four different types of hot pepper and the \"Mother of Vinegar\", an industrial grade solution designed to quickly make vinegar out of any sugars."} +{"name" : "Appalachian Culture", "location": "Kits", "image": "Appalachian-Culture.jpg", "price": "$50", "ai": false, "desc": "A bundle for the celebration of Appalachian culture. All items here are popularly owned by those from the Appalachian region, mostly carrying over from the Scots-Irish immigration. 100% of profits go directly to political alcohol deregulation organizations."} +{"name" : "Yellow Squash Seeds", "location": "Plants", "image": "Yellow-Squash.jpg", "price": "$1", "ai": true, "desc": "These Yellow Squash Seeds are"} +{"name" : "Cubanelle Pepper Seeds", "location": "Plants", "image": "cubanelle.jpg", "price": "$5", "ai": true, "desc": "Cubanelle Peppers are a type red, hot pepper that"} +{"name" : "Habanero Pepper Seeds", "location": "Plants", "image": "Habanero.jpg", "price": "$5", "ai": true, "desc": "Habanero Peppers are an orange hot peppter that"} +{"name" : "Garlic Cloves", "location": "Plants", "image": "garlic.jpg", "price": "$1", "ai": true, "desc": "Garlic is a type of bulb plant that"} +{"name" : "Potato Tubers", "location": "Plants", "image": "potato.jpg", "price": "$1", "ai": true, "desc": "Potato tubers are used for"} +{"name" : "Taiwanese Watermelon Seeds", "location": "Plants", "image": "Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg", "price": "$2", "ai": true, "desc": "Taiwanese Watermelon are a type of watermelon that"} +{"name" : "Tobacco Seeds", "location": "Plants", "image": "Native_American_tobacco_flower.jpg", "price": "$7", "ai": true, "desc": "Tobacco plants are"} +{"name" : "Rice Seeds", "location": "Plants", "image": "Oryza_sativa_of_Kadavoor.jpg", "price": "$3", "ai": true, "desc": "Rice is"} +{"name" : "Soybeans Seeds", "location": "Plants", "image": "Soybean.USDA.jpg", "price": "$3", "ai": true, "desc": "Soybeans are a commonly grown plant that"} +{"name" : "Black Cherry Seeds", "location": "Plants", "image": "Black_Che.jpg", "price": "$1", "ai": true, "desc": "Black Cherries are"} +{"name" : "Green Chilies Seeds", "location": "Plants", "image": "green-chilies.jpg", "price": "$1", "ai": true, "desc": "Green Chilies are"} +{"name" : "Red Chilies Seeds", "location": "Plants", "image": "red-chili.jpg", "price": "$1", "ai": true, "desc": "Red Chilies are"} +{"name" : "Cucumbers Seeds", "location": "Plants", "image": "cucumber.jpg", "price": "$1", "ai": true, "desc": "Cucumbers are"} +{"name" : "Carolina Reapers Seeds", "location": "Plants", "image": "Carolina_Reaper.jpg", "price": "$1", "ai": true, "desc": "Carolina Reapers are a type of hot pepper that"} +{"name" : "Red Onions Seeds", "location": "Plants", "image": "onion.jpg", "price": "$1", "ai": true, "desc": "Red Onions are"} +{"name" : "Pickaxe", "location": "Tools", "image": "Pickaxe.jpg", "price": "$20", "ai": true, "desc": "In gardening, a Pickaxe is used for"} +{"name" : "Pitchfork", "location": "Tools", "image": "Blue_pitchfork.jpg", "price": "$10", "ai": true, "desc": "A pitchfork is used for"} +{"name" : "Baking Yeast", "location": "Tools", "image": "yeast.jpg", "price": "$3", "ai": true, "desc": "Baker's yeast is commonly used for"} +{"name" : "The Mother of Vinegar", "location": "Tools", "image": "mother-of-vinegar.jpg", "price": "$5", "ai": false, "desc": "The Mother of Vinegar is a collection of bacteria cells commonly used in fermenting. This will turn any alcoholic beverage into a vinegar for you to use."} +{"name" : "Trowel", "location": "Tools", "image": "Trowel.jpg", "price": "$5", "ai": true, "desc": "A Trowel is a type of tool that"} +{"name" : "Copper Coil", "location": "Tools", "image": "copper-coil.jpg", "price": "$16", "ai": true, "desc": "Copper Coil is commonly used for "} +{"name" : "Copper Saucepot", "location": "Tools", "image": "saucepot.jpg", "price": "$13", "ai": true, "desc": "A Copper Saucepot is a great tool when"} +{"name" : "Spade", "location": "Tools", "image": "Spade.jpg", "price": "$10", "ai": true, "desc": "A common spade, or shovel, is a digging insturment used for"} +{"name" : "Thermometer", "location": "Tools", "image": "Thermometer.jpg", "price": "$16", "ai": true, "desc": "A Thermometer is used for measuring tempurate. Specifically, it can be used for "} +{"name" : "Hoe", "location": "Tools", "image": "Hoe.jpg", "price": "$15", "ai": true, "desc": "A farming hoe is a tool used for "} +{"name" : "Weeding Shovel", "location": "Tools", "image": "Weeder.jpg", "price": "$5", "ai": true, "desc": "A Weeding shovel is used for "} +{"name" : "Soil Rake", "location": "Tools", "image": "SoilRake.jpg", "price": "$10", "ai": true, "desc": "A Soil Rake is used for"} +{"name" : "Bucket", "location": "Tools", "image": "bucket.jpg", "price": "$7", "ai": true, "desc": "An iron bucket, commonly used for "} +{"name" : "Copper Adze", "location": "Tools", "image": "Copperadze.jpg", "price": "$20", "ai": true, "desc": "A Copper Adze, commonly used for"} +{"name" : "Mattock", "location": "Tools", "image": "Cutter_mattock.jpg", "price": "$25", "ai": true, "desc": "Mattocks are tools used for"} +{"name" : "Mason Jars", "location": "Tools", "image": "mason.jpg", "price": "$6", "ai": true, "desc": "A common mason jar, usually used for"} diff --git a/HTML/Final/sneed/purchase/mkpages.sh b/HTML/Final/sneed/purchase/mkpages.sh new file mode 100755 index 0000000..63e56a7 --- /dev/null +++ b/HTML/Final/sneed/purchase/mkpages.sh @@ -0,0 +1,52 @@ +#!/bin/bash +cp ../store.html.orig ../store.html +cp ../purchase-form.html.orig ../purchase-form.html +while IFS= read -r line +do + name=$(echo "$line"|jq .name|tr -d '"') + AI=$(echo "$line"|jq .ai|tr -d '"') + imageLocation=$(echo "$line"|jq .location|tr -d '"') + imageName=$(echo "$line"|jq .image|tr -d '"') + #imageName=$(echo "$name"|tr ' ' '-'|sed -e 's/$/.webp/g') + pageName=$(echo "$name"|tr ' ' '-'|tr -d "'"|sed -e 's/$/.html/g') + price=$(echo "$line"|jq .price|tr -d '"') + desc=$(echo "$line"|jq .desc|tr -d '"') + if [ "$AI" = "true" ] + #if [ "false" = "true" ] + then + aitext=$(./textgen.py 200 "$desc") + + while [[ pass -eq 0 ]] + do + aitext=$(./textgen.py 200 "$desc") + if [[ "$aitext" == *"/"* ]] + then + echo "detected a slash" + pass=0 + elif [[ "$aitext" == "" ]] + then + echo "text was empty" + pass=0 + elif [[ "$aitext" = *"http"* ]] + then + echo "detected an http url" + pass=0 + else + pass=1 + fi + done + + desc="<span class=ai title='This text is generated by a bot to cut down on development time! Any mistakes or insanity in the text should be taken with that fact in mind. See the About section for more information.'>$aitext<\/span>" + echo "$desc" + fi + cp -v "template.html" "$pageName" + sed -i -e "s/;IMG;/..\/assets\/$imageLocation\/$imageName/g" "$pageName" + sed -i -e "s/;TITLE;/$name/g" "$pageName" + sed -i -e "s/;PRICE;/$price/g" "$pageName" + #sed -i -e "s/;DESC;/$desc/g" "$pageName" + perl -pe "s/;DESC;/$desc/" -i "$pageName" || sed -i -e "s/;DESC;/$desc/g" "$pageName" || sed -i -e "s/;DESC;/$name/g" "$pageName" + + sed -i -e "/<!--Items-->/a <a href=\"purchase/$pageName\">\n <figure>\n <img alt=\"an image of $name\" src=\"assets/$imageLocation/$imageName\">\n <figcaption>$name<\/figcaption>\n <\/figure>\n <\/a>\n " ../store.html + sed -i -e "/<!--Items-->/a <option value=\"$name\"><\/option>\n " ../purchase-form.html + +done < "entries.json" diff --git a/HTML/Final/sneed/purchase/template.html b/HTML/Final/sneed/purchase/template.html new file mode 100644 index 0000000..cb46ced --- /dev/null +++ b/HTML/Final/sneed/purchase/template.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - ;TITLE;</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=../style.css> + <link rel="shortcut icon" href="../assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="../assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="../index.html">Home</a></li> + <li><a href="../store.html">Store</a></li> + <li><a href="../legal.html">Legal</a></li> + <li><a href="../about.html">About</a></li> + </ul> + </nav> + <main> + <div id=purchase-image> + <img alt="Button to navigate to the purchase form" class=purchase-button src=;IMG;> + </div> + <div id=purchase-desc> + <h1>;TITLE;</h1> + <a href=../purchase-form.html> + <img alt="A photo of ;TITLE;" src="../assets/Iconography/purchase.png"> + </a> + <h3>;PRICE;</h3> + <p>;DESC;</p> + + </div> + </main> + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/purchase/textgen.py b/HTML/Final/sneed/purchase/textgen.py new file mode 100755 index 0000000..3290116 --- /dev/null +++ b/HTML/Final/sneed/purchase/textgen.py @@ -0,0 +1,10 @@ +#!/usr/bin/python3 +from aitextgen import aitextgen +import sys + +#ai = aitextgen(model_folder="/home/msglm/Documents/ComputerScience/Projects/GPT-2/RedpillGenerator/aitextgen/") +#ai = aitextgen(model="distilgpt2", cache_dir="/home/msglm/.local/share/aitextgen-models") +ai = aitextgen(tf_gpt2="774M", cache_dir="/home/msglm/.local/share/aitextgen-models") +ai.to_gpu() +output = ai.generate_one(max_length=int(sys.argv[1]), prompt=sys.argv[2], temperature=0.7) +print(output) diff --git a/HTML/Final/sneed/store.html b/HTML/Final/sneed/store.html new file mode 100644 index 0000000..568df79 --- /dev/null +++ b/HTML/Final/sneed/store.html @@ -0,0 +1,281 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Store</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>Seeds</h1> + <div class=big-shop-box> + <!--Items--> +<a href="purchase/Mason-Jars.html"> + <figure> + <img alt="an image of Mason Jars" src="assets/Tools/mason.jpg"> + <figcaption>Mason Jars</figcaption> + </figure> + </a> + +<a href="purchase/Mattock.html"> + <figure> + <img alt="an image of Mattock" src="assets/Tools/Cutter_mattock.jpg"> + <figcaption>Mattock</figcaption> + </figure> + </a> + +<a href="purchase/Copper-Adze.html"> + <figure> + <img alt="an image of Copper Adze" src="assets/Tools/Copperadze.jpg"> + <figcaption>Copper Adze</figcaption> + </figure> + </a> + +<a href="purchase/Bucket.html"> + <figure> + <img alt="an image of Bucket" src="assets/Tools/bucket.jpg"> + <figcaption>Bucket</figcaption> + </figure> + </a> + +<a href="purchase/Soil-Rake.html"> + <figure> + <img alt="an image of Soil Rake" src="assets/Tools/SoilRake.jpg"> + <figcaption>Soil Rake</figcaption> + </figure> + </a> + +<a href="purchase/Weeding-Shovel.html"> + <figure> + <img alt="an image of Weeding Shovel" src="assets/Tools/Weeder.jpg"> + <figcaption>Weeding Shovel</figcaption> + </figure> + </a> + +<a href="purchase/Hoe.html"> + <figure> + <img alt="an image of Hoe" src="assets/Tools/Hoe.jpg"> + <figcaption>Hoe</figcaption> + </figure> + </a> + +<a href="purchase/Thermometer.html"> + <figure> + <img alt="an image of Thermometer" src="assets/Tools/Thermometer.jpg"> + <figcaption>Thermometer</figcaption> + </figure> + </a> + +<a href="purchase/Spade.html"> + <figure> + <img alt="an image of Spade" src="assets/Tools/Spade.jpg"> + <figcaption>Spade</figcaption> + </figure> + </a> + +<a href="purchase/Copper-Saucepot.html"> + <figure> + <img alt="an image of Copper Saucepot" src="assets/Tools/saucepot.jpg"> + <figcaption>Copper Saucepot</figcaption> + </figure> + </a> + +<a href="purchase/Copper-Coil.html"> + <figure> + <img alt="an image of Copper Coil" src="assets/Tools/copper-coil.jpg"> + <figcaption>Copper Coil</figcaption> + </figure> + </a> + +<a href="purchase/Trowel.html"> + <figure> + <img alt="an image of Trowel" src="assets/Tools/Trowel.jpg"> + <figcaption>Trowel</figcaption> + </figure> + </a> + +<a href="purchase/The-Mother-of-Vinegar.html"> + <figure> + <img alt="an image of The Mother of Vinegar" src="assets/Tools/mother-of-vinegar.jpg"> + <figcaption>The Mother of Vinegar</figcaption> + </figure> + </a> + +<a href="purchase/Baking-Yeast.html"> + <figure> + <img alt="an image of Baking Yeast" src="assets/Tools/yeast.jpg"> + <figcaption>Baking Yeast</figcaption> + </figure> + </a> + +<a href="purchase/Pitchfork.html"> + <figure> + <img alt="an image of Pitchfork" src="assets/Tools/Blue_pitchfork.jpg"> + <figcaption>Pitchfork</figcaption> + </figure> + </a> + +<a href="purchase/Pickaxe.html"> + <figure> + <img alt="an image of Pickaxe" src="assets/Tools/Pickaxe.jpg"> + <figcaption>Pickaxe</figcaption> + </figure> + </a> + +<a href="purchase/Red-Onions-Seeds.html"> + <figure> + <img alt="an image of Red Onions Seeds" src="assets/Plants/onion.jpg"> + <figcaption>Red Onions Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Carolina-Reapers-Seeds.html"> + <figure> + <img alt="an image of Carolina Reapers Seeds" src="assets/Plants/Carolina_Reaper.jpg"> + <figcaption>Carolina Reapers Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Cucumbers-Seeds.html"> + <figure> + <img alt="an image of Cucumbers Seeds" src="assets/Plants/cucumber.jpg"> + <figcaption>Cucumbers Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Red-Chilies-Seeds.html"> + <figure> + <img alt="an image of Red Chilies Seeds" src="assets/Plants/red-chili.jpg"> + <figcaption>Red Chilies Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Green-Chilies-Seeds.html"> + <figure> + <img alt="an image of Green Chilies Seeds" src="assets/Plants/green-chilies.jpg"> + <figcaption>Green Chilies Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Black-Cherry-Seeds.html"> + <figure> + <img alt="an image of Black Cherry Seeds" src="assets/Plants/Black_Che.jpg"> + <figcaption>Black Cherry Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Soybeans-Seeds.html"> + <figure> + <img alt="an image of Soybeans Seeds" src="assets/Plants/Soybean.USDA.jpg"> + <figcaption>Soybeans Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Rice-Seeds.html"> + <figure> + <img alt="an image of Rice Seeds" src="assets/Plants/Oryza_sativa_of_Kadavoor.jpg"> + <figcaption>Rice Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Tobacco-Seeds.html"> + <figure> + <img alt="an image of Tobacco Seeds" src="assets/Plants/Native_American_tobacco_flower.jpg"> + <figcaption>Tobacco Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Taiwanese-Watermelon-Seeds.html"> + <figure> + <img alt="an image of Taiwanese Watermelon Seeds" src="assets/Plants/Taiwan_2009_Tainan_City_Organic_Farm_Watermelon_FRD_7962.jpg"> + <figcaption>Taiwanese Watermelon Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Potato-Tubers.html"> + <figure> + <img alt="an image of Potato Tubers" src="assets/Plants/potato.jpg"> + <figcaption>Potato Tubers</figcaption> + </figure> + </a> + +<a href="purchase/Garlic-Cloves.html"> + <figure> + <img alt="an image of Garlic Cloves" src="assets/Plants/garlic.jpg"> + <figcaption>Garlic Cloves</figcaption> + </figure> + </a> + +<a href="purchase/Habanero-Pepper-Seeds.html"> + <figure> + <img alt="an image of Habanero Pepper Seeds" src="assets/Plants/Habanero.jpg"> + <figcaption>Habanero Pepper Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Cubanelle-Pepper-Seeds.html"> + <figure> + <img alt="an image of Cubanelle Pepper Seeds" src="assets/Plants/cubanelle.jpg"> + <figcaption>Cubanelle Pepper Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Yellow-Squash-Seeds.html"> + <figure> + <img alt="an image of Yellow Squash Seeds" src="assets/Plants/Yellow-Squash.jpg"> + <figcaption>Yellow Squash Seeds</figcaption> + </figure> + </a> + +<a href="purchase/Appalachian-Culture.html"> + <figure> + <img alt="an image of Appalachian Culture" src="assets/Kits/Appalachian-Culture.jpg"> + <figcaption>Appalachian Culture</figcaption> + </figure> + </a> + +<a href="purchase/The-Hot-Mans-Kit.html"> + <figure> + <img alt="an image of The Hot Man's Kit" src="assets/Kits/The-Hot-Man's-Kit.jpg"> + <figcaption>The Hot Man's Kit</figcaption> + </figure> + </a> + +<a href="purchase/First-time-Gardeners-Kit.html"> + <figure> + <img alt="an image of First-time Gardeners Kit" src="assets/Kits/First-time-Gardeners-Kit.jpg"> + <figcaption>First-time Gardeners Kit</figcaption> + </figure> + </a> + + + </div> + </main> + + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/store.html.orig b/HTML/Final/sneed/store.html.orig new file mode 100644 index 0000000..5fdb555 --- /dev/null +++ b/HTML/Final/sneed/store.html.orig @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>Sneed's Feed and Seed - Store</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href=style.css> + <link rel="shortcut icon" href="assets/Iconography/favicon.png" type="image/png"> + </head> + <body> + <div id=wrapper> + <header> + <img width=91 alt="The logo of Sneed's Feed and Seed. It has a red hat with the title of the company on it." src="assets/Iconography/logo-small.png"> + + <div> + <h1>Sneed's Feed and Seed</h1> + <p id=headercaption>Formerly Chuck's</p> + </div> + </header> + <nav> + <ul> + <li><a href="index.html">Home</a></li> + <li><a href="store.html">Store</a></li> + <li><a href="legal.html">Legal</a></li> + <li><a href="about.html">About</a></li> + </ul> + </nav> + <main> + <h1>Seeds</h1> + <div class=big-shop-box> + <!--Items--> + + </div> + </main> + + <footer> + <p>Copyleft <span class=copyleft>©</span> - <a href=https://creativecommons.org/licenses/by-sa/4.0/>CC-BY-SA 4.0</a></p> + <small><a href=mailto:msglm@techchud.xyz>msglm</a></small> + <small><i>Last Updated April 28th 2022</i></small> + </footer> + </div> + </body> +</html> diff --git a/HTML/Final/sneed/style.css b/HTML/Final/sneed/style.css new file mode 100644 index 0000000..257bc9d --- /dev/null +++ b/HTML/Final/sneed/style.css @@ -0,0 +1,226 @@ +body { + background-color: beige; + color: #333333; + font-family: "Times New Roman", Times, serif; +} + +p { + margin-top: 8px; + margin-bottom: 8px; +} + + +header { + background-color: darkred; + color: white; + text-align: center; +} + +header img{ + grid-row: 1; grid-column: 1; +} + +header div{ + grid-row: 1; grid-column: 2; +} + +header div h1 { + padding-bottom: 0%; + margin-top: 10px; +} + +#headercaption { + font-size: 15px; + margin: 0%; + padding: 0%; + font-style: italic; +} + +header { + display: grid; + grid-template-rows: auto; + grid-template-columns: 92px 1fr; +} + +nav { + font-weight: bold; + padding: 0%; + font-size: 120%; + background-color: yellow; +} + +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: red; +} + +nav a:visited { + text-decoration: none; + color: purple; +} + +nav a:hover { + color: darkred; +} + +nav ul { + display: flex; + flex-wrap: nowrap; + justify-content: space-around; +} + +nav li { + border: none; +} + +h1 { + margin-bottom: 0%; + font-family: Georgia, 'Times New Roman', serif; + margin-top: 0%; + padding-top: 0.3em; + padding-bottom: 0.3em; +} + +h2 { + color: red; + font-family: Georgia, 'Times New Roman', serif; +} + +h3 { + font-family: Georgia, 'Times New Roman', serif; + margin-top:0.6em; + margin-bottom:0.3em; + color: red; +} + +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; +} + +#contact { + font-size: 90%; +} + +.shop-box { + display:flex; + border: 1px dotted #808080; + width: 100%; + overflow: auto; +} + +.shop-box figure { + float: left; +} +.shop-box figure img { + width: 250px; + height: 250px; + object-fit: contain; +} +.shop-box figure figcaption { + text-align: center; +} + +.big-shop-box { + display:inline-block; + border: 1px dotted #808080; + width: 100%; + height: 100%; +} + +.big-shop-box figure { + float: left; + border-style: solid; + border: 1px dotted #808080; + background-color: white; +} + +.big-shop-box figure img { + width: 250px; + height: 250px; + object-fit: contain; +} + +.big-shop-box figure:hover { + float: left; + transition: transform .1s; + transform: scale(1.5); +} + +.big-shop-box figure figcaption { + text-align: center; +} + +.copyleft { + display:inline-block; + transform: rotate(180deg); +} + +#purchase-image { + width:49%; + float: left; +} + +#purchase-desc { + width:49%; + float: right; +} + +.ai { + text-decoration-color: grey; + text-decoration-line: underline; + text-decoration-style: dashed; +} + +form label { + display: block; +} + +form input { + display: block; + margin-bottom: 20px; +} + +.purchase-button { + width: 95%; +} 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> |
