Path of Light Yoga Studio

Chapter 7

Here is my code for yoga.css:

body { background-color: #3f2860;

color: #3f2860;

font-family: verdana, arial,sans-serif;

}

header { background-color: #9bc1c2;

background-image: url(lilyheader.jpg);

background-repeat: no-repeat;

background-position: right;

height: 150px;

}

h1 { padding-top: 50px;

padding-left: 2em;

}

nav { float: left;

width: 160px;

font-weight: bold;

}

nav a { text-decoration: none;

border-color: #cccccc;

border-width: 3px;

border-style: outset;

text-align: center;

font-weight: bold;

display: block;

padding: 1em;

margin-bottom: 1em;

}

nav a:link { color: #3f2860;

}

nav a:visited { color: #497777;

}

nav a:hover { color: #a26100;

border: 3px inset #333333;

}

nav ul { list-style-type: none;

}

footer { background-color: #9bc1c2;

font-size: .60em;

font-style: italic;

text-align: center;

}

.studio { font-style: italic;

}

#wrapper {margin-left: auto;

margin-right: auto;

width: 80%;

background-color: #f5f5f5;

min-width: 1200px;

max-width: 1480px;

}

main { padding-left: 2em;

padding-right: 2em;

margin-left: 170px;

padding-top: 1em;

}

* { box-sizing: border-box;

}

.floatleft { float: left;

margin-right: 4em;

}

.clear { clear: both;

}

header, nav, main, footer { display: block;

}

#mobile { display: none;

}

#desktop { display: inline;

}

@media only screen and (max-width: 1024px) {

body { margin: 0;

padding: 0;

}

#wrapper { width: 100%;

min-width: 0;

margin: 0;

padding: 0;

}

header { padding-top: 1px;

}

h1 { padding-top: 1em;

}

nav { float: none;

width: auto;

padding-left: 2em;

}

nav a { padding: 0.2em;

margin-left: 0.3em;

float: left;

width: 23%;

}

main { padding-top: 2.5em;

padding-bottom: 2.5em;

padding-left: 1em;

padding-right: 1em;

margin: 0;

font-size: 90%;

clear: both;

}

#hero img{width: 100%;

height: auto;

}

h2 { padding-left: 2em;

padding-right: 2em;

}

h3 { padding-left: 2em;

padding-right: 2em;

}

p { padding-left: 2em;

padding-right: 2em;

}

dl { padding-left: 2em;

padding-right: 2em;

}

main ul { margin-left: 2em;

}

.floatleft { margin-left: 2em;

margin-bottom: 1em;

}

.clear { padding-left: 2em;

}

}

@media only all and (max-width: 768px) {

h1 { font-size: 2em;

padding-top: 0.25em;

padding-left: 1.5em;

width: 85%;

text-align: center;

}

nav a { padding: 0.5em;

width: 45%;

float: left;

min-width: 6em;

margin-left: 0.5em;

}

main { padding-top: 0;

}

.floatleft { float: none;

display: none;

}

#hero { display: none;

}

footer { padding: 0.5em;

margin: 0;

}

#mobile { display: inline; }

#desktop { display: none; }

}

Task 6: Configure the Tablet CSS. Open yoga.css in a text editor. Edit the style rules as follows: 1. Code a media query to select for typical tablet device viewport size. such as Omedia only screen and (max-width: 1024px) { 2. Code the following new styles within the media query: 1. Configure a body element selector with margin and padding set to 0. 2. Configure a wrapper id selector. Set the width to 100%, min- width to 0, margin to 0, and padding to 0. 3. Configure the header element selector. Set top padding to 1px. 4. Configure the h1 element selector. Set top padding to lem. 5. Configure the nav element selector. The mobile layout uses a single column. Set the float to none, width to auto, and left padding to 2em. 6. Configure the nav a selector. Set padding to 0.2em, left margin to 0.3em, float to left, and width to 23%. 7. Configure the main element selector. Set top and bottom padding to 2.5em, left and right padding to lem, margin to 0, 90% font size, and clear all floats. 8. Configure the #hero img selector. Code a style declarations to set the width to 100% and the height to auto. 9. Configure the h2, h3, p, and dl element selectors. Set the left and right padding to 2em. 10. Configure the main ul selector. Set left margin to 2em. 11. Configure the floatleft class with 2em left margin and lem bottom margin. 12. Configure the clear class with 2em left padding. Task 6: Configure the Tablet CSS. Open yoga.css in a text editor. Edit the style rules as follows: 1. Code a media query to select for typical tablet device viewport size. such as Omedia only screen and (max-width: 1024px) { 2. Code the following new styles within the media query: 1. Configure a body element selector with margin and padding set to 0. 2. Configure a wrapper id selector. Set the width to 100%, min- width to 0, margin to 0, and padding to 0. 3. Configure the header element selector. Set top padding to 1px. 4. Configure the h1 element selector. Set top padding to lem. 5. Configure the nav element selector. The mobile layout uses a single column. Set the float to none, width to auto, and left padding to 2em. 6. Configure the nav a selector. Set padding to 0.2em, left margin to 0.3em, float to left, and width to 23%. 7. Configure the main element selector. Set top and bottom padding to 2.5em, left and right padding to lem, margin to 0, 90% font size, and clear all floats. 8. Configure the #hero img selector. Code a style declarations to set the width to 100% and the height to auto. 9. Configure the h2, h3, p, and dl element selectors. Set the left and right padding to 2em. 10. Configure the main ul selector. Set left margin to 2em. 11. Configure the floatleft class with 2em left margin and lem bottom margin. 12. Configure the clear class with 2em left padding