From f37555722a87f46a4f032b592e92697f97553b1a Mon Sep 17 00:00:00 2001 From: MorganButryn Date: Tue, 6 Nov 2018 10:12:59 -0600 Subject: [PATCH 01/16] new file: tutorial/tf_home.html new file: tutorial/tf_styles1.css --- tutorial/tf_home.html | 97 +++++++++++++++++ tutorial/tf_styles1.css | 228 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 325 insertions(+) create mode 100644 tutorial/tf_home.html create mode 100644 tutorial/tf_styles1.css 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. +

+
+ + +
+ + + + diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css new file mode 100644 index 0000000..e76ee53 --- /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 scren 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 From 4387c1a72f741d58b924506a41076b85e425d8be Mon Sep 17 00:00:00 2001 From: MorganButryn Date: Wed, 7 Nov 2018 08:29:20 -0600 Subject: [PATCH 02/16] Scren -> Screen --- tutorial/tf_styles1.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css index e76ee53..928d578 100644 --- a/tutorial/tf_styles1.css +++ b/tutorial/tf_styles1.css @@ -176,7 +176,7 @@ a.submenuTitle:hover+ul.submenu, ul.submenu:hover { ======================= */ -@media only scren and (min-width: 481px) { +@media only screen and (min-width: 481px) { ul.mainmenu > li { float: left; From 661a405a7bdbe1123b97c22443bdcda1325accc4 Mon Sep 17 00:00:00 2001 From: MorganButryn Date: Wed, 7 Nov 2018 08:50:50 -0600 Subject: [PATCH 03/16] new file: tutorial/tf_flex.css new file: tutorial/tf_prek.html --- tutorial/tf_flex.css | 76 +++++++++++++++++++++++++ tutorial/tf_prek.html | 127 ++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 203 insertions(+) create mode 100644 tutorial/tf_flex.css create mode 100644 tutorial/tf_prek.html diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..cc28196 --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,76 @@ +@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-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} + +header, footer { + width: 100%; +} + +aside { + -webkit-flex: 1 1 120px; + flex: 1 1 120px; +} + +section#main { + -webkit-flex: 3 1 361px; + flex: 3 1 361px; +} + +section#topics { + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row wrap; + flex-flow: row wrap; +} +section#topics article { + -webkit-flex: 1 1 200px; + flex: 1 1 200px; +} +/* ========================= + Mobile Styles: 0 to 480px + ========================= +*/ + +@media only screen and (max-width: 480px) { + + + +} + +/* ============================================ + Tablet and Desktop Styles: 481px and greater + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + + +} + + diff --git a/tutorial/tf_prek.html b/tutorial/tf_prek.html new file mode 100644 index 0000000..9d76413 --- /dev/null +++ b/tutorial/tf_prek.html @@ -0,0 +1,127 @@ + + + + + + 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 +
+ + From ee990f3b0b81e9e8bdcc482a33425622c3ba0b2e Mon Sep 17 00:00:00 2001 From: MorganButryn Date: Wed, 7 Nov 2018 09:57:51 -0600 Subject: [PATCH 04/16] new file: tutorial/tf_articles.html modified: tutorial/tf_flex.css new file: tutorial/tf_navicon.css modified: tutorial/tf_prek.html new file: tutorial/tf_print.css --- tutorial/tf_articles.html | 152 ++++++++++++++++++++++++++++++++++++++ tutorial/tf_flex.css | 38 ++++++++-- tutorial/tf_navicon.css | 56 ++++++++++++++ tutorial/tf_prek.html | 2 + tutorial/tf_print.css | 69 +++++++++++++++++ 5 files changed, 310 insertions(+), 7 deletions(-) create mode 100644 tutorial/tf_articles.html create mode 100644 tutorial/tf_navicon.css create mode 100644 tutorial/tf_print.css diff --git a/tutorial/tf_articles.html b/tutorial/tf_articles.html new file mode 100644 index 0000000..420786b --- /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 +
+ + diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css index cc28196..70f8a2f 100644 --- a/tutorial/tf_flex.css +++ b/tutorial/tf_flex.css @@ -21,6 +21,9 @@ ================ */ body { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; @@ -42,6 +45,9 @@ section#main { } section#topics { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; @@ -50,16 +56,23 @@ section#topics { 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; + } } /* ============================================ @@ -68,9 +81,20 @@ section#topics article { */ @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_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 index 9d76413..00410f4 100644 --- a/tutorial/tf_prek.html +++ b/tutorial/tf_prek.html @@ -21,12 +21,14 @@ +
Trusted Friends