diff options
Diffstat (limited to 'HTML/Chapter/Ch. 7 hands-on assignments')
36 files changed, 1033 insertions, 0 deletions
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html new file mode 100644 index 0000000..318d34c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box1.html @@ -0,0 +1,25 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>CSS</title>
+ <meta charset="utf-8">
+ <style>
+.div1 {
+ width: 200px;
+ height: 200px;
+ background-color: #D1ECFF;
+ border: 3px dashed #000000;
+ padding: 5px;
+}
+ </style>
+ </head>
+ <body>
+ <div class="div1">
+ This is the first box.
+ </div>
+ <div class="div2">
+ This is the second box.
+ </div>
+
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html new file mode 100644 index 0000000..6bcaf53 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.1.box2.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>CSS</title>
+ <meta charset="utf-8">
+ <style>
+.div1 {
+ width: 200px;
+ height: 200px;
+ background-color: #D1ECFF;
+ border: 3px dashed #000000;
+ padding: 5px;
+}
+
+.div2 {
+ width: 100px;
+ height: 100px;
+ background-color: #ffffff;
+ border: 3px ridge #000000;
+ padding: 5px;
+ margin: 10px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div class="div1">
+ This is the outer box.
+ <div class="div2">
+ This is the inner box.
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html new file mode 100644 index 0000000..3805264 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/7.3.index.html @@ -0,0 +1,63 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Layout Example</title>
+ <meta charset="utf-8">
+ <style>
+nav {
+ float: left;
+ width: 150px;
+}
+main {
+ margin-left: 160px;
+}
+body {
+ background-color: #000066;
+}
+#wrapper {
+ width: 80%;
+ margin-left: auto;
+ margin-right: auto;
+ background-color: #EAEAEA;
+}
+h1 {
+ margin: 0;
+ padding: 10px;
+}
+nav {
+ float: left;
+ width: 150px;
+ padding: 10px;
+}
+main {
+ margin-left: 160px;
+ padding: 10px;
+ background-color: #FFFFFF;
+}
+footer {
+ text-align: center;
+ font-style: italic;
+ background-color: #CCCCFF;
+ clear: both;
+}
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header><h1>Layout Example</h1></header>
+ <nav>
+ <a href="index.html">Home</a>
+ <a href="page1.html">Page 1</a>
+ <a href="page2.html">Page 2</a>
+ </nav>
+ <main>
+ <h2>Page Heading</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. 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 © </footer>
+ </div>
+ </body>
+</html>
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html new file mode 100644 index 0000000..a9575b3 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.index.html @@ -0,0 +1,40 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</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>
+ <img src="7.7.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+ <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!</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> <!-- end of main content -->
+ <footer>Copyright ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/7.7.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css new file mode 100644 index 0000000..e32be27 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7bistro/bistro.css @@ -0,0 +1,91 @@ +*{ + box-sizing: border-box; +} + +body { + background-color: #00005D; + font-family: Verdana, Arial, sans-serif; +} + +#wrapper { + margin: 0 auto; + width: 80%; + min-width: 940px; + background-color: #B3C7E6; + color: #000066; +} + +header { + background-color: #869DC7; + color: #00005D; + font-size: 150%; + padding: 10px 10px 10px 155px; + height: 150px; + background-repeat: no-repeat; + background-image: url(7.7.lighthouselogo.jpg); +} + +nav { + float: right; + width: 150px; + font-weight: bold; + letter-spacing: 0.1em; +} + +main { + background-color: #FFFFFF; + color: #000000; + padding: 10px 20px; + display: block; + overflow: auto; +} + +h2 { + color: #869DC7; + font-family: Arial, sans-serif; +} + +#floatright { + float: right; + margin: 10px; +} + + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +nav a { + text-decoration: none; + padding: 20px; + display: block; + background-color: #B3C7E6; + border-bottom: 1px solid #FFFFFF; +} + +nav a:link { + color: #FFFFFF; +} + +nav a:visited { + color: #EAEAEA; +} + +nav a:hover { + color: #869DC7; + background-color: #EAEAEA; +} + +footer { + font-size: 70%; + text-align: center; + padding: 10px; + background-color: #869DC7; + clear: both; +} + + + + diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html new file mode 100644 index 0000000..e2c4866 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.floatlys.html @@ -0,0 +1,34 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>CSS Float</title>
+<meta charset="utf-8">
+<style>
+body { width:500px;
+ background-color:#FFFFFF;
+ color:#000000;
+}
+div { background-color:#F3F1BF;
+}
+h1 { background-color:#658B42;
+ padding:10px;
+ color: #E1DB5F;
+}
+p { font-family:Arial,sans-serif;
+ }
+float, margin, and border properties:
+.float { float: left;
+ margin-right: 10px;
+ border: 3px ridge #000000; }
+</style>
+</head>
+<body>
+<h1>Yellow Lady Slipper</h1>
+<div>
+ <img class=float src="7.2.yls.jpg" alt="Yellow Lady Slipper" height="100" width="100">
+ <p>The Yellow Lady Slipper grows in wooded areas and blooms in June each year. The flower is a member of the orchid family.</p>
+</div>
+<h2>Be Green When Enjoying Wildflowers</h2>
+<p>Enjoy wild plants in their native surroundings. Protect their environment in all possible ways — support organizations dedicated to preserving their habitat. </p>
+</body>
+</html>
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg Binary files differnew file mode 100644 index 0000000..7dd9982 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7float/7.2.yls.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html new file mode 100644 index 0000000..14226a7 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.index.html @@ -0,0 +1,98 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper {
+ background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+header {
+ background-color: #869dc7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(7.5.lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+}
+
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main {
+ padding: 20px 20px 0 20px;
+ background-color: #ffffff;
+ color: #000000;
+ display: block;
+}
+main img {
+ margin: 10px;
+ float: right;
+}
+
+footer {
+ font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+
+nav li {
+ display: inline;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ font-size: 1.5em;
+ margin: 5px;
+}
+nav a {
+ text-decoration: none;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+ </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>
+ <img src="7.5.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <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. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hort/7.5.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html new file mode 100644 index 0000000..3d69728 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.index.html @@ -0,0 +1,102 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+nav { float: left;
+ width: 150px;
+}
+main { margin-left: 155px;
+ background-color: #ffffff;
+ color: #000000;
+}
+header { background-color: #869dc7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(7.6.lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+}
+
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+.content {
+ padding: 20px 20px 0 20px;
+}
+main { display: block; }
+#floatright { margin: 10px;
+ float: right;
+}
+
+footer { font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+nav ul {
+ list-style-type: none; padding: 10px;
+}
+nav a {
+ text-decoration: none; padding: 10px;
+ font-weight: bold;
+}
+
+nav a:link {
+ color: #ffffff;
+}
+nav a:visited {
+ color: #EAEAEA;
+}
+nav a:hover {
+ color: #000066;
+}
+
+ </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="menu.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ <main>
+ <div class="content">
+ <img src="7.6.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <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>
+ </div>
+ <footer>Copyright ©
+ </footer>
+ </main>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7hover/7.6.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt new file mode 100644 index 0000000..9be3095 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/README.txt @@ -0,0 +1 @@ +I am using an older version of the book, so this assignment doesn't match up with the student files. I got the older version as a hand-me-down due to budgeting constraints. So please do understand that this section being different isn't out of laze, mistake, or plagarism, but rather the unaffordability of textbooks, but a willingness to still practice. diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html new file mode 100644 index 0000000..bce1e3b --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/index.html @@ -0,0 +1,66 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>First HTML Webpage</title>
+ <meta charset="utf-8">
+ <style>
+* {
+ box-sizing: border-box;
+}
+
+#gallery {
+ position: relative;
+}
+
+#gallery ul {
+ width: 280px;
+ list-style-type: none;
+}
+
+#gallery li {
+ display: inline;
+ float: left;
+ padding: 10px;
+}
+
+#gallery img {
+ border-style: none;
+}
+
+
+#gallery a {
+ text-decoration: none; color: #333; font-style: italic;
+}
+
+#gallery span {
+ display: none;
+}
+
+#gallery a:hover span {
+ display: block;
+ position: absolute;
+ top: 10px;
+ left: 300px;
+ text-align: center;
+}
+ </style>
+ </head>
+ <body>
+ <div id=gallery>
+ <ul>
+ <li><a href="yls.jpg"><img src="yls.jpg" width="100" height="75" alt="YLS"><span><img src="yls.jpg" width="250" height="150" alt="YLS"><br>YLS</span></li>
+ <li><a href="yogadoor.jpg"><img src="yogadoor.jpg" width="100" height="75" alt="yogadoor"><span><img src="yogadoor.jpg" width="250" height="150" alt="yogadoor"><br>yogadoor</span></li>
+ <li><a href="lighthouselogo.jpg"><img src="lighthouselogo.jpg" width="100" height="75" alt="lighthouselogo"><span><img src="lighthouselogo.jpg" width="250" height="150" alt="lighthouselogo"><br>lighthouselogo</span></li>
+ </ul>
+ </div>
+ </body>
+</html>
+
+
+
+
+
+
+
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg Binary files differnew file mode 100644 index 0000000..7dd9982 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yls.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg Binary files differnew file mode 100644 index 0000000..fe0de96 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7p/yogadoor.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt new file mode 100644 index 0000000..db84d5f --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7spw/README.txt @@ -0,0 +1 @@ +Similar to ch7p, this part of the book is missing for me. Textbooks are expensive and all I request is a bit of mercy due to this. diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html new file mode 100644 index 0000000..f4a045e --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.index.html @@ -0,0 +1,90 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+* { box-sizing: border-box; }
+body {font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper { background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+nav a { text-decoration: none;
+ padding: 10px;
+ font-weight: bold;
+}
+nav ul { list-style-type: none;
+ padding: 10px;
+}
+nav { float: left;
+ width: 150px;
+}
+main { margin-left: 155px;
+ background-color: #ffffff;
+ color: #000000;
+}
+header { background-color: #869dc7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+}
+
+h2 { color: #869dc7;
+ font-family: arial, sans-serif;
+}
+.content {padding: 20px 20px 0 20px;
+}
+main { display: block; }
+#floatright { margin: 10px;
+ float: right;
+}
+
+footer { font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+ </style>
+ </head>
+ <body>
+ <div id="wrapper">
+ <header>
+ <h1>Lighthouse Island Bistro</h1>
+ </header>
+ <ul>
+ <li><a href="index.html">Home</a></li>
+ <li><a href="menu.html">Menu</a></li>
+ <li><a href="directions.html">Directions</a></li>
+ <li><a href="contact.html">Contact</a></li>
+ </ul>
+ </nav>
+ </nav>
+ <main>
+ <div class="content">
+ <img src="7.4.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <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>
+ </div>
+ <footer>Copyright ©
+ </footer>
+ </main>
+ </div>
+ </body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7vert/7.4.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html new file mode 100644 index 0000000..7c7e1e2 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.index.html @@ -0,0 +1,109 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>Lighthouse Island Bistro</title>
+ <meta charset="utf-8">
+ <style>
+body {
+ font-family:Verdana, Arial, sans-serif;
+ background-color: #00005D;
+}
+#wrapper {
+ background-color: #b3c7e6;
+ color: #000066;
+ width: 80%;
+ margin: auto;
+ min-width:940px;
+}
+header {
+ background-color: #869DC7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ background-image: url(lighthouselogo.jpg);
+ background-repeat: no-repeat;
+ height: 130px;
+ margin-top: 40px;
+}
+h2 {
+ color: #869dc7;
+ font-family: arial, sans-serif;
+}
+main {
+ padding: 20px 20px 0 20px;
+ background-color: #ffffff;
+ color: #000000;
+ display: block;
+}
+main img {
+ margin: 10px;
+ float: right;
+}
+
+footer {
+ font-size:70%;
+ text-align: center;
+ clear: right;
+ padding-bottom:20px;
+}
+
+nav {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 40px; width: 100%;
+ min-width: 40em;
+ background-color: #B3C7E6;
+ z-index: 9999;
+}
+
+nav li {
+ display: inline;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ font-size: 1.5em;
+ margin: 5px;
+ padding-right: 10%;
+}
+nav a {
+ text-decoration: none;
+ padding-left: 10px;
+ padding-right: 10px;
+}
+ </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>
+ <img src="7.11.lighthouseisland.jpg" width="250" height="355" id="floatright" alt="Lighthouse Island">
+ <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. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/ch7z/7.11.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html new file mode 100644 index 0000000..ecd29f3 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link media="screen" href="bistro.css" rel="stylesheet">
+<link media="print" href="bistroprint.css" rel="stylesheet">
+</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>
+ <img src="7.8.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+ <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!</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> <!-- end of main content -->
+ <footer>Copyright ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/7.8.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css new file mode 100644 index 0000000..f47a52d --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistro.css @@ -0,0 +1,47 @@ +* { box-sizing: border-box; }
+body { background-color: #00005D;
+ font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto;
+ width: 80%;
+ min-width: 940px;
+ background-color: #B3C7E6;
+ color: #000066; }
+header { background-color: #869DC7;
+ color: #00005D;
+ font-size: 150%;
+ padding: 10px 10px 10px 155px;
+ height: 150px;
+ background-repeat: no-repeat;
+ background-image: url(7.8.lighthouselogo.jpg); }
+nav { float: right;
+ width: 150px;
+ font-weight: bold;
+ letter-spacing: 0.1em; }
+main { background-color: #FFFFFF;
+ color: #000000;
+ padding: 10px 20px;
+ display: block;
+ overflow: auto; }
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+ margin: 0;
+ padding: 0; }
+nav a { text-decoration: none;
+ padding: 20px;
+ display: block;
+ background-color: #B3C7E6;
+ border-bottom: 1px solid #FFFFFF;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+ background-color: #EAEAEA; }
+footer { font-size: 70%;
+ text-align: center;
+ padding: 10px;
+ background-color: #869DC7;
+ clear: both;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css new file mode 100644 index 0000000..e165b24 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/print/bistroprint.css @@ -0,0 +1,55 @@ +* {
+ box-sizing: border-box;
+}
+
+body { background-color: #00005D;
+font-family: Verdana, Arial, sans-serif; }
+#wrapper { margin: 0 auto;
+ width: 80%;
+ min-width: 940px;
+ background-color: #B3C7E6;
+color: #000066; }
+header { background-color: #869DC7;
+ color: #000000;
+ font-size: 20pt;
+ padding: 10px 10px 10px 155px;
+ height: 150px;
+ background-repeat: no-repeat;
+background-image: url(7.8.lighthouselogo.jpg); }
+
+nav{
+display:none;
+}
+
+main {
+ background-color: #FFFFFF;
+ color: #000000;
+ padding: 10px 20px;
+ display: block;
+ overflow: auto;
+ font-family: "Times New Roman", serif;
+ font-size: 12pt;
+}
+h2 { color: #869DC7; font-family: Arial, sans-serif; }
+#floatright { float: right; margin: 10px; }
+
+nav ul { list-style-type: none;
+ margin: 0;
+padding: 0; }
+nav a { text-decoration: none;
+ padding: 20px;
+ display: block;
+ background-color: #B3C7E6;
+ border-bottom: 1px solid #FFFFFF;
+}
+nav a:link { color: #FFFFFF; }
+nav a:visited { color: #EAEAEA; }
+nav a:hover { color: #869DC7;
+background-color: #EAEAEA; }
+footer { font-size: 70%;
+ text-align: center;
+ padding: 10px;
+ background-color: #869DC7;
+ clear: both;
+}
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html new file mode 100644 index 0000000..60471e6 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.index.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<!--The Chapter 7 folder didn't come with any template for this. So I opted to use the 7.7 work as a a base-->
+<html lang="en">
+<head>
+<title>Lighthouse Island Bistro</title>
+<meta charset="utf-8">
+<link href="bistro.css" rel="stylesheet">
+</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>
+ <img src="7.9.lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island" id="floatright">
+ <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!</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> <!-- end of main content -->
+ <footer>Copyright ©
+ </footer>
+ </div> <!-- end of wrapper -->
+</body>
+</html>
+
+
diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg Binary files differnew file mode 100644 index 0000000..bf09b59 --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouseisland.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg Binary files differnew file mode 100644 index 0000000..b6dfc6c --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.lighthouselogo.jpg diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif Binary files differnew file mode 100644 index 0000000..832901a --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/7.9.sprites.gif diff --git a/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css new file mode 100644 index 0000000..b8a0b9d --- /dev/null +++ b/HTML/Chapter/Ch. 7 hands-on assignments/Ch7_msglm/sprites/bistro.css @@ -0,0 +1,95 @@ +*{ + box-sizing: border-box; +} + +body { + background-color: #00005D; + font-family: Verdana, Arial, sans-serif; +} + +#wrapper { + margin: 0 auto; + width: 80%; + min-width: 940px; + background-color: #B3C7E6; + color: #000066; +} + +header { + background-color: #869DC7; + color: #00005D; + font-size: 150%; + padding: 10px 10px 10px 155px; + height: 150px; + background-repeat: no-repeat; + background-image: url(7.9.lighthouselogo.jpg); +} + +nav { + float: right; + width: 150px; + font-weight: bold; + letter-spacing: 0.1em; +} + +main { + background-color: #FFFFFF; + color: #000000; + padding: 10px 20px; + display: block; + overflow: auto; +} + +h2 { + color: #869DC7; + font-family: Arial, sans-serif; +} + +#floatright { + float: right; + margin: 10px; +} + + +nav ul { + list-style-type: none; + margin: 0; + padding: 0; +} + +nav a { + text-decoration: none; + padding: 20px; + display: block; + background-color: #B3C7E6; + border-bottom: 1px solid #FFFFFF; + background-image: url(7.9.sprites.gif); + background-repeat: no-repeat; + background-position: right 0; +} + +nav a:link { + color: #FFFFFF; +} + +nav a:visited { + color: #EAEAEA; +} + +nav a:hover { + color: #869DC7; + background-color: #EAEAEA; + background-position: right -100px; +} + +footer { + font-size: 70%; + text-align: center; + padding: 10px; + background-color: #869DC7; + clear: both; +} + + + + |
