diff --git a/background1.jpg b/background1.jpg new file mode 100644 index 0000000..5cd10ba Binary files /dev/null and b/background1.jpg differ diff --git a/case1/gp_cover_txt.html b/case1/gp_cover.html similarity index 86% rename from case1/gp_cover_txt.html rename to case1/gp_cover.html index 2ced369..4ae0cd8 100644 --- a/case1/gp_cover_txt.html +++ b/case1/gp_cover.html @@ -7,16 +7,20 @@ Case Problem 1 Ghost of the Deep Cover Page - Author: - Date: - + Author: Brett and Jeremy + Date: 11/7/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..7cc4c60 --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,110 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Brett and Jeremy + Date: 11/7/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-flex; + display: -khtml-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-flow: row wrap; + -khtml-flex-flow: row wrap; + -moz-flex-flow: row wrap; + -ms-flex-flow: row wrap; + -o-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.horizontal{ + -webkit-order: 99; + order: 99; + } + + 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[class^="panel size1"] { + width: 100%; + } + + img[class^="panel size2"] { + width: 60%; + } + img[class^="panel size3"] { + width: 40%; + } + img[class^="panel 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..9c33ea0 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: Brett and Jeremy + Date: 11/7/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..90a46b4 100644 --- a/case1/gp_page2_txt.html +++ b/case1/gp_page2.html @@ -7,14 +7,19 @@ Case Problem 1 Ghost of the Deep Page 2 - Author: - Date: + Author: Brett and Jeremy + Date: 11/7/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..ff8b6c8 100644 --- a/case1/gp_page3_txt.html +++ b/case1/gp_page3.html @@ -7,14 +7,19 @@ Case Problem 1 Ghost of the Deep Page 3 - Author: - Date: + Author: Brett and Jeremy + Date: 11/7/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..4f09ed9 --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,61 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Brett and Jeremy + Date: 11/7/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[class^="panel size1"] { + width: 5in; +} + +img[class^="panel size2"] { + width: 3in; +} +img[class^="panel size3"] { + width: 2in; +} +img[class^="panel 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_styles.css b/case2/wc_styles.css new file mode 100644 index 0000000..0316dd4 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,132 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Jeremy and Brett + Date: 11/8/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-flex; + display: -khtml-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-flow: row wrap; + -khtml-flex-flow: row wrap; + -moz-flex-flow: row wrap; + -ms-flex-flow: row wrap; + -o-flex-flow: row wrap; + flex-flow: row wrap; +} + +nav#hole_list{ + -webkit-flex: 1 3 140px; + flex: 1 3 140px; +} + +article { + -webkit-flex: 3 1 341px; + flex: 3 1 341px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#stats{ + -webkit-flex: 1 4 120px; + flex: 1 4 120px; +} + +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; + } + + a#navicon { + display: block; + } + + 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; + -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 94% rename from case3/cw_home_txt.html rename to case3/cw_home.html index 3d3f80e..b1b9e8b 100644 --- a/case3/cw_home_txt.html +++ b/case3/cw_home.html @@ -7,14 +7,18 @@ Case Problem 3 Cauli-Wood Gallery home page - Author: - Date: + Author: Brett and Jeremy + Date: 11/8/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..ef25578 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,164 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: Brett and Jeremy + Date: 11/8/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 + =============================== +*/ +nav#bottom { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-justify-content: center; + 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 { + display: none; + } + + nav#top ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + nav#top ul li { + font-size: 2.2em; + -webkit-flex: 1 1 130px; + flex: 1 1 130px; + } + + nav#top ul li:nth-of-type(1) { + background: url("cw_image01.png") center / contain no-repeat; + } + + nav#top ul li:nth-of-type(2) { + background: url("cw_image02.png") center / contain no-repeat; + } + + nav#top ul li:nth-of-type(3) { + background: url("cw_image03.png") center / contain no-repeat; + } + + nav#top ul li:nth-of-type(4) { + background: url("cw_image04.png") center / contain no-repeat; + } + + nav#top ul li:nth-of-type(5) { + background: url("cw_image05.png") center / contain no-repeat; + } + + nav#top ul li:nth-of-type(6) { + background: url("cw_image06.png") center / contain no-repeat; + } + + p#links { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-justify-content: space-around; + justify-content: space-around; + } + + p#links a { + color: white; + background-color: rgb(220, 27, 27); + border-radius: 20px; + padding: 10px 10px 10px 10px; + text-decoration: none; + } + +} + + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ +@media only screen and (min-width: 481px) { + body { + display: -webkit-flex; + display: -khtml-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-flow: row wrap; + -khtml-flex-flow: row wrap; + -moz-flex-flow: row wrap; + -ms-flex-flow: row wrap; + -o-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; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + background-color: rgb(51, 51, 51); + height: 50px; + } + + 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_back4.jpeg b/case4/jb_back4.jpeg new file mode 100644 index 0000000..b6e7e66 Binary files /dev/null and b/case4/jb_back4.jpeg differ diff --git a/case4/jb_grids.css b/case4/jb_grids.css new file mode 100644 index 0000000..147cb5c --- /dev/null +++ b/case4/jb_grids.css @@ -0,0 +1,47 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Brett F./Jeremy + Date: 11/12/2018 + + + Filename: jb_grids.css + + This file contains the grid styles used with the + Jersey Buoys home page + +*/ + +/* Grid Styles */ + +div.grid { + clear: both; + display: grid; +} + +div.row::after { + clear:both; + content: ""; + display: table; +} + +div.column-1-4 { + float: left; + width: 25%; +} + +div.column-3-4 { + float: left; + width: 75%; + text-align: center; +} + +div.column-1 { + float: left; + width: 100%; + text-align: center; +} diff --git a/case4/jb_home.html b/case4/jb_home.html new file mode 100644 index 0000000..b0baf00 --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,157 @@ + + + + + + + + + + + + Jersey Buoys Surfing School + + + + +
+ + Shark + +
+
+
+
+ +
+
+

