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

---
 .../Ch11_msglm/11.1.podcast/11.1.podcast.html      |  12 +++
 .../Ch11_msglm/11.1.podcast/11.1.podcast.mp3       | Bin 0 -> 965113 bytes
 .../Ch11_msglm/11.1.podcast/11.1.podcast.txt       |  13 +++
 .../Ch11_msglm/11.2.audio/11.2.index.html          |  17 +++
 .../Ch11_msglm/11.2.audio/11.2.podcast.mp3         | Bin 0 -> 965113 bytes
 .../Ch11_msglm/11.2.audio/11.2.podcast.ogg         | Bin 0 -> 571543 bytes
 .../Ch11_msglm/11.2.audio/11.2.podcast.txt         |  13 +++
 .../Ch11_msglm/11.3.video/11.3.index.html          |  27 +++++
 .../Ch11_msglm/11.3.video/11.3.sedona.jpg          | Bin 0 -> 486254 bytes
 .../Ch11_msglm/11.3.video/11.3.sedona.m4v          | Bin 0 -> 26059989 bytes
 .../Ch11_msglm/11.3.video/11.3.sedona.mov          | Bin 0 -> 6909274 bytes
 .../Ch11_msglm/11.3.video/11.3.sedona.ogv          | Bin 0 -> 44467049 bytes
 .../Ch11_msglm/11.4.myiframe.html                  |  13 +++
 .../Ch11_msglm/11.5.transform/11.5.index.html      | 116 +++++++++++++++++++++
 .../Ch11_msglm/11.5.transform/11.5.light.gif       | Bin 0 -> 7550 bytes
 .../Ch11_msglm/11.5.transform/11.5.lighthouse.jpg  | Bin 0 -> 28913 bytes
 .../Ch11_msglm/11.6.transition/11.6.index.html     | 115 ++++++++++++++++++++
 .../Ch11_msglm/11.6.transition/11.6.light.gif      | Bin 0 -> 7550 bytes
 .../Ch11_msglm/11.6.transition/11.6.lighthouse.jpg | Bin 0 -> 28913 bytes
 .../11.7.ch11gallery/11.7.aerie-trail.jpg          | Bin 0 -> 52013 bytes
 .../11.7.ch11gallery/11.7.bear-mountain.jpg        | Bin 0 -> 60492 bytes
 .../11.7.ch11gallery/11.7.broken-arrow-trail.jpg   | Bin 0 -> 44124 bytes
 .../11.7.ch11gallery/11.7.cathedral-rock.jpg       | Bin 0 -> 46197 bytes
 .../Ch11_msglm/11.7.ch11gallery/11.7.index.html    |  91 ++++++++++++++++
 .../Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg | Bin 0 -> 72352 bytes
 .../11.7.ch11gallery/11.7.photo1thumb.jpg          | Bin 0 -> 33988 bytes
 .../11.7.ch11gallery/11.7.photo2thumb.jpg          | Bin 0 -> 24710 bytes
 .../11.7.ch11gallery/11.7.photo3thumb.jpg          | Bin 0 -> 30668 bytes
 .../11.7.ch11gallery/11.7.photo4thumb.jpg          | Bin 0 -> 34634 bytes
 .../11.7.ch11gallery/11.7.photo5thumb.jpg          | Bin 0 -> 28772 bytes
 .../11.7.ch11gallery/11.7.photo6thumb.jpg          | Bin 0 -> 44765 bytes
 .../11.7.ch11gallery/11.7.thunder-mountain.jpg     | Bin 0 -> 39352 bytes
 .../Ch11_msglm/11.8.mybistro/11.8.bistro.css       |  88 ++++++++++++++++
 .../Ch11_msglm/11.8.mybistro/11.8.breakfast.html   |  35 +++++++
 .../Ch11_msglm/11.8.mybistro/11.8.coffee.html      |  35 +++++++
 .../Ch11_msglm/11.8.mybistro/11.8.contact.html     |  35 +++++++
 .../Ch11_msglm/11.8.mybistro/11.8.cuisine.html     |  35 +++++++
 .../Ch11_msglm/11.8.mybistro/11.8.dinner.html      |  35 +++++++
 .../Ch11_msglm/11.8.mybistro/11.8.directions.html  |  35 +++++++
 .../Ch11_msglm/11.8.mybistro/11.8.index.html       |  48 +++++++++
 .../11.8.mybistro/11.8.lighthouselogo.jpg          | Bin 0 -> 4616 bytes
 .../Ch11_msglm/11.8.mybistro/11.8.lunch.html       |  35 +++++++
 .../Ch11_msglm/11.9.ch11details/11.9.index.html    |  27 +++++
 43 files changed, 825 insertions(+)
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.txt
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.txt
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.4.myiframe.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.bistro.css
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.breakfast.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.coffee.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.contact.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.cuisine.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.dinner.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.directions.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.index.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lunch.html
 create mode 100644 HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.9.ch11details/11.9.index.html

(limited to 'HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm')

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
new file mode 100644
index 0000000..6190438
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.1.podcast/11.1.podcast.mp3 differ
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
new file mode 100644
index 0000000..6190438
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.mp3 differ
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
new file mode 100644
index 0000000..ab1c589
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.2.audio/11.2.podcast.ogg differ
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
new file mode 100644
index 0000000..33d66f0
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.jpg differ
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
new file mode 100644
index 0000000..73744ca
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.m4v differ
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
new file mode 100644
index 0000000..87b800c
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.mov differ
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
new file mode 100644
index 0000000..5a26118
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.3.video/11.3.sedona.ogv differ
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 &copy;     </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
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.light.gif differ
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
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.5.transform/11.5.lighthouse.jpg differ
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 &copy;     </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
new file mode 100644
index 0000000..469b297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.light.gif differ
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
new file mode 100644
index 0000000..6455297
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.6.transition/11.6.lighthouse.jpg differ
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
new file mode 100644
index 0000000..7c079d6
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.aerie-trail.jpg differ
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
new file mode 100644
index 0000000..daef5a5
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.bear-mountain.jpg differ
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
new file mode 100644
index 0000000..0ca7e32
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.broken-arrow-trail.jpg differ
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
new file mode 100644
index 0000000..428399a
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.cathedral-rock.jpg differ
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
new file mode 100644
index 0000000..202b674
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.oak-creek.jpg differ
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
new file mode 100644
index 0000000..4822af2
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo1thumb.jpg differ
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
new file mode 100644
index 0000000..6c318be
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo2thumb.jpg differ
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
new file mode 100644
index 0000000..a14d215
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo3thumb.jpg differ
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
new file mode 100644
index 0000000..9208138
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo4thumb.jpg differ
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
new file mode 100644
index 0000000..cf423e4
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo5thumb.jpg differ
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
new file mode 100644
index 0000000..10bdb89
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.photo6thumb.jpg differ
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
new file mode 100644
index 0000000..09b5dca
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.7.ch11gallery/11.7.thunder-mountain.jpg differ
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 &copy; 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 &copy; 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 &copy; 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 &copy; 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 &copy; 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 &copy; 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 &copy; 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
new file mode 100644
index 0000000..3893f16
Binary files /dev/null and b/HTML/Chapter/Ch. 11 hands-on assignments/Ch11_msglm/11.8.mybistro/11.8.lighthouselogo.jpg differ
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 &copy; 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>
-- 
cgit v1.2.3