From ce362d65248fc6638ba80a5af0508612e8f689bc Mon Sep 17 00:00:00 2001 From: KenazBarks Date: Thu, 8 Nov 2018 07:40:53 -0600 Subject: [PATCH 1/8] new file: review/tf_print2.css deleted: review/tf_print2_txt.css new file: review/tf_styles4.css deleted: review/tf_styles4_txt.css renamed: review/tf_tips_txt.html -> review/tf_tips.html renamed: tutorial/tf_articles_txt.html -> tutorial/tf_articles.html new file: tutorial/tf_flex.css deleted: tutorial/tf_flex_txt.css renamed: tutorial/tf_home_txt.html -> tutorial/tf_home.html renamed: tutorial/tf_navicon_txt.css -> tutorial/tf_navicon.css renamed: tutorial/tf_prek_txt.html -> tutorial/tf_prek.html new file: tutorial/tf_print.css deleted: tutorial/tf_print_txt.css renamed: tutorial/tf_styles1_txt.css -> tutorial/tf_styles1.css --- review/tf_print2.css | 91 ++++++++++++++ review/tf_print2_txt.css | 42 ------- review/tf_styles4.css | 114 +++++++++++++++++ review/tf_styles4_txt.css | 46 ------- review/{tf_tips_txt.html => tf_tips.html} | 9 +- ...{tf_articles_txt.html => tf_articles.html} | 8 +- tutorial/tf_flex.css | 97 +++++++++++++++ tutorial/tf_flex_txt.css | 49 -------- tutorial/{tf_home_txt.html => tf_home.html} | 8 +- .../{tf_navicon_txt.css => tf_navicon.css} | 19 ++- tutorial/{tf_prek_txt.html => tf_prek.html} | 10 +- tutorial/tf_print.css | 116 ++++++++++++++++++ tutorial/tf_print_txt.css | 68 ---------- .../{tf_styles1_txt.css => tf_styles1.css} | 82 ++++++++++++- 14 files changed, 541 insertions(+), 218 deletions(-) create mode 100644 review/tf_print2.css delete mode 100644 review/tf_print2_txt.css create mode 100644 review/tf_styles4.css delete mode 100644 review/tf_styles4_txt.css rename review/{tf_tips_txt.html => tf_tips.html} (96%) rename tutorial/{tf_articles_txt.html => tf_articles.html} (96%) create mode 100644 tutorial/tf_flex.css delete mode 100644 tutorial/tf_flex_txt.css rename tutorial/{tf_home_txt.html => tf_home.html} (93%) rename tutorial/{tf_navicon_txt.css => tf_navicon.css} (66%) rename tutorial/{tf_prek_txt.html => tf_prek.html} (95%) create mode 100644 tutorial/tf_print.css delete mode 100644 tutorial/tf_print_txt.css rename tutorial/{tf_styles1_txt.css => tf_styles1.css} (65%) diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..055a533 --- /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, header, nav, h1, footer{ + display: none; +} + + +/* Page Box Styles */ +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + + +/* Header Styles */ +img#logo { + 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..ec5a480 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,114 @@ +@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-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-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 96% rename from review/tf_tips_txt.html rename to review/tf_tips.html index 5f89bf6..cca690d 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

Classes

diff --git a/case4/jb_styles.css b/case4/jb_styles.css index 6dbd4c4..b73d738 100644 --- a/case4/jb_styles.css +++ b/case4/jb_styles.css @@ -20,11 +20,13 @@ */ html { - background-image: url(jb_back2.jpg); + background-image: url("jb_back3.jpg"); + background-size: cover; + background-repeat: repeat; } body { - background-color: rgb(79, 146, 255); + background-image: url("jb_back2.jpg"); max-width: 1024px; margin-left: auto; margin-right: auto; @@ -71,21 +73,28 @@ section#slang h2{ */ @media only screen and (max-width:480px) { - nav#links1 { - display: none; - } - nav.horizontal ul { display: none; } a#navicon:hover+ul, nav.horizontal ul:hover { display: block; + list-style-type: none; + background-color: blue; + } + + footer a { + background-color: blue; + border-radius: 20px; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + text-decoration: none; +} + - aside { - display:none; - } } /* ============================================ @@ -94,7 +103,7 @@ section#slang h2{ */ @media only screen and (min-width:481px) { -a#navicon { - display: none; -} + a#navicon { + display: none; + } } From 02ca891ffdeb1ab77a59b69a754713b4f946e5c9 Mon Sep 17 00:00:00 2001 From: KenazBarks Date: Mon, 19 Nov 2018 10:11:19 -0600 Subject: [PATCH 7/8] modified: case4/jb_home.html modified: case4/jb_styles.css --- case4/jb_home.html | 8 +++---- case4/jb_styles.css | 55 +++++++++++++++++++++++++++++++++++++++------ 2 files changed, 52 insertions(+), 11 deletions(-) diff --git a/case4/jb_home.html b/case4/jb_home.html index bfd2e23..f95919e 100644 --- a/case4/jb_home.html +++ b/case4/jb_home.html @@ -16,7 +16,7 @@ Jersey Buoys Surfing School - + @@ -116,11 +116,11 @@

quiver

diff --git a/case4/jb_styles.css b/case4/jb_styles.css index b73d738..d2f6d8e 100644 --- a/case4/jb_styles.css +++ b/case4/jb_styles.css @@ -33,8 +33,14 @@ body { 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; @@ -58,7 +64,7 @@ section#links2 { float: right; } -section#slang { +body > section#slang { float: left; } @@ -66,6 +72,10 @@ section#slang h2{ font-size: 1.25em; } +footer h1 { + font-size: 1.5em; + } + /* =============================== Mobile Styles up to 480 pixels @@ -77,15 +87,13 @@ section#slang h2{ display: none; } - a#navicon:hover+ul, nav.horizontal ul:hover { + a#navicon:hover+ul, a#navicon ul:hover { display: block; list-style-type: none; - background-color: blue; - } footer a { - background-color: blue; + background-color: #add8e6; border-radius: 20px; padding-left: 5px; padding-right: 5px; @@ -94,16 +102,49 @@ section#slang h2{ 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 { +a#navicon { display: none; - } +} + } From d376002d0b924a52a763b1eae079453e3faa3010 Mon Sep 17 00:00:00 2001 From: KenazBarks <43377369+KenazBarks@users.noreply.github.com> Date: Mon, 26 Nov 2018 07:48:07 -0600 Subject: [PATCH 8/8] Set theme jekyll-theme-cayman --- README.md | 38 +++++++++++++++++++++++++++++++++++++- _config.yml | 1 + 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 _config.yml 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