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