diff --git a/README.md b/README.md index 6db9d74..ff6412e 100644 --- a/README.md +++ b/README.md @@ -1 +1,37 @@ -# html05 \ No newline at end of file +## Welcome to GitHub Pages + +You can use the [editor on GitHub](https://github.com/KenazBarks/html05/edit/master/README.md) to maintain and preview the content for your website in Markdown files. + +Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files. + +### Markdown + +Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for + +```markdown +Syntax highlighted code block + +# Header 1 +## Header 2 +### Header 3 + +- Bulleted +- List + +1. Numbered +2. List + +**Bold** and _Italic_ and `Code` text + +[Link](url) and ![Image](src) +``` + +For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/). + +### Jekyll Themes + +Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/KenazBarks/html05/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file. + +### Support or Contact + +Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c419263 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/case1/gp_cover_txt.html b/case1/gp_cover.html similarity index 88% rename from case1/gp_cover_txt.html rename to case1/gp_cover.html index 2ced369..89ecadf 100644 --- a/case1/gp_cover_txt.html +++ b/case1/gp_cover.html @@ -7,15 +7,19 @@ Case Problem 1 Ghost of the Deep Cover Page - Author: - Date: + Author: Kenaz & Khanh + 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..26cba73 --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,105 @@ +@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 */ +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.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 90% rename from case1/gp_page1_txt.html rename to case1/gp_page1.html index 846288b..f8dac7a 100644 --- a/case1/gp_page1_txt.html +++ b/case1/gp_page1.html @@ -15,6 +15,11 @@ Ghost of the Deep Page 1 + + + + diff --git a/case1/gp_page2_txt.html b/case1/gp_page2.html similarity index 92% rename from case1/gp_page2_txt.html rename to case1/gp_page2.html index fc80c51..59e095a 100644 --- a/case1/gp_page2_txt.html +++ b/case1/gp_page2.html @@ -15,6 +15,11 @@ Ghost of the Deep Page 2 + + + + diff --git a/case1/gp_page3_txt.html b/case1/gp_page3.html similarity index 92% rename from case1/gp_page3_txt.html rename to case1/gp_page3.html index 06f2365..b7aa3de 100644 --- a/case1/gp_page3_txt.html +++ b/case1/gp_page3.html @@ -15,6 +15,11 @@ Ghost of the Deep Page 3 + + + + diff --git a/case1/gp_print_txt.css b/case1/gp_print.css similarity index 56% rename from case1/gp_print_txt.css rename to case1/gp_print.css index f8fc0d4..82002d1 100644 --- a/case1/gp_print_txt.css +++ b/case1/gp_print.css @@ -17,9 +17,33 @@ /* Hidden Objects */ - - - +nav, footer, article { + display: none; +} + +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_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..13a1fff --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,130 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Khanh and Kenaz + 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") only screen; + + + + +/* 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; +} + +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; +} + +article section#stats { + -webkit-flex: 1 4 120px; + flex: 1 4 120px; +} + +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: 99; +} + +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; +} + +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..0200887 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: Kenaz and Khanh + 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..7d24406 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,174 @@ +@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-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: center; +} +nav#bottom ul { + max-width: 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-box; + display: -moz-box; + display: -ms-flexbox; + 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-image : url(cw_image01.png); + background-position:center; + background-repeat:no-repeat; + background-size: cover; + +} + +nav#top ul li:nth-of-type(2) { + background-image : url(cw_image02.png); + background-position:center; + background-repeat:no-repeat; + background-size: cover; + +} +nav#top ul li:nth-of-type(3) { + background-image : url(cw_image03.png); + background-position:center; + background-repeat:no-repeat; + background-size: cover; + +} +nav#top ul li:nth-of-type(4) { + background-image : url(cw_image04.png); + background-position:center; + background-repeat:no-repeat; + background-size: cover; + +} +nav#top ul li:nth-of-type(5) { + background-image : url(cw_image05.png); + background-position:center; + background-repeat:no-repeat; + background-size: cover; + +} + +p#links { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: space-around; +} +p#links a { + background-color: rgb(220, 27, 27); + border-radius: 20px; + padding-left: 10px; + padding-right: 10px; + padding-top: 10px; + padding-bottom: 10px; + text-decoration: none; +} + +} +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ +@media only screen and (min-width:481px) { + +body{ + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + 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 wrap; + flex-flow: row wrap; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content: center; + align-items: center; +} + +nav#top ul li { + -webkit-flex: 1; + flex: 1; + max-width: 80px; + flex-basis: auto; + flex-grow: 1; +} + +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..f95919e --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,131 @@ + + + + + + Jersey Buoys Surfing School + + + + + + +
+ gall@example.com/surf + Jersey Buoys +
+ +
+

