diff --git a/case1/gp_cover_txt.html b/case1/gp_cover.html similarity index 87% rename from case1/gp_cover_txt.html rename to case1/gp_cover.html index 2ced369..ae2416e 100644 --- a/case1/gp_cover_txt.html +++ b/case1/gp_cover.html @@ -7,15 +7,18 @@ Case Problem 1 Ghost of the Deep Cover Page - Author: - Date: + Author: Rob and Peter + Date: 11/8/18 Filename: gp_cover.html --> Ghost of the Deep Cover Page - + + + + diff --git a/case1/gp_layout.css b/case1/gp_layout.css new file mode 100644 index 0000000..218b03b --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,106 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Rob and Peter + Date: 11/8/18 + + Filename: gp_layout.css + + This file contains the layout styles and media + queries used with sample pages from the Golden + Pulps website. + +*/ + + +/* Import Basic Design Styles Used on All Screens */ + +@import url("gp_designs.css"); + +/* Flex Layout Styles */ + +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#sheet { + -webkit-flex: 3 1 301px; + flex: 3 1 301px; +} + +article { + -webkit-flex: 1 3 180px; + flex: 1 3 180px; +} + + +/* ============================================ + Mobile Devices: 0 - 480 pixels + ============================================ +*/ + +@media only screen and (max-width: 480px) { + img.panel { + width: 100%; + } + + nav.horizonal { + -webkit-order: 99; + order: 99; + } + body > footer { + -webkit-order: 100; + order: 100; + } +} +/* =================================================== + Tablet and Desktop Devices: Greater than 480 pixels + =================================================== +*/ + +@media only screen and (min-width: 481px) { + nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + height: 40px; + } + nav.horizontal ul > li { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + img.size1 { + width: 100%; + } + img.size2 { + width: 60%; + } + img.size3 { + width: 40%; + } + img.size4 { + width: 30%; + } + } + + + + + + + + + + + diff --git a/case1/gp_layout_txt.css b/case1/gp_layout_txt.css deleted file mode 100644 index 00370c1..0000000 --- a/case1/gp_layout_txt.css +++ /dev/null @@ -1,42 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 1 - - Author: - Date: - - Filename: gp_layout.css - - This file contains the layout styles and media - queries used with sample pages from the Golden - Pulps website. - -*/ - - -/* Import Basic Design Styles Used on All Screens */ - -@import url("gp_designs.css"); - -/* Flex Layout Styles */ - - - - - -/* ============================================ - Mobile Devices: 0 - 480 pixels - ============================================ -*/ - - - - -/* =================================================== - Tablet and Desktop Devices: Greater than 480 pixels - =================================================== -*/ - diff --git a/case1/gp_page1_txt.html b/case1/gp_page1.html similarity index 87% rename from case1/gp_page1_txt.html rename to case1/gp_page1.html index 846288b..fc2092f 100644 --- a/case1/gp_page1_txt.html +++ b/case1/gp_page1.html @@ -7,14 +7,18 @@ Case Problem 1 Ghost of the Deep Page 1 - Author: - Date: + Author: Rob and Peter + Date: 11/8/18 Filename: gp_page1.html --> Ghost of the Deep Page 1 + + + + diff --git a/case1/gp_page2_txt.html b/case1/gp_page2.html similarity index 90% rename from case1/gp_page2_txt.html rename to case1/gp_page2.html index fc80c51..c0be07f 100644 --- a/case1/gp_page2_txt.html +++ b/case1/gp_page2.html @@ -7,14 +7,18 @@ Case Problem 1 Ghost of the Deep Page 2 - Author: - Date: + Author: Rob and Peter + Date: 11/8/18 Filename: gp_page2.html --> Ghost of the Deep Page 2 + + + + diff --git a/case1/gp_page3_txt.html b/case1/gp_page3.html similarity index 89% rename from case1/gp_page3_txt.html rename to case1/gp_page3.html index 06f2365..751ce84 100644 --- a/case1/gp_page3_txt.html +++ b/case1/gp_page3.html @@ -7,14 +7,18 @@ Case Problem 1 Ghost of the Deep Page 3 - Author: - Date: + Author: Rob and Peter + Date: 11/8/18 Filename: gp_page3.html --> Ghost of the Deep Page 3 - + \ + + + + diff --git a/case1/gp_print.css b/case1/gp_print.css new file mode 100644 index 0000000..02ec37d --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,55 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Peter and Rob + Date: 11/8/18 + + Filename: gp_print.css + + This file contains the printer styles used with the sample + comic book pages from Golden Pulps. + +*/ + + + +/* Hidden Objects */ +nav, footer, article { + display: none; +} + +/* Comic Book Sheet Styles */ + +section#sheet { + width: 6in; + margin-top: 0in; + margin-bottom: 0in; + margin-left: auto; + margin-right: auto; +} +img.size1 { + width: 5in; + } +img.size2 { + width: 3in; +} +img.size3 { + width: 2in; +} + img.size4 { + width: 1.5in; +} + + + + + + + + + + + diff --git a/case1/gp_print_txt.css b/case1/gp_print_txt.css deleted file mode 100644 index f8fc0d4..0000000 --- a/case1/gp_print_txt.css +++ /dev/null @@ -1,39 +0,0 @@ -@charset "utf-8"; -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 1 - - Author: - Date: - - Filename: gp_print.css - - This file contains the printer styles used with the sample - comic book pages from Golden Pulps. - -*/ - - - -/* Hidden Objects */ - - - - - - - -/* Comic Book Sheet Styles */ - - - - - - - - - - - - diff --git a/case2/wc_hole01.html b/case2/wc_hole01.html index 293f7a9..a017226 100644 --- a/case2/wc_hole01.html +++ b/case2/wc_hole01.html @@ -5,6 +5,7 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 2 + Willet Creek Hole 1 diff --git a/case2/wc_styles.css b/case2/wc_styles.css new file mode 100644 index 0000000..d3fefe0 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,119 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Peter and Rob + Date: 11/12/18 + + Filename: wc_styles.css + + This file contains the layout styles and media + queries used with sample pages from the Willet + Creek Golf Course website. + +*/ + + +/* Import Design Styles */ + +@import url("wc_designs.css"); + +/* Flex Layout Styles */ +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +body > nav#hole_list { + -webkit-flex: 1 3 140px; + flex: 1 3 140px; +} +body > article { + -webkit-flex: 3 1 341px; + flex: 3 1 341px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +body > article > section#stats { + -webkit-flex: 1 4 120px; + flex: 1 4 120px; +} +body > article > section#summary { + -webkit-flex: 4 1 361px; + flex: 4 1 361px; +} +aside { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +aside > div { + webkit-flex: 1 1 180px; + flex: 1 1 180px; +} + + +/* ============================= + Mobile Styles: 0 - 480 pixels + ============================= +*/ +@media only screen and (max-width: 480px) { + nav#hole_list { + -webkit-order: 99; + order: 99; + } + footer { + -webkit-order: 100; + order: 100; + } + nav.horizontal ul { + display: none; + } + a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; + } + aside { + display: none; + } +} + + + +/* ================================================= + Tablet and Desktop Styles: 481 pixels and greater + ================================================= +*/ +@media only screen and (min-width: 481px) { + a#navicon { + display: none; + } + nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + nav.horizontal ul > li { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + } + + + + + + + + + diff --git a/case2/wc_styles_txt.css b/case2/wc_styles_txt.css deleted file mode 100644 index 0534fe4..0000000 --- a/case2/wc_styles_txt.css +++ /dev/null @@ -1,41 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 2 - - Author: - Date: - - Filename: wc_styles.css - - This file contains the layout styles and media - queries used with sample pages from the Willet - Creek Golf Course website. - -*/ - - -/* Import Design Styles */ - - - -/* Flex Layout Styles */ - - - -/* ============================= - Mobile Styles: 0 - 480 pixels - ============================= -*/ - - - - - -/* ================================================= - Tablet and Desktop Styles: 481 pixels and greater - ================================================= -*/ - diff --git a/case3/cw_home_txt.html b/case3/cw_home.html similarity index 95% rename from case3/cw_home_txt.html rename to case3/cw_home.html index 3d3f80e..6d30883 100644 --- a/case3/cw_home_txt.html +++ b/case3/cw_home.html @@ -7,14 +7,17 @@ Case Problem 3 Cauli-Wood Gallery home page - Author: - Date: + Author: Peter and Rob + Date: 11/12/18 Filename: cw_home.html --> Cauli-Wood Gallery + + + diff --git a/case3/cw_styles.css b/case3/cw_styles.css new file mode 100644 index 0000000..9c986d5 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,144 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: Peter and Rob + Date: 11/12/18 + + Filename: cw_styles.css + + This file contains the screen styles used with the + Cauli-Wood Gallery home page + +*/ + + +/* Import Basic Design Styles */ + +@import url("cw_designs.css"); + +/* =============================== + General Styles for All Devices + =============================== +*/ +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +nav#bottom { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: center; +} + +nav#bottom ul { + -webkit-flex: 0 1 150px; + flex: 0 1 150px; +} + + + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ + +@media only screen and (max-width: 480px) { + body { + color: rgb(211, 211, 211); + background-color: rgb(51, 51, 51); + } + + aside, article img, section#spotlight { + display: none; + } + + + p#links { + display: -webkit-flex; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + justify-content: space-around; + } + + p#links a { + color: white; + background-color: rgb(220, 27, 27); + border-radius: 20px; + padding: 10px; + text-decoration: none; + } + aside > section#bottom{ + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +aside > section#bottom > div { + webkit-flex: 1 1 180px; + flex: 1 1 180px; +} + +} + + + + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + body { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + article { + -webkit-flex: 2 1 400px; + flex: 2 1 400px; + } + + aside { + -webkit-flex: 1 2 200px; + flex: 1 2 200px; + } + + nav#top ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content: center; + -webkit-align-items: center; + align-items: center; + } + nav#top ul li { + -webkit-flex: 0 1 80px; + flex: 0 1 80px; + } + + p#links { + display: none; + } + +} diff --git a/case3/cw_styles_txt.css b/case3/cw_styles_txt.css deleted file mode 100644 index a641272..0000000 --- a/case3/cw_styles_txt.css +++ /dev/null @@ -1,42 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 3 - - Author: - Date: - - Filename: cw_styles.css - - This file contains the screen styles used with the - Cauli-Wood Gallery home page - -*/ - - -/* Import Basic Design Styles */ - - - -/* =============================== - General Styles for All Devices - =============================== -*/ - - - -/* =============================== - Mobile Styles up to 480 pixels - =============================== -*/ - - - - -/* ============================================ - Tablet and Desktop Devices: 481px or more - ============================================ -*/ - diff --git a/case4/jb_designs.css b/case4/jb_designs.css new file mode 100644 index 0000000..0c32b14 --- /dev/null +++ b/case4/jb_designs.css @@ -0,0 +1,253 @@ +@charset "utf-8"; + +/* + + + Filename: jb_designs.css + + This file design style used by all screen sizes for + the Jersey Buoys Surfing School. + +*/ + + +/* ============================================= + Base styles used by All Screens + ============================================= +*/ + + +/* HTML and Body Styles */ + +html { + background: rgb(246, 177, 177); + font-family: Verdana, Geneva, sans-serif; + font-size: 12px; +} + +body { + background: white; + max-width: 1024px; + margin: 0px auto; + box-shadow: rgb(51, 51, 51) 10px 10px 25px, rgb(51, 51, 51) -10px 10px 25px; +} + +body > header { + background: white; + width: 100%; +} + +img#logoImage { + display: block; + width: 100%; + max-width: 600px; + margin: 0px auto; +} + +p { + font-size: 1.2em; + line-height: 1.4em; + margin: 15px; +} + +nav#top ul li { + margin: 10px; +} + +nav#top ul li a { + color: white; + display: block; + font-size: 1.2em; + text-align: center; + padding: 50% 0%; +} + +nav#top ul li a:hover, nav#top ul li a:active { + color: rgb(255, 0, 0); + text-shadow: 0px 0px 2px black, 0px 0px 15px white; +} + +article p:nth-of-type(2) img { + float: right; + width: 45%; + margin: 0px 0px 120px 50px; + transform: translateY(60px) translateX(-0px) rotate(30deg); + box-shadow: rgba(107, 244, 66,1.00) 10px -10px 30px; +} + +section#slang { + background-color: rgb(171, 171, 171); + padding-bottom: 15px; +} + +section#slang h1 { + font-size: 2.5em; + color: rgb(107, 244, 66); + text-shadow: white -2px 0px 1px, white -5px 0px 30px; + padding: 20px 15px 10px 0px; + text-align: right +} + +section#slang img { + width: 35%; + float: left; + display: block; + margin: 20px 20px 10px 15px; +} + +section#slang p { + margin-bottom: 0px; +} + +section#slang::after { + content: ""; + display: table; + clear: both; +} + +/* Aside Styles */ + +aside { + background-color: rgb(211, 211, 211); +} + +aside h1 { + font-size: 2em; + font-weight: normal; + letter-spacing: 0.4em; + text-align: center; + margin: 20px 0px 25px; +} + +aside a { + color: rgb(234, 44, 44); + justify-content: space-around; +} + +/* Description List */ + +dl { + text-align: center; +} + +aside img { + display: block; + width: 30%; + margin: 5px auto; +} + +dl dd { + margin-bottom: 20px; +} + +footer { + width: 100%; +} + +/* Case 2 Color Aside Styles*/ + +section#slang{ + border-top: 5px solid rgb(151, 151, 151); +} + +section#slang { + width: 90%; + margin: 10px; + border: 1px solid rgb(101, 151, 101); + -moz-border-radius: 15px; + -webkit-border-radius: 15px; + border-radius: 15px; +} + +section#slang { + font-size: 1.2em; + line-height: 2em; + text-align: center; + border-bottom: 1px solid rgb(101, 151, 101); + border-radius: 15px 15px 0px 0px; +} + +section#slang { + font-size: 1.1em; + margin: 10px; + text-align: center; +} + +#div1 h1 { + background-color: rgb(88, 87, 255); + color: rgb(241, 255, 241); +} + +#div1 { + background-color: rgb(158, 158, 255); +} + +#div2 h1 { + background-color: rgb(128, 128, 0); + color: rgb(241, 255, 241); +} + +#div2 { + background-color: rgb(228, 228, 30); +} + +#div3 h1 { + background-color: rgb(207, 66, 207); + color: rgb(241, 255, 241); +} + +#div3 { + background-color: rgb(232, 156, 232); +} + +#div4 h1 { + background-color: rgb(88, 87, 255); + color: rgb(241, 255, 241); +} + +#div4 { + background-color: rgb(158, 158, 255); +} + +#div5 h1 { + background-color: rgb(128, 128, 0); + color: rgb(241, 255, 241); + } + +#div5 { + background-color: rgb(228, 228, 30); +} +#div6 h1 { +background-color: rgb(207, 66, 207); + color: rgb(241, 255, 241); +} + +#div6 { + background-color: rgb(232, 156, 232); +} + +#div7 h1 { + background-color: rgb(88, 87, 255); + color: rgb(241, 255, 241); +} + +#div7 { + background-color: rgb(158, 158, 255); +} + +#div8 h1 { + background-color: rgb(128, 128, 0); + color: rgb(241, 255, 241); +} +#div8 { + background-color: rgb(228, 228, 30); +} + +#div9 h1 { + background-color: rgb(207, 66, 207); + color: rgb(241, 255, 241); +} + +#div9 { + background-color: rgb(232, 156, 232); +} diff --git a/case4/jb_home.html b/case4/jb_home.html new file mode 100644 index 0000000..edd244a --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,132 @@ + + + + + + Jersey Buoys Surfing School + + + + + + + + +
+ Jersey Buoys Surfing School + +
+
+ +

