Designing for the Mobile Web CSS3 HTML5

I have included the data files to for the mobile web using a CSS style sheet. The instructions are included in the pictures. The final product should exactly match the model on Figure 5-57 and 5-58. 

NOTE: PLEASE DO NOT REMOVE THE TOP COMMENTS SECTION THAT INCLUDES THE NAME AND DATE! THANK YOU

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Review Assignment

Filename: tf_designs.css
This file design style used by all screen sizes for
the Trusted Friends Parent Tips page.
*/

/* =============================================
Base styles used by All Screens
=============================================
*/

/* HTML and Body Styles */
html {
background: url(tf_back1 ) center center / cover no-repeat fixed;
height: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
body {
box-shadow: rgb(51, 51, 51) 5px 0px 15px, rgb(51, 51, 51) -5px 0px 15px;
margin: 0px auto;
min-width: 320px;
max-width: 1024px;
width: 100%;
}
p {
line-height: 1.4em;
margin: 10px;
}
header, footer {
width: 100%;
}
/* Body Header Styles */
body > header {
background: rgb(134,176,232);
}
body > header > img {
display: block;
width: 100%;
}
body > header > h1 {
background-color: rgb(52,55,52);
color: rgb(231, 255, 231);
font-size: 2em;
line-height: 2em;
text-align: center;
}
/* Header Navigation List Styles */
body > header > nav.horizontal {
background-color: rgb(117, 140, 72);
clear: right;
height: auto;
}
body > header > nav.horizontal > ul {
padding: 20px;
}
body > header > nav.horizontal > ul > li {
font-size: 1.2em;
height: 30px;
text-transform: uppercase;
width: 140px;
}
body > header > nav.horizontal a {
color: rgb(239,240,224);
}
/* Left Section Styles */
section#left {
background-color: rgb(221, 221, 221);
padding: 10px;
}
section#left h1 {
font-size: 1.5em;
margin: 0px 0px 15px 0px;
text-align: center;
}
section#left nav.vertical li {
background-color: rgb(207,200,101);
line-height: 30px;
margin: 5px;
text-align: center;
font-size: 0.9em;
}
section#left a {
color: rgb(51, 51, 51);
}
/* Right Section Styles */
section#right {
background-color: rgb(221, 221, 221);
}
/* Tip Section Styles */
section.tips {
background-color: rgb(245,240,142);
border: 3px solid rgb(91,107,90);
margin: 20px;
}
section.tips:first-of-type {
margin-bottom: 20px;
}
/* Section Article Styles */
section.tips article header {
background-color: rgb(91,107,90);
color: rgba(236,236,207,1.00);
padding: 10px 10px 0px 10px;
}
section.tips article header h1 {
font-size: 1.5em;
}
section.tips article header p {
font-size: 1.2em;
}
section.tips article ol {
list-style-type: disc;
padding-left: 30px;
}
section.tips article ol li {
margin-bottom: 20px;
}
/* Section Aside Styles */
section.tips aside {
background-color: rgb(207,200,101);
}
section.tips aside h1 {
font-size: 1.4em;
margin: 15px 0px 0px 10px;
}
section.tips aside img {
float: right;
margin: 0px 0px 10px 10px;
width: 40%;
max-width: 140px;
}
/* Navicon Styles */
a#navicon {
display: none;
}
/* Footer Styles */
body > footer {
background-color: rgb(117, 140, 72);
font-size: 0.9em;
text-align: center;
padding: 10px 0px;
}

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Review Assignment

Trusted Friends Base Style Sheet

Filename: tf_base.css
*/

/* Basic styles to be used with all devices and under all conditions */
article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, nav a, ol, p, section, span, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* Set the default page element styles */
body {
line-height: 1.2em;
}
ul, ol {
list-style: none;
}
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Review Assignment

Author: Ramisha Abbas
Date: January 16th, 2018

Filename: tf_print2.css
This file contains the printer styles used with the Trusted
Friends Parents Tips page
*/

