diff --git a/case1/gp_cover.html b/case1/gp_cover.html new file mode 100644 index 0000000..ede9c6c --- /dev/null +++ b/case1/gp_cover.html @@ -0,0 +1,70 @@ + + + + + + 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..18af498 --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,97 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author:Cameron Odom & Ruiz + 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. + +*/ + + +/* Import Basic Design Styles Used on All Screens */ + +@import url("gp_designs.css"); + +/* Flex Layout Styles */ +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#sheet { + -webkit-flex: 3 1 301px; + flex: 3 1 301px; +} + +article{ + -webkit-flex: 1 3 180px; + flex: 1 3 180px; +} + + + +/* ============================================ + Mobile Devices: 0 - 480 pixels + ============================================ +*/ + @media only screen and (max-width: 480px){ + img.panel { + width: 100%; + } + nav.horizontal { + -webkit-order:99; + order: 99; + } + + body > footer{ + -webkit-order: 100; + order: 100; + } + } + + + + +/* =================================================== + Tablet and Desktop Devices: Greater than 480 pixels + =================================================== +*/ + @media only screen and (min-width: 481px){ + nav.horrizontal ul{ + -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_page1.html b/case1/gp_page1.html new file mode 100644 index 0000000..b855360 --- /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..952ee00 --- /dev/null +++ b/case1/gp_page2.html @@ -0,0 +1,83 @@ + + + + + + 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..69e35a6 --- /dev/null +++ b/case1/gp_page3.html @@ -0,0 +1,80 @@ + + + + + + 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..59a74a4 --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,51 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author:Cameron Odom & Ruiz + 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.size1{ + width: 5in; +} +img.size2{ + width: 3in; +} + +img.size3{ + width:2in; +} + +img.size4{ + width:1.5in; +} diff --git a/case2/wc_styles.css b/case2/wc_styles.css new file mode 100644 index 0000000..d54f353 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,126 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: E. Ruiz / Cameron Odem + Date: November 7 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 "wc_designs.css" only screen; + + +/* Flex Layout Styles */ +body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +nav#hole_list { + -webkit-flex: 1 3 140px; + flex: 1 3 140px; +} + +article { + -webkit-flex: 3 1 341px; + flex: 3 1 341px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +article#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-box; + 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; +} +/* ============================= + Mobile Styles: 0 - 480 pixels + ============================= +*/ + +@media only screen and (max-width: 480px) { + nav#hole_list { + -webkit-order: 99; + order: 99; + } + footer { + -webkit-order: 100; + order: 100; + } + nav.horizontal ul { + display: none; + } + a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; + } + aside { + display: none; + } +} + + + +/* ================================================= + Tablet and Desktop Styles: 481 pixels and greater + ================================================= +*/ +@media only screen and (min-width: 481px) { + a#navicon { + display: none; + } + + nav.horizontal ul { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + } + + nav.horizontal ul li { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } +} diff --git a/case3/cw_home.html b/case3/cw_home.html new file mode 100644 index 0000000..020a0e0 --- /dev/null +++ b/case3/cw_home.html @@ -0,0 +1,125 @@ + + + + + + Cauli-Wood Gallery + + + + + + + +
+ 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, + the jazz is cool, and the scones are uniformly delicious.

+

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 + loyal patrons.

+

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 + 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 + & 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 + surprising and memorable ways. Please join Aza on April 7 for + a reception celebrating her life and art.

+
+
+ + + + diff --git a/case3/cw_home_txt.html b/case3/cw_home_txt.html index 3d3f80e..9032d3f 100644 --- a/case3/cw_home_txt.html +++ b/case3/cw_home_txt.html @@ -5,14 +5,14 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 3 - + Cauli-Wood Gallery home page - Author: - Date: + Author: E. Ruiz / Cameron Odem + Date: Filename: cw_home.html --> - + Cauli-Wood Gallery @@ -33,33 +33,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 +69,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..068fbca --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,143 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: E. Ruiz / Cameron Odom + Date: November 7 2018 + + 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-box; + 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: 1 3 150px; + max-width: 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-box; + 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") center / 100% no-repeat content-box; + } + nav#top ul li:nth-of-type(2) { + background: url("cw_image02.png") center / 100% no-repeat content-box; + } + nav#top ul li:nth-of-type(3) { + background: url("cw_image03.png") center / 100% no-repeat content-box; + } + nav#top ul li:nth-of-type(4) { + background: url("cw_image04.png") center / 100% no-repeat content-box; + } + nav#top ul li:nth-of-type(5) { + background: url("cw_image05.png") center / 100% no-repeat content-box; + } + nav#top ul li:nth-of-type(6) { + background: url("cw_image06.png") center / 100% no-repeat content-box; + } + p#links{ + 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; + } +} + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ +@media only screen and (min-width: 481px){ + + body{ + 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 ul { + display:-webkit-flex; + display:flex; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content:center; + align-items: center; + } + nav#top ul li{ + max-width:80px; + -webkit-flex: 1 1 80px; + flex: 1 1 80px; + } + p#links{ + display:none; + } +} diff --git a/case4/jb_home.html b/case4/jb_home.html new file mode 100644 index 0000000..3823428 --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,148 @@ + + + + + + Jersey Buoys Surfing School + + + + + + +
+ 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.

