diff --git a/case1/gp_cover_txt.html b/case1/gp_cover.html similarity index 83% rename from case1/gp_cover_txt.html rename to case1/gp_cover.html index 2ced369..9c40a99 100644 --- a/case1/gp_cover_txt.html +++ b/case1/gp_cover.html @@ -5,17 +5,20 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 1 - + Ghost of the Deep Cover Page - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/7/18 + Filename: gp_cover.html --> - + Ghost of the Deep Cover Page - + + + + @@ -31,7 +34,7 @@
  • Writers
    • - +

    Capt. Marvel and the Ghost of the Deep

    @@ -39,29 +42,29 @@

    Capt. Marvel and the Ghost of the Deep

    next
    - +

    Fawcett Comics

    -

    One of the most successful comic book publisher in the 1940's, Fawcett Publications +

    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, + 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 + 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..cbcab34 --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,95 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Joshua Bentley, Austin A. + Date: 11/7/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-flex; + 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; + } + + footer { + -webkit-order: 100; + order: 100; + } + + +} + + + +/* =================================================== + Tablet and Desktop Devices: Greater than 480 pixels + =================================================== +*/ +@media only screen and (min-width: 481px) { + nav.horizontal ul { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + height: 40px; + } + + nav.horizontal ul li { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + img.size1 { width: 100%; } + img.size2 { width: 60%; } + img.size3 { width: 40%; } + img.size4 { width: 30%; } + +} diff --git a/case1/gp_layout_txt.css b/case1/gp_layout_txt.css deleted file mode 100644 index 00370c1..0000000 --- a/case1/gp_layout_txt.css +++ /dev/null @@ -1,42 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 1 - - Author: - Date: - - Filename: gp_layout.css - - This file contains the layout styles and media - queries used with sample pages from the Golden - Pulps website. - -*/ - - -/* Import Basic Design Styles Used on All Screens */ - -@import url("gp_designs.css"); - -/* Flex Layout Styles */ - - - - - -/* ============================================ - Mobile Devices: 0 - 480 pixels - ============================================ -*/ - - - - -/* =================================================== - Tablet and Desktop Devices: Greater than 480 pixels - =================================================== -*/ - diff --git a/case1/gp_page1_txt.html b/case1/gp_page1.html similarity index 77% rename from case1/gp_page1_txt.html rename to case1/gp_page1.html index 846288b..c91c04d 100644 --- a/case1/gp_page1_txt.html +++ b/case1/gp_page1.html @@ -5,23 +5,27 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 1 - + Ghost of the Deep Page 1 - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/7/18 + Filename: gp_page1.html --> - + 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 + 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 @@ -59,7 +63,7 @@

    Captain Marvel

    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_txt.html b/case1/gp_page2.html similarity index 76% rename from case1/gp_page2_txt.html rename to case1/gp_page2.html index fc80c51..b3338c3 100644 --- a/case1/gp_page2_txt.html +++ b/case1/gp_page2.html @@ -5,23 +5,27 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 1 - + Ghost of the Deep Page 2 - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/7/18 + Filename: gp_page2.html --> - + 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, @@ -71,7 +75,7 @@

    Marvel's Adversaries

    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_txt.html b/case1/gp_page3.html similarity index 78% rename from case1/gp_page3_txt.html rename to case1/gp_page3.html index 06f2365..312c041 100644 --- a/case1/gp_page3_txt.html +++ b/case1/gp_page3.html @@ -5,23 +5,27 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 1 - + Ghost of the Deep Page 3 - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/7/18 + Filename: gp_page3.html --> - + 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 + 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 @@ -61,14 +65,14 @@

    Marvel and the Nazis

    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. + 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..d4f701e --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,37 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Joshua Bentley, Austin A. + Date: 11/7/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: none; +} + + +/* Comic Book Sheet Styles */ +section#sheet { + width: 6in; + margin-top: 0in; + margin-bottom: 0in; + margin-left: auto; + margin-right: auto; +} + +img.size1 { width: 5in; } +img.size2 { width: 3in; } +img.size3 { width: 2in; } +img.size4 { width: 1.5in; } diff --git a/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..040465d --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,135 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Joshua Bentley, Austin A. + Date: 11/7/18 + + Filename: wc_styles.css + + This file contains the layout styles and media + queries used with sample pages from the Willet + Creek Golf Course website. + +*/ + + +/* Import Design Styles */ +@import "wc_designs.css"; + + +/* Flex Layout Styles */ +body { + display: -webkit-box; + display: -moz-flex; + 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 { + display: -webkit-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex: 3 1 341px; + flex: 3 1 341px; + -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-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +aside div { + -webkit-flex: 1 1 180px; + flex: 1 1 180px; +} + +a#navicon { + display: none; +} + +/* ============================= + Mobile Styles: 0 - 480 pixels + ============================= +*/ +@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; + } + + aside { + display: none; + } + + nav#hole_list { + -webkit-order: 99; + order: 99; + } + + footer { + -webkit-order: 100; + order: 100; + } + +} + + + + +/* ================================================= + Tablet and Desktop Styles: 481 pixels 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; + -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 87% rename from case3/cw_home_txt.html rename to case3/cw_home.html index 3d3f80e..07898c8 100644 --- a/case3/cw_home_txt.html +++ b/case3/cw_home.html @@ -5,16 +5,19 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 3 - + Cauli-Wood Gallery home page - Author: - Date: + Author: Joshua Bentley, Austin A. + Date: 11/8/18 Filename: cw_home.html --> - + Cauli-Wood Gallery + + + @@ -33,33 +36,33 @@
    -

    Welcome to the Cauli-Wood Gallery! +

    Welcome to the Cauli-Wood Gallery! Our mission is to support Sedona's vibrant graphic arts community. - Enjoy fine art at our friendly café where the coffee and tea - are always hot, + Enjoy fine art at our friendly café where the coffee and tea + are always hot, the jazz is cool, and the scones are uniformly delicious.

    -

    All of the coffee served in our café is fair +

    All of the coffee served in our café is fair trade organic. We also offer specialty coffee drinks, teas, and wines. Sample our delicious sandwiches, wraps, and soups as you peruse - the gallery. Free and secure Wi-Fi is available on the premises to our + the gallery. Free and secure Wi-Fi is available on the premises to our loyal patrons.

    -

    Consider the Cauli-Wood Gallery for your next gathering. We cater - receptions, corporate meetings, wedding receptions, and more with +

    Consider the Cauli-Wood Gallery for your next gathering. We cater + receptions, corporate meetings, wedding receptions, and more with ample space for up to 120 guests.

    -

    ARTISTS: We're always on the lookout for fresh and exciting talent and would love - to consider your work. Please contact us to arrange a viewing and appraisal +

    ARTISTS: We're always on the lookout for fresh and exciting talent and would love + to consider your work. Please contact us to arrange a viewing and appraisal of your portfolio.

    Spotlight

    Long a fixture of the Sedona art community, we are proud this month - to feature a retrospective of Aza Deere's work in Visions of Light + to feature a retrospective of Aza Deere's work in Visions of Light & Shadow. Aza became a year-round artist-in-residence starting back in 1962, when she arrived with "a few dollars in one pocket and few more brushes in the other pocket." Since then, she has gone through many brushes and added a few more dollars. Aza's work is known for its sensuous and - ethereal quality, delicately mixing light and shadow in + ethereal quality, delicately mixing light and shadow in surprising and memorable ways. Please join Aza on April 7 for a reception celebrating her life and art.

    @@ -69,28 +72,28 @@

    Upcoming

    Aza Deere: Visions of Light & Shadow
    April 4 - April 18
    - -
    Reception for Aza Deere
    -
    April 7 (6-8pm)
    - + +
    Reception for Aza Deere
    +
    April 7 (6-8pm)
    +
    Woman's Show
    -
    April 8 (7-10pm)
    - +
    April 8 (7-10pm)
    +
    Understanding Human Form Class
    April 11 (9-11:30am)
    - +
    Woman's Show
    April 11 - April 17
    - +
    2nd Tuesday Gallery Tour
    April 12 (5 - 8pm)
    - +
    Ryan Dekker on Sedona Mysteries
    April 13 (7 - 8:30pm)
    - +
    Riling-Jade Wedding Rehearsal Dinner
    -
    April 15 (7-10pm)
    - +
    April 15 (7-10pm)
    +
    Saturday Morning Jam with Jam
    April 16 (9am-12pm)
    diff --git a/case3/cw_styles.css b/case3/cw_styles.css new file mode 100644 index 0000000..8934464 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,201 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: Joshua Bentley, Austin A. + Date: 11/8/18 + + Filename: cw_styles.css + + This file contains the screen styles used with the + Cauli-Wood Gallery home page + +*/ + + +/* Import Basic Design Styles */ +@import "cw_designs.css"; + + +/* =============================== + General Styles for All Devices + =============================== +*/ + +nav#bottom { + display: -webkit-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + justify-content: center; +} + +nav#bottom ul { + -webkit-flex-basis: 150px; + flex-basis: 150px; +} + + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ +@media only screen and (max-width: 480px) { + body { + color: rgb(211,211,211); + background-color: rgb(51, 51, 51); + } + + aside, article img, section#spotlight { + display: none; + } + + nav#top ul { + display: -webkit-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + + nav#top ul li { + font-size: 2.2em; + -webkit-flex: 1 1 130px; + flex: 1 1 130px; + } + + nav#top ul li:nth-of-type(1) { + background: url(cw_image01.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + nav#top ul li:nth-of-type(2) { + background: url(cw_image02.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + nav#top ul li:nth-of-type(3) { + background: url(cw_image03.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + nav#top ul li:nth-of-type(4) { + background: url(cw_image04.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + nav#top ul li:nth-of-type(5) { + background: url(cw_image05.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + nav#top ul li:nth-of-type(6) { + background: url(cw_image06.png); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + } + + p#links { + display: -webkit-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -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; + } + + footer { + -webkit-order: 100; + order: 100; + } + +} + + + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ +@media only screen and (min-width: 481px) { + body { + display: -webkit-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + article { + -webkit-flex: 2 1 400px; + flex: 2 1 400px; + } + + aside { + -webkit-flex: 1 2 200px; + flex: 1 2 200px; + } + + nav#top { + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + + nav#top ul { + display: -webkit-box; + display: -moz-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + background-color: rgb(51,51,51); + height: 50px; + justify-content: center; + align-items: center; + } + + nav#top ul li { + -webkit-flex: 1 1 80px; + flex: 1 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..5f31bde --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,147 @@ + + + + + + Jersey Buoys Surfing School + + + + + + + +
    + Header Logo + Header Image +
    + + + +
    +

    + 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. +
    + (609) 555-7873
    + gall@example.com/surf +

    + +
    +
    +

    + Jersey Buoys
    + Owner: Tony Gallo
    +
    + MAILING ADDRESS
    + 141 Hodad Drive
    + Ocean City, NJ 08226
    +

    +
    + + 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_navicon.css b/case4/jb_navicon.css new file mode 100644 index 0000000..18e29bd --- /dev/null +++ b/case4/jb_navicon.css @@ -0,0 +1,46 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + + Filename: tf_navicon.css + + This file contains styles used to control + a navicon menu. + +*/ + + +/* =========== + Base Styles + =========== +*/ +a#navicon { + display: none; +} + +/* =============================== + Mobile Devices: 0 to 480px + =============================== +*/ + +@media only screen and (max-width: 480px) { + a#navicon { + display: block; + background-color: yellow; + } + + nav#MainNav { + display: none; + } + + a#navicon:hover+#MainNav, nav#MainNav:hover { + display: block; + } + +} diff --git a/case4/jb_reset.css b/case4/jb_reset.css new file mode 100644 index 0000000..2ad42e4 --- /dev/null +++ b/case4/jb_reset.css @@ -0,0 +1,56 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Cauli-Wood Gallery Reset Style Sheet + + Filename: cw_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..e74f254 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,220 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ + +header { + display: none; +} + +nav#MainNav { + text-align: center; +} + +nav#MainNav ul a li { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + align-content: center; + background-color: yellow; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + padding: 1.5%; + text-align: center; + text-transform: uppercase; + color: black; + text-decoration: none; +} + +nav#MainNav ul a li:hover { + background-color: grey; + color: black; + text-decoration: none; +} + +nav#horizontal { + width: 100%; +} + +nav#horizontal ul { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; +} + +nav#horizontal ul li { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; +} + +nav#horizontal ul#main2 { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + align-content: center; + text-align: center; +} + +nav#horizontal ul#main2 li { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + align-content: center; + padding: 3%; + background-color: yellow; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + text-align: center; +} + + +p { + padding: 1.5%; +} + +footer { + text-align: center; +} + + + + +@media only screen and (max-width: 480px) { + aside { + display: none; + } + + div.container { + background-color: rgb(247, 237, 190); + box-shadow: inset 1px 1px 40px black; + } + + nav#horizontal ul.submenu { + background-color: lightblue; + padding: 1.5%; + text-align: center; + } + + nav#horizontal ul.submenu a { + padding: 0.4%; + text-decoration: none; + color: white; + text-shadow: 0px 0px 10px black; + } + + nav#MainNav{ + -webkit-order: 99; + order: 99; + } + + footer { + background-color: lightblue; + -webkit-order: 100; + order: 100; + } + + +} + + + + +@media only screen and (min-width: 481px) { + html { + display: none; + } +} + + + + + +@media only screen and (min-width: 769px) { + html { + display: block; + } + header { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: stretch; + align-content: stretch; + background-color: indigo; + } + + header img { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + html { + background-color: tan; + } + + body { + width: 40%; + margin-left: 30%;ock; + margin-right: 30%; + background-color: white; + box-shadow: 0px 20px 40px black; + } + + p.paragraph { + float: left; + width: 60%; + } + + aside { + float: left; + width: 35%; + } + + aside.slang ul li { + display: block; + clear: both; + } + + aside.slang ul li h2 { + margin-top: 4%; + clear: both; + } + + aside.slang ul li p { + clear: both; + } + + nav#horizontal{ + display: none; + } + +} diff --git a/case4/jb_styles_txt.css b/case4/jb_styles_txt.css deleted file mode 100644 index cbb642a..0000000 --- a/case4/jb_styles_txt.css +++ /dev/null @@ -1,17 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 4 - - Author: - Date: - - Filename: jb_styles.css - - This file contains the screen styles used with the - Jersey Buoys home page - -*/ - diff --git a/review/tf_back1.png b/review/tf_back1.png new file mode 100644 index 0000000..21f144c Binary files /dev/null and b/review/tf_back1.png differ diff --git a/review/tf_designs.css b/review/tf_designs.css index 353c5fc..907bdd4 100644 --- a/review/tf_designs.css +++ b/review/tf_designs.css @@ -4,7 +4,7 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Review Assignment - + Filename: tf_designs.css This file design style used by all screen sizes for diff --git a/tutorial/tf_navicon_txt.css b/review/tf_navicon.css similarity index 51% rename from tutorial/tf_navicon_txt.css rename to review/tf_navicon.css index 3668320..0d2e967 100644 --- a/tutorial/tf_navicon_txt.css +++ b/review/tf_navicon.css @@ -4,13 +4,13 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - - Author: - Date: - + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + Filename: tf_navicon.css - - This file contains styles used to control + + This file contains styles used to control a navicon menu. */ @@ -20,16 +20,26 @@ Base Styles =========== */ - - - +a#navicon { + display: none; +} /* =============================== - Mobile Devices: 0 to 480px + Mobile Devices: 0 to 480px =============================== */ @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/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..5f4bee9 --- /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: Joshua Bentley, Austin A. + Date: 11/6/18 + + Filename: tf_print2.css + + This file contains the printer styles used with the Trusted + Friends Parents Tips page + +*/ + + + +/* Hidden Objects */ +nav, header h1, section#left, 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 { + 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..4c27381 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,113 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Joshua Bentley, Austin A. + Date: 11/6/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-flex; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#left { + -webkit-flex: 1 8 130px; + flex: 1 8 130px; +} + +section#right { + -webkit-flex: 8 1 351px; + flex: 8 1 351px; +} + +section.tips { + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section.tips article { + -webkit-flex: 2 1 351px; + flex: 2 1 351px; +} + +section.tips aside { + -webkit-flex: 1 2 250px; + flex: 1 2 250px; +} + +nav.horizontal ul { + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: column wrap; + flex-flow: column wrap; +} + + +/* =============================== + Mobile Devices: 0 to 480px + =============================== +*/ +@media only screen and (max-width: 480px) { + nav.horizontal 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; + } + +} + + +/* ============================================ + 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 90% rename from review/tf_tips_txt.html rename to review/tf_tips.html index 5f89bf6..5816abb 100644 --- a/review/tf_tips_txt.html +++ b/review/tf_tips.html @@ -5,16 +5,21 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Review Assignment - + Trusted Friends Parenting Tips - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + Filename: tf_tips.html --> - + Trusted Friends: Education Tips + + + + + @@ -41,7 +46,7 @@

    Parenting Tips

    - +

    Archive

    - + - +
    Trusted Friends • 3450 Regency Lane, Carmel IN
    diff --git a/tutorial/tf_articles_txt.html b/tutorial/tf_articles.html similarity index 85% rename from tutorial/tf_articles_txt.html rename to tutorial/tf_articles.html index f36bf96..c8983dd 100644 --- a/tutorial/tf_articles_txt.html +++ b/tutorial/tf_articles.html @@ -5,17 +5,20 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - + Trusted Friends Articles of Interest - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + Filename: tf_articles.html --> - + Trusted Friends: Articles of Interest + + + @@ -31,7 +34,7 @@ - + - +

    An Accredited Center

    -

    At Trusted Friends we believe that every child is capable of excellence. - That is why we are committed to pursuing and maintaining our status as an - accredited daycare center. By seeking national accreditation, you know - that Trusted Friends is striving to give your family the very +

    At Trusted Friends we believe that every child is capable of excellence. + That is why we are committed to pursuing and maintaining our status as an + accredited daycare center. By seeking national accreditation, you know + that Trusted Friends is striving to give your family the very best daycare experience.

    What is Accreditation?

    -

    Every daycare center must meet the state's minimum license requirements. - We go beyond that. When a daycare center is awarded national accreditation +

    Every daycare center must meet the state's minimum license requirements. + We go beyond that. When a daycare center is awarded national accreditation they are meeting a higher standard that demonstrates its expertise in:

    • Classroom Management
      • @@ -76,71 +79,71 @@

      What is Accreditation?

    • Administrative Oversight
    • Financial Statements
    -

    Our commitment to accreditation gives you assurance we provide a positive +

    Our commitment to accreditation gives you assurance we provide a positive educational experience for your child.

    How does Accreditation Work?

    -

    Every other year we go through an intense review by recognized and esteemed - national accreditation agencies. Their positive reports (available for - inspection) confirm that we are providing a clean, safe, and positive - environment for our children. Accreditation verifies that our teachers are - qualified and fully engaged in giving our children a first-class educational +

    Every other year we go through an intense review by recognized and esteemed + national accreditation agencies. Their positive reports (available for + inspection) confirm that we are providing a clean, safe, and positive + environment for our children. Accreditation verifies that our teachers are + qualified and fully engaged in giving our children a first-class educational experience.

    -

    Once we've completed the entire accreditation self-study process, trained - professionals from our accrediting agencies conduct on-site visits to +

    Once we've completed the entire accreditation self-study process, trained + professionals from our accrediting agencies conduct on-site visits to validate our compliance with national early childhood education standards. - But accreditation doesn't just take place every two years. It's an ongoing + But accreditation doesn't just take place every two years. It's an ongoing process of self-evaluation, discussion, and parental reviews.

    -

    We encourage parents to help us improve our center and become better stewards for +

    We encourage parents to help us improve our center and become better stewards for their children. You can part of the accreditation process as we work together to make Trusted Friends a great neighborhood center.

    Who Provides Accreditation?

    There are several national organizations that provide accreditation services. - Who a center chooses for oversight is important. Trusted Friends pursues national - accreditation from three of the most + Who a center chooses for oversight is important. Trusted Friends pursues national + accreditation from three of the most respected national early childhood accreditation agencies:

    -

    Feel free to contact us to discuss accreditation and learn more about our +

    Feel free to contact us to discuss accreditation and learn more about our standards for care and education.

    - +

    Our Community

    -

    Trusted Friends is committed to improving the lives of children in - our community. Our expertise in caring for the children at our daycare - center gives us a unique understanding of child development, education - issues, and parenting. Trusted Friends has partnered with several community +

    Trusted Friends is committed to improving the lives of children in + our community. Our expertise in caring for the children at our daycare + center gives us a unique understanding of child development, education + issues, and parenting. Trusted Friends has partnered with several community organizations that advocate for poor and needy children and families.

    We don't think of it as charity. It's part of our calling.

    Improving Literacy

    -

    Part of Trusted Friend's mission is to promote literacy, which is key to - education and a fulfilling life. We support reading programs and - national literacy efforts initiated at both the local and national - level. These efforts include providing early access to books and other - reading material. We are also in the - Raised by Reading program, helping +

    Part of Trusted Friend's mission is to promote literacy, which is key to + education and a fulfilling life. We support reading programs and + national literacy efforts initiated at both the local and national + level. These efforts include providing early access to books and other + reading material. We are also in the + Raised by Reading program, helping parents share the reading experience with their children.

    - +

    Promoting Partnerships

    We are proud of our support for the Big Siblings - organization. Several of our educators are Big Sibling mentors and we - provide meeting space and monthly activities for this fine group. We - are also deeply involved with the Young Care Nursery - organziation, working to prevent child abuse and neglect. We partner with other - caregivers committed to strengthening families in the community. For - example we are a charter member of Sunflower Friends, which - creates learning and enrichment opportunities for underprivileged + organization. Several of our educators are Big Sibling mentors and we + provide meeting space and monthly activities for this fine group. We + are also deeply involved with the Young Care Nursery + organziation, working to prevent child abuse and neglect. We partner with other + caregivers committed to strengthening families in the community. For + example we are a charter member of Sunflower Friends, which + creates learning and enrichment opportunities for underprivileged children, helping them to realize their potential and recognize their inherent dignity.

    -

    Please contact us if you believe that Trusted Friends can be a partner with +

    Please contact us if you believe that Trusted Friends can be a partner with your group in improving the lives of children and families in our community.

    - +
    Trusted Friends • 3450 Regency Lane, Carmel IN
    diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..0167564 --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,94 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + + Filename: tf_flex.css + + This file contains the flex styles used in the Trusted Friends + Pre-K Classes page. + +*/ + + +/* ================ + Base Flex Styles + ================ +*/ +body { + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +header, footer { + width: 100%; +} + +aside { + -webkit-flex: 1 1 120px; + flex: 1 1 120px; +} + +section#main { + -webkit-flex: 3 1 361px; + flex: 3 1 361px; +} + +section#topics { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#topics article { + -webkit-flex: 1 1 200px; + flex: 1 1 200px; +} + +/* ========================= + Mobile Styles: 0 to 480px + ========================= +*/ + +@media only screen and (max-width: 480px) { + aside { + -webkit-order: 99; + order: 99; + } + + footer { + -webkit-order: 100; + order: 100; + } + +} + +/* ============================================ + Tablet and Desktop Styles: 481px and greater + ============================================ +*/ + +@media only screen and (min-width: 481px) { + nav.horizontal ul { + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + 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 83% rename from tutorial/tf_home_txt.html rename to tutorial/tf_home.html index 31bb7ed..3c6fef4 100644 --- a/tutorial/tf_home_txt.html +++ b/tutorial/tf_home.html @@ -5,22 +5,25 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - + Home Page of the Trusted Friends website - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + Filename: tf_home.html --> - + Trusted Friends Daycare + + +
    Trusted Friends - +
    - +
    -

    Trusted Friends Daycare provides childhood education - and daycare, conveniently located for you and your child. We treat each - child based on his or her own individual needs. Trusted Friends - provides a qualified and experienced team of educators with expertise in early +

    Trusted Friends Daycare provides childhood education + and daycare, conveniently located for you and your child. We treat each + child based on his or her own individual needs. Trusted Friends + provides a qualified and experienced team of educators with expertise in early childhood development.

    -

    We structure each day around stimulating and educational activities that aid - in your child's physical, intellectual, and emotional development. And we can +

    We structure each day around stimulating and educational activities that aid + in your child's physical, intellectual, and emotional development. And we can accommodate your busy schedule with transportation to and from our school.

    -

    Call (317) 555-7414 to schedule a tour or to +

    Call (317) 555-7414 to schedule a tour or to learn more about our facilities and our instructors.

    - +
    - +
    Trusted Friends • 3450 Regency Lane, Carmel IN
    diff --git a/tutorial/tf_navicon.css b/tutorial/tf_navicon.css new file mode 100644 index 0000000..0d2e967 --- /dev/null +++ b/tutorial/tf_navicon.css @@ -0,0 +1,45 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + + Filename: tf_navicon.css + + This file contains styles used to control + a navicon menu. + +*/ + + +/* =========== + Base Styles + =========== +*/ +a#navicon { + display: none; +} + +/* =============================== + Mobile Devices: 0 to 480px + =============================== +*/ + +@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 78% rename from tutorial/tf_prek_txt.html rename to tutorial/tf_prek.html index 3498f36..e9a0604 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek.html @@ -5,24 +5,31 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - + Pre-K Classes offered by Trusted Friends - Author: - Date: - + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + Filename: tf_prek.html --> - + Pre-K Classes at Trusted Friends - + + + + +
    Trusted Friends - +
    - + - +

    Pre-K Classes

    -

    As preschoolers gain more self-esteem, they feel ready to take on the world. - Our preschool curriculum enhances their confidence by providing activities to - help them become problem solvers and nurture a love of learning. With independent - exploration, structured activities, and hands-on learning, our children develop +

    As preschoolers gain more self-esteem, they feel ready to take on the world. + Our preschool curriculum enhances their confidence by providing activities to + help them become problem solvers and nurture a love of learning. With independent + exploration, structured activities, and hands-on learning, our children develop a variety of skills and knowledge in areas from mathematics to reading.

    We're proud of the work we do. Early learning standards, backed by education experts, - inform the scope and sequence of our pre-k program. Our curriculum aligns to - 72 learning standards progressing sequentially across six developmental domains. - Add to this a healthy dose of running, jumping and movement to keep children active - and you'll see why Trusted Friends is a true leader in early + inform the scope and sequence of our pre-k program. Our curriculum aligns to + 72 learning standards progressing sequentially across six developmental domains. + Add to this a healthy dose of running, jumping and movement to keep children active + and you'll see why Trusted Friends is a true leader in early childhood education.

    - +

    Language Skills

    -

    Language, literacy, and communication skills are embedded into a child's - daily experiences. We strive to create meaningful classroom experiences that +

    Language, literacy, and communication skills are embedded into a child's + daily experiences. We strive to create meaningful classroom experiences that help children use and build a growing vocabulary.

    Math Exploration

    -

    Pre-k children are enthusiastic mathematicians. Our instructors work to ensure that - our students don't simply learn numbers by rote, but instead build mathematical - understanding related to real, everyday problems. Our curriculum includes - important skills such as comparing and contrasting items by characteristics, +

    Pre-k children are enthusiastic mathematicians. Our instructors work to ensure that + our students don't simply learn numbers by rote, but instead build mathematical + understanding related to real, everyday problems. Our curriculum includes + important skills such as comparing and contrasting items by characteristics, following complex directions in sequence, and solving simple number problems.

    Science Studies

    -

    As their cognitive and physical abilities develop, children are able to develop and test - their own theories, and to engage in scientific reasoning. Our curriculum encourages students - to broaden their understanding of scientific disciplines, from physics to chemistry to - earth science. Children learn by participating in cooking projects and participating in +

    As their cognitive and physical abilities develop, children are able to develop and test + their own theories, and to engage in scientific reasoning. Our curriculum encourages students + to broaden their understanding of scientific disciplines, from physics to chemistry to + earth science. Children learn by participating in cooking projects and participating in multi-skill experiments, handling mechanical tools.

    Creative Expressions

    -

    Pre-kindergarten is an ideal time to introduce children to artistic expression. Our - pre-k teachers extend their student's skills and knowledge through process-oriented art - projects. We teach sculpting with clay and etching tools, writing and illustrating books, +

    Pre-kindergarten is an ideal time to introduce children to artistic expression. Our + pre-k teachers extend their student's skills and knowledge through process-oriented art + projects. We teach sculpting with clay and etching tools, writing and illustrating books, and our students experience acting out original stories with costumes, props, and masks.

    Cultural Sharing

    -

    Children are innately interested in the diversity of people and cultures. We - foster the development of all areas of a child's emotional intelligence including interpersonal - skills, compassion, and acceptance of personal responsibility. We believe in fostering +

    Children are innately interested in the diversity of people and cultures. We + foster the development of all areas of a child's emotional intelligence including interpersonal + skills, compassion, and acceptance of personal responsibility. We believe in fostering respect for different cultures, traditions, and life styles.

    Physical Wellness

    -

    Pre-k children learn about becoming responsible for their own choices and decisions. - Our curriculum encourages students to learn physical wellness through physical activity, - healthy eating, and personal hygiene. Everyday our children learn about themselves and +

    Pre-k children learn about becoming responsible for their own choices and decisions. + Our curriculum encourages students to learn physical wellness through physical activity, + healthy eating, and personal hygiene. Everyday our children learn about themselves and others through supportive sharing times.

    - +
    - + diff --git a/tutorial/tf_print.css b/tutorial/tf_print.css new file mode 100644 index 0000000..a344643 --- /dev/null +++ b/tutorial/tf_print.css @@ -0,0 +1,103 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + + Filename: tf_print.css + + This file contains the printer styles used with the Trusted + Friends page on articles of interest + +*/ + + + +/* Hidden Objects */ +nav.horizontal, aside, footer { + display: none; +} + + +/* Page Box Styles */ +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + +/* Header Styles */ + +body > header { + text-align: right; +} + +body > header > img { + display: block; + width: 100%; +} + + +/* 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; +} + +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: 0.25in auto; + width: 65%; +} + + +/* 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; +} diff --git a/tutorial/tf_print_txt.css b/tutorial/tf_print_txt.css deleted file mode 100644 index 5fafb6d..0000000 --- a/tutorial/tf_print_txt.css +++ /dev/null @@ -1,68 +0,0 @@ -@charset "utf-8"; -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Tutorial Case - - Author: - Date: - - Filename: tf_print.css - - This file contains the printer styles used with the Trusted - Friends page on articles of interest - -*/ - - - -/* Hidden Objects */ - - - -/* Page Box Styles */ - - - -/* Header Styles */ - -body > header { - text-align: right; -} - -body > header > img { - display: block; - width: 100%; -} - - -/* Typography Styles */ - - - -/* List Styles */ - - - -/* Image Styles */ - - - - -/* Hypertext Styles */ - - - - - -/* Page Break Styles */ - - - - - - - - - - diff --git a/tutorial/tf_styles1_txt.css b/tutorial/tf_styles1.css similarity index 60% rename from tutorial/tf_styles1_txt.css rename to tutorial/tf_styles1.css index 7920c8c..abd0d64 100644 --- a/tutorial/tf_styles1_txt.css +++ b/tutorial/tf_styles1.css @@ -4,12 +4,12 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - - Author: - Date: - + + Author: Joshua Bentley, Austin A. + Date: 11/6/18 + Filename: tf_styles1.css - + This file contains the layout styles used in the Trusted Friends home page. @@ -31,7 +31,7 @@ html { } body { - background: rgb(134, 176, 232); + background: rgb(134, 176, 232); box-shadow: rgb(51, 51, 51) 5px 0px 15px, rgb(51, 51, 51) -5px 0px 15px; margin: 0px auto; @@ -44,7 +44,7 @@ body { /* Body Header Styles */ body header { - background: rgb(134,176,232); + background: rgb(134,176,232); } body header img { @@ -144,10 +144,83 @@ 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 to 480px + =============================== +*/ +@media only screen and (max-width: 480px) { + nav.horizontal a { + font-size: 1.5em; + line-height: 2.2em; + } -/* New Styles Added Below */ + aside { + display: none; + } +} + +/* =============================== + 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; + } + +} + +/* =============================== + Mobile 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%; + } + +}