Classes

+ +
+ +
+

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_styles.css b/case4/jb_styles.css new file mode 100644 index 0000000..d2f6d8e --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,150 @@ +@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 + +*/ +/* =============================== + General Styles for All Devices + =============================== +*/ + +html { + background-image: url("jb_back3.jpg"); + background-size: cover; + background-repeat: repeat; +} + +body { + background-image: url("jb_back2.jpg"); + max-width: 1024px; + margin-left: auto; + margin-right: auto; + margin-top: 0px; + margin-bottom: 0px; +} +body > * { + margin: 10px; +} + +nav#links1 ul { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content: center; + align-items: center; + list-style-type: none; +} + +nav#links1 ul li { + -webkit-flex: 1; + flex: 1; + max-width: auto; + flex-basis: auto; + flex-grow: 1; +} + +section#links2 { + float: right; +} + +body > section#slang { + float: left; +} + +section#slang h2{ + font-size: 1.25em; +} + +footer h1 { + font-size: 1.5em; + } + + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ +@media only screen and (max-width:480px) { + + nav.horizontal ul { + display: none; + } + + a#navicon:hover+ul, a#navicon ul:hover { + display: block; + list-style-type: none; + } + + footer a { + background-color: #add8e6; + border-radius: 20px; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + text-decoration: none; +} + +section#slang { + display: none; +} + +address { + background-color: #98fb98; + border-radius: 20px; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + text-decoration: none; +} + +footer > section { + background-color: #ffa500; + border-radius: 20px; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + text-decoration: none; + +} + +article { + -webkit-order: 100; + order:100; +} + +footer { + -webkit-order: 99; + order: 99; +} + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ +@media only screen and (min-width:481px) { + +a#navicon { + display: none; +} + +} 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..963a7cd --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,91 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Kenaz and Khanh + Date: 11/7/18 + + Filename: tf_print2.css + + This file contains the printer styles used with the Trusted + Friends Parents Tips page + +*/ + + + +/* Hidden Objects */ +section#left, body > header > h1, nav, body > footer{ + display: none; +} + + +/* Page Box Styles */ +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + + +/* Header Styles */ +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 { + text-decoration: none; + color: black; +} +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-after: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..730cffe --- /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: Kenaz and Khanh + Date: 11/7/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 130px; + 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: 1 2 250px; +} + +nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + height: 180px; +} + + +/* =============================== + Mobile Devices: 0 to 480px + =============================== +*/ +@media only screen and (max-width: 480px) { + +nav.vertical ul { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + 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..ed86553 100644 --- a/review/tf_tips_txt.html +++ b/review/tf_tips.html @@ -7,14 +7,19 @@ Review Assignment Trusted Friends Parenting Tips - Author: - Date: + Author: Kenaz and Khanh + 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..bd83df3 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: Kenaz and Khanh + 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..8bba8ab --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,97 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Kenaz & Khanh + 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..371e092 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: Kenaz & Khanh + 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 66% rename from tutorial/tf_navicon_txt.css rename to tutorial/tf_navicon.css index 3668320..8f35900 100644 --- a/tutorial/tf_navicon_txt.css +++ b/tutorial/tf_navicon.css @@ -5,8 +5,8 @@ Tutorial 5 Tutorial Case - Author: - Date: + Author: Kenaz & Khanh + Date: 11/6/18 Filename: tf_navicon.css @@ -20,7 +20,9 @@ Base Styles =========== */ - +a#navicon { + display: none; +} @@ -31,5 +33,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 95% rename from tutorial/tf_prek_txt.html rename to tutorial/tf_prek.html index 3498f36..36c90cd 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -7,8 +7,8 @@ Tutorial Case Pre-K Classes offered by Trusted Friends - Author: - Date: + Author: Kenaz & Khanh + Date: 11/6/18 Filename: tf_prek.html --> @@ -16,6 +16,9 @@ Pre-K Classes at Trusted Friends + + + @@ -23,6 +26,9 @@ Trusted Friends