+
+
+ +
+
+

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.

+
+
+ +
+

Surfer Slang

+
    +
  • + +

    barney:
    A new and inexperience surfer

    + +
  • +
  • + +

    boost:
    To take off from a wave into an aerial

    + +
  • +
  • + +

    cutback:
    To change direction when streaking ahead of the curl

    + +
  • +
  • + +

    Gandolf:
    An experienced wise older surfer

    + +
  • +
  • + +

    green room:
    The inside of a tube

    + +
  • +
  • + +

    grommet:
    A very young surfer, a child

    + +
  • +
  • + +

    gurfer:
    A girl surfer

    + +
  • +
  • + +

    hobble-bobble:
    An aerial launch while flapping your arms like a bird

    + +
  • +
  • + +

    quiver:
    A collection of surfboards

    + +
  • +
+
+ + + + diff --git a/case4/jb_styles.css b/case4/jb_styles.css new file mode 100644 index 0000000..51565b1 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,247 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: E. Ruiz / Cameron Odom + Date: November 12 2018 + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ +/* Desktop Styles */ +@media only screen and (min-width: 481px){ + html{ + background: linear-gradient(#5896CE, white); + height: 100% + } + body{ + background-color:white; + margin-left: 10%; + margin-right: 10%; + height:100%; + margin-bottom:0px; + margin-top:0px; + padding-left: 1%; + padding-right:1% + + } + /* Flex Styles */ + div#flex { + clear: both; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + /* Header Nav Styles */ + header { + margin-bottom: 60px; + width:100%; + } + header nav ul li { + display: inline; + float: left; + text-align: center; + margin-left: auto; + margin-right: auto; + width: 16.66%; + background-color: #6CAA41; + font-family: 'Gloria Hallelujah', cursive; + } + header nav ul li a { + text-decoration: none; + color: white; + } + + a#navicon { + display: none; + } + + /* Vertical Nav Styles */ + nav#vertical { + width: 20%; + background-color: #AEF5C0; + border-radius: 10px; + padding-right: 2%; + padding-left: 2%; + height: 80%; + } + + nav#vertical ul li { + list-style-type: none; + line-height: 1em; + } + + nav#vertical ul li a { + text-decoration: none; + } + + nav#vertical ul li h2 { + line-height: 10px; + font-family: 'Gloria Hallelujah', cursive; + } + + /* Section Styles */ + section { + background-color: #5896ce; + margin-left: 20px; + margin-right:20px; + padding-left: 20px; + padding-right:20px; + border: solid 4px rgb(72, 121, 165); + border-radius: 20px 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + + } + section p { + font-size: 1.15em; + } + /* Article Styles */ + article { + width: 35%; + padding-left: 10px; + height: 100%; + } + + h2#slang { + font-family: 'Gloria Hallelujah', cursive; + } + + article dt { + font-weight: bold; + text-decoration: underline; + } + ul li { + list-style-type: none; + } + ul#surfer li{ + max-height: 200px; + } + + ul#surfer { + display: flex; + width: 290%; + text-align: center; + margin-left: -60px; + } + + dl { + display: block; + margin-left: auto; + margin-right: auto; + } + + ul li { + width: 100%; + } + + dt { + + } + + dd { + + } + + /* Footer Styles */ + footer { + clear: both; + text-align: center; + position:absolute; + right: 0; + bottom: 0; + left:0; + padding: 1em; + } + + footer p { + display: inline; + } + #imlazy{ + display:none; + } +} + + + +/* Mobile Styles */ +@media only screen and (max-width: 480px) { + body{ + display:flex; + flex-flow: column wrap; + } + article { + display: none; + } + + #flex{ + disply:flex; + order: 50; + } + + #imlazy { + display:flex; + order: 1; + } + + footer p { + display: inline; + } + footer { + background-color: rgb(226, 200, 122); + text-align:center; + order: 100; + } + + a#navicon { + display: block; + } + + nav.horizontal ul { + display: none; + } + + a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; + } + + nav#vertical ul { + float: left; + width: 33%; + } + ul{ + list-style-type:none; + } + nav#vertical{ + display: flex; + } + #flex section{ + display:none; + } + footer a{ + font-size: 1.2em; + } + + section { + display:flex; + flex-flow: column wrap; + } + + div { + display: flex; + } +} diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..9ed927a --- /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:Cameron Odom & Ruiz + Date:November 6, 2018 + + 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 */ +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 { + break-after: always; +} + +ol, ul, img { + break-inside: avoid; +} + +p { + widows: 3; + orphans: 3; +} diff --git a/review/tf_styles4.css b/review/tf_styles4.css new file mode 100644 index 0000000..a676cc1 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,126 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author:Cameron Odom & Ruiz + Date:November 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-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + section#left{ + -webkit-flex: 1 8 138px; + flex: 1 8 138px; + } + + section#right { + -webkit-flex: 8 1 351px; + flex: 8 1 351px; + } + + section.tips { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } + + article { + -webkit-flex: 2 1 351px; + flex:2 1 351px; + } + + aside { + -webkit-flex: 1 2 250px; + flex: 1 2 250px; + } + + nav.horizontal ul{ + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + 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){ + + ul{ + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + felx-flow: column wrap; + height: 240px; + } + + section.left{ + -webkit-order:99; + order: 99; + } + footer { + -webkit-order: 100; + order:100; + } + a#navicon { + display: block; + } + + nav.horizontal ul { + display: none; + } + + a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; + } +} + + + + + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + nav.horizontal ul { + height: 160px; + } +} diff --git a/review/tf_styles4_txt.css b/review/tf_styles4_txt.css index 4aa8789..d73b7f4 100644 --- a/review/tf_styles4_txt.css +++ b/review/tf_styles4_txt.css @@ -3,10 +3,10 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Review Assignment - - Author: - Date: - + + Author:Cameron Odom & Ruiz + Date:November 6, 2018 + Filename: tf_styles4.css This file contains the screen styles used with the Trusted @@ -29,18 +29,15 @@ /* =============================== - Mobile Devices: 0 to 480px + Mobile Devices: 0 to 480px =============================== */ - + /* ============================================ - Tablet and Desktop Devices: 481px or more + Tablet and Desktop Devices: 481px or more ============================================ */ - - - diff --git a/review/tf_tips.html b/review/tf_tips.html new file mode 100644 index 0000000..9e1bf58 --- /dev/null +++ b/review/tf_tips.html @@ -0,0 +1,164 @@ + + + + + + Trusted Friends: Education Tips + + + + + + + + +
+ + +

Parenting Tips

+
+ +
+

Archive

+ +
+ + + +
+ Trusted Friends • 3450 Regency Lane, Carmel IN +
+ + diff --git a/tutorial/tf_articles.html b/tutorial/tf_articles.html new file mode 100644 index 0000000..36c9292 --- /dev/null +++ b/tutorial/tf_articles.html @@ -0,0 +1,151 @@ + + + + + + Trusted Friends: Articles of Interest + + + + + + + + +
+ Trusted Friends Daycare + +
+ + + +
+
+

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 + 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 + they are meeting a higher standard that demonstrates its expertise in:

+
    +
  • Classroom Management
  • +
  • Curriculum Development
  • +
  • Health and Safety
  • +
  • Parental Support
  • +
  • Community Involvement
  • +
  • Teacher Certification
  • +
  • Administrative Oversight
  • +
  • Financial Statements
  • +
+

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 + experience.

+

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 + process of self-evaluation, discussion, and parental reviews.

+

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 + respected national early childhood accreditation agencies:

+ +

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 + 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 + 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 + 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 + 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..7fb8168 --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,107 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + 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-box; + display: -moz-box; + display: -ms-flexbox; + 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-box; + display: -moz-box; + display: -ms-flexbox; + 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-box; + display: -moz-box; + display: -ms-flexbox; + 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_home.html b/tutorial/tf_home.html new file mode 100644 index 0000000..af37c25 --- /dev/null +++ b/tutorial/tf_home.html @@ -0,0 +1,101 @@ + + + + + + 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 + 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 + accommodate your busy schedule with transportation to and from our school. +

+

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..5d40899 --- /dev/null +++ b/tutorial/tf_navicon.css @@ -0,0 +1,46 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + 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.html b/tutorial/tf_prek.html new file mode 100644 index 0000000..db52d69 --- /dev/null +++ b/tutorial/tf_prek.html @@ -0,0 +1,132 @@ + + + + + + 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 + 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 + 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 + 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, + 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 + 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, + 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 + 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 + others through supportive sharing times.

+
+
+ +
+ +
+ Trusted Friends • 3450 Regency Lane, Carmel IN +
+ + diff --git a/tutorial/tf_prek_txt.html b/tutorial/tf_prek_txt.html index 3498f36..72a18b7 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek_txt.html @@ -5,23 +5,26 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - + Pre-K Classes offered by Trusted Friends - Author: - Date: - + Author: E. Ruiz / Cameron + Date: November 6 2018 + 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..b301762 --- /dev/null +++ b/tutorial/tf_print.css @@ -0,0 +1,106 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + 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: dics; + margin-left: 0.5in; + } + +/* Image Styles */ + + article img{ + order: 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_styles1.css b/tutorial/tf_styles1.css new file mode 100644 index 0000000..16ec637 --- /dev/null +++ b/tutorial/tf_styles1.css @@ -0,0 +1,220 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + Filename: tf_styles1.css + + This file contains the layout styles used in the Trusted Friends + home page. + +*/ + +/* =========== + Base Styles + =========== +*/ + + +/* HTML and Body Styles */ + +html { + background: url(tf_back1.png) center center / cover no-repeat fixed; + height: 100%; + font-family: Verdana, Geneva, sans-serif; + font-size: 12px; +} + +body { + background: rgb(134, 176, 232); + box-shadow: rgb(51, 51, 51) 5px 0px 15px, + rgb(51, 51, 51) -5px 0px 15px; + margin: 0px auto; + min-height: 100%; + min-width: 320px; + max-width: 1024px; + width: 100%; +} + +/* Body Header Styles */ + +body header { + background: rgb(134,176,232); +} + +body header img { + display: block; + width: 100%; +} + +/* Horizonal Navigation Styles */ + +nav.horizontal { + background-color: rgb(117, 140, 72); + min-height: 2em; +} + +nav.horizontal li { + color: rgb(31, 73, 125); + display: block; + line-height: 2em; + text-transform: uppercase; +} + +nav.horizontal a { + display: block; + font-size: 1em; +} + +nav.horizontal a:visited, nav.horizontal a:link { + color: rgb(31, 73, 125); +} + +nav.horizontal a:hover, nav.horizontal a:active { + background-color: rgb(31, 73, 125); + color: white; +} + +/* Main Menu Styles */ + +ul.mainmenu { + display: block; +} + +ul.mainmenu > li { + text-indent: 15px; +} + +ul.mainmenu > li:first-of-type a { + color: white; + background-color: rgb(31, 73, 125); +} + +/* Submenu Styles */ + +ul.submenu { + width: 100%; + background-color: rgb(181, 204, 136); +} + + +/* Section Styles */ + +section { + background-color: rgb(207, 222, 172); + clear: both; +} + +section::after { + content: ""; + display: table; + clear: both; +} + +section img { + display: block; + width: 100%; +} + +section p { + line-height: 1.4em; + padding: 10px; + font-size: 1.2em; +} + +/* Aside Styles */ + +aside { + display: block; + background-color: rgb(181, 204, 136); +} + +/* Footer Styles */ + +body > footer { + background-color: rgb(117, 140, 72); + font-size: 0.9em; + text-align: center; + padding: 10px 0px; +} + +/* Pulldown Menu Styles */ + +ul.submenu { + display: none; +} + +a.submenuTitle:hover+ul.submenu, ul.submenu:hover { + display: block; +} + + + +/* New Styles Added Below */ + +/* Mobile Styles: 0px - 480px */ + +@media only screen and (max-width: 480px) { + nav.horizontal a { + font-size: 1.5em; + line-height: 2.2em; + } + + aside { + display: none; + } +} + +/* Tablet Styles: 481px and Greater */ + +@media only screen and (min-width: 481px) { + ul.mainmenu > li { + float: left; + width: 20%; + position: relative; + } + ul.submenu { + width: 200%; + box-shadow: rgb(51, 51, 51) 5px 5px 15px; + position: absolute; + } + +} + +/* Desktop Styles: 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%; + } +}