+ 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. +

+
+
+ +
+
+ +
+
+
+ + + 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_layout.css b/case4/jb_layout.css new file mode 100644 index 0000000..bca8287 --- /dev/null +++ b/case4/jb_layout.css @@ -0,0 +1,155 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Brett F./Jeremy + Date: 11/12/2018 + + + Filename: jb_layout.css + + This file contains the layout styles used with the + Jersey Buoys home page + +*/ + +/* General Styles */ + +html { + background-image: url("jb_back3.png"); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; +} + +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-color: olivedrab; + width: 100%; +} + +body header > img { + display: block; + margin: 0px auto; + width: 75%; + max-width: 500px; +} + + +div.row { + background-image: url("jb_back2.png"); + background-repeat: no-repeat; + background-size: cover; +} + +body aside#navs { + background-color: rgba(107, 142, 35, 0.9); + border-radius: 15px; + margin-top: 2px; + margin-left: 5px; + margin-bottom: 10px; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 5px; + padding-right: 5px; + box-shadow: rgb(51, 51, 51) 5px 5px 10px, + rgb(51, 51, 51) -5px 5px 10px; +} + +body aside#navs h1 { + text-align: center; +} + +body aside#navs li { + text-align: center; +} + +p { + clear: both; + float: left; + font-family: "Lucida Sans Unicode"; + font-size: 1em; + margin: 10px; + text-align: center; +} + +aside#slang { + background-image: url("jb_back1.png"); + background-repeat: no-repeat; + background-size: cover; + color: white; +} + +aside#slang h1 { + font-size: 1.2em; +} + +aside#slang dt { + font-weight: bold; + font-size: 1em; +} + + +/* Horizontal Navigation Styles */ + +nav.horizontal { + background-color: rgb(91, 91, 91); +} + +nav.horizontal ul li { + line-height: 2em; + padding-left: 10px; + width: 100%; +} + +nav.horizontal ul li a { + color: white; + display: block; + text-align: center; +} + +nav.horizontal::after { + content: ""; + display: table; + clear: both; +} +aside#navs { + clear: both; + float: left; +} + +aside#navs::after { + clear: both; + content: ""; + display: table; +} + +/* Footer Styles */ + +body > footer { + background-color: rgb(91, 91, 91); + color: white; + font-size: 0.85em; + text-align: center; + height: 60px; + line-height: 20px; + width: 100%; +} + +body > footer a { + text-decoration: none; + color: olivedrab; +} + +body > footer a:hover { + color: blue; +} diff --git a/case4/jb_reset.css b/case4/jb_reset.css new file mode 100644 index 0000000..d792535 --- /dev/null +++ b/case4/jb_reset.css @@ -0,0 +1,60 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Brett F./Jeremy + Date: 11/12/2018 + + + Filename: jb_reset.css + + This file contains the reset styles used with the + Jersey Buoys home page + +*/ + +/* 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..4904e63 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,133 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Brett F./Jeremy + Date: 11/12/2018 + + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ + +/* Flex Layout Styles */ +body{ + display: -webkit-flex; + display: -khtml-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-flow: row wrap; + -khtml-flex-flow: row wrap; + -moz-flex-flow: row wrap; + -ms-flex-flow: row wrap; + -o-flex-flow: row wrap; + flex-flow: row wrap; +} + +/* ============================================ + Mobile Devices: 0 - 480 pixels + ============================================ +*/ +@media only screen and (max-width: 480px){ + footer{ + -webkit-order: 100; + order: 100; + } + + body header { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column nowrap; + flex-flow: column nowrap; + } + + body img#logo { + -webkit-order: 2; + order: 2; + } + + body img#shark { + -webkit-order: 1; + order: 1; + } + + a#navicon { + -webkit-order: 3; + order: 3; + } + + body header nav.horizontal ul { + display: none; + } + + nav.horizontal ul li a { + text-align: left; + } + + body aside#navs { + display: none; + } + + body aside#slang { + display: none; + } + + a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; + } + + body > footer { + font-size: 0.8em; + } + + body footer a { + font-size: 1.5em; + } + + div.column-3-4 { + width: 100%; + background-image: url("jb_back3.png"); + } +} + +/* =================================================== + Tablet and Desktop Devices: Greater than 480 pixels + =================================================== +*/ +@media only screen and (min-width: 481px){ + body header a#navicon { + display: none; + } + + body header nav.classes { + display: none; + } + + body header nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + div.row:first-of-type { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + -webkit-justify-content: center; + justify-content: center; + -webkit-align-items: center; + align-items: center; + } +} 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/index.html b/index.html index 3a65fb4..f86dc9c 100644 --- a/index.html +++ b/index.html @@ -15,14 +15,16 @@ Tutorial 5 - - + + +

