diff --git a/README.md b/README.md index 6db9d74..fce4dd3 100644 --- a/README.md +++ b/README.md @@ -1 +1,37 @@ -# html05 \ No newline at end of file +## Welcome to GitHub Pages + +You can use the [editor on GitHub](https://github.com/LaneDoyle/html05/edit/master/README.md) to maintain and preview the content for your website in Markdown files. + +Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files. + +### Markdown + +Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for + +```markdown +Syntax highlighted code block + +# Header 1 +## Header 2 +### Header 3 + +- Bulleted +- List + +1. Numbered +2. List + +**Bold** and _Italic_ and `Code` text + +[Link](url) and ![Image](src) +``` + +For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/). + +### Jekyll Themes + +Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/LaneDoyle/html05/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file. + +### Support or Contact + +Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out. diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..c419263 --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-cayman \ No newline at end of file diff --git a/case1/gp_cover.html b/case1/gp_cover.html new file mode 100644 index 0000000..a813335 --- /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..19cb0e8 --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,110 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Dylan B and Lane D + 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-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#sheet { + -webkit-flex: 3 1 301px; + flex: 3 1 301px; +} + +article { + -webkit-flex: 1 3 180px; + flex: 1 3 180px; +} + +/* ============================================ + Mobile Devices: 0 - 480 pixels + ============================================ +*/ + +@media only screen and (max-width: 480px) { + + img.panel { + width: 100%; + } + + nav.horizontal { + -webkit-order: 99; + order: 99; + } + + body > footer { + -webkit-order: 100; + order: 100; + } + +} + + +/* =================================================== + Tablet and Desktop Devices: Greater than 480 pixels + =================================================== +*/ + +@media only screen and (min-width: 481px) { + + nav.horizontal ul{ + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + 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_page1.html b/case1/gp_page1.html new file mode 100644 index 0000000..8069e39 --- /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..21f87de --- /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..31fc0df --- /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..f9e56ae --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,50 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Dylan B and Lane D + 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; +} + +section#sheet { + width: 6in; + margin-top: 0in; + margin-bottom: 0in; + margin-left: auto; + margin-right: auto; +} + +/* Comic Book Sheet Styles */ + +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..9fe2f22 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,137 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Dylan B and Lane D + 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 url("wc_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; +} + +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; +} + +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-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 li { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + +} diff --git a/case3/cw_designs.css b/case3/cw_designs.css index 6da6dfb..435cfce 100644 --- a/case3/cw_designs.css +++ b/case3/cw_designs.css @@ -4,7 +4,7 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Case Problem 3 - + Filename: cw_designs.css This file design style used by all screen sizes for diff --git a/case3/cw_home.html b/case3/cw_home.html new file mode 100644 index 0000000..b1c74ec --- /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_styles.css b/case3/cw_styles.css new file mode 100644 index 0000000..6035175 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,184 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: Dylan B and Lane D + 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 url("cw_designs.css"); + + +/* =============================== + General Styles for All Devices + =============================== +*/ + +nav#bottom ul { + 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 li { + -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-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; + } + + nav#top ul li:nth-of-type(2) { + background: url("cw_image02.png") center / 100% no-repeat; + } + + nav#top ul li:nth-of-type(3) { + background: url("cw_image03.png") center / 100% no-repeat; + } + + nav#top ul li:nth-of-type(4) { + background: url("cw_image04.png") center / 100% no-repeat; + } + + nav#top ul li:nth-of-type(5) { + background: url("cw_image05.png") center / 100% no-repeat; + } + + nav#top ul li:nth-of-type(6) { + background: url("cw_image06.png") center / 100% no-repeat; + } + + p#links { + 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: space-around; + } + + p#links a { + color: white; + background-color: rgb(220, 27, 27); + border-radius: 20px; + padding: 10px; + text-decoration: none; + } + +} + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + + -webkit-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-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + background-color: rgb(51, 51, 51); + height: 50px; + justify-content: center; + align-items: center; + } + + nav#top li { + -webkit-flex-basis: 80px; + flex-basis: 80px; + } + + p#links { + display: none; + } + +} diff --git a/case4/jb_home.html b/case4/jb_home.html new file mode 100644 index 0000000..91f715b --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,123 @@ + + + + + + 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.

