diff options
Diffstat (limited to 'HTML/Chapter/Ch. 8 hands-on assignments')
52 files changed, 1199 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html new file mode 100644 index 0000000..c8bd7af --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.2.index.html @@ -0,0 +1,35 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
+ background-color: #227093;
+}
+
+h1 {
+ color: #FFFFFF;
+ font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html new file mode 100644 index 0000000..d338ba2 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.3.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex; min-height: 100vh;
+ justify-content: center; align-items: center;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html new file mode 100644 index 0000000..8ac938e --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.a.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: flex; min-height: 100vh;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+ margin: auto;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html new file mode 100644 index 0000000..5cb35ee --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.4.b.index.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Page Title Goes Here</title>
+ <style>
+
+body {
+ margin: 0;
+}
+
+header {
+ display: grid; min-height: 100vh;
+ justify-content: center; align-items: center;
+ background-image: url(8.7.lake.jpg);
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+}
+
+h1 {
+ color: #FFFFFF; font-family: Arial, sans-serif;
+}
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Centered Heading</h1>
+ </header>
+ <main>
+ Additional page content and navigation go here
+ </main>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg Binary files differnew file mode 100644 index 0000000..014d773 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8center/8.7.lake.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html new file mode 100644 index 0000000..2c4b9c1 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.index.html @@ -0,0 +1,145 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <!--Similar situation here to my problem with 8.5, my book didn't actually have instructions on how to do this, so I have to try my best to reverse engineer and figure out the example. I hope this is satisfactory!-->
+ <style>
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+
+body {
+ font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper {
+ padding: 0;
+ min-width: 900px;
+}
+nav {
+ float: left;
+ width: 150px;
+}
+
+nav ul {
+ list-style-type: none;
+ padding: 1em;
+}
+nav a {
+ text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+header {
+ background-color: #869dc7;
+ color: #00005D;
+ background-image: url(8.6.light2.jpg);
+ padding: 1em 0 1em 190px;
+ font-size: 130%;
+ min-width: 600px;
+ background-repeat: no-repeat;
+ font-family: "Times New Roman", serif;
+}
+
+main {
+ float: left;
+ width: 50%;
+ padding: 1em;
+}
+
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+
+aside {
+ float: right;
+ width: 300px;
+ background-color: #EAEAEA;
+ padding-left: 1em;
+ margin: 0;
+}
+
+figcaption {
+ font-style: italic; padding-left: 2em;
+}
+
+footer {
+ background-color: #869dc7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+
+header {
+ grid-area: header;
+}
+
+nav {
+ grid-area: nav;
+}
+
+main {
+ grid-area: main; width: 100%;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+}
+
+ @supports (display: grid) {
+ #wrapper {
+ display: grid;
+ grid-template:
+ "header header header" 100px
+ "nav main aside" auto
+ "footer footer footer" 50px
+ / 150px 1fr 300px;
+ }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <aside>
+ <figure>
+ <img src="8.6.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Lighthouse Island Bistro</figcaption>
+ </figure>
+ </aside>
+ <footer>Copyright ©</footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg Binary files differnew file mode 100644 index 0000000..4d5d07b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.light2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8feat/8.6.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg Binary files differnew file mode 100644 index 0000000..db35321 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird1.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg Binary files differnew file mode 100644 index 0000000..816f817 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg Binary files differnew file mode 100644 index 0000000..3a37f44 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird3.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg Binary files differnew file mode 100644 index 0000000..a19a586 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird4.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg Binary files differnew file mode 100644 index 0000000..c5bd806 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird5.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg Binary files differnew file mode 100644 index 0000000..09b35e8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.bird6.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html new file mode 100644 index 0000000..b0bf600 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex1/8.1.index.html @@ -0,0 +1,54 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Flexbox Gallery</title>
+ <meta charset="utf-8">
+ <style>
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ background-color: #FEFEFE;
+}
+
+header {
+ text-align: center;
+}
+
+#gallery {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around;
+}
+
+img {
+ margin: 1em;
+ box-shadow: 10px 10px 10px #777;
+}
+
+
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Flexbox Gallery</h1>
+ </header>
+ <main>
+ <div id="gallery">
+ <img src="8.1.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+ <img src="8.1.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+ <img src="8.1.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+ <img src="8.1.bird4.jpg" width="200" height="150" alt="Rock Wren">
+ <img src="8.1.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+ <img src="8.1.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+ </div>
+
+ </main>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html new file mode 100644 index 0000000..4669030 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.index.html @@ -0,0 +1,113 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <style>
+
+
+
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family:Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+ padding: 1em; }
+nav a { text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+header { background-color: #869DC7;
+ color: #00005D;
+ background-image: url(8.2.light.gif);
+ background-repeat: no-repeat;
+ padding: 2em 0 2em 10em;
+ font-size: 120%;
+}
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+nav { float: left; }
+main{ padding: 1em; }
+aside { float: right; padding: 1em; }
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+ clear: both;
+}
+
+#content {
+ display: flex;
+}
+nav {
+ flex: none;
+ background-color: #B3C7E6;
+}
+
+main {
+ flex: 6;
+ min-width: 20em;
+ background-color: #FFFFFF;
+}
+
+aside {
+ flex: 4;
+ background-color: #EAEAEA;
+}
+
+header, main, nav, figure, footer {
+ display: block;
+}
+
+nav {
+ order: 1;
+}
+
+main {
+ order: 2;
+}
+
+aside {
+ order: 3;
+}
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <div id="content">
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <aside>
+ <figure>
+ <img src="8.2.lighthouse.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <figcaption>Cana Island Lighthouse</figcaption>
+ </figure>
+ </aside>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+
+ </div>
+ <footer>Copyright © </footer>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8flex2/8.2.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg Binary files differnew file mode 100644 index 0000000..db35321 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird1.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg Binary files differnew file mode 100644 index 0000000..816f817 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg Binary files differnew file mode 100644 index 0000000..3a37f44 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird3.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg Binary files differnew file mode 100644 index 0000000..a19a586 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird4.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg Binary files differnew file mode 100644 index 0000000..c5bd806 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird5.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg Binary files differnew file mode 100644 index 0000000..09b35e8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.bird6.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html new file mode 100644 index 0000000..195a419 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid1/8.3.index.html @@ -0,0 +1,43 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Grid Gallery</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body { background-color: #FEFEFE; }
+header { text-align: center; }
+
+#gallery {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 200px);
+ grid-template-rows: auto;
+ grid-gap: 2em; gap: 2em;
+}
+
+
+
+
+
+
+
+ </style>
+ </head>
+ <body>
+ <header>
+ <h1>Grid Gallery</h1>
+ </header>
+ <main>
+ <div id="gallery">
+ <img src="8.3.bird1.jpg" width="200" height="150" alt="Red Crested Cardinal">
+ <img src="8.3.bird2.jpg" width="200" height="150" alt="Rose-Breasted Grosbeak">
+ <img src="8.3.bird3.jpg" width="200" height="150" alt="Gyrfalcon">
+ <img src="8.3.bird4.jpg" width="200" height="150" alt="Rock Wren">
+ <img src="8.3.bird5.jpg" width="200" height="150" alt="Coopers Hawk">
+ <img src="8.3.bird6.jpg" width="200" height="150" alt="Immature Bald Eagle">
+ </div>
+ </main>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html new file mode 100644 index 0000000..17854a8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.index.html @@ -0,0 +1,101 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+ <!--I checked my work and compared
+ it to the work provided by the student files
+ My book had some extra stuff in it that I had to remove.
+ Following is what it had:
+ @supports (display: grid) {
+ #wrapper { display: grid;
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 160px auto auto; }
+ header { grid-row: 1 / 2; grid-column: 1 / 3; }
+ nav { grid-row: 2 / 3; grid-column: 1 / 2; }
+ main { grid-row: 2 / 3; grid-column: 2 / 3; }
+ footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+ }
+ I'd love to use the most up to date version, but,
+ as stated, textbooks are incredibly expensive
+ and even renting is taxing.-->
+<style>
+
+* { box-sizing: border-box; margin: 0; }
+body {font-family: Verdana, Arial, sans-serif; }
+nav ul { list-style-type: none;
+ padding: 1em; }
+nav a { text-decoration: none;
+ padding: 1em;
+ font-weight: bold;
+}
+
+
+header { background-color: #869dc7;
+ color: #00005D;
+ background-image: url(8.4.light2.jpg);
+ padding: 1em 0 1em 190px;
+ font-size: 130%;
+ min-width: 700px;
+ background-repeat: no-repeat;
+ font-family: "Times New Roman", serif;
+}
+nav { float: left; }
+main { padding: 1em; }
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+figure { text-align: center; }
+figcaption { font-style: italic; text-align: center;}
+footer { background-color: #869dc7;
+ font-size:70%;
+ text-align: center;
+ padding: 2em;
+
+}
+
+
+#wrapper {
+ display: grid;
+ grid-template-columns: 150px 1fr;
+ grid-template-rows: 100px auto 50px;
+}
+
+header { grid-row: 1 / 2; grid-column: 1 / 3; }
+nav { grid-row: 2 / 3; grid-column: 1 / 2; }
+main { grid-row: 2 / 3; grid-column: 2 / 3; }
+footer { grid-row: 3 / 4; grid-column: 1 / 3; }
+
+
+</style>
+</head>
+<body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Free-Trade Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <footer>Copyright © </footer>
+ </div>
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg Binary files differnew file mode 100644 index 0000000..ae6551b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid2/8.4.light2.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg Binary files differnew file mode 100644 index 0000000..cb611ce --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.header.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html new file mode 100644 index 0000000..43a27a8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.index.html @@ -0,0 +1,131 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<!--
+ This assignment was completely missing from my book
+ I tried my best to research how to do it via the internet
+ so if this, well, sucks, do bare in mind that's the case.
+
+ these newer textbooks are just too expensive!
+ they cost more than my gas money for my gas guzzling SUV!
+-->
+<meta charset="utf-8">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Arial, sans-serif;
+ margin: 0;
+}
+
+header { background-image: url(8.5.header.jpg);
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+header {
+ grid-area: header;
+}
+
+nav {
+ grid-area: nav;
+}
+
+main {
+ grid-area: main;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+}
+
+
+#wrapper {
+ display: grid;
+ grid-template:
+ "header header header" 100px
+ "nav main aside" auto
+ "footer footer footer" 50px
+ / 150px 1fr 30%;
+}
+
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+ color: #F7F1E3;
+ font-size: 300%;
+ text-shadow: 10px 10px 10px #000000;
+}
+nav { font-size: 120%; }
+
+nav ul { padding-left: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; }
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+ min-width: 6em;
+ font-size: 110%;
+ text-align: center;
+ background-color: #003C58;
+ margin: .5em;
+ padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+aside { padding: 1em;}
+
+main { padding: 0 1em 1em; }
+
+footer { background-color: #CCCCCC;
+ text-align: center;
+ font-style: italic;
+ padding: 1em; }
+
+
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Casita Sedona</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Rooms</a></li>
+ <li><a href="specials.html">Specials</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Located in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h2>Luxurious Rooms </h2>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms — each is unique and sure to be a high point of your vacation experience.</p>
+ <h2>Hearty Breakfast</h2>
+ <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+ <h2>About Your Hosts</h2>
+ <p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+ </main>
+ <aside>
+ <img src="8.5.scenery.jpg" alt="Owl Clover wildflowers with red rock mountain">
+ <h2>Guided Hikes</h2>
+ <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+ </aside>
+ <footer>Copyright ©
+ </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg Binary files differnew file mode 100644 index 0000000..25eab07 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8grid3/8.5.scenery.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg Binary files differnew file mode 100644 index 0000000..e703c63 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.fallback.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html new file mode 100644 index 0000000..4155306 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.index.html @@ -0,0 +1,14 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+ <h1>Image Element</h1>
+ <img src="8.12.fallback.jpg"
+ sizes="100vw"
+ srcset="8.12.large.jpg 1200w, 8.12.medium.jpg 800w, 8.12.small.jpg 320w"
+ alt="waterwheel">
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg Binary files differnew file mode 100644 index 0000000..a79996a --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.large.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg Binary files differnew file mode 100644 index 0000000..4478ad8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.medium.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg Binary files differnew file mode 100644 index 0000000..946c71f --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8image/8.12.small.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg Binary files differnew file mode 100644 index 0000000..e703c63 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.fallback.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html new file mode 100644 index 0000000..480b464 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.index.html @@ -0,0 +1,18 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Page Title Goes Here</title>
+</head>
+<body>
+ <!--The student files had a header, adding just in case my book is missing it.-->
+ <h1>Picture element<h1>
+ <!--Opted to try out the webp images here. I'm a big fan of them and wanted to see if they'd work with this set up as well. -->
+ <picture>
+ <source media="(min-width: 1200px)" srcset="8.11.large.webp">
+ <source media="(min-width: 800px)" srcset="8.11.medium.webp">
+ <source media="(min-width: 320px)" srcset="8.11.small.webp">
+ <img src="8.11.fallback.jpg" alt="waterwheel">
+</picture>
+
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg Binary files differnew file mode 100644 index 0000000..a79996a --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp Binary files differnew file mode 100644 index 0000000..ca3bf54 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.large.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg Binary files differnew file mode 100644 index 0000000..4478ad8 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp Binary files differnew file mode 100644 index 0000000..b90e766 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.medium.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg Binary files differnew file mode 100644 index 0000000..946c71f --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp Binary files differnew file mode 100644 index 0000000..5051869 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8picture/8.11.small.webp diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html new file mode 100644 index 0000000..b1e9bd4 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.index.html @@ -0,0 +1,141 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+* { box-sizing: border-box;
+ margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color: #B3C7E6;
+}
+
+header { color: #00005D;
+ background-color: #869DC7;
+ background-image: url(8.8.light.gif);
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ padding: .5em 0 .5em 5.5em;
+}
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 1em;
+}
+aside { text-align: center; }
+
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+ padding-left: 0;
+ border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;
+ text-align: center;
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+ font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+ color: #FEFEFE; }
+
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+ nav li {
+ display: inline-block;
+ width: 7em;
+ padding: 0.5em;
+ border: none;
+ }
+ nav ul {
+ text-align: center;
+ }
+ main {
+ float: left;
+ width: 55%;
+ }
+ aside {
+ margin-left: 55%;
+ }
+ footer {
+ clear: both;
+ }
+
+}
+
+ @media (min-width: 1024px) {
+ nav li {
+ display: block;
+ }
+ nav ul {
+ text-align: left;
+ }
+ nav {
+ float: left;
+ }
+ #wrapper {
+ width: 80%; margin: auto; max-width: 1200px;
+ }
+ body {
+ background-color: #000066; }
+ }
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li id="page">Home</li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast free-trade coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <aside>
+ <figure>
+ <img src="8.8.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+ </figure>
+ </aside>
+ <footer>
+ Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp/8.8.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html new file mode 100644 index 0000000..c0b856b --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html @@ -0,0 +1,170 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Bistro</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <style>
+* { box-sizing: border-box;
+ margin: 0;
+}
+
+body {font-family: Verdana, Arial, sans-serif;
+}
+
+#wrapper { background-color: #B3C7E6;
+}
+
+header { color: #00005D;
+ background-color: #869DC7;
+ background-image: url(8.9.light.gif);
+ background-repeat: no-repeat;
+ background-size: auto 100%;
+ padding: .5em 0 .5em 5.5em;
+}
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 1em;
+}
+aside { text-align: center; }
+
+footer { background-color: #869DC7;
+ font-size:70%;
+ text-align: center;
+ padding: 0.5em 0;
+}
+
+h2 { color: #869DC7; }
+img { padding: 1em; }
+
+/* Styles to configure navigation links as horizontal areas */
+nav ul { list-style-type: none;
+ padding-left: 0;
+ border-top: 1px solid #EEEEEE;
+}
+nav li { border-bottom: 1px solid #EEEEEE;
+ text-align: center;
+ padding-top: .5em;
+ padding-bottom: .5em;
+}
+nav a { text-decoration: none;
+ font-weight: bold;
+}
+nav a:link { color: #00005D; }
+nav a:hover { color: #FF0000; }
+
+/* make the current page's link look different */
+nav #page { font-weight: bold;
+ color: #FEFEFE; }
+
+/* Force older versions of Internet Explorer to display these HTML5 elements with block display. */
+header, nav, main, footer, aside, figure { display: block; }
+
+@media (min-width: 600px) {
+ nav ul {
+ display: flex; flex-flow: row nowrap;
+ justify-content: space-around;
+ }
+ nav ul li {
+ border-bottom: none;
+ }
+
+ #wrapper {
+ display: grid;
+ grid-template-columns: 55% auto;
+ grid-template-rows: auto auto auto auto;
+ }
+ header {
+ grid-row: 1 / 2;
+ grid-column: 1 / 3;
+ }
+ nav {
+ grid-row: 2 / 3;
+ grid-column: 1 / 3;
+ }
+ main {
+ grid-row: 3 / 4;
+ grid-column: 1 / 2;
+ }
+ aside {
+ grid-row: 3 / 4;
+ grid-column: 2 / 3;
+ }
+ footer {
+ grid-row: 4 / 5;
+ grid-column: 1 / 3;
+ }
+}
+
+ @media (min-width: 1024px) {
+ body {
+ background-color: #000066;
+ }
+ nav ul {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ }
+ #wrapper {
+ width: 80%;
+ margin: auto; max-width: 1200px;
+ display: grid;
+ grid-template-columns: 150px auto auto;
+ grid-template-rows: auto auto auto ;
+ }
+ header {
+ grid-row: 1 / 2; grid-column: 1 / 4;
+ }
+ nav {
+ grid-row: 2 / 3; grid-column: 1 / 2;
+ }
+ main {
+ grid-row: 2 / 3; grid-column: 2 / 3;
+ }
+ aside {
+ grid-row: 2 / 3; grid-column: 3 / 4;
+ }
+ footer {
+ grid-row: 3 / 4; grid-column: 1 / 4;
+ }
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Bistro</h1>
+ </header>
+ <nav>
+ <ul>
+ <li id="page">Home</li>
+ <li><a href="rooms.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Locally Roasted Coffee</h2>
+ <p>Indulge in the aroma of freshly ground roast free-trade coffee. Specialty drinks are available hot or cold.</p>
+ <h2>Specialty Pastries</h2>
+ <p>Enjoy a selection of our fresh-baked, organic pastries, including
+ fresh-fruit muffins, scones, croissants, and cinnamon rolls.</p>
+ <h2>Lunchtime is Anytime</h2>
+ <p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit, and vegetables. </p>
+ <h2>Panoramic View</h2>
+ <p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside. Challenge your friends to climb our 100-stair tower.</p>
+ </main>
+ <aside>
+ <figure>
+ <img src="8.9.lighthouse.jpg" width="250" height="355" alt="Lighthouse Island">
+ </figure>
+ </aside>
+ <footer>
+ Copyright ©
+ </footer>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif Binary files differnew file mode 100644 index 0000000..469b297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.light.gif diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg Binary files differnew file mode 100644 index 0000000..6455297 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.lighthouse.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg Binary files differnew file mode 100644 index 0000000..cb611ce --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.header.jpg diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html new file mode 100644 index 0000000..5eb0f22 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.index.html @@ -0,0 +1,132 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Casita Sedona</title>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+* { box-sizing: border-box; }
+body {font-family: Verdana, Arial, sans-serif;
+ margin: 0;
+}
+
+header { background-image: url(8.10.header.jpg);
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+img { max-width: 100%;
+ height: auto; }
+
+/* Name Grid Areas */
+header { grid-area: h; }
+nav { grid-area: n; }
+main { grid-area: m; }
+aside { grid-area: a; }
+footer { grid-area: f; }
+#wrapper { background-color: #F7F1E3;
+ color: #0B8781;
+ display: grid;
+ grid-template:
+ "h "
+ "n "
+ "m"
+ "f" ; }
+
+
+
+h2 { color: #2c2c54; }
+
+
+h1 { text-align: center;
+ color: #F7F1E3;
+ font-size: 300%;
+ text-shadow: 10px 10px 10px #000000;
+ font-size: 300%;
+}
+nav { font-size: 120%; }
+
+nav ul { padding-left: 0;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-around; }
+nav ul { list-style-type: none; }
+nav li { width: 20%;
+ min-width: 6em;
+ font-size: 110%;
+ text-align: center;
+ background-color: #003C58;
+ margin: .5em;
+ padding: .5em; }
+nav a { text-decoration: none;}
+nav a:link { color: #F7F1E3; }
+nav a:visited { color: #B9EDF0; }
+nav a:hover { color: #FFFFFF; }
+
+aside { display: none; padding: 1em;}
+
+main { padding: 0 1em 1em; }
+
+footer { text-align: center;
+ font-style: italic;
+ padding: 1em; }
+
+@media (min-width: 38em) {
+ #wrapper { grid-template:
+ " h h "
+ " n n "
+ " m a "
+ " f f "
+ / 60% 40% ; }
+ aside { display: block; }
+}
+@media (min-width: 65em) {
+ nav ul { display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap; }
+ #wrapper { grid-template:
+ " h h h"
+ " n m a"
+ " f f f"
+ / 150px 1fr 30%; }
+}
+
+
+
+
+</style>
+</head>
+<body>
+<div id="wrapper">
+ <header>
+ <h1>Casita Sedona</h1>
+ </header>
+ <nav>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="rooms.html">Rooms</a></li>
+ <li><a href="specials.html">Specials</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <h2>Located in the Heart of Sedona</h2>
+ <p>At Casita Sedona Bed & Breakfast you’ll be close to art galleries, shops, restaurants, hiking trails, and tours. Ride the free trolley to shops and galleries.</p>
+ <h2>Luxurious Rooms </h2>
+ <p>Stay in a well-appointed room at Casita Sedona with your own fireplace, king-size bed, balcony overlooking the red rocks, private bath with shower, and whirlpool tub for two. Choose from the Canyon, Javelina, Manzanita, Thunder Mountain, and Schnebly rooms — each is unique and sure to be a high point of your vacation experience.</p>
+ <h2>Hearty Breakfast</h2>
+ <p>Each day begins with a hearty breakfast that includes your choice of belgian waffles, pumpkin french toast, or quiche. Fresh fruit, yogurt, juice, and coffee are always available.</p>
+ <h2>About Your Hosts</h2>
+ <p>Your hosts, Melanie and Greg Tortuga, are long-time Sedona residents who love to share their knowledge of the Sedona area with their guests. Melanie is an author and artist. Greg has years of experience leading jeep tours and guiding hikes in and around Sedona.</p>
+ </main>
+ <aside>
+ <img src="8.10.pools.jpg" alt="Pools of water in the rock">
+ <h2>Guided Hikes</h2>
+ <p>Casita Sedona offers a free guided hike each week for guests. Explore the Seven Sacred Pools along the Soldiers Pass Trail.</p>
+ </aside>
+ <footer>Copyright ©
+ </footer>
+</div>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg Binary files differnew file mode 100644 index 0000000..b738448 --- /dev/null +++ b/HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/flexible8/8.10.pools.jpg |