/* Hidden Objects */

/* Page Box Styles */

/* Header Styles */

/* Typography Styles */

/* Hypertext Styles */

/* Page Break Styles */

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Review Assignment

Author:
Date:

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 */

/* ===============================
Mobile Devices: 0 to 480px
===============================
*/

/* ============================================
Tablet and Desktop Devices: 481px or more
============================================
*/

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Review Assignment

Author: Ramisha Abbas
Date: January 16th, 2018

Filename: tf_styles4.css
This file contains the screen styles used with the Trusted
Friends blog tips
*/

/* Import Basic Design Styles Used on All Screens */
@import url(“tf_designs.css”);

/* General Flex Styles */
body {

display: -webkit-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: 1 8 130px;
}
section.tips {
aside article {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}
}
/* ===============================
Mobile Devices: 0 to 480px
===============================
*/

/* ============================================
Tablet and Desktop Devices: 481px or more
============================================
*/

@charset “utf-8”;
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 5
Review Assignment

Author:
Date:

Filename: tf_print2.css
This file contains the printer styles used with the Trusted
Friends Parents Tips page
*/

/* Hidden Objects */

/* Page Box Styles */

/* Header Styles */

/* Typography Styles */

/* Hypertext Styles */

/* Page Break Styles */

Home

Our Center

Teachers

Facilities

Tuition

Aid

Programs

Curriculum

After School

Summer Camp

Reviews

Blog

Articles

Parenting Tips

Parenting Tips

Archive

• Sep 2017
• Aug 2017
• Jul 2017
• Jun 2017
• May 2017
• Apr 2017
• Mar 2017
• Feb 2017
• Jan 2017
• Dec 2016
• Nov 2016
• Oct 2016
• Sep 2016
• Aug 2016
• Jul 2016
• Jun 2016
• May 2016
• Apr 2016
• Mar 2016
• Feb 2016
• Jan 2016

Learning through Play

by

Sandra Turner-Davis, Ph.D.

Young children struggle to understand the world and their role in it.
How does a child, as young as 4, make sense of the sensations that form
their daily lives? The answer may not be what you think it is. It is clear
that for a child, the most effective teacher is play.

And perhaps the most effective form of play is role-playing in which a child
pretends to be someone else: a mother, a father, an astronaut, or a
football star. Role-playing gives the child the ability to see the world from
another perspective. In a caring and nurturing environment,
role-playing can teach empathy and respect.

As the child grows, play can become more involved and complex. Playful
interactions with others become more common with shared imaginations and
roles. In cooperation with friends, children begin to make sense of their
world and work through their fears and anxieties.

Parents: turn off the television and the Internet and join in
the fun. There are few more rewarding experiences than playing with your child;
through your play, you teach, your child learns, and sometimes your
child teaches you too.

Sandra Turner-Davis, Ph.D.

Dr. Turner-Davis is a popular freelance author,
speaker, and curriculum specialist. She has served as the director of Early
Education at the University of Indiana, where she also served on the governor’s task
force examining education challenges in the inner city.

Dr. Turner-Davis has authored 11 books on education and co-authored more than 25
parent and teacher resource books. She was the keynote speaker at
the 2016

Midwest Educator’s Conference

and has appeared numerous times on CNN, Fox News, and PBS.

Raising a Reader

by

Diane Haberstadt

Reading is the key to education and love of reading will lead to a love of
learning. Consider the following tips to help cultivate a love
of reading in your child.

1. Talk the Talk Reading is about words, so help grow your
   child’s vocabulary through active and imaginative conversation.
   The larger the vocabulary, the greater the opportunity for
   exciting and meaningful reading.
2. Book It Do you have books in your house? Your child won’t
   read without books and a nice library shows your commitment to reading.
   By the way, does your child see you reading?
3. Make it Loud The first step to reading is reading aloud
   to your child. Build happy memories by sharing your favorite classics and
   don’t be afraid of long books. Children can handle big books that take
   weeks — or even months — to finish.