+
+
+

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..38d8059 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,322 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Dylan B and Lane D + Date: 11/8/18 + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ + +/* ============================================= + Base styles used by All Screens + ============================================= +*/ + + +/* HTML and Body Styles */ + +html { + background: url("jb_back3.png"); + background-repeat: round; + background-size: auto auto; + font-family: Verdana, Geneva, sans-serif; + font-size: 12px; +} + +body { + display: block; + background: white; + max-width: 1024px; + margin: 0px auto; + box-shadow: rgb(51, 51, 51) 10px 10px 25px, rgb(51, 51, 51) -10px 10px 25px; +} + +body > header { + background-color: rgb(51, 51, 51); + height: auto; +} + +p { + font-size: 1.2em; + line-height: 1.4em; +} + +nav#top { + background-color: rgb(51, 51, 51); + height: 10px; +} + +nav#top ul li { + list-style-type: none; +} + +nav#top ul li a { + color: rgb(0, 179, 0); + padding-left: 10px; + padding-right: 10px; + text-shadow: 0px 0px 2px black, 0px 0px 15px white; + text-decoration: none; + font-size: 2em; +} + +section { + background-color: rgb(171, 171, 171); + padding-left: 15px; + padding-bottom: 15px; +} + +section h1 { + font-size: 2.5em; + color: rgb(111, 111, 111); + text-shadow: white -2px 0px 1px, white -5px 0px 30px; + padding: 30px 15px 10px 20px; + text-align: left; +} + +section p { + margin-bottom: 0px; +} + +section::after { + content: ""; + display: table; + clear: both; +} + +article { + font-size: 1.3em; + padding-left: 15px; + padding-right: 15px; +} + +/* Aside Styles */ + +aside#centerNavigation { + background-color: rgb(211, 211, 211); + padding-left: 15px; + padding-bottom: 20px; +} + +aside#centerNavigation h1 { + font-size: 2em; + font-weight: normal; + letter-spacing: 0.4em; + padding-left: auto; + padding-top: 10px; +} + +aside#centerNavigation ul li a { + font-size: 1.3em; + line-height: 1.3em; + color: green; + text-decoration: none; +} + +/* Footer */ + +footer { + width: 100%; +} + +footer { + color: rgb(211, 211, 211); + text-align: center; + background-color: black; + margin: 0px; + padding: 10px 0px; +} + +footer a { + color: white; + text-decoration: none; +} + +/* =========== + Base Styles + =========== +*/ + +a#navicon { + display: none; +} + +/* =============================== + 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); + } + + body > footer { + -webkit-order: 100; + order: 100; + } + + header img#logo { + width: 100%; + } + + section { + display: none; + } + + aside h1 { + display: block; + color: black; + } + + nav#top { + height: auto; + width: 100%; + } + + 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 a { + color: rgb(0, 179, 0); + text-shadow: 0px 0px 2px black, 0px 0px 15px white; + text-decoration: none; + display: block; + font-size: 1.0em; + } + + nav#top ul li { + font-size: 2.2em; + -webkit-flex: 1 1 130px; + flex: 1 1 130px; + } + + a#navicon { + display: block; + } + + nav#top ul { + display: none; + } + + nav#top a#navicon:hover+ul, nav#top ul:hover { + display: block; + } + + p { + 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: space-around; + } + + p a { + color: white; + background-color: rgb(220, 27, 27); + border-radius: 50px; + height: 20px; + padding: 10px; + text-decoration: none; + } + + article { + padding-top: 5px; + clear: both; + } + + footer a { + display: block; + color: black; + font-size: 1.em; + border: 1px solid rgb(102, 179, 255); + border-radius: 50px; + padding: 5px 5px 5px 5px; + background-color: rgb(102, 179, 255); + } + +} + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + display: block; + width: 100%; + position: relative; + } + + article { + -webkit-flex: 2 1 400px; + flex: 2 1 400px; + } + + aside { + -webkit-flex: 1 2 200px; + flex: 1 2 200px; + } + + nav#top { + } + + nav#top ul { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + + -webkit-flex-flow: row nowrap; + flex-flow: row nowrap; + background-color: rgb(51, 51, 51); + justify-content: center; + align-items: center; + } + + nav#top li { + -webkit-flex-basis: 80px; + flex-basis: 80px; + } + + p#links { + display: none; + } + +} diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..0affe09 --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,100 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Dylan B and Lane D + 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, body > 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 { + margin-bottom: 0.2in; +} + +arcticle 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; +} + +ol, ul, img { + page-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..f7d3b99 --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,133 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Dylan B and Lane D + 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-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +section#left { + -webkit-flex: 1 8 130px; + flex: 1 8 130px; +} + +section#right { + -webkit-flex: 8 1 351px; + flex: 8 1 351px; +} + +section.tips { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + 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-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) { + + nav.vertical ul { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + height: 240px; + } + + section#left { + -webkit-order: 99; + order: 99; + } + + footer { + -webkit-order: 100; + order: 100; + } + + a#navicon { + display: block; + } + + nav.horizontal ul { + display: none; + } + + a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; + } + +} + +/* ============================================ + Tablet and Desktop Devices: 481px or more + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + nav.horizontal ul { + height: 160px; + } + +} diff --git a/review/tf_tips.html b/review/tf_tips.html new file mode 100644 index 0000000..781b4c5 --- /dev/null +++ b/review/tf_tips.html @@ -0,0 +1,164 @@ + + + + + + Trusted Friends: Education Tips + + + + + + + + +
+ + +

