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 + + + + + + + + +
+ Golden Pulp +
+ + +
+

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.

+
+ + + + + diff --git a/case1/gp_layout.css b/case1/gp_layout.css new file mode 100644 index 0000000..7ed4e30 --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,160 @@ +@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 extensions: + -webkit-box + -moz-box + -ms-flexbox + -webkit-flex + 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; + } + body header img#logo{ + 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; + + -webkit-box-flex: 1 3 301px; + -moz-box-flex: 1 3 301px; + -ms-flexbox: 1 3 301px; + -webkit-flex: 1 3 301px; + flex: 1 3 301px; + } + + 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 + ============================================ +*/ + +@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; + } +} + + + +/* =================================================== + Tablet and Desktop Devices: Greater than 480 pixels + =================================================== +*/ + +@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; + } + + img[class^="panel size1"]{ + width: 100% + } + + img[class^="panel size2"]{ + width: 60%; + } + + img[class^="panel size3"]{ + width: 40%; + } + + img[class^="panel size4"]{ + width: 30%; + } +} + 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 + + + + + + + + +
+ Golden Pulp +
+ + + +
+

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".

+
+ + + + 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 + + + + + + + + +
+ Golden Pulp +
+ + + +
+

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 Ivan the Terrible, Cesare Borgia, + Attila the Hun, and Caligula.

+

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.

+
+ + + + 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 + + + + + + + + +
+ Golden Pulp +
+ + + +
+

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.

+
+ + + + diff --git a/case1/gp_print.css b/case1/gp_print.css new file mode 100644 index 0000000..60e91cc --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,60 @@ +@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 */ + + nav, footer, article{ + display: none; + } + + +/* Comic Book Sheet Styles */ + + section#sheet{ + width: 6in; + margin-top: 0in; + margin-bottom: 0in; + margin-left: auto; + margin-right: auto; + } + + img[class^="panel size1"]{ + width: 5in; + } + + img[class^="panel size2"]{ + width: 3in; + } + + img[class^="panel size3"]{ + width: 2in; + } + + img[class^="panel size4"]{ + width: 1.5in; + } + + + + + + + + + + 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 - ================================================= -*/ - 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 - ============================================ -*/ - diff --git a/case4/jb_home.html b/case4/jb_home.html new file mode 100644 index 0000000..c5f38ba --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,128 @@ + + + + + + Jersey Buoys Surfing School + + + + + + + +
+ + +
+ + + + + +
+

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.

+
+ + + + + + + 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..284c241 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,242 @@ +@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 + +*/ +/* ============================================= + Base styles used by All Screens + ============================================= +*/ + + html{ + background: url("jb_back2.png") 100%/cover no-repeat; + } + + 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; + + display: block; + background-color: white; + margin-left: auto; + margin-right: auto; + width: 90%; + max-width: 800px; + } + + body:after{ + clear: both; + content:""; + display: table; + } + + body header img#logo{ + width: 60%; + padding-left: 20%; + } + + ul{ + list-style-type: none; + } + + aside#services{ + + 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 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{ + width: 20%; + float: left; + margin-right: 2%; + }*/ + + section#description{ + 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; + + -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 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{ + width: 52%; + float: left; + margin-right: 2%; + margin-left: 2%; + }*/ + + +/* ============================================= + MOBILE STYLES FOR DEVICE WIDTH <= 480PX + ============================================= +*/ +@media only screen and (max-width: 480px){ + + body footer{ + order: 100; + } + + nav#horizontal ul{ + display:none; + } + + a#navicon{ + display: block; + } + + a#navicon:hover+ul, nav#horizontal ul:hover{ + display: block; + } + + aside#slang, aside#services{ + display: none; + } +} + + +/* ============================================= + DESKTOP STYLES FOR DEVICE WIDTH >= 481PX + ============================================= +*/ +@media only screen and (min-width: 481px){ + + a#navicon{ + display: none; + } + + body nav#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; + + } + + body nav#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; + } + + body aside#slang{ + width: 20%; + float: right; + margin-left: 2%; + } + + 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; + } + +} + + + 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..03ec3ee --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,95 @@ +@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_print2.css + + This file contains the printer styles used with the Trusted + Friends Parents Tips page + +*/ + +/* Hidden Objects */ + +body > header > h1, nav, section#left, body > footer{ + display: none; +} + +/* Page Box Styles */ + +@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; +} + +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_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..354259b --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,121 @@ +@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; + } + + nav.horizontal ul{ + display: none; + } + + 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..5e58afc 100644 --- a/review/tf_tips_txt.html +++ b/review/tf_tips.html @@ -1,4 +1,4 @@ - + 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..c39c182 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: Steven Thompson & James Allen + Date: November 6, 2018 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..ca7db2e --- /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: Steven Thompson & James Allen + Date: November 6, 2018 + + 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..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 + + +
Trusted Friends -