From 4616f0457833d9ec35f81b5e293ce79d25eeeebb Mon Sep 17 00:00:00 2001
From: sthompson
Date: Tue, 6 Nov 2018 11:58:07 -0600
Subject: [PATCH 01/20] Added mobile styles for tf_styles1.css and made
viewport for tf_home.html
---
tutorial/.tf_flex.css.kate-swp | Bin 0 -> 4468 bytes
...{tf_articles_txt.html => tf_articles.html} | 4 +-
tutorial/{tf_flex_txt.css => tf_flex.css} | 25 +++++-
tutorial/{tf_home_txt.html => tf_home.html} | 8 +-
.../{tf_navicon_txt.css => tf_navicon.css} | 0
tutorial/{tf_prek_txt.html => tf_prek.html} | 7 +-
tutorial/{tf_print_txt.css => tf_print.css} | 0
.../{tf_styles1_txt.css => tf_styles1.css} | 84 +++++++++++++++++-
8 files changed, 117 insertions(+), 11 deletions(-)
create mode 100644 tutorial/.tf_flex.css.kate-swp
rename tutorial/{tf_articles_txt.html => tf_articles.html} (99%)
rename tutorial/{tf_flex_txt.css => tf_flex.css} (60%)
rename tutorial/{tf_home_txt.html => tf_home.html} (93%)
rename tutorial/{tf_navicon_txt.css => tf_navicon.css} (100%)
rename tutorial/{tf_prek_txt.html => tf_prek.html} (96%)
rename tutorial/{tf_print_txt.css => tf_print.css} (100%)
rename tutorial/{tf_styles1_txt.css => tf_styles1.css} (61%)
diff --git a/tutorial/.tf_flex.css.kate-swp b/tutorial/.tf_flex.css.kate-swp
new file mode 100644
index 0000000000000000000000000000000000000000..04e4e1f2718eefaf4af08f2ca90a726b24fe6386
GIT binary patch
literal 4468
zcmb`K&2E)d6oyZeA}w&*!|5qhQF_FgKrK~)=)h4m#F>q092ThwktjhDG{k{7z<>c<
zf@811yK&?lIB`Ai_pZHHPc$LMFZt5*to{3~_uW4ojYiYYj~*Y-51t%7oPT=%!SQ@=
zXLmFj%|3f^_~)}m1l=3T;hG>=3G#elB`D@gI+D+Ir25&8^mb;U^U|3*_s3^vnJiej
zf6&{HBerzZS;_sXvy%HUsmkdQnRKMVdatkcKXq37k23kpKfn^cT8LleAvPf7S4U%n#g&`a7#ZR6h5E2qz
z8EWiO98al1mo3bA3EqTjd2GaAQlk&2n+y;)nm;i(%WW72AlOHYV7hguR3;STb?T4B2QUS<|ap#
zZ;Ipw^Xsq
z--y@O=)L&KQ?Aj3e2sozWv!HNAylu?aJ@#u^%@P=YcwohdFO^#RI@!)j%%cF7ubf<1$?`gYm8>!$`O4Q)%3&WBiTQ5=EZh0w2~XqYlArn7
zfNd1YWgHs`mT`PdgXN7f9eKmIY|7;gYYl5z`{abRte@t^lZcLrcI#JUxDtF2g}U{B
z$d7p1tzRV(SlHAFOFwVQu=KN6;kv2A^(2R-o=+O~Q-Of6y3+t%1A!)Cp
zx?Sst=&+815yvNc0c3;i-oM)W7|q)K=qBQiN!b@vCY&lWV)E)RL}G4euuNbP;A#T6
zp6u|+-JeL^{bAX_Nrq*EGH=
diff --git a/tutorial/tf_flex_txt.css b/tutorial/tf_flex.css
similarity index 60%
rename from tutorial/tf_flex_txt.css
rename to tutorial/tf_flex.css
index e441a76..479657e 100644
--- a/tutorial/tf_flex_txt.css
+++ b/tutorial/tf_flex.css
@@ -5,8 +5,8 @@
Tutorial 5
Tutorial Case
- Author:
- Date:
+ Author: Steven Thompson & James Allen
+ Date: November 6, 2018
Filename: tf_flex.css
@@ -21,7 +21,26 @@
================
*/
-
+ 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;
+ }
/* =========================
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..d962454 100644
--- a/tutorial/tf_home_txt.html
+++ b/tutorial/tf_home.html
@@ -7,20 +7,22 @@
Tutorial Case
Home Page of the Trusted Friends website
- Author:
- Date:
+ Author: Steven Thompson & James Allen
+ Date: November 6, 2018
Filename: tf_home.html
-->
Trusted Friends Daycare
+
+
+
-
Home
diff --git a/tutorial/tf_navicon_txt.css b/tutorial/tf_navicon.css
similarity index 100%
rename from tutorial/tf_navicon_txt.css
rename to tutorial/tf_navicon.css
diff --git a/tutorial/tf_prek_txt.html b/tutorial/tf_prek.html
similarity index 96%
rename from tutorial/tf_prek_txt.html
rename to tutorial/tf_prek.html
index 3498f36..a9bf8c2 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: Steven Thompson & James Allen
+ Date: November 6, 2018
Filename: tf_prek.html
-->
@@ -16,6 +16,9 @@
Pre-K Classes at Trusted Friends
+
+
+
diff --git a/tutorial/tf_print_txt.css b/tutorial/tf_print.css
similarity index 100%
rename from tutorial/tf_print_txt.css
rename to tutorial/tf_print.css
diff --git a/tutorial/tf_styles1_txt.css b/tutorial/tf_styles1.css
similarity index 61%
rename from tutorial/tf_styles1_txt.css
rename to tutorial/tf_styles1.css
index 7920c8c..887b8ca 100644
--- a/tutorial/tf_styles1_txt.css
+++ b/tutorial/tf_styles1.css
@@ -145,9 +145,91 @@ body > footer {
/* Pulldown Menu Styles */
+ul.submenu{
+ display: none;
+}
-
+a.submenuTitle:hover+ul.submenu, ul.submenu:hover{
+ display: block;
+}
/* New Styles Added Below */
+/*
+========================
+Mobile Styles: 0px 480px
+========================
+*/
+@media only screen and (max-width: 480px) {
+
+ nav.horizontal a {
+ font-size: 1.5em;
+ line-height: 2.2em;
+ }
+
+ aside {
+ display: none;
+ }
+}
+/* Tablet Styles */
+
+/*
+================================
+Tablet Styles: 481px and greater
+================================
+*/
+@media only screen and (min-width: 481px){
+
+ ul.mainmenu > li {
+ float: left;
+ width: 20%;
+ position: relative;
+ }
+
+ ul.submenu{
+ width: 200%;
+ box-shadow: rgb(51, 51, 51) 5px 5px 15px;
+ position: absolute;
+ }
+}
+
+/* Desktop Styles */
+
+/*
+================================
+Desktop Styles: 769px and greater
+================================
+*/
+
+@media only screen and (min-width: 769px){
+
+ ul.submenu{
+ background: transparent;
+ box-shadow: none;
+ display: block;
+ position: relative;
+ width: 100%;
+ }
+
+ nav.horizontal::after{
+ clear: both;
+ content: "";
+ display: table;
+ }
+
+ nav.horizontal a.submenuTitle{
+ display: none;
+ }
+
+ article{
+ float: left;
+ margin-right: 5%;
+ width: 55%;
+ }
+
+ aside{
+ float: left;
+ width: 40%;
+ }
+}
From a6491d69b7cb5705a46aec55864965e9769cf826 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Tue, 6 Nov 2018 12:06:01 -0600
Subject: [PATCH 02/20] added styles to tf_flex.css and linked navicon to
tf_prek.html
---
tutorial/.tf_flex.css.kate-swp | Bin 4468 -> 0 bytes
tutorial/.tf_navicon.css.kate-swp | Bin 0 -> 785 bytes
tutorial/tf_flex.css | 37 ++++++++++++++++++++++++++----
tutorial/tf_prek.html | 4 ++++
4 files changed, 37 insertions(+), 4 deletions(-)
delete mode 100644 tutorial/.tf_flex.css.kate-swp
create mode 100644 tutorial/.tf_navicon.css.kate-swp
diff --git a/tutorial/.tf_flex.css.kate-swp b/tutorial/.tf_flex.css.kate-swp
deleted file mode 100644
index 04e4e1f2718eefaf4af08f2ca90a726b24fe6386..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 4468
zcmb`K&2E)d6oyZeA}w&*!|5qhQF_FgKrK~)=)h4m#F>q092ThwktjhDG{k{7z<>c<
zf@811yK&?lIB`Ai_pZHHPc$LMFZt5*to{3~_uW4ojYiYYj~*Y-51t%7oPT=%!SQ@=
zXLmFj%|3f^_~)}m1l=3T;hG>=3G#elB`D@gI+D+Ir25&8^mb;U^U|3*_s3^vnJiej
zf6&{HBerzZS;_sXvy%HUsmkdQnRKMVdatkcKXq37k23kpKfn^cT8LleAvPf7S4U%n#g&`a7#ZR6h5E2qz
z8EWiO98al1mo3bA3EqTjd2GaAQlk&2n+y;)nm;i(%WW72AlOHYV7hguR3;STb?T4B2QUS<|ap#
zZ;Ipw^Xsq
z--y@O=)L&KQ?Aj3e2sozWv!HNAylu?aJ@#u^%@P=YcwohdFO^#RI@!)j%%cF7ubf<1$?`gYm8>!$`O4Q)%3&WBiTQ5=EZh0w2~XqYlArn7
zfNd1YWgHs`mT`PdgXN7f9eKmIY|7;gYYl5z`{abRte@t^lZcLrcI#JUxDtF2g}U{B
z$d7p1tzRV(SlHAFOFwVQu=KN6;kv2A^(2R-o=+O~Q-Of6y3+t%1A!)Cp
zx?Sst=&+815yvNc0c3;i-oM)W7|q)K=qBQiN!b@vCY&lWV)E)RL}G4euuNbP;A#T6
zp6u|+-JeL^{bAX_Nrq*EGH=d-90+b
z>)`XU0|Wcxoq2a=9%D@LA)3WD{E8;__H7v3;HqVeDRq-zqt}=x-}V2_)638GU;B3u
z-nmNF&77NSVSnX3JfjP6OmD)U^j4}~gh#Az!Zar_T?TJbgb{^7QwCCC^v(lRVXW$#crO
+
@@ -26,6 +27,9 @@
+
+
+
Home
Infants
From 98ecca88bd510a2e52843b2b505ce587a62265f8 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Tue, 6 Nov 2018 12:08:33 -0600
Subject: [PATCH 03/20] added navicon styles for mobile screens
---
tutorial/.tf_navicon.css.kate-swp | Bin 785 -> 0 bytes
tutorial/tf_navicon.css | 21 +++++++++++++++++----
2 files changed, 17 insertions(+), 4 deletions(-)
delete mode 100644 tutorial/.tf_navicon.css.kate-swp
diff --git a/tutorial/.tf_navicon.css.kate-swp b/tutorial/.tf_navicon.css.kate-swp
deleted file mode 100644
index 366540705c9707d3002b4be3fb3fc8570469ffa0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001
literal 785
zcmZ9}PfG$p7zXeO1cOk^EdTUx%(8+AT}--qFsPtITOVM9g$+%`q&{JnK0?>d-90+b
z>)`XU0|Wcxoq2a=9%D@LA)3WD{E8;__H7v3;HqVeDRq-zqt}=x-}V2_)638GU;B3u
z-nmNF&77NSVSnX3JfjP6OmD)U^j4}~gh#Az!Zar_T?TJbgb{^7QwCCC^v(lRVXW$#crO
Date: Tue, 6 Nov 2018 12:18:20 -0600
Subject: [PATCH 04/20] Added print style rules
---
tutorial/tf_articles.html | 3 +++
tutorial/tf_print.css | 34 +++++++++++++++++++++++++++++++---
2 files changed, 34 insertions(+), 3 deletions(-)
diff --git a/tutorial/tf_articles.html b/tutorial/tf_articles.html
index 13c986d..c39c182 100644
--- a/tutorial/tf_articles.html
+++ b/tutorial/tf_articles.html
@@ -16,6 +16,9 @@
Trusted Friends: Articles of Interest
+
+
+
diff --git a/tutorial/tf_print.css b/tutorial/tf_print.css
index 5fafb6d..10dc16d 100644
--- a/tutorial/tf_print.css
+++ b/tutorial/tf_print.css
@@ -18,11 +18,17 @@
/* Hidden Objects */
+nav.horizontal, aside, footer {
+ display: none;
+}
/* Page Box Styles */
-
+@page {
+ size: 8.5in 11in;
+ margin: 0.5in;
+}
/* Header Styles */
@@ -38,15 +44,37 @@ body > header > img {
/* Typography Styles */
+h1 {
+ font-size:28pt;
+ line-height:30pt;
+ margin: 0.3in 0in 0.2in;
+}
+h2 {
+ font-size: 20pt;
+ margin: 0.1in 0in 0.1in 0.3in;
+}
-/* List Styles */
+p {
+ font-size:12pt;
+ margin: 0.1in 0in 0.1in 0.3in;
+}
+/* List Styles */
+ul {
+ list-style-type: disc;
+ margin-left: 0.5in;
+}
/* Image Styles */
-
+article img {
+ border: 2px solid rgb(191, 191, 191);
+ display: block;
+ margin: 2.5in auto;
+ width: 65%;
+}
/* Hypertext Styles */
From 58e09bc9e9efe06a12ab010529ebf364d81f926b Mon Sep 17 00:00:00 2001
From: sthompson
Date: Tue, 6 Nov 2018 12:23:38 -0600
Subject: [PATCH 05/20] Added hypertext and page break styles
---
tutorial/tf_print.css | 20 ++++++++++++++++++++
1 file changed, 20 insertions(+)
diff --git a/tutorial/tf_print.css b/tutorial/tf_print.css
index 10dc16d..15de864 100644
--- a/tutorial/tf_print.css
+++ b/tutorial/tf_print.css
@@ -79,13 +79,33 @@ article img {
/* Hypertext Styles */
+a {
+ color: black;
+ text-decoration: none;
+}
+a::after {
+ content: " (" attr(href) ") ";
+ font-weight: bold;
+ word-wrap: break-word;
+}
/* Page Break Styles */
+article:nth-of-type(n+2) {
+ page-break-before: always;
+}
+img, ol, ul {
+ page-break-inside: avoid;
+}
+
+p {
+ orphans: 3;
+ widows: 3;
+}
From 6fc6a4fb4592ada6356f327a4e073d07ae1322e2 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Tue, 6 Nov 2018 13:19:46 -0600
Subject: [PATCH 06/20] Added mobile and desktop styling to the review project
---
review/{tf_print2_txt.css => tf_print2.css} | 4 +-
review/tf_styles4.css | 117 ++++++++++++++++++++
review/tf_styles4_txt.css | 46 --------
review/{tf_tips_txt.html => tf_tips.html} | 10 +-
4 files changed, 126 insertions(+), 51 deletions(-)
rename review/{tf_print2_txt.css => tf_print2.css} (85%)
create mode 100644 review/tf_styles4.css
delete mode 100644 review/tf_styles4_txt.css
rename review/{tf_tips_txt.html => tf_tips.html} (95%)
diff --git a/review/tf_print2_txt.css b/review/tf_print2.css
similarity index 85%
rename from review/tf_print2_txt.css
rename to review/tf_print2.css
index dd4fac8..8e45c85 100644
--- a/review/tf_print2_txt.css
+++ b/review/tf_print2.css
@@ -5,8 +5,8 @@
Tutorial 5
Review Assignment
- Author:
- Date:
+ Author: Steven Thompson & James Allen
+ Date: Nov 6, 2018
Filename: tf_print2.css
diff --git a/review/tf_styles4.css b/review/tf_styles4.css
new file mode 100644
index 0000000..6963d8b
--- /dev/null
+++ b/review/tf_styles4.css
@@ -0,0 +1,117 @@
+@charset "utf-8";
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Review Assignment
+
+ Author: Steven Thompson & James Allen
+ Date: Nov 6, 2018
+
+ 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;
+}
+
+
+/* ===============================
+ Mobile Devices: 0 to 480px
+ ===============================
+*/
+
+@media only screen and (max-width: 480px){
+
+ nav.vertical ul{
+ display: -webkit-flex;
+ display: flex;
+ display: none;
+ height: 240px;
+ -webkit-flex-flow: column wrap;
+ flex-flow: column wrap;
+
+ }
+
+ section#left{
+ -webkit-order: 99;
+ order: 99;
+ }
+
+ body footer{
+ -webkit-order: 100;
+ order: 100;
+ }
+
+ a#navicon{
+ display: block;
+ }
+
+ 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..c7e23c0 100644
--- a/review/tf_tips_txt.html
+++ b/review/tf_tips.html
@@ -1,4 +1,4 @@
-
+
Trusted Friends: Education Tips
+
+
+
+
From be9a341adafbe5f5a333bd2e40916d6ace98f921 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 7 Nov 2018 11:27:45 -0600
Subject: [PATCH 07/20] merge commit to pull from upstream
---
review/tf_print2.css | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/review/tf_print2.css b/review/tf_print2.css
index 8e45c85..3f32144 100644
--- a/review/tf_print2.css
+++ b/review/tf_print2.css
@@ -6,7 +6,7 @@
Review Assignment
Author: Steven Thompson & James Allen
- Date: Nov 6, 2018
+ Date: Nov 6, 2018
Filename: tf_print2.css
@@ -19,11 +19,14 @@
/* Hidden Objects */
-
+
/* Page Box Styles */
-
+@page {
+ size: 8.5in 11in;
+ margin: 0.5in;
+}
/* Header Styles */
From bb4f8f0b2c1e4852861cbd97a6bb492e15b0de92 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 7 Nov 2018 12:02:48 -0600
Subject: [PATCH 08/20] Completed the print styles for the review
---
review/tf_print2.css | 62 +++++++++++++++++++++++++++++++++++++++-----
review/tf_tips.html | 6 ++---
2 files changed, 59 insertions(+), 9 deletions(-)
diff --git a/review/tf_print2.css b/review/tf_print2.css
index 3f32144..03ec3ee 100644
--- a/review/tf_print2.css
+++ b/review/tf_print2.css
@@ -15,31 +15,81 @@
*/
-
-
/* Hidden Objects */
-
+body > header > h1, nav, section#left, body > footer{
+ display: none;
+}
/* Page Box Styles */
-@page {
+@page{
size: 8.5in 11in;
margin: 0.5in;
}
/* Header Styles */
-
+body > header > img {
+ display: block;
+ width: 100%;
+}
/* Typography Styles */
+article header{
+ margin-bottom: 0.2in;
+}
+article h1{
+ font-size: 24pt;
+ line-height: 26pt;
+}
-/* Hypertext Styles */
+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-inside: avoid;
+}
+
+p{
+ widows: 3;
+ orphans: 3;
+}
diff --git a/review/tf_tips.html b/review/tf_tips.html
index c7e23c0..5e58afc 100644
--- a/review/tf_tips.html
+++ b/review/tf_tips.html
@@ -16,9 +16,9 @@
Trusted Friends: Education Tips
-
-
-
+
+
+
From abfa1ff3af4eaa9d72d7980aef075e77932f2a30 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 7 Nov 2018 12:23:01 -0600
Subject: [PATCH 09/20] Added base flexboxes in gp_layout.css of case1
---
case1/gp_cover.html | 71 ++++++++++++++++++++++++++++++++++++++
case1/gp_layout.css | 76 ++++++++++++++++++++++++++++++++++++++++
case1/gp_page1.html | 71 ++++++++++++++++++++++++++++++++++++++
case1/gp_page2.html | 84 +++++++++++++++++++++++++++++++++++++++++++++
case1/gp_page3.html | 81 +++++++++++++++++++++++++++++++++++++++++++
case1/gp_print.css | 39 +++++++++++++++++++++
6 files changed, 422 insertions(+)
create mode 100644 case1/gp_cover.html
create mode 100644 case1/gp_layout.css
create mode 100644 case1/gp_page1.html
create mode 100644 case1/gp_page2.html
create mode 100644 case1/gp_page3.html
create mode 100644 case1/gp_print.css
diff --git a/case1/gp_cover.html b/case1/gp_cover.html
new file mode 100644
index 0000000..d51007b
--- /dev/null
+++ b/case1/gp_cover.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+ Ghost of the Deep Cover Page
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Capt. Marvel and the Ghost of the Deep
+
+
+
+
+
+
+
+ Fawcett Comics
+ One of the most successful comic book publisher in the 1940's, Fawcett Publications
+ began in 1919 with the magazine, Captain Billy's Whiz Bang . Its total
+ circulation from all of its publications eventually reached over 10 million issues
+ a month.
+ Fawcett is best known for its popular superhero, Captain Marvel, based on the
+ adventures of radio reporter Billy Batson who would turn into Captain Marvel
+ upon uttering the word Shazam! . Other successful characters include
+ Ibis the Invincible, Hopalong Cassidy, and Mister Scarlet. Fawcett was also known
+ for its series of horror comics including Beware! Terror Tales ,
+ Worlds of Fear , and Strange Suspense Stories . The
+ company branched out into humor comic magazines with Otis and Babs
+ and Hoppy the Marvel Bunny among its most popular titles.
+ Facing declining sales, Fawcett Comics ceased publication of its superhero
+ titles in 1953. Several of its titles were eventually sold to Charlton
+ Comics.
+
+
+
+ Golden Pulps: A Comic Book Resource for Collectors and Fans
+
+
+
+
diff --git a/case1/gp_layout.css b/case1/gp_layout.css
new file mode 100644
index 0000000..b5dcad4
--- /dev/null
+++ b/case1/gp_layout.css
@@ -0,0 +1,76 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 1
+
+ Author: Steven Thompson & James Allen
+ Date: November 7, 2018
+
+ Filename: gp_layout.css
+
+ This file contains the layout styles and media
+ queries used with sample pages from the Golden
+ Pulps website.
+
+ Cross-Browser flexboxes:
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+*/
+
+
+/* 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-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ }
+
+ section#sheet{
+ -webkit-box-flex: 3 1 301px;
+ -moz-box-flex: 3 1 301px;
+ -ms-flexbox: 3 1 301px;
+ -webkit-flex: 3 1 301px;
+ flex: 3 1 301px;
+ }
+
+ article{
+ -webkit-box-flex: 1 3 180px;
+ -moz-box-flex: 1 3 180px;
+ -ms-flexbox: 1 3 180px;
+ -webkit-flex: 1 3 180px;
+ flex: 1 3 180px;
+ }
+
+
+
+/* ============================================
+ Mobile Devices: 0 - 480 pixels
+ ============================================
+*/
+
+
+
+
+/* ===================================================
+ Tablet and Desktop Devices: Greater than 480 pixels
+ ===================================================
+*/
+
diff --git a/case1/gp_page1.html b/case1/gp_page1.html
new file mode 100644
index 0000000..3ddd4a4
--- /dev/null
+++ b/case1/gp_page1.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+ Ghost of the Deep Page 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Capt. Marvel and the Ghost of the Deep
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Captain Marvel
+ In response to the popularity of Superman and Batman, Fawcett Comics introduced
+ Captain Thunder in the 1939 issue of Flash Comics #1 . The issue
+ was an ashcan copy , a term for low-print runs whose purpose was not sales
+ but to establish a trademark claim for legal purposes. Due to trademark infringements
+ with another established character, Captain Thunder became Captain Marvelous and later
+ Captain Marvel. Flash Comics became Whiz Comics (also due to trademark issues.)
+ Captain Marvel's alter ego was a 12-year old radio reporter named Billy Batson, a
+ copy of Superman's alter ego, reporter Clark Kent, but younger to appeal to adolescent
+ readers. Billy Batson's name was partially based on the nickname given to Fawcett Publication's
+ founder Wilford Fawcett — "Captain Billy".
+
+
+
+ Golden Pulps: A Comic Book Resource for Collectors and Fans
+
+
+
diff --git a/case1/gp_page2.html b/case1/gp_page2.html
new file mode 100644
index 0000000..e781dc4
--- /dev/null
+++ b/case1/gp_page2.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+ Ghost of the Deep Page 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Capt. Marvel and the Ghost of the Deep
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Marvel's Adversaries
+ Captain Marvel's arch enemy was the mad scientist Doctor Sivana ,
+ who regularly plotted elaborate schemes to rule the world and defeat both
+ Captain Marvel and America.
+ Sivana had four children who also had prominent roles in Captain Marvel's adventures.
+ Two evil children, Georgia and Sivana, Jr., resembled their father both physically
+ and in their desire to conquer the Earth. Sivana's daughter Beautia however, loved
+ Captain Marvel and Sivana's son, Magnificus, was also a sometime-ally of the
+ Captain.
+ Marvel's other adversaries included Captain Nazi and a nuclear-powered
+ robot named Mister Atom . Matching Captain Marvel's adopted power from
+ ancient heroes was Ibac , an evil magician who gained his power from
+ the ancient villians I van the Terrible, Cesare B orgia,
+ A ttila the Hun, and C aligula.
+ One of the more popular serials in the Fawcett Comics run of Captain Marvel adventures
+ was the Monster Society of Evil story arc which involved several
+ of Marvel's adversaries from previous issues, including Doctor Sivana, Captain Nazi,
+ and Ibac. The society was led by the cunning Mister Mind , a character who was
+ eventually revealed to be a highly intelligent worm from another planet.
+
+
+
+ Golden Pulps: A Comic Book Resource for Collectors and Fans
+
+
+
diff --git a/case1/gp_page3.html b/case1/gp_page3.html
new file mode 100644
index 0000000..6210635
--- /dev/null
+++ b/case1/gp_page3.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+ Ghost of the Deep Page 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Capt. Marvel and the Ghost of the Deep
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Marvel and the Nazis
+ The drama of World War II also played itself out in the adventures of the golden-era
+ comic books. Many of Captain Marvel's adventures were based on thwarting nefarious
+ plots hatched by Nazis and Nazi sympathizers. The most prominent of Captain
+ Marvel's opponents in this regard was certainly Captain Nazi .
+ Captain Nazi was a genetically altered "super soldier" given superhuman strength,
+ stamina, and the ability to fly. Acting as a Adolph Hitler's champion, Captain
+ Nazi was sent personally by the fuhrer to do battle with America's superheroes
+ including both Captain Marvel and Bulletman . He made in last
+ appearance in a Fawcett comic book in 1944 but was later revised his role in
+ several DC Comics reboots of the Captain Marvel franchise.
+ The Monster Society of Evil was home to several infamous characters
+ from the Second World War. Adolph Hitler, Benito Mussolini and Tojo.
+ were charters members, along with other prominent Nazis and war criminals.
+ One of the schemes hatched by the society involved using
+ Captain Nazi to steal magic fortune-telling pearls from an Egyptian princess.
+ Another plot saw the society attempting to use a giant cannon to blow holes in
+ various countries across the world. In all of these schemes, Captain Marvel was
+ always there to save the day for the freedom-loving countries of the world.
+
+
+
+ Golden Pulps: A Comic Book Resource for Collectors and Fans
+
+
+
diff --git a/case1/gp_print.css b/case1/gp_print.css
new file mode 100644
index 0000000..607665d
--- /dev/null
+++ b/case1/gp_print.css
@@ -0,0 +1,39 @@
+@charset "utf-8";
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 1
+
+ Author: Steven Thompson & James Allen
+ Date: November 7, 2018
+
+ 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 */
+
+
+
+
+
+
+
+
+
+
+
+
From 670b6cb09760e14410565468662b632f5068e3f9 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 7 Nov 2018 12:47:17 -0600
Subject: [PATCH 10/20] Added flex styles for mobile and larger screens
---
case1/gp_layout.css | 77 +++++++++++++++++++++++++++++++++++++++++----
1 file changed, 71 insertions(+), 6 deletions(-)
diff --git a/case1/gp_layout.css b/case1/gp_layout.css
index b5dcad4..4ff3982 100644
--- a/case1/gp_layout.css
+++ b/case1/gp_layout.css
@@ -14,12 +14,12 @@
queries used with sample pages from the Golden
Pulps website.
- Cross-Browser flexboxes:
- display: -webkit-box;
- display: -moz-box;
- display: -ms-flexbox;
- display: -webkit-flex;
- display: flex;
+ Cross-Browser extensions:
+ -webkit-box
+ -moz-box
+ -ms-flexbox
+ -webkit-flex
+ flex
*/
@@ -66,6 +66,28 @@
============================================
*/
+@media only screen and (max-width: 480px){
+
+ .panel img{
+ width: 100%;
+ }
+
+ .horizontal {
+ -webkit-box-order: 99;
+ -moz-box-order: 99;
+ -ms-order: 99;
+ -webkit-order: 99;
+ order: 99;
+ }
+
+ body > footer{
+ -webkit-box-order: 100;
+ -moz-box-order: 100;
+ -ms-order: 100;
+ -webkit-order: 100;
+ order: 100;
+ }
+}
@@ -74,3 +96,46 @@
===================================================
*/
+@media only screen and (min-width: 481px){
+ .horizontal ul{
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-box-flow: row nowrap;
+ -moz-box-flow: row nowrap;
+ -ms-flexbox: row nowrap;
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+
+ height: 40px;
+
+ }
+
+ .horizontal ul li{
+ -webkit-box: 1 1 auto;
+ -moz-box: 1 1 auto;
+ -ms-flexbox: 1 1 auto;
+ -webkit-flex: 1 1 auto;
+ flex: 1 1 auto;
+ }
+
+ .size1 img{
+ width: 100%
+ }
+
+ .size2 img{
+ width: 60%;
+ }
+
+ .size3 img{
+ width: 40%;
+ }
+
+ .size4 img{
+ width: 30%;
+ }
+}
+
From 8d103457c82684021858b7bb0a08b74117e44e13 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 7 Nov 2018 12:56:38 -0600
Subject: [PATCH 11/20] Added print styles for case1
---
case1/gp_print.css | 31 ++++++++++++++++++++++++++-----
1 file changed, 26 insertions(+), 5 deletions(-)
diff --git a/case1/gp_print.css b/case1/gp_print.css
index 607665d..bdf6f5b 100644
--- a/case1/gp_print.css
+++ b/case1/gp_print.css
@@ -18,15 +18,36 @@
/* 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;
+ }
+
+ .size1 img {
+ width: 5in;
+ }
+
+ .size2 img {
+ width: 3in;
+ }
+
+ .size3 img {
+ width: 2in;
+ }
+
+ .size4 img {
+ width: 1.5in;
+ }
From 8d251f152412a618265f9fe9260d4f1fdff0cfb7 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 7 Nov 2018 13:14:52 -0600
Subject: [PATCH 12/20] fixed mistakes that were made in the final few steps of
case1
---
case1/gp_layout.css | 8 ++++----
case1/gp_print.css | 8 ++++----
2 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/case1/gp_layout.css b/case1/gp_layout.css
index 4ff3982..aedf8fb 100644
--- a/case1/gp_layout.css
+++ b/case1/gp_layout.css
@@ -122,19 +122,19 @@
flex: 1 1 auto;
}
- .size1 img{
+ img[class^="panel size1"]{
width: 100%
}
- .size2 img{
+ img[class^="panel size2"]{
width: 60%;
}
- .size3 img{
+ img[class^="panel size3"]{
width: 40%;
}
- .size4 img{
+ img[class^="panel size4"]{
width: 30%;
}
}
diff --git a/case1/gp_print.css b/case1/gp_print.css
index bdf6f5b..60e91cc 100644
--- a/case1/gp_print.css
+++ b/case1/gp_print.css
@@ -33,19 +33,19 @@
margin-right: auto;
}
- .size1 img {
+ img[class^="panel size1"]{
width: 5in;
}
- .size2 img {
+ img[class^="panel size2"]{
width: 3in;
}
- .size3 img {
+ img[class^="panel size3"]{
width: 2in;
}
- .size4 img {
+ img[class^="panel size4"]{
width: 1.5in;
}
From 46e264f31dac3cad29be511af1dc1e5c88f87df8 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Thu, 8 Nov 2018 11:50:47 -0600
Subject: [PATCH 13/20] Completed the flex styles rules for case2
---
case2/wc_styles.css | 174 ++++++++++++++++++++++++++++++++++++++++
case2/wc_styles_txt.css | 41 ----------
2 files changed, 174 insertions(+), 41 deletions(-)
create mode 100644 case2/wc_styles.css
delete mode 100644 case2/wc_styles_txt.css
diff --git a/case2/wc_styles.css b/case2/wc_styles.css
new file mode 100644
index 0000000..1cab338
--- /dev/null
+++ b/case2/wc_styles.css
@@ -0,0 +1,174 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 2
+
+ Author: Steven Thompson & James Allen
+ Date: November 8, 2018
+
+ 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") screen;
+
+/* Flex Layout Styles */
+
+ body{
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox-flow: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ }
+
+ body nav#hole_list {
+ -webkit-box: 1 3 140px;
+ -moz-box: 1 3 140px;
+ -ms-flexbox: 1 3 140px;
+ -webkit-flex: 1 3 140px;
+ flex: 1 3 140px;
+ }
+
+ article{
+ -webkit-box: 3 1 341px;
+ -moz-box: 3 1 341px;
+ -ms-flexbox: 3 1 341px;
+ -webkit-flex: 3 1 341px;
+ flex: 3 1 341px;
+
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox-flow: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ }
+
+ section#stats{
+ -webkit-box: 1 4 120px;
+ -moz-box: 1 4 120px;
+ -ms-flexbox: 1 4 120px;
+ -webkit-flex: 1 4 120px;
+ flex: 1 4 120px;
+ }
+
+ section#summary{
+ -webkit-box: 4 1 361px;
+ -moz-box: 4 1 361px;
+ -ms-flexbox: 4 1 361px;
+ -webkit-flex: 4 1 361px;
+ flex: 4 1 361px;
+ }
+
+ aside{
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox-flow: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ }
+
+ aside div{
+ -webkit-box: 1 1 180px;
+ -moz-box: 1 1 180px;
+ -ms-flexbox: 1 1 180px;
+ -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-box-order: 99;
+ -moz-box-order: 99;
+ -ms-order: 99;
+ -webkit-order: 99;
+ order: 99;
+ }
+
+ footer{
+ -webkit-box-order: 100;
+ -moz-box-order: 100;
+ -ms-order: 100;
+ -webkit-order: 100;
+ order: 100;
+ }
+
+ a#navicon{
+ display: block;
+ }
+
+ .horizontal ul, aside{
+ display: none;
+ }
+
+ a#navicon:hover+ul, nav.horizontal ul:hover{
+ display: block;
+ }
+ }
+
+/* =================================================
+ Tablet and Desktop Styles: 481 pixels and greater
+ =================================================
+*/
+
+ @media only screen and (min-width: 481px){
+ a#navicon{
+ display: none;
+ }
+
+ .horizontal ul{
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row nowrap;
+ -moz-box-flow: row nowrap;
+ -ms-flexbox-flow: row nowrap;
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ }
+
+ .horizontal ul li{
+ -webkit-box: 1 1 auto;
+ -moz-box: 1 1 auto;
+ -ms-flexbox: 1 1 auto;
+ -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
- =================================================
-*/
-
From f593e283f0534af8b20a47aa4273a2a7061ccbb0 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Thu, 8 Nov 2018 12:30:39 -0600
Subject: [PATCH 14/20] Finished html05
---
case3/{cw_home_txt.html => cw_home.html} | 3 +
case3/cw_styles.css | 209 +++++++++++++++++++++++
case3/cw_styles_txt.css | 42 -----
3 files changed, 212 insertions(+), 42 deletions(-)
rename case3/{cw_home_txt.html => cw_home.html} (96%)
create mode 100644 case3/cw_styles.css
delete mode 100644 case3/cw_styles_txt.css
diff --git a/case3/cw_home_txt.html b/case3/cw_home.html
similarity index 96%
rename from case3/cw_home_txt.html
rename to case3/cw_home.html
index 3d3f80e..88a3773 100644
--- a/case3/cw_home_txt.html
+++ b/case3/cw_home.html
@@ -15,6 +15,9 @@
Cauli-Wood Gallery
+
+
+
diff --git a/case3/cw_styles.css b/case3/cw_styles.css
new file mode 100644
index 0000000..ee73305
--- /dev/null
+++ b/case3/cw_styles.css
@@ -0,0 +1,209 @@
+@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-box-flow: row nowrap;
+ -moz-box-flow: row nowrap;
+ -ms-flexbox-flow: row nowrap;
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+
+ justify-content: center;
+}
+
+nav#bottom ul {
+ -webkit-box: 0 1 150px;
+ -moz-box: 0 1 150px;
+ -ms-flexbox: 0 1 150px;
+ -webkit-flex: 0 1 150px;
+ flex: 0 1 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);
+ }
+
+ article img, aside, section#spotlight {
+ display: none;
+ }
+
+ nav#top ul {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox-flow: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ }
+
+ nav#top ul li {
+ font-size: 2.2em;
+
+ -webkit-box: 1 1 130px;
+ -moz-box: 1 1 130px;
+ -ms-flexbox: 1 1 130px;
+ -webkit-flex: 1 1 130px;
+ flex: 1 1 130px;
+ }
+
+ nav#top ul li:nth-of-type(1) {
+ background: url(cw_image01.png) 100%/ cover no-repeat;
+ }
+
+ nav#top ul li:nth-of-type(2) {
+ background: url(cw_image02.png) 100%/ cover no-repeat;
+ }
+
+ nav#top ul li:nth-of-type(3) {
+ background: url(cw_image03.png) 100%/ cover no-repeat;
+ }
+
+ nav#top ul li:nth-of-type(4) {
+ background: url(cw_image04.png) 100%/ cover no-repeat;
+ }
+
+ nav#top ul li:nth-of-type(5) {
+ background: url(cw_image05.png) 100%/ cover no-repeat;
+ }
+
+ nav#top ul li:nth-of-type(6) {
+ background: url(cw_image06.png) 100%/ cover no-repeat;
+ }
+
+ p#links {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row nowrap;
+ -moz-box-flow: row nowrap;
+ -ms-flexbox-flow: row nowrap;
+ -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-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox-flow: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+ }
+
+ article {
+ -webkit-box: 2 1 400px;
+ -moz-box: 2 1 400px;
+ -ms-flexbox: 2 1 400px;
+ -webkit-flex: 2 1 400px;
+ flex: 2 1 400px;
+ }
+
+ aside {
+ -webkit-box: 1 2 200px;
+ -moz-box: 1 2 200px;
+ -ms-flexbox: 1 2 200px;
+ -webkit-flex: 1 2 200px;
+ flex: 1 2 200px;
+ }
+
+ nav#top ul {
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
+ -webkit-box-flow: row nowrap;
+ -moz-box-flow: row nowrap;
+ -ms-flexbox-flow: row nowrap;
+ -webkit-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+
+ background-color: rgb(51, 51, 51);
+ height: 50px;
+ justify-content: center;
+ align-items: center;
+ }
+
+ nav#top ul li {
+ -webkit-box: 0 1 80px;
+ -moz-box: 0 1 80px;
+ -ms-flexbox: 0 1 80px;
+ -webkit-flex: 0 1 80px;
+ flex: 0 1 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
- ============================================
-*/
-
From fce60b99d354a3ecad3ad542ef00be0889f7fe83 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Mon, 12 Nov 2018 12:42:38 -0600
Subject: [PATCH 15/20] Wrote html for case4
---
case4/jb_home.html | 140 ++++++++++++++++++++++++++++++++++++++++
case4/jb_home_txt.html | 22 -------
case4/jb_info.txt | 2 +-
case4/jb_reset.css | 58 +++++++++++++++++
case4/jb_styles.css | 41 ++++++++++++
case4/jb_styles_txt.css | 17 -----
6 files changed, 240 insertions(+), 40 deletions(-)
create mode 100644 case4/jb_home.html
delete mode 100644 case4/jb_home_txt.html
create mode 100644 case4/jb_reset.css
create mode 100644 case4/jb_styles.css
delete mode 100644 case4/jb_styles_txt.css
diff --git a/case4/jb_home.html b/case4/jb_home.html
new file mode 100644
index 0000000..7854221
--- /dev/null
+++ b/case4/jb_home.html
@@ -0,0 +1,140 @@
+
+
+
+
+
+ Jersey Buoys Surfing School
+
+
+
+
+
+
+
+
+
+
+ Classes
+
+
+
+
+ Camps
+
+
+
+
+ Store
+
+
+
+
+
+
+ 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.
+
+
+
+
+ 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_info.txt b/case4/jb_info.txt
index 38c1d92..49bb5fa 100644
--- a/case4/jb_info.txt
+++ b/case4/jb_info.txt
@@ -102,4 +102,4 @@ hobble-bobble
An aerial launch while flapping your arms like a bird
quiver
-A collection of surfboards
\ No newline at end of file
+A collection of surfboards
diff --git a/case4/jb_reset.css b/case4/jb_reset.css
new file mode 100644
index 0000000..564814d
--- /dev/null
+++ b/case4/jb_reset.css
@@ -0,0 +1,58 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 4
+
+ Jersey Bouys reset style sheet
+ Author: Steven Thompson & James Allen
+ Date: November 12, 2018
+ Filename: jb_reset.css
+
+*/
+
+
+/* Basic styles to be used with all devices and under all conditions */
+
+article, aside, figcaption, figure,
+footer, header, main, nav, section {
+ display: block;
+}
+
+address, article, aside, blockquote, body, cite,
+div, dl, dt, dd, em, figcaption, figure, footer,
+h1, h2, h3, h4, h5, h6, header, html, img,
+li, main, nav, nav a, ol, p, section, span, ul {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ vertical-align: baseline;
+ background: transparent;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+
+/* Set the default page element styles */
+
+body {
+ line-height: 1.2em;
+}
+
+ul, ol {
+ list-style: none;
+}
+
+nav ul {
+ list-style: none;
+ list-style-image: none;
+}
+
+nav a {
+ text-decoration: none;
+}
+
+
diff --git a/case4/jb_styles.css b/case4/jb_styles.css
new file mode 100644
index 0000000..692d032
--- /dev/null
+++ b/case4/jb_styles.css
@@ -0,0 +1,41 @@
+@charset "utf-8";
+
+/*
+ New Perspectives on HTML5 and CSS3, 7th Edition
+ Tutorial 5
+ Case Problem 4
+
+ Author: Steven Thompson & James Allen
+ Date: November 12, 2018
+
+ Filename: jb_styles.css
+
+ This file contains the screen styles used with the
+ Jersey Buoys home page
+
+*/
+ /* background styles */
+ html{
+ background: url("jb_back1.png") 100%/cover no-repeat;
+ }
+
+ body > header nav#horizontal{
+ background: url("jb_logo.png") 100%/cover no-repeat;
+ }
+
+ /* horizontal nav styles */
+ body header nav#horizontal{
+ width: 100%;
+ display: block;
+ }
+ body header nav#horizontal li{
+ width: 15%;
+ float: left;
+ }
+ body header nav#horizontal:after{
+ clear: both;
+ content:"";
+ display: table;
+ }
+
+
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
-
-*/
-
From 0496cf59843633a7e7a9676c5ed679609b7e29df Mon Sep 17 00:00:00 2001
From: sthompson
Date: Mon, 12 Nov 2018 13:27:27 -0600
Subject: [PATCH 16/20] Working on styles for case4
---
case4/jb_home.html | 8 ++++---
case4/jb_styles.css | 51 +++++++++++++++++++++++++++++++++++++--------
2 files changed, 47 insertions(+), 12 deletions(-)
diff --git a/case4/jb_home.html b/case4/jb_home.html
index 7854221..ec4b085 100644
--- a/case4/jb_home.html
+++ b/case4/jb_home.html
@@ -22,6 +22,7 @@
+
-
+
-
+
+
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.
@@ -90,7 +92,7 @@ Store
appointment, grab a board from the quiver and head to the Green Room.
-
-
- 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.
-
-
+
+ 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.
+
+
- Jersey Buoys
- Owner: Tony Gallo
-
- MAILING ADDRESS
- 141 Hodad Drive
- Ocean City, NJ 08226
-
- (609) 555-7873
-
- gall@example.com/surf
+ Jersey Buoys Owner: Tony Gallo
+ MAILING ADDRESS: 141 Hodad Drive Ocean City, NJ 08226
+ (609) 555-7873
+ gall@example.com/surf
diff --git a/case4/jb_styles.css b/case4/jb_styles.css
index ac6c8f3..d1cdcd6 100644
--- a/case4/jb_styles.css
+++ b/case4/jb_styles.css
@@ -19,7 +19,7 @@
background: url("jb_back2.png") 100%/cover no-repeat;
}
- /* flex layout styles */
+ /* body flex layout styles */
body {
display: -webkit-box;
@@ -60,6 +60,7 @@
/* horizontal nav styles */
aside#services{
+
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
@@ -72,11 +73,16 @@
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
- -webkit-box: 1 5 auto;
- -moz-box: 1 5 auto;
- -ms-flexbox: 1 5 auto;
- -webkit-flex: 1 5 auto;
- flex: 1 5 auto;
+ -webkit-box: 1 4 100px;
+ -moz-box: 1 4 100px;
+ -ms-flexbox: 1 4 100px;
+ -webkit-flex: 1 4 100px;
+ flex: 1 4 100px;
+
+ -webkit-align-items: center;
+ align-items: center;
+ float: left;
+
}
/*body aside#services{
@@ -92,17 +98,45 @@
display: -webkit-flex;
display: flex;
+ -webkit-box-flow: row wrap;
+ -moz-box-flow: row wrap;
+ -ms-flexbox: row wrap;
+ -webkit-flex-flow: row wrap;
+ flex-flow: row wrap;
+
+ -webkit-box: 2 4 100px;
+ -moz-box: 2 4 100px;
+ -ms-flexbox: 2 4 100px;
+ -webkit-flex: 2 4 100px;
+ flex: 2 4 100px;
+
+ -webkit-align-items: center;
+ align-items: center;
+
+ }
+
+ aside#slang{
+ display: -webkit-box;
+ display: -moz-box;
+ display: -ms-flexbox;
+ display: -webkit-flex;
+ display: flex;
+
-webkit-box-flow: column wrap;
-moz-box-flow: column wrap;
-ms-flexbox: column wrap;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
- -webkit-box: 1 4 auto;
- -moz-box: 1 4 auto;
- -ms-flexbox: 1 4 auto;
- -webkit-flex: 1 4 auto;
- flex: 1 4 auto;
+ -webkit-box: 1 4 100px;
+ -moz-box: 1 4 100px;
+ -ms-flexbox: 1 4 100px;
+ -webkit-flex: 1 4 100px;
+ flex: 1 4 100px;
+
+ -webkit-align-items: center;
+ align-items: center;
+ float: right;
}
/*body section#description{
@@ -112,23 +146,7 @@
margin-left: 2%;
}*/
- body aside#slang{
- width: 20%;
- float: right;
- margin-left: 2%;
- }
-
- body aside#slang h1{
- text-align: center;
- }
-
- body aside#slang ul{
- padding-right: 15px;
- }
- body aside#slang ul p{
- text-align: center;
- }
@media only screen and (max-width: 480px){
@@ -136,8 +154,6 @@
order: 100;
}
-
-
nav#horizontal ul{
display:none;
}
@@ -149,6 +165,10 @@
a#navicon:hover+ul, nav#horizontal ul:hover{
display: block;
}
+
+ aside#slang, aside#services{
+ display: none;
+ }
}
@media only screen and (min-width: 481px){
@@ -157,7 +177,6 @@
display: none;
}
-
body nav#horizontal ul{
display: -webkit-box;
display: -moz-box;
@@ -182,11 +201,34 @@
flex: 1 1 auto;
}
-}
+ body aside#slang{
+ width: 20%;
+ float: right;
+ margin-left: 2%;
+ }
- /* Aside services styles */
-
+ body aside#slang h1{
+ text-align: center;
+ }
+
+ body aside#services h1{
+ text-align: center;
+ }
+
+ body aside#services ul{
+ padding-right: 15px;
+ }
+ body aside#slang ul{
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+
+ body aside#slang ul p{
+ text-align: center;
+ }
+
+}
From e661832b2e6a0b02d74d454e0807f066b922e665 Mon Sep 17 00:00:00 2001
From: sthompson
Date: Wed, 14 Nov 2018 12:09:47 -0600
Subject: [PATCH 20/20] Extra comments in css
---
case4/jb_styles.css | 20 ++++++++++++++------
1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/case4/jb_styles.css b/case4/jb_styles.css
index d1cdcd6..284c241 100644
--- a/case4/jb_styles.css
+++ b/case4/jb_styles.css
@@ -14,13 +14,15 @@
Jersey Buoys home page
*/
- /* background styles */
+/* =============================================
+ Base styles used by All Screens
+ =============================================
+*/
+
html{
background: url("jb_back2.png") 100%/cover no-repeat;
}
- /* body flex layout styles */
-
body {
display: -webkit-box;
display: -moz-box;
@@ -52,12 +54,10 @@
width: 60%;
padding-left: 20%;
}
- /* ul styles */
ul{
list-style-type: none;
}
- /* horizontal nav styles */
aside#services{
@@ -147,7 +147,10 @@
}*/
-
+/* =============================================
+ MOBILE STYLES FOR DEVICE WIDTH <= 480PX
+ =============================================
+*/
@media only screen and (max-width: 480px){
body footer{
@@ -171,6 +174,11 @@
}
}
+
+/* =============================================
+ DESKTOP STYLES FOR DEVICE WIDTH >= 481PX
+ =============================================
+*/
@media only screen and (min-width: 481px){
a#navicon{