From 9d53d8857eaa1c9405894a88ca75bc4657e42f35 Mon Sep 17 00:00:00 2001
From: msglm <msglm@techchud.xyz>
Date: Sat, 14 Jan 2023 05:31:48 -0600
Subject: Inital Commit

---
 .../Ch8_msglm/ch8center/8.7.2.index.html           |  35 +++++
 .../Ch8_msglm/ch8center/8.7.3.index.html           |  34 +++++
 .../Ch8_msglm/ch8center/8.7.4.a.index.html         |  34 +++++
 .../Ch8_msglm/ch8center/8.7.4.b.index.html         |  34 +++++
 .../Ch8_msglm/ch8center/8.7.lake.jpg               | Bin 0 -> 1183171 bytes
 .../Ch8_msglm/ch8feat/8.6.index.html               | 145 ++++++++++++++++++
 .../Ch8_msglm/ch8feat/8.6.light2.jpg               | Bin 0 -> 4727 bytes
 .../Ch8_msglm/ch8feat/8.6.lighthouse.jpg           | Bin 0 -> 28913 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird1.jpg               | Bin 0 -> 7062 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird2.jpg               | Bin 0 -> 8495 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird3.jpg               | Bin 0 -> 5139 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird4.jpg               | Bin 0 -> 4263 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird5.jpg               | Bin 0 -> 6669 bytes
 .../Ch8_msglm/ch8flex1/8.1.bird6.jpg               | Bin 0 -> 11655 bytes
 .../Ch8_msglm/ch8flex1/8.1.index.html              |  54 +++++++
 .../Ch8_msglm/ch8flex2/8.2.index.html              | 113 ++++++++++++++
 .../Ch8_msglm/ch8flex2/8.2.light.gif               | Bin 0 -> 7550 bytes
 .../Ch8_msglm/ch8flex2/8.2.lighthouse.jpg          | Bin 0 -> 28913 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird1.jpg               | Bin 0 -> 7062 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird2.jpg               | Bin 0 -> 8495 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird3.jpg               | Bin 0 -> 5139 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird4.jpg               | Bin 0 -> 4263 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird5.jpg               | Bin 0 -> 6669 bytes
 .../Ch8_msglm/ch8grid1/8.3.bird6.jpg               | Bin 0 -> 11655 bytes
 .../Ch8_msglm/ch8grid1/8.3.index.html              |  43 ++++++
 .../Ch8_msglm/ch8grid2/8.4.index.html              | 101 ++++++++++++
 .../Ch8_msglm/ch8grid2/8.4.light2.jpg              | Bin 0 -> 14180 bytes
 .../Ch8_msglm/ch8grid3/8.5.header.jpg              | Bin 0 -> 125611 bytes
 .../Ch8_msglm/ch8grid3/8.5.index.html              | 131 ++++++++++++++++
 .../Ch8_msglm/ch8grid3/8.5.scenery.jpg             | Bin 0 -> 53067 bytes
 .../Ch8_msglm/ch8image/8.12.fallback.jpg           | Bin 0 -> 178497 bytes
 .../Ch8_msglm/ch8image/8.12.index.html             |  14 ++
 .../Ch8_msglm/ch8image/8.12.large.jpg              | Bin 0 -> 176861 bytes
 .../Ch8_msglm/ch8image/8.12.medium.jpg             | Bin 0 -> 86331 bytes
 .../Ch8_msglm/ch8image/8.12.small.jpg              | Bin 0 -> 13565 bytes
 .../Ch8_msglm/ch8picture/8.11.fallback.jpg         | Bin 0 -> 178497 bytes
 .../Ch8_msglm/ch8picture/8.11.index.html           |  18 +++
 .../Ch8_msglm/ch8picture/8.11.large.jpg            | Bin 0 -> 176861 bytes
 .../Ch8_msglm/ch8picture/8.11.large.webp           | Bin 0 -> 123110 bytes
 .../Ch8_msglm/ch8picture/8.11.medium.jpg           | Bin 0 -> 86331 bytes
 .../Ch8_msglm/ch8picture/8.11.medium.webp          | Bin 0 -> 48730 bytes
 .../Ch8_msglm/ch8picture/8.11.small.jpg            | Bin 0 -> 13565 bytes
 .../Ch8_msglm/ch8picture/8.11.small.webp           | Bin 0 -> 9472 bytes
 .../Ch8_msglm/ch8resp/8.8.index.html               | 141 +++++++++++++++++
 .../Ch8_msglm/ch8resp/8.8.light.gif                | Bin 0 -> 7550 bytes
 .../Ch8_msglm/ch8resp/8.8.lighthouse.jpg           | Bin 0 -> 28913 bytes
 .../Ch8_msglm/ch8resp2/8.9.index.html              | 170 +++++++++++++++++++++
 .../Ch8_msglm/ch8resp2/8.9.light.gif               | Bin 0 -> 7550 bytes
 .../Ch8_msglm/ch8resp2/8.9.lighthouse.jpg          | Bin 0 -> 28913 bytes
 .../Ch8_msglm/flexible8/8.10.header.jpg            | Bin 0 -> 125611 bytes
 .../Ch8_msglm/flexible8/8.10.index.html            | 132 ++++++++++++++++
 .../Ch8_msglm/flexible8/8.10.pools.jpg             | Bin 0 -> 57737 bytes
 52 files changed, 1199 insertions(+)
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html
 create mode 100644 HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg

