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..3ca7c18 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: Travis A/Zac F + Date: 11/9/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..35bd70a --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,103 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Travis A/Zac F + Date: 11/9/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: 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) { + + section#sheet 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; + 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..9d78a73 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: Travis A/Zac F + Date: 11/9/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..cd665ea 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: Travis A/Zac F + Date: 11/9/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 90% rename from case1/gp_page3_txt.html rename to case1/gp_page3.html index 06f2365..660d0f5 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: Travis A/Zac F + Date: 11/9/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..58c2dd9 --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,57 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Travis A/Zac F + Date: 11/9/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; + top-margin: 0in; + bottom-margin: 0in; + left-margin: auto; + right-margin: 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..5b0a8d7 100644 --- a/case2/wc_hole01.html +++ b/case2/wc_hole01.html @@ -124,4 +124,4 @@

Guided Hikes

531 Terry Canyon, Ogden UT 84401 - \ No newline at end of file + diff --git a/case2/wc_styles.css b/case2/wc_styles.css new file mode 100644 index 0000000..05170a1 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,126 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Travis A/Zac F + Date: 11/9/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: flex; + -webkit-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 361x; +} + +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: 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 96% rename from case3/cw_home_txt.html rename to case3/cw_home.html index 3d3f80e..b747f2a 100644 --- a/case3/cw_home_txt.html +++ b/case3/cw_home.html @@ -15,6 +15,9 @@ Cauli-Wood Gallery + + + diff --git a/case3/cw_styles.css b/case3/cw_styles.css new file mode 100644 index 0000000..27f86c1 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,147 @@ +@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 */ + +@import url("cw_designs.css"); + +/* =============================== + General Styles for All Devices + =============================== +*/ + +nav#bottom { + display: -webkit-flex; + display: flex; + justify-content: center; +} + +nav#bottom ul { + -webkit-flex-basis: 150px; + flex-basis: 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; + } + + 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 / 100% no-repeat content-box; + } + + nav#top ul li:nth-of-type(2) { + background: url("cw_image02.png") center / 100% no-repeat content-box; + } + + nav#top ul li:nth-of-type(3) { + background: url("cw_image03.png") center / 100% no-repeat content-box; + } + + nav#top ul li:nth-of-type(4) { + background: url("cw_image04.png") center / 100% no-repeat content-box; + } + + nav#top ul li:nth-of-type(5) { + background: url("cw_image05.png") center / 100% no-repeat content-box; + } + + nav#top ul li:nth-of-type(6) { + background: url("cw_image06.png") center / 100% no-repeat content-box; + } + + p#links { + display: -webkit-flex; + display: flex; + justify-content: space-around; + } + + p#links a { + color: white; + background-color: rgb(220,27,27); + border-radius: 20px; + padding: 10px; + text-decoration: none; + } +} + +/* ============================================ + 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; + background-color: rgb(51,51,51); + height: 50px; + justify-content: center; + align-items: center; + } + + nav#top ul li { + -webkit-flex: 1 1 80px; + flex: 1 1 80px; + max-width: 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/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..84af7ab --- /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: + Date: + + 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 94% rename from tutorial/tf_home_txt.html rename to tutorial/tf_home.html index 31bb7ed..e4a4e13 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -7,7 +7,7 @@ Tutorial Case Home Page of the Trusted Friends website - Author: + Author: Travis and Zac Date: Filename: tf_home.html @@ -15,7 +15,11 @@ Trusted Friends Daycare - + + + + +
diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css similarity index 62% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..296d8db 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,7 +5,7 @@ Tutorial 5 Tutorial Case - Author: + Author: Travis and Zac Date: Filename: tf_navicon.css @@ -20,9 +20,10 @@ Base Styles =========== */ - - - + + a#navicon { + display: none; + } /* =============================== Mobile Devices: 0 to 480px @@ -31,5 +32,16 @@ @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..c59cc31 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,7 +7,7 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: + Author: Travis and Zac Date: Filename: tf_prek.html @@ -16,13 +16,18 @@ Pre-K Classes at Trusted Friends - + + + + +
Trusted Friends