Tutorial 5 links

+ + + + + + + + + + + + + + + + + + + + + + + + +
Back
Tutorial
Review
Case 1
Case 2
Case 3
Case 4
- + +
- diff --git a/mobile.css b/mobile.css new file mode 100644 index 0000000..950e175 --- /dev/null +++ b/mobile.css @@ -0,0 +1,37 @@ +@media only screen and (max-width: 640px) { + + nav.horizontal { + display: none; + } + + table.nav { + width: 100%; + height: 100%; + text-align: center; + background-color: rgb(117, 140, 72); + } + + table.nav td { + border: 3px solid black; + font-size: 1.4em; + font-weight: bold; + padding-top: 12%; + padding-bottom: 12%; + } + + section img { + display: none; + } + + section::after { + display: none; + } +} + +@media only screen and (min-width: 641px) { + + table.nav { + display: none; + } + +} diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..6056a79 --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,94 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Jeremy and Brett + Date: 11/6/18 + + 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, footer { + display: none; +} + + +/* Page Box Styles */ +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + +/* Header Styles */ +header img#logo { + display: block; + width: 100%; +} + + +/* Typography Styles */ +article header { + margin-bottom: 0.2in; +} + +article h1 { + font-size: 24pt; + line-height: 26pt; +} + +section.tips 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; +} + +ol, ul, img { + page-break-inside: avoid; +} + +p { + widows: 3; + orphans: 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..889b8f1 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,123 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Jeremy and Brett + Date: 11/6/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-flex; + display: -khtml-flex; + display: -moz-flex; + display: -ms-flex; + display: -o-flex; + display: flex; + -webkit-flex-flow: row wrap; + -khtml-flex-flow: row wrap; + -moz-flex-flow: row wrap; + -ms-flex-flow: row wrap; + -o-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#left { + -webkit-flex: 1 8 130px; + flex: 1 8 130px; +} + +section#right { + -webkit-flex: 1 8 351px; + flex: 1 8 351px; +} + +section.tips { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section.tips article { + -webkit-flex: 2 1 351px; + flex: 2 1 351px; +} + +aside { + -webkit-flex: 1 2 250px; + flex: 1 2 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.verticle 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 { + 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..ef41483 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: Jeremy and Brett + Date: 11/6/18 Filename: tf_tips.html --> Trusted Friends: Education Tips - + + + + diff --git a/styles.css b/styles.css index fa79ea2..6067cfe 100644 --- a/styles.css +++ b/styles.css @@ -44,12 +44,13 @@ nav.horizontal li { float: left; line-height: 2em; text-transform: uppercase; - width: 16%; + width: 14%; } nav.horizontal a { display: block; font-size: 1em; + text-align: center; } nav.horizontal a:visited, nav.horizontal a:link { diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html similarity index 96% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html index f36bf96..cf30fc4 100644 --- a/tutorial/tf_articles_txt.html +++ b/tutorial/tf_articles.html @@ -7,8 +7,8 @@ Tutorial Case Trusted Friends Articles of Interest - Author: - Date: + Author: Brett and Jeremy + Date: 11/6/18 Filename: 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..bd5e826 --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,91 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Brett and Jeremy + Date: 11/6/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-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 93% rename from tutorial/tf_home_txt.html rename to tutorial/tf_home.html index 31bb7ed..b73bf09 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -7,14 +7,18 @@ Tutorial Case Home Page of the Trusted Friends website - Author: - Date: + Author: Brett and Jeremy + Date: 11/6/18 Filename: tf_home.html --> Trusted Friends Daycare + + + diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css similarity index 61% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..183c4a4 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Brett and Jeremy + Date: 11/7/18 Filename: tf_navicon.css @@ -20,9 +20,9 @@ Base Styles =========== */ - - - +a#navicon { + display: none; +} /* =============================== Mobile Devices: 0 to 480px @@ -30,6 +30,13 @@ */ @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 94% rename from tutorial/tf_prek_txt.html rename to tutorial/tf_prek.html index 3498f36..1388d3e 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,15 +7,19 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: - Date: + Author: Brett and Jeremy + Date: 11/6/18 Filename: tf_prek.html --> Pre-K Classes at Trusted Friends - + + + + + @@ -23,6 +27,8 @@ Trusted Friends