In this task, you will modify the javajam.css file to update the current JavaJam website to a two-column layout and style the hero image on each page. Configure the CSS. Open javajam.css in a text editor. Edit the style rules as follows:(javajam.css code is included below since CSS files can not be attatched.). Please show end result CSS code. body {background-color: #FCEBB6; color: #221811; font-family: Verdana, Arial, sans-serif; background-image: url(../images/background.gif); } #wrapper { width: 80%; margin-right: auto; margin-left: auto; min-width: 900px; max-width: 1280px; box-shadow: 3px 3px 3px #666666; } header {background-color: #D2B48C; height: 150px; background-image: url(../images/javajamlogo.jpg); background-repeat: no-repeat; } h1 { padding-top: 45px; padding-left: 220px; font-size: 3em; } nav { text-align: left; font-weight: bold; font-size: 1.5em; padding-top: 10px; } nav a:link { color: #FEF6C2; } nav a:visited{ color: #D2B48C; } nav a:hover { color: #CC9933; } footer {background-color: #D2B48C; font-size: small; font-style: italic; text-align: center; padding-bottom: 10px; border-top: 2px #221811 solid; } main { padding: 10 10 2em 10; } h4 { background-color: #d2B48C; font-size: 1.2em; padding-left: 10px; padding-bottom: 0; text-transform: uppercase; border-bottom: 1px solid #000033; } .details { padding-left: 20%; padding-right: 20%; } img { padding-left: 10px; padding-right: 10px; } 1. Configure the universal selector with a box-sizing: border-box style declaration. * { box-sizing: border-box; } 2. Configure id selectors for the hero image on each page. • Configure an id selector named heroroad. Set the background image to heroroad.jpg (Be sure to use url(../images/heroroad.jpg). Configure 100% background-size and height of 250 pixels. • Configure an id selector named heromugs. Set the background image to heromugs.jpg (Be sure to use url(../images/heromugs.jpg). Configure 100% background-size and height of 250 pixels. • Configure an id selector named heroguitar. Set the background image to heroguitar.jpg (Be sure to use url(../images/heroguitar.jpg). Configure 100% background-size and height of 250 pixels. 3. Edit the style rules for the main selector so that the hero image will fill the entire area. Change left padding to 0. Change right padding to 0. Also configure a 200px left margin, 0 top padding, and #FEF6C2 background color. 4. Since the main content area no longer has any left or right padding, configure descendant selectors to configure style rules for the following elements within the main element: h2, h3, h4, p, div, ul, dl. Set left padding to 3em and right padding to 2em. 5. Configure the left-column navigation area. Add style declarations to the nav element selector to configure an area that floats to the left and is 200 pixels wide. Also, in the nav element selector, change the text alignment from left to center. 6. You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area in Figure 6.50 does not show list markers. Code a nav ul descendant selector to configure unordered lists in the navigation area to display without list markers and with 0 left padding. 7. Modify the wrapper id. Configure a dark background color (#231814) which will display behind the column with the navigation area. 8. Modify the h4 element selector style rules. Configure a style declaration to clear floats on the left. 9. Refer to the Music page and notice how the images float on the left side of the paragraph description. Configure a new class named floatleft that floats to the left with 20 pixels of right and bottom padding. 10. Modify the style rules for the details class and add the overflow: auto; style declaration. 11. Add the following CSS to be compatible with most older browsers: header, nav, main, footer { display: block; }
Task 2: In this task, you will modify the javajam.css file to update the current JavaJam website to a two-column layout and style the hero image on each page. Configure the CSS. Open javajam.css in a text editor. Edit the style rules as follows:(javajam.css code is included below since CSS files can not be attatched.). Please show end result CSS code.
1. Configure the universal selector with a box-sizing: border-box style declaration. * { box-sizing: border-box; }
2. Configure id selectors for the hero image on each page.
• Configure an id selector named heroroad. Set the background image to heroroad.jpg (Be sure to use url(../images/heroroad.jpg). Configure 100% background-size and height of 250 pixels.
• Configure an id selector named heromugs. Set the background image to heromugs.jpg (Be sure to use url(../images/heromugs.jpg). Configure 100% background-size and height of 250 pixels.
• Configure an id selector named heroguitar. Set the background image to heroguitar.jpg (Be sure to use url(../images/heroguitar.jpg). Configure 100% background-size and height of 250 pixels.
3. Edit the style rules for the main selector so that the hero image will fill the entire area. Change left padding to 0. Change right padding to 0. Also configure a 200px left margin, 0 top padding, and #FEF6C2 background color.
4. Since the main content area no longer has any left or right padding, configure descendant selectors
to configure style rules for the following elements within the main element: h2, h3, h4, p, div, ul, dl.
Set left padding to 3em and right padding to 2em.
5. Configure the left-column navigation area. Add style declarations to the nav element selector to
configure an area that floats to the left and is 200 pixels wide. Also, in the nav element selector,
change the text alignment from left to center.
6. You will organize the navigation hyperlinks within an unordered list in later tasks. The navigation area
in Figure 6.50 does not show list markers. Code a nav ul descendant selector to configure unordered
lists in the navigation area to display without list markers and with 0 left padding.
7. Modify the wrapper id. Configure a dark background color (#231814) which will display behind the
column with the navigation area.
8. Modify the h4 element selector style rules. Configure a style declaration to clear floats on the left.
9. Refer to the Music page and notice how the images float on the left side of the paragraph description.
Configure a new class named floatleft that floats to the left with 20 pixels of right and bottom
padding.
10. Modify the style rules for the details class and add the overflow: auto; style declaration.
11. Add the following CSS to be compatible with most older browsers:
header, nav, main, footer { display: block; }
Actually, HTML stands for Hypertext Markup Language.
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 2 images
