From b9799b9d71f783a7a73e482bdab1a0663759a59b Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 11:31:49 -0600 Subject: [PATCH 01/21] linked stylesheets to home.html and set up structure for the organization of styles for different media devices in styles1.css --- tutorial/tf_articles.html | 148 +++++++++++++++++++++++++++++++++++++ tutorial/tf_flex.css | 47 ++++++++++++ tutorial/tf_home.html | 97 ++++++++++++++++++++++++ tutorial/tf_navicon.css | 35 +++++++++ tutorial/tf_print.css | 58 +++++++++++++++ tutorial/tf_styles1.css | 151 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 536 insertions(+) create mode 100644 tutorial/tf_articles.html create mode 100644 tutorial/tf_flex.css create mode 100644 tutorial/tf_home.html create mode 100644 tutorial/tf_navicon.css create mode 100644 tutorial/tf_print.css create mode 100644 tutorial/tf_styles1.css diff --git a/tutorial/tf_articles.html b/tutorial/tf_articles.html new file mode 100644 index 0000000..bd81def --- /dev/null +++ b/tutorial/tf_articles.html @@ -0,0 +1,148 @@ + + + + + + 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.

+
+
+ + + + diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css new file mode 100644 index 0000000..a17a59a --- /dev/null +++ b/tutorial/tf_flex.css @@ -0,0 +1,47 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + Filename: tf_flex.css + + This file contains the flex styles used in the Trusted Friends + Pre-K Classes page. + +*/ + + +/* ================ + Base Flex Styles + ================ +*/ + + + + +/* ========================= + Mobile Styles: 0 to 480px + ========================= +*/ + +@media only screen and (max-width: 480px) { + + + +} + +/* ============================================ + Tablet and Desktop Styles: 481px and greater + ============================================ +*/ + +@media only screen and (min-width: 481px) { + + + +} diff --git a/tutorial/tf_home.html b/tutorial/tf_home.html new file mode 100644 index 0000000..54e56a6 --- /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..5df68e5 --- /dev/null +++ b/tutorial/tf_navicon.css @@ -0,0 +1,35 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + Filename: tf_navicon.css + + This file contains styles used to control + a navicon menu. + +*/ + + +/* =========== + Base Styles + =========== +*/ + + + + +/* =============================== + Mobile Devices: 0 to 480px + =============================== +*/ + +@media only screen and (max-width: 480px) { + + +} diff --git a/tutorial/tf_print.css b/tutorial/tf_print.css new file mode 100644 index 0000000..2a930a1 --- /dev/null +++ b/tutorial/tf_print.css @@ -0,0 +1,58 @@ +@charset "utf-8"; +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + Filename: tf_print.css + + This file contains the printer styles used with the Trusted + Friends page on articles of interest + +*/ + + + +/* Hidden Objects */ + + + +/* Page Box Styles */ + + + +/* Header Styles */ + +body > header { + text-align: right; +} + +body > header > img { + display: block; + width: 100%; +} + + +/* Typography Styles */ + + + +/* List Styles */ + + + +/* Image Styles */ + + + + +/* Hypertext Styles */ + + + + + +/* Page Break Styles */ diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css new file mode 100644 index 0000000..831696d --- /dev/null +++ b/tutorial/tf_styles1.css @@ -0,0 +1,151 @@ +@charset "utf-8"; + +/* + New Perspectives on HTML5 and CSS3, 7th Edition + Tutorial 5 + Tutorial Case + + Author: E. Ruiz / Cameron + Date: November 6 2018 + + Filename: tf_styles1.css + + This file contains the layout styles used in the Trusted Friends + home page. + +*/ + +/* =========== + Base Styles + =========== +*/ + + +/* HTML and Body Styles */ + +html { + background: url(tf_back1.png) center center / cover no-repeat fixed; + height: 100%; + font-family: Verdana, Geneva, sans-serif; + font-size: 12px; +} + +body { + background: rgb(134, 176, 232); + box-shadow: rgb(51, 51, 51) 5px 0px 15px, + rgb(51, 51, 51) -5px 0px 15px; + margin: 0px auto; + min-height: 100%; + min-width: 320px; + max-width: 1024px; + width: 100%; +} + +/* Body Header Styles */ + +body header { + background: rgb(134,176,232); +} + +body header img { + display: block; + width: 100%; +} + +/* Horizonal Navigation Styles */ + +nav.horizontal { + background-color: rgb(117, 140, 72); + min-height: 2em; +} + +nav.horizontal li { + color: rgb(31, 73, 125); + display: block; + line-height: 2em; + text-transform: uppercase; +} + +nav.horizontal a { + display: block; + font-size: 1em; +} + +nav.horizontal a:visited, nav.horizontal a:link { + color: rgb(31, 73, 125); +} + +nav.horizontal a:hover, nav.horizontal a:active { + background-color: rgb(31, 73, 125); + color: white; +} + +/* Main Menu Styles */ + +ul.mainmenu { + display: block; +} + +ul.mainmenu > li { + text-indent: 15px; +} + +ul.mainmenu > li:first-of-type a { + color: white; + background-color: rgb(31, 73, 125); +} + +/* Submenu Styles */ + +ul.submenu { + width: 100%; + background-color: rgb(181, 204, 136); +} + + +/* Section Styles */ + +section { + background-color: rgb(207, 222, 172); + clear: both; +} + +section::after { + content: ""; + display: table; + clear: both; +} + +section img { + display: block; + width: 100%; +} + +section p { + line-height: 1.4em; + padding: 10px; + font-size: 1.2em; +} + +/* Aside Styles */ + +aside { + display: block; + background-color: rgb(181, 204, 136); +} + +/* Footer Styles */ + +body > footer { + background-color: rgb(117, 140, 72); + font-size: 0.9em; + text-align: center; + padding: 10px 0px; +} + +/* Pulldown Menu Styles */ + + + + +/* New Styles Added Below */ From 08c5cf7f9c10ffa383f686f373bb6c09ce6cf027 Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 11:32:26 -0600 Subject: [PATCH 02/21] forgot to save before previous commit --- tutorial/tf_styles1.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css index 831696d..f5fcf88 100644 --- a/tutorial/tf_styles1.css +++ b/tutorial/tf_styles1.css @@ -149,3 +149,21 @@ body > footer { /* New Styles Added Below */ + +/* Mobile Styles: 0px - 480px */ + +@media only screen and (max-width: 480px) { + +} + +/* Tablet Styles: 481px and Greater */ + +@media only screen and (min-width: 481px) { + +} + +/* Desktop Styles: 769px and Greater */ + +@media only screen and (min-width: 769px) { + +} From 24d347c8a7fba7d7a9b8db977f48b45532021f1a Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 11:42:22 -0600 Subject: [PATCH 03/21] began adding style rules to specifically format content for devices with smaller screens (mobile devices and tablets) --- tutorial/tf_home.html | 8 ++++++-- tutorial/tf_styles1.css | 24 +++++++++++++++++++++++- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/tutorial/tf_home.html b/tutorial/tf_home.html index 54e56a6..af37c25 100644 --- a/tutorial/tf_home.html +++ b/tutorial/tf_home.html @@ -15,9 +15,13 @@ Trusted Friends Daycare + - - + + + + diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css index f5fcf88..ea27f92 100644 --- a/tutorial/tf_styles1.css +++ b/tutorial/tf_styles1.css @@ -145,6 +145,13 @@ body > footer { /* Pulldown Menu Styles */ +ul.submenu { + display: none; +} + +a.submenuTitle:hover+ul.submenu, ul.submenu:hover { + display: block; +} @@ -156,14 +163,29 @@ body > footer { } +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%; + } + ul.submenu { + width: 200%; + } } /* Desktop Styles: 769px and Greater */ @media only screen and (min-width: 769px) { - + } From 7d9040a6dfc60ec4b5fdebb8df7c76c72e3780ad Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 11:53:27 -0600 Subject: [PATCH 04/21] completed tutorial and fixed css error that caused webpage to not display all necessary content --- tutorial/tf_styles1.css | 45 +++++++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/tutorial/tf_styles1.css b/tutorial/tf_styles1.css index ea27f92..16ec637 100644 --- a/tutorial/tf_styles1.css +++ b/tutorial/tf_styles1.css @@ -160,26 +160,28 @@ a.submenuTitle:hover+ul.submenu, ul.submenu:hover { /* Mobile Styles: 0px - 480px */ @media only screen and (max-width: 480px) { + nav.horizontal a { + font-size: 1.5em; + line-height: 2.2em; + } + aside { + display: none; + } } -nav.horizontal a { - font-size: 1.5em; - line-height: 2.2em; -} - -aside { - display: none; -} /* Tablet Styles: 481px and Greater */ @media only screen and (min-width: 481px) { ul.mainmenu > li { float: left; width: 20%; + position: relative; } ul.submenu { width: 200%; + box-shadow: rgb(51, 51, 51) 5px 5px 15px; + position: absolute; } } @@ -187,5 +189,32 @@ aside { /* 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%; + } } From 654ce467386f22ebf4b91f2a09d2fe68be17968e Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 12:05:52 -0600 Subject: [PATCH 05/21] completed 5.1 and fixed css error that caused the webpage to not display all necessary content --- tutorial/tf_prek.html | 126 ++++++++++++++++++++++++++++++++++++++ tutorial/tf_prek_txt.html | 81 ++++++++++++------------ 2 files changed, 168 insertions(+), 39 deletions(-) create mode 100644 tutorial/tf_prek.html diff --git a/tutorial/tf_prek.html b/tutorial/tf_prek.html new file mode 100644 index 0000000..72a18b7 --- /dev/null +++ b/tutorial/tf_prek.html @@ -0,0 +1,126 @@ + + + + + + Pre-K Classes at Trusted Friends + + + + + + + + +
+ Trusted Friends + + +
+ + + +
+
+

Pre-K Classes

+

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

+

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

+
+ +
+
+

Language Skills

+

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

+
+
+

Math Exploration

+

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

+
+
+

Science Studies

+

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

+
+
+

Creative Expressions

+

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

+
+
+

Cultural Sharing

+

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

+
+
+

Physical Wellness

+

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

+
+
+ +
+ +
+ Trusted Friends • 3450 Regency Lane, Carmel IN +
+ + diff --git a/tutorial/tf_prek_txt.html b/tutorial/tf_prek_txt.html index 3498f36..72a18b7 100644 --- a/tutorial/tf_prek_txt.html +++ b/tutorial/tf_prek_txt.html @@ -5,23 +5,26 @@ New Perspectives on HTML5 and CSS3, 7th Edition Tutorial 5 Tutorial Case - + Pre-K Classes offered by Trusted Friends - Author: - Date: - + Author: E. Ruiz / Cameron + Date: November 6 2018 + Filename: tf_prek.html --> - + Pre-K Classes at Trusted Friends - + + + +
Trusted Friends - +
- + - +

Pre-K Classes

-

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

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

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

- +

Language Skills

-

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

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

Math Exploration

-

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

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

Science Studies

-

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

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

Creative Expressions

-

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

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

Cultural Sharing

-

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

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

Physical Wellness

-

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

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

- +
- +
Trusted Friends • 3450 Regency Lane, Carmel IN
From 893362f3085257a143eaf6969f0a02689b472bd6 Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 12:16:15 -0600 Subject: [PATCH 06/21] started adding style rules for displaying prek.html in smaller screen dimensions typical of mobile devices --- tutorial/tf_flex.css | 53 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/tutorial/tf_flex.css b/tutorial/tf_flex.css index a17a59a..1dc7703 100644 --- a/tutorial/tf_flex.css +++ b/tutorial/tf_flex.css @@ -21,6 +21,39 @@ ================ */ +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; +} @@ -30,7 +63,15 @@ */ @media only screen and (max-width: 480px) { + aside { + -webkit-order: 99; + order: 99; + } + footer { + -webkit-order: 100; + order: 100; + } } @@ -41,7 +82,17 @@ */ @media only screen and (min-width: 481px) { - + nav.horizontal ul { + 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; + } } From a822185985724b2bc5eab3a0e263cfcf9e2e08b9 Mon Sep 17 00:00:00 2001 From: Emily Ruiz Date: Tue, 6 Nov 2018 12:23:03 -0600 Subject: [PATCH 07/21] completed 5.2 with adding hover functionality to navigation bar links on prek.html --- tutorial/tf_navicon.css | 13 ++++++++++++- tutorial/tf_prek.html | 6 ++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/tutorial/tf_navicon.css b/tutorial/tf_navicon.css index 5df68e5..5d40899 100644 --- a/tutorial/tf_navicon.css +++ b/tutorial/tf_navicon.css @@ -20,7 +20,9 @@ Base Styles =========== */ - +a#navicon { + display: none; +} @@ -30,6 +32,15 @@ */ @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 72a18b7..db52d69 100644 --- a/tutorial/tf_prek.html +++ b/tutorial/tf_prek.html @@ -19,6 +19,7 @@ + @@ -26,6 +27,11 @@ Trusted Friends -
+
+

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
    +
    +
    • +
+

Jersey Buoys ⓒ ‡

Owner: Tony Gallo ‡

diff --git a/case4/jb_styles.css b/case4/jb_styles.css index ec11e17..bbf5add 100644 --- a/case4/jb_styles.css +++ b/case4/jb_styles.css @@ -27,10 +27,10 @@ body{ margin-top:0px; padding-left: 1%; padding-right:1% - + } /* Flex Styles */ -div { +div#flex { clear: both; display: -webkit-box; display: -moz-box; @@ -66,11 +66,12 @@ nav#vertical { border-radius: 10px; padding-right: 2%; padding-left: 2%; + height: 80%; } nav#vertical ul li { list-style-type: none; - line-height: 1.5em; + line-height: 1em; } nav#vertical ul li a { @@ -89,31 +90,65 @@ section { margin-right:20px; padding-left: 20px; padding-right:20px; - height:50%; border: solid 4px rgb(72, 121, 165); + height: 100%; border-radius: 20px 20px; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: column wrap; + flex-flow: column wrap; + } section p { font-size: 1.15em; - } -/* Aside Styles */ -aside { +/* Article Styles */ +article { width: 35%; padding-left: 10px; + height: 100%; + clear: both; } -aside h2 { +h2#slang { font-family: 'Gloria Hallelujah', cursive; } -aside dt { +article dt { font-weight: bold; text-decoration: underline; } +ul li { + list-style-type: none; +} +ul#surfer li{ + display: flex; + flex-flow:row wrap; +} +} +dl { +display: block;; +margin-left: auto; +margin-right: auto; +} + +ul li { + width: 100%; +} + +dt { + +} +dd { + width: 11.1%; +} /* Footer Styles */ footer { + clear: both; text-align: center; position:absolute; right: 0; From 30519321fcde3fd8ea710e2a7ee9855601909c87 Mon Sep 17 00:00:00 2001 From: "E. Ruiz" Date: Fri, 16 Nov 2018 12:02:18 -0600 Subject: [PATCH 20/21] FINALLY completed the navicon --- case4/jb_home.html | 122 +++++++++--------- case4/jb_styles.css | 297 +++++++++++++++++++++++++------------------- 2 files changed, 230 insertions(+), 189 deletions(-) diff --git a/case4/jb_home.html b/case4/jb_home.html index e78c9dc..b01ccc3 100644 --- a/case4/jb_home.html +++ b/case4/jb_home.html @@ -15,14 +15,15 @@ Jersey Buoys Surfing School - +
Jersey Buoys Surfing School -
-

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
    -
    -
    • -
+
+

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
    +
    +
    • +
+