(limited to 'HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm')

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
new file mode 100644
index 0000000..014d773
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg differ
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 &copy;</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
new file mode 100644
index 0000000..4d5d07b
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg differ
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
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg differ
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
new file mode 100644
index 0000000..db35321
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg differ
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
new file mode 100644
index 0000000..816f817
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg differ
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
new file mode 100644
index 0000000..3a37f44
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg differ
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
new file mode 100644
index 0000000..a19a586
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg differ
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
new file mode 100644
index 0000000..c5bd806
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg differ
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
new file mode 100644
index 0000000..09b35e8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg differ
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 &copy;     </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
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif differ
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
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg differ
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
new file mode 100644
index 0000000..db35321
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg differ
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
new file mode 100644
index 0000000..816f817
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg differ
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
new file mode 100644
index 0000000..3a37f44
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg differ
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
new file mode 100644
index 0000000..a19a586
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg differ
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
new file mode 100644
index 0000000..c5bd806
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg differ
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
new file mode 100644
index 0000000..09b35e8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg differ
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 &copy;     </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
new file mode 100644
index 0000000..ae6551b
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg differ
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
new file mode 100644
index 0000000..cb611ce
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg differ
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 &amp; Breakfast you&rsquo;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 &mdash; 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 &copy; 
+   </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
new file mode 100644
index 0000000..25eab07
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg differ
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
new file mode 100644
index 0000000..e703c63
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg differ
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
new file mode 100644
index 0000000..a79996a
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg differ
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
new file mode 100644
index 0000000..4478ad8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg differ
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
new file mode 100644
index 0000000..946c71f
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg differ
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
new file mode 100644
index 0000000..e703c63
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg differ
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
new file mode 100644
index 0000000..a79996a
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg differ
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
new file mode 100644
index 0000000..ca3bf54
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp differ
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
new file mode 100644
index 0000000..4478ad8
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg differ
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
new file mode 100644
index 0000000..b90e766
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp differ
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
new file mode 100644
index 0000000..946c71f
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg differ
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
new file mode 100644
index 0000000..5051869
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp differ
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 &copy;
+            </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
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif differ
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
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg differ
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 &copy;
+            </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
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif differ
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
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg differ
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
new file mode 100644
index 0000000..cb611ce
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg differ
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 &amp; Breakfast you&rsquo;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 &mdash; 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 &copy; 
+   </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
new file mode 100644
index 0000000..b738448
Binary files /dev/null and b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg differ
-- 
cgit v1.2.3