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..057f17a 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: Liz & Jason
+ 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..d50a4b7
--- /dev/null
+++ b/case1/gp_layout.css
@@ -0,0 +1,100 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 1
+
+ Author: Liz & Jason
+ 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-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 no-wrap;
+ flex-flow: row no-wrap;
+ 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..1600af7 100644
--- a/case1/gp_page1_txt.html
+++ b/case1/gp_page1.html
@@ -7,14 +7,19 @@
Case Problem 1
Ghost of the Deep Page 1
- Author:
- Date:
+ Author: Liz & Jason
+ 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..4f6c012 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: Liz & Jason
+ 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..1647562 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: Liz & Jason
+ Date: 11/12/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..b52831b
--- /dev/null
+++ b/case1/gp_print.css
@@ -0,0 +1,56 @@
+@charset "utf-8";
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 1
+
+ Author: Jason and Liz
+ Date: 11/12/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: hide;
+}
+section#sheet {
+ width: 6in;
+ margin-top: 0in;
+ margin-bottom: 0in;
+ margin-right: auto;
+ margin-left: auto;
+}
+ img.size1 {
+ width: 5in;
+ }
+
+ img.size2 {
+ width: 3in;
+ }
+
+ img.size3 {
+ width: 2in;
+ }
+
+ img.size4 {
+ width: 1.5in;
+ }
+/* Comic Book Sheet Styles */
+
+
+
+
+
+
+
+
+
+
+
+
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..6ded31c
--- /dev/null
+++ b/case2/wc_styles.css
@@ -0,0 +1,102 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 2
+
+ Author: Liz & Jason
+ Date: 11/13/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") screen;
+
+/* Import Design Styles */
+
+
+
+/* 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;
+}
+
+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.div1, aside.div2, aside.div3, aside.div4, aside.div5, aside.div6 {
+ -webkit-flex: 1 1 180px;
+ flex: 1 1 180px;
+}
+
+/* =============================
+ Mobile Styles: 0 - 480 pixels
+ =============================
+*/
+@media only screen and (max-width: 480px) {
+
+ nav.horizontal ul#hole_list {
+ -webkit-order: 99;
+ order: 99;
+ }
+ footer {
+ -webkit-order: 100;
+ order: 100;
+ }
+ nav.horizontal ul {
+ display: none;
+ }
+ a#navicon:hover+ul, nav.horizontal ul:hover {
+ display: block;
+ }
+ aside {
+ display: block;
+ }
+}
+
+/* =================================================
+ Tablet and Desktop Styles: 481 pixels and greater
+ =================================================
+*/
+
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/review/tf_print2.css b/review/tf_print2.css
new file mode 100644
index 0000000..64d9ef9
--- /dev/null
+++ b/review/tf_print2.css
@@ -0,0 +1,93 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Review Assignment
+
+ Author: Jason & Liz
+ Date: 11/7/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 {
+ 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: 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;
+}
+
+img, ol, ul {
+ page-break-inside: 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..c71a303
--- /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: Liz Bequette and Jason Cobb
+ 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;
+}
+
+article {
+ -webkit-flex: 2 1 351px;
+ flex: 1 2 351px;
+}
+
+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 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 {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: column wrap;
+ flex-flow: column wrap;
+ 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..d627b21 100644
--- a/review/tf_tips_txt.html
+++ b/review/tf_tips.html
@@ -7,16 +7,19 @@
Review Assignment
Trusted Friends Parenting Tips
- Author:
- Date:
+ Author: Liz Bequette and Jason Cobb
+ 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..35d030a 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: Jason Cobb Liz Bequette
+ 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..6735fae
--- /dev/null
+++ b/tutorial/tf_flex.css
@@ -0,0 +1,103 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Tutorial Case
+
+ Author: Liz & Jason
+ 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;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ -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;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ -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;
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ -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..0193bf1 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: Jason Cobb Liz Bequette
+ 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 63%
rename from tutorial/tf_navicon_txt.css
rename to tutorial/tf_navicon.css
index 3668320..b59d532 100644
--- a/tutorial/tf_navicon_txt.css
+++ b/tutorial/tf_navicon.css
@@ -5,8 +5,8 @@
Tutorial 5
Tutorial Case
- Author:
- Date:
+ Author: Jason Cobb and Liz Bequette
+ Date: 11/6/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 95%
rename from tutorial/tf_prek_txt.html
rename to tutorial/tf_prek.html
index 3498f36..a0ccaad 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: Liz & Jason
+ Date: 11/6/18
Filename: tf_prek.html
-->
@@ -16,6 +16,9 @@
Pre-K Classes at Trusted Friends
+
+
+
@@ -23,6 +26,9 @@