diff options
| author | msglm <msglm@techchud.xyz> | 2023-01-14 05:31:48 -0600 |
|---|---|---|
| committer | msglm <msglm@techchud.xyz> | 2023-01-14 05:31:48 -0600 |
| commit | 9d53d8857eaa1c9405894a88ca75bc4657e42f35 (patch) | |
| tree | eb1efc1d028b949dd83bb710c68be8eff58f26e7 /HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html | |
| download | school-code-9d53d8857eaa1c9405894a88ca75bc4657e42f35.tar.gz school-code-9d53d8857eaa1c9405894a88ca75bc4657e42f35.tar.bz2 school-code-9d53d8857eaa1c9405894a88ca75bc4657e42f35.zip | |
Diffstat (limited to 'HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html')
| -rw-r--r-- | HTML/Chapter/Ch. 8 hands-on assignments/Ch8_msglm/ch8resp2/8.9.index.html | 170 |
1 files changed, 170 insertions, 0 deletions
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>
+
+
|