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..0eb56d9 100644 --- a/case1/gp_cover_txt.html +++ b/case1/gp_cover.html @@ -7,14 +7,18 @@ Case Problem 1 Ghost of the Deep Cover Page - Author: - Date: + Author: seth and bethany + Date: 11/12/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..5b8c5da --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,98 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: seth and bethany + Date: 11/12/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: -moz-flex; + display: -ms-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.horizontal { + -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..21d0132 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: seth and bethany + Date: 11/12/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..507b74f 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: seth and bethany + Date: 11/12/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..c8a4172 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: seth bethany + Date: 11/12/18 Filename: gp_page3.html --> Ghost of the Deep Page 3 + + + + diff --git a/case1/gp_print_txt.css b/case1/gp_print.css similarity index 50% rename from case1/gp_print_txt.css rename to case1/gp_print.css index f8fc0d4..40de273 100644 --- a/case1/gp_print_txt.css +++ b/case1/gp_print.css @@ -4,8 +4,8 @@ Tutorial 5 Case Problem 1 - Author: - Date: + Author: seth and bethany + Date: 11/12/18 Filename: gp_print.css @@ -18,14 +18,34 @@ /* 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/case2/wc_styles.css b/case2/wc_styles.css new file mode 100644 index 0000000..b5ec691 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,118 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Seth and Bethany + 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 url("wc_designs.css"); + +/* Import Design Styles */ + + + +/* Flex Layout Styles */ +body { + display: -webkit-flex; + display: -moz-flex; + display: -ms-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: 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: 1 4 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: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 95% rename from case3/cw_home_txt.html rename to case3/cw_home.html index 3d3f80e..556734f 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: Seth and Bethany + Date: 11/13/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..0c39b22 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,159 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: Seth and Bethany + Date: 11/13/18 + + Filename: cw_styles.css + + This file contains the screen styles used with the + Cauli-Wood Gallery home page + +*/ + +@import url("cw_designs.css"); + + +/* Import Basic Design Styles */ + + +/* =============================== + General Styles for All Devices + =============================== +*/ + +nav#bottom { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: center; +} + +nav#bottom ul { + -webkit-flex-basis: 150px; + flex-basis: 150px; +} + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ + +/*Note: like the annoyance of the review, for some reason, the mobile screen refuses to work, despite it being correct (at least, the css should mostly be correct) +If you remove the "and (max-width: 480px)" it should display what the mobile screen should look like. Sorry it has problems for some reason. */ + +@media only screen and (max-width: 480px) { + + body { + color: rgb(211, 211, 211); + background-color: rgb(51, 51, 51); + } + + aside, img, section#spotlight{ + display: none; + } + + nav#top ul{ + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + 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) no-repeat center; + background-size: contain; + } + nav#top ul li:nth-of-type(2) { + background: url(cw_image02.png) no-repeat center; + background-size: contain; + } + nav#top ul li:nth-of-type(3) { + background: url(cw_image03.png) no-repeat center; + background-size: contain; + } + nav#top ul li:nth-of-type(4) { + background: url(cw_image04.png) no-repeat center; + background-size: contain; + } + nav#top ul li:nth-of-type(5) { + background: url(cw_image05.png) no-repeat center; + background-size: contain; + } + nav#top ul li:nth-of-type(6) { + background: url(cw_image06.png) no-repeat center; + background-size: contain; + } + + p#links { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + 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: -moz-flex; + display: -ms-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: 2 1 200px; + flex: 2 1 200px; + } + + nav#top ul { + display: -webkit-flex; + display: flex; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content: center; + align-items: center; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + + nav#top ul li { + -webkit-flex-basis: 80px; + flex-basis: 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_home.html b/case4/jb_home.html new file mode 100644 index 0000000..aa651a1 --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,133 @@ + + + + + + Jersey Buoys Surfing School + + + + + + +
+ Our_logo + +
+ + +
+ Probably not actually Jersey +

 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.

+ Person waving at a wave for some reason +
+ +
+ Even we don't know what he's doing. I guess surfing? +

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_styles.css b/case4/jb_styles.css new file mode 100644 index 0000000..7614449 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,182 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Seth and Bethany + Date: 11/14/18 + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ + +/* General Styles */ + +html{ + background-color: rgb(89, 119, 249); +} + + + + p, address, h4, a, nav, h3{ + color: rgb(0, 255, 42); + } +} + +/* Flex Styles */ + +nav#bottom { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: center; +} + +nav#bottom ul { + -webkit-flex-basis: 150px; + flex-basis: 150px; +} + +li{ + list-style: none; +} + + + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ + +@media only screen and (max-width: 480px){ + nav#top ul { + display: none; + } + + a#navicon:hover+ul, nav#top:hover { + display: block; + } + + section, article img{ + display: none; + } + + article p{ + float: left; + } + + aside#credit p a { + background-color: rgb(255, 38, 0); + font-size: 2.3em; + } + + header ul li a{ + font-size: 2em; + } + + article { + -webkit-order: 99; + order: 99; + + margin-right: 75px; + } + + nav#bottom { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + justify-content: center; + font-size: 1.5em; + + -webkit-order: 100; + order: 100; + } + + +} + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + body { + width: 95%; + min-width: 320px; + max-width: 960px; + margin-left: auto; + margin-right: auto; + background-color: rgb(255, 0, 216); + box-shadow: rgb(51, 51, 51) 10px 0px 50px, rgb(51, 51, 51) -10px 0px 50px; + + + display: -webkit-flex; + display: -moz-flex; + display: -ms-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + + aside { + float: right; + padding-left: 20px; + } + + a#navicon { + display: none; + } + + nav#top ul { + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + -webkit-justify-content: space-between; + justify-content: space-between; + } + + section { + -webkit-order: 99; + order: 99; + } + + nav#bottom { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + justify-content: center; + + -webkit-order: 100; + order: 100; + } + + img { + flex: 1 1 auto; + max-width: 95%; + + } + + p, h4, h3, img{ + margin-left: 10px; + } + + + + +} \ No newline at end of file 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/.directory b/review/.directory new file mode 100644 index 0000000..af85a16 --- /dev/null +++ b/review/.directory @@ -0,0 +1,4 @@ +[Dolphin] +PreviewsShown=true +Timestamp=2018,11,12,7,55,4 +Version=3 diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..dfcd9da --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,92 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Seth and Bethany + Date: 11/8/18 + + Filename: tf_print2.css + + This file contains the printer styles used with the Trusted + Friends Parents Tips page + +*/ + + + +/* Hidden Objects */ +nav, h1, #left, footer { + display: none; +} + + +/* Page Box Styles */ +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + +/* Header Styles */ +#logo { + display: block; + width: 100%; +} + + +/* Typography Styles */ +article { + 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-bottom: 0.1in; + margin-top: 0.1in; +} + +/* Hypertext Styles */ +a { + color: black; + font-weight: bold; + word-wrap: break-word; +} + + + + +/* Page Break Styles */ + aside { + page-break-before: always; +} + + img, ol, ul { + page-break-inside: avoid; +} + +p { + orphans: 3; + widows: 3; +} \ No newline at end of file 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..d6154b6 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,120 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Seth and Bethany + Date: 11/7/18 + + Filename: tf_styles4.css + + This file contains the screen styles used with the Trusted + Friends blog tips + +NOTE: If this isn't working for you, our code here likely shouldn't have anything wrong with it +*/ + +/* Import Basic Design Styles Used on All Screens */ + +@import url("tf_designs.css"); + + + +/* General Flex Styles */ +body { + display: -webkit-box; + display: -moz-box; + display: -mbody > header > nav.horizontal > uls-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#left { + -webkit-flex: 1 8 103px; + 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; +} +section.tips article { + -webkit-flex: 2 1 351px; + flex: 2 1 351px; +} + +section.tips 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 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) { + + body > header > 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 96% rename from review/tf_tips_txt.html rename to review/tf_tips.html index 5f89bf6..bc145b6 100644 --- a/review/tf_tips_txt.html +++ b/review/tf_tips.html @@ -7,14 +7,17 @@ Review Assignment Trusted Friends Parenting Tips - Author: - Date: + Author: Seth and Bethany + 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 96% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html index f36bf96..52c0016 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: seth and bethany + Date: 11/6/18 Filename: tf_articles.html --> @@ -16,6 +16,10 @@ Trusted Friends: Articles of Interest + + + + diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..667ba25 --- /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: Seth and Bethany + 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..52f11cf 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -7,14 +7,17 @@ Tutorial Case Home Page of the Trusted Friends website - Author: - Date: + Author: Seth and Bethany + 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 64% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..2c77607 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Seth and Bethany + Date: 11/6/18 Filename: tf_navicon.css @@ -20,8 +20,9 @@ Base Styles =========== */ - - +a#navicon { + display: none; +} /* =============================== @@ -30,6 +31,17 @@ */ @media only screen and (max-width: 480px) { - - + + a#navicon { + display: block; + } + + nav.horizontal ul { + display: none; + } + + a#navicon:hover+ul, nav.horizontal: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..98e35fe 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: Seth and Bethany + Date: 11/6/18 Filename: tf_prek.html --> Pre-K Classes at Trusted Friends - + + + + + @@ -23,6 +27,7 @@ Trusted Friends