Come enjoy the excitement of riding the waves along the Jersey Shore with Jersey Buoys. + Our nationally-accredited school brings its 22 years of experience in helping you become + the surfer you've dreamed of becoming.

+

Our classes are tailored to your needs. We provide instruction in basic surfing techniques + and advanced techniques from cutbacks to boosts to hobble-bobbles. Choose a private or + group lesson. Grommets can participate in 1, 3, or 5 half-day courses. We also sponsor + surfing camps with catered meals and lodging. +

+

Whether a Barney or a Gandolf, you are always safe in our waters. Our experienced + instructors are accredited by the National Instructors and Surf Schools Association. + They are fully Red Cross and First Aid certified. In addition to being great teachers, + every instructor has gone through extensive lifeguard training.

+

The next big wave is approaching: Catch it with Jersey Buoys. Call to set up an + appointment, grab a board from the quiver and head to the Green Room.

+
+

Surfer Slang

+
+

barney

+

A new and inexperience surfer

+
+ +
+

boost

+

To take off from a wave into an aerial

+
+
+

cutback

+

To change direction when streaking ahead of the curl

+
+
+

gandolf

+

An experienced wise older surfer

+
+
+

green room

+

The inside of a tube

+
+
+

grommet

+

A very young surfer, a child

+
+

