1 files changed, 141 insertions, 0 deletions
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>
+
+