Parenting Tips

+
+ +
+

Archive

+ +
+ + + + + + diff --git a/tutorial/tf_articles.html b/tutorial/tf_articles.html new file mode 100644 index 0000000..701ea7e --- /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:

+ +

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.

+
+
+ + + + diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..7ca160f --- /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: Dylan B and Lane D + 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-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..fc67c88 --- /dev/null +++ b/tutorial/tf_home.html @@ -0,0 +1,97 @@ + + + + + + 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. +

+
+ + +
+ + + + diff --git a/tutorial/tf_navicon.css b/tutorial/tf_navicon.css new file mode 100644 index 0000000..bc882d2 --- /dev/null +++ b/tutorial/tf_navicon.css @@ -0,0 +1,47 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Dylan B and Lane D + 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.html b/tutorial/tf_prek.html new file mode 100644 index 0000000..3e626d6 --- /dev/null +++ b/tutorial/tf_prek.html @@ -0,0 +1,128 @@ + + + + + + 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.

+
+
+ +
+ + + + diff --git a/tutorial/tf_print.css b/tutorial/tf_print.css new file mode 100644 index 0000000..ae3242b --- /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: Dylan B and Lane D + 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_styles1.css b/tutorial/tf_styles1.css new file mode 100644 index 0000000..cb39b6e --- /dev/null +++ b/tutorial/tf_styles1.css @@ -0,0 +1,233 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Dylan B and Lane D + Date: 11/6/18 + + 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 to 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 or greater + ================================= +*/ + +@media only screen and (min-width: 481px) { + + ul.mainmenu > li { + float: left; + position: relative; + width: 20%; + } + + ul.submenu { + box-shadow: rgb(51, 51, 51) 5px 5px 15px; + position: absolute; + width: 200%; + } + +} + +/* ================================= + Desktop styles: 769px or 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%; + } + +}