gurfer

+

A girl surfer

+
+

hobble-bobble

+

An aerial launch while flapping your arms like a bird

+
+

quiver

+

A collection of surfboards

+
+
+
+ + + + + diff --git a/case4/jb_home_txt.html b/case4/jb_home_txt.html deleted file mode 100644 index 2fd8fdf..0000000 --- a/case4/jb_home_txt.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - Jersey Buoys Surfing School - - - - - - diff --git a/case4/jb_reset.css b/case4/jb_reset.css new file mode 100644 index 0000000..5ceec6f --- /dev/null +++ b/case4/jb_reset.css @@ -0,0 +1,52 @@ +@charset "utf-8"; + +/* + + + Filename: jb_reset.css + +*/ + + +/* Basic styles to be used with all devices and under all conditions */ + +article, aside, figcaption, figure, +footer, header, main, nav, section { + display: block; +} + +address, article, aside, blockquote, body, cite, +div, dl, dt, dd, em, figcaption, figure, footer, +h1, h2, h3, h4, h5, h6, header, html, img, +li, main, nav, nav a, ol, p, section, span, ul { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + vertical-align: baseline; + background: transparent; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + + +/* Set the default page element styles */ + +body { + line-height: 1.2em; +} + +ul, ol { + list-style: none; +} + +nav ul { + list-style: none; + list-style-image: none; +} + +nav a { + text-decoration: none; +} + diff --git a/case4/jb_styles.css b/case4/jb_styles.css new file mode 100644 index 0000000..fb8a6de --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,177 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Peter and Rob + Date: 11/14/18 + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ +/* Import Basic Design Styles */ + +@import url("jb_designs.css"); + +/* =============================== + General Styles for All Devices + =============================== +*/ +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +footer { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: center; +} + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ + +@media only screen and (max-width: 480px) { + body { + color: rgb(211, 211, 211); + background-color: rgb(51, 51, 51); + } + + aside, article img, section#slang { + display: none; + } + aside { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +aside div { + webkit-flex: 1 1 180px; + flex: 1 1 180px; +} + + nav#top ul { + display: -webkit-flex-flow; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + nav#top ul li { + font-size: 1em; + color: black; + display: -webkit-flex-flow; + display: flex; + -webkit-flex: 1 1 130px; + flex: 1 1 130px; + } + nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + height: 240px; + } + section# { + -webkit-order: 99; + order: 99; +} + footer { + -webkit-order: 100; + order: 100; +} + a#navicon { + display: block; + } +a#navicon:hover+ul, nav.horizontal ul:hover { + display:block; +} + +} + + + + + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + body { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + article { + -webkit-flex: 2 1 400px; + flex: 2 1 400px; + } + + aside { + -webkit-flex: 1 2 200px; + flex: 1 2 200px; + } + + nav#top ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content: center; + -webkit-align-items: center; + align-items: center; + } + nav#top ul li { + -webkit-flex: 0 1 80px; + flex: 0 1 80px; + } + + p#links { + display: none; + } +/* Main Menu Styles */ + +ul.mainmenu { + display: block; +} + +ul.mainmenu > li { + text-indent: 15px; +} + +ul.mainmenu > li:first-of-type a { + color: white; + background-color: rgb(31, 73, 125); +} + +/* Submenu Styles */ + +ul.submenu { + width: 100%; + background-color: rgb(181, 204, 136); +} + + +} diff --git a/case4/jb_styles_txt.css b/case4/jb_styles_txt.css deleted file mode 100644 index cbb642a..0000000 --- a/case4/jb_styles_txt.css +++ /dev/null @@ -1,17 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 4 - - Author: - Date: - - Filename: jb_styles.css - - This file contains the screen styles used with the - Jersey Buoys home page - -*/ - diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..2a070e0 --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,101 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: + Date: + + Filename: tf_print2.css + + This file contains the printer styles used with the Trusted + Friends Parents Tips page + +*/ + + + +/* Hidden Objects */ + +nav, body > header > h1, section#left, body > footer { + display: none; +} + +/* Page Box Styles */ + +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + +/* Header Styles */ + +body > header >img { + display: block; + width: 100%; +} + + +/* Typography Styles */ + +article > header { + margin-bottom: 0.2in; +} + +article h1 { + font-size: 24pt; + line-height: 26pt; +} + +aside { + background-color: rgb(211, 211, 211); + margin-top: 0.3in; +} + +aside h1 { + font-size: 18pt; + line-height: 20pt; +} + +aside img { + width: 0.8in; +} + +p { + font-size: 12pt; + margin-top: 0.1in; + margin-bottom: 0.1in; +} + +/* Hypertext Styles */ + +a { + color: black; + text-decoration: none; +} + +a::after { + content: " (" attr(href) ") "; + font-weight: bold; + word-wrap: break-word; +} + + +/* Page Break Styles */ + +aside { + page-break-after: always; +} + +img, ol, ul { + page-break-inside: avoid; +} + +p { + orphans: 3; + widows: 3; +} + diff --git a/review/tf_print2_txt.css b/review/tf_print2_txt.css deleted file mode 100644 index dd4fac8..0000000 --- a/review/tf_print2_txt.css +++ /dev/null @@ -1,42 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Review Assignment - - Author: - Date: - - Filename: tf_print2.css - - This file contains the printer styles used with the Trusted - Friends Parents Tips page - -*/ - - - -/* Hidden Objects */ - - - -/* Page Box Styles */ - - - -/* Header Styles */ - - - -/* Typography Styles */ - - - -/* Hypertext Styles */ - - - - -/* Page Break Styles */ - diff --git a/review/tf_styles4.css b/review/tf_styles4.css new file mode 100644 index 0000000..ec8d1a9 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,128 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Peter and Rob + Date: 11/07/18 + + Filename: tf_styles4.css + + This file contains the screen styles used with the Trusted + Friends blog tips + +*/ + + +/* Import Basic Design Styles Used on All Screens */ + +@import url("tf_designs.css"); + + + +/* General Flex Styles */ + + +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#left { + -webkit-flex: 1 8 351px; + flex: 1 8 130px; +} + +section#right { + -webkit-flex: 8 1 351px; + flex: 8 1 351px; +} + +section.tips { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +article { + -webkit-flex: 2 1 351px; + flex: 1 2 351px; +} +aside { + -webkit-flex: 1 2 250px; + flex: 2 1 250px; +} +nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; +} + + + + + +/* =============================== + Mobile Devices: 0 to 480px + =============================== +*/ + @media only screen and (max-width: 480px) { + nav.vertical ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + height: 240px; + } + section#left { + -webkit-order: 99; + order: 99; +} + footer { + -webkit-order: 100; + order: 100; +} + a#navicon { + display: block; + } +nav.horizontal ul{ + display: none; +} +a#navicon:hover+ul, nav.horizontal ul:hover { + display:block; +} + + +} + + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ +@media only screen and (min-width: 481px) { + nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + height: 160px; + } + +} + + + + + + + + + diff --git a/review/tf_styles4_txt.css b/review/tf_styles4_txt.css deleted file mode 100644 index 4aa8789..0000000 --- a/review/tf_styles4_txt.css +++ /dev/null @@ -1,46 +0,0 @@ -@charset "utf-8"; -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Review Assignment - - Author: - Date: - - Filename: tf_styles4.css - - This file contains the screen styles used with the Trusted - Friends blog tips - -*/ - - -/* Import Basic Design Styles Used on All Screens */ - -@import url("tf_designs.css"); - - - -/* General Flex Styles */ - - - - - - -/* =============================== - Mobile Devices: 0 to 480px - =============================== -*/ - - - - - -/* ============================================ - Tablet and Desktop Devices: 481px or more - ============================================ -*/ - - - diff --git a/review/tf_tips_txt.html b/review/tf_tips.html similarity index 95% rename from review/tf_tips_txt.html rename to review/tf_tips.html index 5f89bf6..8e72381 100644 --- a/review/tf_tips_txt.html +++ b/review/tf_tips.html @@ -7,14 +7,18 @@ Review Assignment Trusted Friends Parenting Tips - Author: - Date: + Author: Rob and Peter + Date: 11/7/18 Filename: tf_tips.html --> Trusted Friends: Education Tips + + + + diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html similarity index 97% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html index f36bf96..68c86d8 100644 --- a/tutorial/tf_articles_txt.html +++ b/tutorial/tf_articles.html @@ -16,6 +16,9 @@ Trusted Friends: Articles of Interest + + + diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..f7e3f0f --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,98 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Peter and Rob + Date: 11/06/18 + + Filename: tf_flex.css + + This file contains the flex styles used in the Trusted Friends + Pre-K Classes page. + +*/ + + +/* ================ + Base Flex Styles + ================ +*/ + + body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + header, footer { + width: 100%; + } + aside { + -webkit-flex: 1 1 120px; + flex: 1 1 120px; + } + section#main { + -webkit-flex: 3 1 361px; + flex: 3 1 361px; + } + section#topics { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + section#topics article { + -webkit-flex: 1 1 200px; + flex: 1 1 200px; + } + + + + + +/* ========================= + Mobile Styles: 0 to 480px + ========================= +*/ + +@media only screen and (max-width: 480px) { + +aside { + -webkit-order: 99; + order: 99; +} + +footer { + -webkit-order: 100; + order: 100; +} + +} + +/* ============================================ + Tablet and Desktop Styles: 481px and greater + ============================================ +*/ + +@media only screen and (min-width: 481px) { + nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + nav.horizontal li { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + +} + + diff --git a/tutorial/tf_flex_txt.css b/tutorial/tf_flex_txt.css deleted file mode 100644 index e441a76..0000000 --- a/tutorial/tf_flex_txt.css +++ /dev/null @@ -1,49 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Tutorial Case - - Author: - Date: - - Filename: tf_flex.css - - This file contains the flex styles used in the Trusted Friends - Pre-K Classes page. - -*/ - - -/* ================ - Base Flex Styles - ================ -*/ - - - - -/* ========================= - Mobile Styles: 0 to 480px - ========================= -*/ - -@media only screen and (max-width: 480px) { - - - -} - -/* ============================================ - Tablet and Desktop Styles: 481px and greater - ============================================ -*/ - -@media only screen and (min-width: 481px) { - - - -} - - diff --git a/tutorial/tf_home_txt.html b/tutorial/tf_home.html similarity index 91% rename from tutorial/tf_home_txt.html rename to tutorial/tf_home.html index 31bb7ed..109158e 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -1,5 +1,7 @@ + Trusted Friends Daycare + + + + diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css similarity index 65% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..47afc0f 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Rob and Peter + Date: 11/6/18 Filename: tf_navicon.css @@ -21,7 +21,9 @@ =========== */ - +a#navicon { + display: none; +} /* =============================== @@ -30,6 +32,14 @@ */ @media only screen and (max-width: 480px) { - + a#navicon { + display: block; + } +nav.horizontal ul{ + display: none; +} +a#navicon:hover+ul, nav.horizontal ul:hover { + display:block; +} } diff --git a/tutorial/tf_prek_txt.html b/tutorial/tf_prek.html similarity index 95% rename from tutorial/tf_prek_txt.html rename to tutorial/tf_prek.html index 3498f36..24feedc 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,15 +7,18 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: - Date: + Author: Peter and Rob + Date: 11/06/18 Filename: tf_prek.html --> Pre-K Classes at Trusted Friends - + + + + @@ -23,6 +26,9 @@ Trusted Friends