Cultivating a love for reading is a gift that keep giving throughout your
child’s life and into his or her adulthood. Read about it.

Diane Haberstadt

Diane Haberstadt is an author, speaker,
teacher, and above all, a busy mom of three. She is a co-creator of Science
Discovery World’s

Science 21

,
an interactive program helping children learn about the science of the 21st
century. She is also the author of the popular book

Raising the Inquisitive Child

.

Diane is on the board of Intervision Schools, working to bring Web and
Internet technologies to inner-city schools and centers.

Trusted Friends • 3450 Regency Lane, Carmel IN

Home

Our Center

Teachers

Facilities

Tuition

Aid

Programs

Curriculum

After School

Summer Camp

Reviews

Blog

Articles

Parenting Tips

Parenting Tips

Archive

• Sep 2017
• Aug 2017
• Jul 2017
• Jun 2017
• May 2017
• Apr 2017
• Mar 2017
• Feb 2017
• Jan 2017
• Dec 2016
• Nov 2016
• Oct 2016
• Sep 2016
• Aug 2016
• Jul 2016
• Jun 2016
• May 2016
• Apr 2016
• Mar 2016
• Feb 2016
• Jan 2016

Learning through Play

by

Sandra Turner-Davis, Ph.D.

Young children struggle to understand the world and their role in it.
How does a child, as young as 4, make sense of the sensations that form
their daily lives? The answer may not be what you think it is. It is clear
that for a child, the most effective teacher is play.

And perhaps the most effective form of play is role-playing in which a child
pretends to be someone else: a mother, a father, an astronaut, or a
football star. Role-playing gives the child the ability to see the world from
another perspective. In a caring and nurturing environment,
role-playing can teach empathy and respect.

As the child grows, play can become more involved and complex. Playful
interactions with others become more common with shared imaginations and
roles. In cooperation with friends, children begin to make sense of their
world and work through their fears and anxieties.

Parents: turn off the television and the Internet and join in
the fun. There are few more rewarding experiences than playing with your child;
through your play, you teach, your child learns, and sometimes your
child teaches you too.

Sandra Turner-Davis, Ph.D.

Dr. Turner-Davis is a popular freelance author,
speaker, and curriculum specialist. She has served as the director of Early
Education at the University of Indiana, where she also served on the governor’s task
force examining education challenges in the inner city.

Dr. Turner-Davis has authored 11 books on education and co-authored more than 25
parent and teacher resource books. She was the keynote speaker at
the 2016

Midwest Educator’s Conference

and has appeared numerous times on CNN, Fox News, and PBS.

Raising a Reader

by

Diane Haberstadt

Reading is the key to education and love of reading will lead to a love of
learning. Consider the following tips to help cultivate a love
of reading in your child.

1. Talk the Talk Reading is about words, so help grow your
   child’s vocabulary through active and imaginative conversation.
   The larger the vocabulary, the greater the opportunity for
   exciting and meaningful reading.
2. Book It Do you have books in your house? Your child won’t
   read without books and a nice library shows your commitment to reading.
   By the way, does your child see you reading?
3. Make it Loud The first step to reading is reading aloud
   to your child. Build happy memories by sharing your favorite classics and
   don’t be afraid of long books. Children can handle big books that take
   weeks — or even months — to finish.

Cultivating a love for reading is a gift that keep giving throughout your
child’s life and into his or her adulthood. Read about it.

Diane Haberstadt

Diane Haberstadt is an author, speaker,
teacher, and above all, a busy mom of three. She is a co-creator of Science
Discovery World’s

Science 21

,
an interactive program helping children learn about the science of the 21st
century. She is also the author of the popular book

Raising the Inquisitive Child

.

Diane is on the board of Intervision Schools, working to bring Web and
Internet technologies to inner-city schools and centers.

Trusted Friends • 3450 Regency Lane, Carmel IN