diff --git a/case1/gp_cover_txt.html b/case1/gp_cover.html similarity index 88% rename from case1/gp_cover_txt.html rename to case1/gp_cover.html index 2ced369..995de22 100644 --- a/case1/gp_cover_txt.html +++ b/case1/gp_cover.html @@ -7,17 +7,19 @@ Case Problem 1 Ghost of the Deep Cover Page - Author: - Date: + Author: Nick and Morgan + Date: 11/12/18 Filename: gp_cover.html --> Ghost of the Deep Cover Page - + - + + +
Golden Pulp diff --git a/case1/gp_layout.css b/case1/gp_layout.css new file mode 100644 index 0000000..03898fb --- /dev/null +++ b/case1/gp_layout.css @@ -0,0 +1,94 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: + Date: + + Filename: gp_layout.css + + This file contains the layout styles and media + queries used with sample pages from the Golden + Pulps website. + +*/ + + +/* Import Basic Design Styles Used on All Screens */ + +@import url("gp_designs.css"); + +/* Flex Layout Styles */ + +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: 481px){ + 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: 480px) { + nav.horizontal > ul { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow:row nowarp; + 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: 40%; + } +} diff --git a/case1/gp_layout_txt.css b/case1/gp_layout_txt.css deleted file mode 100644 index 00370c1..0000000 --- a/case1/gp_layout_txt.css +++ /dev/null @@ -1,42 +0,0 @@ -@charset "utf-8"; - -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 1 - - Author: - Date: - - Filename: gp_layout.css - - This file contains the layout styles and media - queries used with sample pages from the Golden - Pulps website. - -*/ - - -/* Import Basic Design Styles Used on All Screens */ - -@import url("gp_designs.css"); - -/* Flex Layout Styles */ - - - - - -/* ============================================ - Mobile Devices: 0 - 480 pixels - ============================================ -*/ - - - - -/* =================================================== - Tablet and Desktop Devices: Greater than 480 pixels - =================================================== -*/ - diff --git a/case1/gp_page1_txt.html b/case1/gp_page1.html similarity index 87% rename from case1/gp_page1_txt.html rename to case1/gp_page1.html index 846288b..84e5a03 100644 --- a/case1/gp_page1_txt.html +++ b/case1/gp_page1.html @@ -7,15 +7,19 @@ Case Problem 1 Ghost of the Deep Page 1 - Author: - Date: + Author: Nick and Morgan + Date:11/12/18 Filename: gp_page1.html --> Ghost of the Deep Page 1 - + + + + +
diff --git a/case1/gp_page2_txt.html b/case1/gp_page2.html similarity index 90% rename from case1/gp_page2_txt.html rename to case1/gp_page2.html index fc80c51..a491bfc 100644 --- a/case1/gp_page2_txt.html +++ b/case1/gp_page2.html @@ -7,15 +7,19 @@ Case Problem 1 Ghost of the Deep Page 2 - Author: - Date: + Author: Nick and Morgan + Date: 11/12/18 Filename: gp_page2.html --> Ghost of the Deep Page 2 - + + + + +
diff --git a/case1/gp_page3_txt.html b/case1/gp_page3.html similarity index 90% rename from case1/gp_page3_txt.html rename to case1/gp_page3.html index 06f2365..3c498bf 100644 --- a/case1/gp_page3_txt.html +++ b/case1/gp_page3.html @@ -7,15 +7,19 @@ Case Problem 1 Ghost of the Deep Page 3 - Author: - Date: + Author: Nick and Morgan + Date:11/12/18 Filename: gp_page3.html --> Ghost of the Deep Page 3 - + + + + +
diff --git a/case1/gp_print.css b/case1/gp_print.css new file mode 100644 index 0000000..ba6b29b --- /dev/null +++ b/case1/gp_print.css @@ -0,0 +1,46 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 1 + + Author: Morgan and Nick + Date: 11-13-18 + + Filename: gp_print.css + + This file contains the printer styles used with the sample + comic book pages from Golden Pulps. + +*/ +@page { + size: 8.5in 11in; + margin: 0.5in; +} + + +/* 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; +} \ No newline at end of file diff --git a/case1/gp_print_txt.css b/case1/gp_print_txt.css deleted file mode 100644 index f8fc0d4..0000000 --- a/case1/gp_print_txt.css +++ /dev/null @@ -1,39 +0,0 @@ -@charset "utf-8"; -/* - New Perspectives on HTML5 and CSS3, 7th Edition - Tutorial 5 - Case Problem 1 - - Author: - Date: - - Filename: gp_print.css - - This file contains the printer styles used with the sample - comic book pages from Golden Pulps. - -*/ - - - -/* Hidden Objects */ - - - - - - - -/* Comic Book Sheet Styles */ - - - - - - - - - - - - diff --git a/case2/wc_styles.css b/case2/wc_styles.css new file mode 100644 index 0000000..8ca68a8 --- /dev/null +++ b/case2/wc_styles.css @@ -0,0 +1,105 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 2 + + Author: Morgan and Nick + Date: 11-13-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 { + display: -webkit-flex; + display: flex; + -webkit-flex: 3 1 341px; + flex: 3 1 341px; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +section#stats { + -webkit-flex: 1 4 120px; + flex: 1 4 120px; +} +section#summary { + -webkit-flex: 4 1 361px; + flex: 4 1 361px; +} +aside { + display: -webkit-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: 481px) { + 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: 480px) { + a#navicon { + display: none; + } + nav.horizontal ul { + 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; + } +} \ No newline at end of file diff --git a/case3/cw_home.html b/case3/cw_home.html new file mode 100644 index 0000000..bf23c53 --- /dev/null +++ b/case3/cw_home.html @@ -0,0 +1,124 @@ + + + + + + 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..0e09940 --- /dev/null +++ b/case3/cw_styles.css @@ -0,0 +1,161 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 3 + + Author: Morgan and Nick + Date: 11-14-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; + -webkit-justify-content: center; + justify-content: center; + -webkit-flex: 0 1 150px; + flex: 0 1 150px; +} + +/* =============================== + Mobile Styles up to 480 pixels + =============================== +*/ +@media only screen and (max-width: 481px){ + 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-image: url(cw_image01.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + nav#top ul li:nth-of-type(2) { + background-image: url(cw_image02.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + nav#top ul li:nth-of-type(3) { + background-image: url(cw_image03.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + nav#top ul li:nth-of-type(4) { + background-image :url(cw_image04.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + nav#top ul li:nth-of-type(5) { + background-image :url(cw_image05.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + nav#top ul li:nth-of-type(6) { + background-image: url(cw_image06.png); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + } + 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 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: 480px) { + 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 ul li { + max-width: 80px; + } + p#links { + display: none; + } +} diff --git a/case4/jb_home.html b/case4/jb_home.html new file mode 100644 index 0000000..6104d51 --- /dev/null +++ b/case4/jb_home.html @@ -0,0 +1,116 @@ + + + + + + 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 inexperienced 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..5ab3004 --- /dev/null +++ b/case4/jb_styles.css @@ -0,0 +1,55 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Case Problem 4 + + Author: Morgan and Nick + Date: 11-16-18 + + Filename: jb_styles.css + + This file contains the screen styles used with the + Jersey Buoys home page + +*/ +/* General Styles */ +a#navicon { + display: none; +} +footer { + background-color: rgb( 151, 151, 151); +} + +/* Mobile Styles */ +@media only screen and (max-width: 481px) { + a#navicon { + display: block; + } + nav ul { + display: none; + } + a#navicon:hover+ul, nav ul:hover { + display: block; + } + li#classes ul, li#camps ul, li#store ul { + display: block; + } + ul#slang { + display: none; + } +} + +/* Desktop Styles */ +@media only screen and (min-width: 480px) { + nav { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; + } +} \ No newline at end of file diff --git a/review/tf_print2.css b/review/tf_print2.css new file mode 100644 index 0000000..88f3054 --- /dev/null +++ b/review/tf_print2.css @@ -0,0 +1,83 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Morgan and Nick + Date: 11-8-18 + + Filename: tf_print2.css + + This file contains the printer styles used with the Trusted + Friends Parents Tips page + +*/ + + + +/* Hidden Objects */ +body > header > h1, nav, section#left, body footer { + display: none; +} + +/* Page Box Styles */ +@page { + size: 8.5in 11in; + margin: 0.5; +} + +/* Header Styles */ +body > header > img { + display: block; + width: 100%; +} + +/* Typography Styles */ +article > header { + margin-bottom: 0.2in; +} +article > h1 { + font-size: 24pt; + line-height: 26pt; +} +aside { + background-color: rgb(211, 211, 211); + margin-top: 0.3in; +} +aside > h1 { + font-size: 18pt; + line-height: 20pt; +} +aside > img { + width: 0.8in; +} +p { + font-size: 12pt; + margin-top: 0.1in; + margin-bottom: 0.1in; +} + +/* Hypertext Styles */ +a { + color: black; + text-decoration: underline; +} +a::after { + content: " "attr(href); + font-weight: bold; + word-wrap: break-word; +} + +/* Page Break Styles */ +aside { + page-break-after: always; +} +img, ol, ul { + page-break-inside: never; +} +p { + widows: 3; + orphans: 3; +} \ No newline at end of file diff --git a/review/tf_styles4.css b/review/tf_styles4.css new file mode 100644 index 0000000..9a6768e --- /dev/null +++ b/review/tf_styles4.css @@ -0,0 +1,117 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Review Assignment + + Author: Morgan and Nick + Date: 11-8-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; +} + +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: 481px) { + 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; + } + body 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: 480px) { + nav.horizontal ul { + height: 160px; + } +} diff --git a/review/tf_tips.html b/review/tf_tips.html new file mode 100644 index 0000000..7023264 --- /dev/null +++ b/review/tf_tips.html @@ -0,0 +1,165 @@ + + + + + + Trusted Friends: Education Tips + + + + + + + + + +
+ + +

Parenting Tips

+
+ +
+

Archive

+ +
+ + + +
+ Trusted Friends • 3450 Regency Lane, Carmel IN +
+ + diff --git a/review/tf_tips_txt.html b/review/tf_tips_txt.html index 5f89bf6..7023264 100644 --- a/review/tf_tips_txt.html +++ b/review/tf_tips_txt.html @@ -7,16 +7,21 @@ Review Assignment Trusted Friends Parenting Tips - Author: - Date: + Author: Morgan and Nick + Date: 11-8-18 Filename: tf_tips.html --> Trusted Friends: Education Tips + + + + +
diff --git a/tutorial/tf_articles.html b/tutorial/tf_articles.html new file mode 100644 index 0000000..336366d --- /dev/null +++ b/tutorial/tf_articles.html @@ -0,0 +1,152 @@ + + + + + + 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 +
+ + \ No newline at end of file diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..70f8a2f --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,100 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Nick Boschert and Morgan Butryn + Date:11/7/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..6abaa09 --- /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. +

+
+ + +
+ +
+ 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..4d11e90 --- /dev/null +++ b/tutorial/tf_navicon.css @@ -0,0 +1,56 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Morgan and Nick + Date: 11-7-18 + + Filename: tf_navicon.css + + This file contains styles used to control + a navicon menu. + +*/ + + +/* =========== + Base Styles + =========== +*/ +a#navicon { + display: none; +} + +a#navicon { + display: block; +} + +nav.horizontal ul { + display: none; +} + +a#navicon:hover+ul, nav.horizontal ul:hover { + display: block; +} + +/* =============================== + 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..00410f4 --- /dev/null +++ b/tutorial/tf_prek.html @@ -0,0 +1,129 @@ + + + + + + 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..5dcf0a1 --- /dev/null +++ b/tutorial/tf_print.css @@ -0,0 +1,95 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Morgan and Nick + Date: 11-7-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.1in 0in 0.1in 0.3in; +} + +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; +} \ No newline at end of file diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css new file mode 100644 index 0000000..928d578 --- /dev/null +++ b/tutorial/tf_styles1.css @@ -0,0 +1,228 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: Morgan and Nick + 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: 481px) { + + 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 { + box-shadow: rgb(51, 51, 51) 5px 5px 15px; + position: absolute; + width: 200%; + } +} + +/* ======================= + 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%; + } +} \ No newline at end of file