Assignment #3 RCC Fall 2022 CIS-72B CSS

CSS Box, Color, and Background Properties

Due Tuesday November 29 @11:59pm in Canvas
150 Points
Our textbook (like any book) does have a few errors. To see our book's known errors
to help avoid any issues that might affect your work, refer to this link:
http://oreilly.com/catalog/errata.csp?isbn=9781491918050

Part 0: Download & Extract the Canvas zip file

For this assignment, from the Canvas Assignment page, you will download a starter
"zip" file with subfolders containing all the files needed for each part. As you work on
each part, you will be modifying those starter files in those subfolders. When you are
finished working on all of the parts of the assignment, you will zip up your solution
folders and files, and submit your work by uploading that single zip file to Canvas.
There will not be any screen shots, just do all of your work in the given files and
folders. Rename the main folder and the eventual zip file that you submit so that your
own name is part of the file/folder name.

Part 1: Box Properties YouTube Video

40 Points
For this part of the assignment, you are asked to just watch the box properties video
(YouTube) and answer some questions about it (you don’t have to do all of the steps
that the video does). Box properties involve a group of CSS properties including
"width", "height", "margin", "padding", "border", "float", and "clear". The link to this
video appears below.
Link to the video: https://www.youtube.com/watch?v=pzes0zq5VSw

Warning: this video is long (over an hour) and old, including older editor and browser
versions. But the CSS code / formatting is still relevant, so it is still worth watching
but feel free to advance it along a little here or there as needed.
The video shows you how to style a 2-column detail (Daily Spin) blog page, this time
the 2 columns are created by using box properties instead of a table. The video makes
heavy usage of the float, border, margin, padding, and width properties to achieve the
desired results with this page.
To see and to answer the questions to get credit for this part, look in the A3P1 folder
(part of the downloads for this assignment) and locate the file named "a3p1-
questions-answers.html". (Leave the files in their given folders.) Open up the web
page (with the questions and answers) in both an editor and in a browser. You can
see the questions best in the browser, but you have to answer them using an editor.
To indicate your answer to a question, locate the paragraph (p) tag for that answer
and change its given class from "answer" to "myanswer". That will trigger the
formatting in the browser that will highlight that answer for grading purposes.

You will upload your work for this part (into Canvas) along with the rest of your work
for this assignment when it is all complete and zipped up into a single file.

Part 2: Margins, Padding, & Borders (Ch 7 Tutorial)

40 Points
For this part, you'll be asked to do various tasks related to the tutorial towards the
end of chapter 7 of the textbook.

First, read through and familiarize yourself with all of the various properties
associated with the "box model", covered in the first part of the chapter on pages
185-215.
When you are done reviewing the material indicated above, continue on to do the
"Tutorial: Margins, Backgrounds, and Borders", on pages 216-227 (skip the section
entitled "Going Further" at the bottom of page 227), using the given starter files.

When you complete the tutorial, and your page (in the browser) closely resembles
that of figure 7-21 on page 227, then there are a few more changes you need to
make to produce the final result. These additional changes are detailed below.
First let's identify ourselves in one of the page's existing headings. Locate the HTML
for the "h2" heading that currently reads "Who Knew CSS Had Such Power?". Replace
the word "CSS" with your own first and last name. For example, if your name was
"Joe Student", the heading would then read "Who Knew Joe Student Had Such
Power?". Save your HTML change and check your result in the browser to make sure it
works as expected.
Next let's add a comment into our html code to identify ourselves and identify the
beginning point for our CSS style additions. To do so, locate your page's "head"
section. If a "style" section is not already there, then create opening and closing
"style" tags just above the closing "head" tag.

Next, just above that closing "style" tag (between the opening and closing "style"
tags), create about 5 new empty lines by hitting "Enter". Then place the following
comment line on about the 3rd (middle) of these empty lines -- you can just copy and
paste the comment that you see below into your own page and then change the name
from "Joe Student" to your own. Include the / and * as shown:

/* A3P2 New Styles by Joe Student */

Now the rest of our style work should be placed below this comment line but above
the closing "</style>" tag.
Our first style change will be to widen the body and banner image from 760 pixels to
900 pixels. The original style rule set the body's "max-width" to 760, which would still
override us if we tried to set the width to 900px, so we will override it by setting
"max-width" to 900px. But rather than modifying the existing styles rules, we will just
write new rules below our new "comment" to override them. That way we can see the
original tutorial rules and the new ones we write here. So below the comment and
above the </style> tag, write the following rules:

The first rule widens the whole area for the page and the second one widens the
banner image across the top of the page to match this new maximum width. If you
then save and preview your modified page in the browser you can compare your
result with the sample screen shot below -- the change you just made is represented
by the red arrows at the left and right edges of the page toward the top indicating this
wider result. Note that it is not always a good idea to change the size of an image
using CSS because it can distort or pixelate the image but in this case it works well.
Next we will make the necessary changes to the "sidebar" note box so that its left
border becomes more prominent and so that the paragraph text and green dotted
heading borders do not come so close to the sidebar's left edge. To do so, we use a
class-based selector as follows:

Save and check your results in the browser to confirm the more emphasized solid 3
pixel left border appears on the sidebar and that there is now increased space to the
sidebar's left. Compare your results to the sample screen shot below, which contains
two red arrows along the left side of the sidebar to indicate the desired border and
margin changes.
Next we will set off the page's paragraphs from the headings by giving them a bigger
left margin. However, we do not want the paragraph inside the sidebar to be affected,
so we will first set the margin for all paragraphs with our first rule and then turn it off
for just the paragraph inside the sidebar with the second rule:
Save and check your results in the browser to confirm the new left margins for
paragraphs affected all paragraphs except the one inside the sidebar. Compare your
results to the sample screen shot below, which contains a red arrow down the first
paragraph's new margin to indicate the change.
The next changes we make will be to the copyright area at the bottom of the page. In
an effort to de-emphasize this text area, we are going to separate the copyright area
from the rest of the page with a top margin, we will center the text, and we will
reduce its font size. But before we can write that rule, we have to figure out what
selector will work to target that text. Locate the copyright area toward the bottom of
the HTML file. Notice it is a paragraph just like any other. So, to target that special
copyright text, we will have to either insert a new "class" or an "id", or we can use the
newer HTML 5 "footer" tag. The footer tag seems like the best choice, so replace the
copyright text's opening and closing "p" tags with opening and closing "footer" tags
instead. Then return to the bottom of the page's style area to add this new rule to
format our copyright text as desired:

Save and check your results in the browser to confirm these changes to your
copyright area. Note that if you compare your results to the sample screen shot below
(see the bottom red arrow), you still will not have the copyright area down so close to
the bottom of the page body. You also may have a longer page than that shown in the
screen shot. We will address both of these issues in our next steps.
To shorten up our page and bring the copyright area closer to the bottom of the page
body, we must first locate our "body" tag rule (the first one below our "comment"),
and add these 2 new declarations to it:

The first declaration reduces the vertical space that each line takes up (reduces line
spacing) and the second one eliminates the blank spacing at the bottom of the page
body -- thus allowing our copyright text to sit closer to the bottom border of the main
page area.

If you then save and preview your modified page in the browser you can compare
your result with the sample screen shot below. Your results should now look very
close to this screen shot.
Note that before you are done with this work, you should copy/paste your style rules
(everything inside the "style" tags) into the W3C CSS validator to ensure that all of
your code is valid.
When you have completed all of the above steps, your page should closely resemble
the sample screen shot shown below. The red arrows are there to indicate the
changes that were made after the tutorial was completed.
You will upload your work for this part (into Canvas) along with the rest of your work
for this assignment when it is all complete and zipped up into a single file.
Part 3: Adding Graphics to Web Pages (Ch 8 Tutorial)
30 Points
For this part, you'll be asked to do various tasks related to the three tutorials towards
the end of chapter 8 of the textbook.

First, read through and familiarize yourself with all of the various background
properties covered in the first part of the chapter on pages 229-261. When you are
done reviewing the material indicated above and understand how to use the various
background properties discussed therein, continue on to the next step below, having
to do with this chapter's tutorials.
Next, review the chapter's first tutorial, entitled "Tutorial: Enhancing Images", on
pages 261-266. Although there is nothing to turn in for this particular tutorial, later
you will be asked to use the techniques demonstrated within this tutorial, so be sure
to carefully study the examples shown.
When you feel you understand the methods described for enhancing an image by
using float, width, margin, padding, border, and using figcaptions to include
descriptive text, then you are ready to move on to the next step.
Next, you are ready to review the chapter's second tutorial, entitled "Tutorial:
Creating a Photo Gallery", on pages 266-270. Although there is nothing to turn in for
this particular tutorial either, some of the techniques demonstrated within this tutorial
will be helpful, so be sure to study the examples shown. When you feel you
understand the methods described for using float, figcaption, display, and box-
shadow, then you are ready to move on to the next step.
Finally, you are ready to follow the instructions to do each step of this chapter's third
tutorial, entitled "Tutorial: Using Background Images", on pages 270-278.
After completing this 3rd tutorial, follow the instructions below to make some final
changes.
First, locate the copyright paragraph and replace the words "Lorem Ipsum" with your
own first and last name. For example, if your name is "Joe Student", that copyright
line would read "Copyright 2015, Joe Student Corporation". Then update the copyright
year to the current year.
Next, you should already have a textbook.png image within your given "images"
folder for this assignment part. Confirm that it is there. It is an image of our class
textbook as shown below.

textbook.png
Once you have the image of our textbook in your "images" folder (along with the
other tutorial 3 images), you are ready to modify the HTML of your page to display
this image. Locate the part of your HTML that matches the code shown and then type
in the HTML shown in the "red box" between the two existing paragraphs.

Once you have typed in the HTML code in the red box into its proper location, save
and preview the result in the browser. If it was typed correctly, you should see an
image of the textbook, as shown above, in the middle of the text of your page. If not,
double check your HTML code as well as double check the location of the image file
itself. If so, you are ready to move on to the next step so that we can begin to style
this figure and its caption.
The first step in styling this figure and its caption is to float it to the right-hand side of
the page and allow the rest of the text to wrap around it nicely. Note that since this
figure is the only one of its kind requiring such formatting, we used an "id" in the
HTML, using the name "bookfig". As such, our corresponding selector will be #bookfig.
Here is the rule below that you should insert into the bottom part of your "styles.css"
file:

Save and check your results in the browser to confirm that the figure and its caption
do get moved to the right-hand side of the page and that the paragraph text is
wrapping nicely to the figure's left. You can begin to compare your results to the
sample screen shot below, although we still have more formatting work to do on the
image border and the caption text before we are done.
The next step is to "frame" the image nicely and add a box shadow effect. (Note that
these effects are very similar to the image effects shown in the previous 2 tutorials of
this chapter.) Since the "img" tag is inside the "figure" tag with the "bookfig" id, the
selector to use is "#bookfig img". So, at the bottom of your "styles.css" file, insert the
CSS rule shown below:
Save your CSS changes and preview your page in the browser. Compare it to the
sample screen shot below to confirm that the image treatment was applied as
expected. Remember that the shadow effect may not work in older browsers, so try it
in only the most recent standards-based browsers. (If your results are not what you
were hoping for, carefully compare your own code to the code listed above, try
validating your code, and/or update your browser as needed.) Once your page is
looking good, it is time to move on to the last piece of CSS, which will affect the
figure's caption.
Lastly, we would like to format the text that makes up the figure's caption. Since in
the HTML, it is the "figcaption" tag that is nested inside a "figure" tag with an id of
"bookfig", we will use the selector "#bookfig figcaption". We will center the text,
decrease its font size (to 75%), and assign a sans-serif font. That CSS formatting
code is shown below. Insert it below all the other rules so that it ends up being the
last rule in your "styles.css" file:

Save your changes and preview your page in the browser. Compare it to the sample
screen shot below to confirm that the caption text treatment was applied as expected.
Your results should very closely resemble this sample screen shot now.

Before finishing this part of the assignment, you should validate your CSS within
"styles.css" using the W3C CSS validator to ensure that all of your code is as good as
can be.
When you have completed all of the above steps, your page should closely resemble
the sample screen shot shown below. The red arrows are there to indicate the
changes that were made after the tutorial was completed. You will upload your work
for this part (into Canvas) along with the rest of your work for this assignment when it
is all complete and zipped into a single file.
Part 4: Show What You Know: Hotel Page with Margins, Borders, Padding,
and Backgrounds
40 Points
Using your chosen hotel theme from assignment 2, you are asked to make some
appropriate formatting changes to a given generic hotel home page. You are asked to
incorporate all of the features presented in this assignment -- margins, borders,
padding, and backgrounds in order to transform the plain starter page into a themed
hotel page. You are also asked to try out a few other CSS features not presented in
this assignment.

For this work, you are given a starter web page and style sheet in the downloaded
"a3p4" folder that you downloaded from Canvas.

Note that the effort and CSS work you do on this page will be directly helpful to you in
your final project. The given HTML of this hotel page will be very similar to the HTML
given to you for the hotel pages of your final project. As a result, some of the CSS
formatting rules and/or declarations you create here should be able to be
copied/pasted into parts of your final project. So, try to do a good job with this part
and choose your formatting so that it fits well with your chosen theme and then you
will be well on your way to having a successful final project.

Note that any images used in this assignment part can be obtained or created by any
means necessary (within reason) except that they cannot be images that have been
already used for earlier assignments or demos in this class in any way. Place all
images in the same a3p4 folder as the html page and css style sheet file. Make a note
about where you found each image so you can indicate it on the page when asked to
do so in a step below.

Note that if you have not already done so from assignment 2, you should get your
proposed hotel theme approved by your instructor via email before attempting this
work or there will be a 5-point deduction.

Look over the code of each of the given starter files (both HTML and CSS) and make
sure you understand what each line of code is doing -- especially the ones that you
will be working directly with. Below is a screen shot of what your generic hotel page
starts off looking like -- note that all of the existing formatting is coming from the
given style sheet file:

Your work should include making the following adjustments to the page. Do not make
any other adjustments to the text other than what is asked for below. When testing
your changes, use the Firefox or Chrome browsers if possible. The points given to
each of these changes are given in brackets at the end.

1. Replace the "Whatever Hotel" name with the name of your own chosen hotel
wherever it occurs in the html (4 times). [1 point]
2. Replace "Joe Student" with your own name wherever it occurs on the html (3
times). [1 point]
3. Replace the given generic hotel image ("replace me") on this page with another one
that better matches your chosen theme (just place that image in the same folder as
the html file and change the image tag's "src" attribute to the file's name.) This new
image should not end up being significantly bigger or smaller than the original one
shown here. So, if this new image's size is too big or too small, then you can use the
image tag's "width" and "height" attributes to adjust the size or you can do so with a
graphics program. [5 points]
4. To this new hotel image, apply a non-solid border of your choice (such as ridge,
inset, outset, double, dashed, or dotted) using at least 3 pixels width and an
appropriate border color. Also, apply good sized left margin to this floated hotel image
to be sure that the text to its left never gets close to the image. Also apply some
shadowing to the image (similar to but not exactly like what was done to the CSS
Missing Manual textbook in part 3). [6 points]
5. Write a new style rule to format the image's caption (see the "figcaption" tag) so
that this text below the image ("Our beloved Hotel") is centered, bold, and 85% of the
font size it currently is. [6 points]
6. Change all of the backgrounds in the style sheet to colors and/or background
images that better fit your chosen theme. Adjust foreground (text) color settings too
as needed so that the text is easily readable (maintain a high degree of contrast
between text and background). You can also use the "opacity" property to help you
maintain proper contrast as needed. You must use at least 2 background images for
this purpose somewhere on the page. [6 points]
7. Adjust the page's given fonts to something more appropriate to your own theme.
Use at least one "Web font" that matches your theme for this purpose. As a guide to
using your own web fonts, see this class handout: " Embedding Fonts Using CSS3's
@Fontface ". Note that although this handout talks about using two Web fonts, you
are only required to use one for this assignment. [6 points]
8. Using a selector of "#main ul li", and the "list-style-image" property (or the
background-image property), assign a graphical image to replace the standard bullet
for the existing list in the main portion of the page (above the testimonials section.)
This graphical bullet image must match your hotel theme in shape and/or in color. The
image should be very small -- it should not be taller than a line of text is, so no more
than about 10-15 pixels in height. [6 points]
Note that we are trying to affect the "ul" in the "main" area without affecting the "ul"
in the "nav" area (the links in the nav bar area are part of an unordered list too.)
Since each "ul" needs different formatting, we are using "#main" and "#nav" in front
of those descendant selectors to target just the list we want to be affected.
9. Under the "Our Images" heading (just above the footer), replace the existing text
with a brief note about each image you used on this page. Indicate where and how
you got it or created or modified it. For example, "Hotel image obtained from
www.motel6.com then modified in Photoshop" or "Clown background image obtained
from www.clownsrus.com using Google image search on 'clown riding Hot Wheels
car'!" or "Spiderman bullet image obtained within Word using clip-art search on
'spider web' then resized in Word". [3 points]
10. Make any other changes you like within the CSS style sheet as suggested by some
of the existing comments within the style sheet.

After making the above list of modifications and then validating both your HTML and
your CSS, you are ready to submit your work, as described in the section below.

Lastly: submit your work into Canvas

1. Double check that your set of files and folders are all working correctly. To
do so, you should locate the assignment main folder's "index.html" page
(inside the outer "YourName-css-a3" folder) and open this page in the
browser. Then click on the links to each assignment part to display your
assignment work. Your completed assignment pages should display for all 4 parts. If
that doesn't work, you may have files that are not named correctly or not located
within the correct folders. Double check the filenames against the instructions above
for whatever part isn't working.

2. Modify that outer "index.html" page's code to replace "Your name" with
your own actual name in the "title" and "h1" heading. Rename the
"YourName-css-a3" folder name by replacing "YourName" with your own
name (no spaces in the folder name). The result should be a folder named
"JoeStudent-css-a3" where your own name is in place of Joe Student.

3. Once all of your files and folders are working correctly, take the outer
"YourName-css-a3" folder and create a zipped archive of it -- from within
Windows Explorer, right click that folder and choose "send to compressed (zipped)
folder". Change that zip file's name to include your own last name (as
needed). Then log in to Canvas, go to the Assignment 3 page, and attach this
zip file and submit it as your assignment. I will be unzipping it and working with
those files and folders when grading it. (So, you don’t need to do any screen shots or
code pastings because the grading will involve your actual files.)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Margins, Padding, Borders, and Backgrounds</title>
<link rel="stylesheet" href="main.css">
<style>

/* A3P2 New Styles by Joe Student */

body {
max-width: 900px;
}

#banner img {
width: 900px;
}
.sidebar {
border-left: 3px solid rgb(252, 101, 18);
margin-left: 1.5cm;
}
p {
margin-left: 1cm;
}
.sidebar p {
margin-left: 0;
}
footer {
margin-top: 1.5cm;
text-align: center;
font-size: 80%;
line-height: 1.15;
padding-bottom: 0;
}
</style>
</head>

<body id="article">
<div id="banner"><img src="images/banner.png" width="760" height="198" alt="CSS: The
Missing Manual">
</div>

<h1>The Amazing World of CSS</h1>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. </p>
<div class="sidebar">
 <h2>NOTE</h2>
<p class="note">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt. Neque porro quisquam est.</p>
</div>
<h2>Who Knew Kim Le Had Such Power?</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores.</p>

<h2>Not Me!</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. </p>
<h2>Me Neither!</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam.</p>
<footer>Copyright 2015, The Lorem Ipsum Corporation</footer>
</body>
</html>

/* reset browser styles */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
h1 {
font-size: 2.75cm;
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: normal;
text-align: center;
letter-spacing: 1px;
color: rgb(133, 161, 16);
text-transform: uppercase;
background-color: rgb(226, 235, 180);
padding: 5px 15px 2px 15px;
margin: 0 -15px 20px -15px;
}
h2 {
font-size: 1.5cm;
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
color: rgb(249, 107, 24);
border-top: 2px dotted rgb(141, 165, 22);
border-bottom: 2px dotted rgb(141, 165, 22);
padding-top: 5px;
padding-bottom: 5px;
margin: 15px 0 5px 0;
overflow: hidden;
}
.sidebar {
width: 30%;
float: right;
margin: 10px;
background-color: rgb(250, 235, 199);
padding: 10px 20px;
border: 1px dotted rgb(252, 101, 18);
border-top: 20px solid rgb(252, 101, 18);
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0,0,0,.5);
}
.sidebar h2 {
border: none;
margin-top: 0;
padding: 0;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em;
list-style: square;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset browser styles */

html {
background-color: rgb(253, 248, 171);
}

body {
background-color: rgb(255, 255, 255);
border: 3px solid rgb(75, 75, 75);
box-shadow: 0 0 15px 5px rgba(44, 82, 100, .75);
max-width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 15px;
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Background Images</title>
<link href="styles.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="wrapper">
<div class="banner">
<h1>CSS: The Missing Manual</h1>
</div>
<div class="main">
<h2>Lorem Ipsum Dolor Sat</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. </p>
<figure id="bookfig">
<img src="images/textbook.png" width="126" height="163" alt="CSS textbook" />
 <figcaption>RCC's beloved textbook for CIS-72B class.</figcaption>
</figure>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam,
nisi ut aliquid ex ea commodi consequatur? </p>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Nisi Ut Aliquid</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. </p>
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum
qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
<div class="announcement">
<h2>Announcements</h2>
<ul>
<li>Lorem Ipsum Dolor Sat</li>
<li>Quis nostrum exercitationem ullam</li>
<li>Eius modi tempora incidunt</li>
<li>Quis autem vel eum iure reprehenderit</li>
<li> Sed quia non numquam eius modi tempora incidu</li>
<li>Nemo enim ipsam voluptate</li>

</ul>
</div>
<div class="copyright">
<p>Copyright 2015, Kim Le Corporation</p>
</div>
</div>
</body>
</html>

/* reset browser styles */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.2;
}
ol {
padding-left: 1.4em;
list-style: decimal;
}
ul {
padding-left: 1.4em;
list-style: square;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset browser styles */

.wrapper {
width: 960px;
margin-right: auto;
margin-left: auto;
overflow: hidden; /* contain float */
}

.main {
float: right;
width: 565px;
margin-right: 15px;
padding-top: 25px;
}

.announcement {
margin-right: 600px;
margin-left: 20px;

}
.copyright {
clear: both;
font: bold 12px Tahoma, Geneva, sans-serif;
color: #65747E;
padding: 5px;
margin: 0 15px;
border: 1px dotted #98AFBE;
border-left: none;
border-right: none;
}

.banner h1 {
font: normal 48px Georgia, "Times New Roman", Times, serif;
text-align: right;
color: #272D32;
}

.main h2 {
font: 24px Tahoma, Geneva, sans-serif;
margin-bottom: 15px;
font-family: Tahoma, Geneva, sans-serif;
}
.main p {
font: 14px Tahoma, Geneva, sans-serif;
color: #323A3F;
margin-bottom: 20px;
font-family: Tahoma, Geneva, sans-serif;
}

.announcement h2 {
font: italic bold normal 20px Georgia, "Times New Roman", Times, serif;
text-align: center;
color: #323A3F;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 18px;
}
.announcement ul {
font: 14px Tahoma, Geneva, sans-serif;
}

/* add your styles here */

html {
height: 100%;
background-image: linear-gradient(to bottom, rgb(176, 194, 213), white 700px);
}

.wrapper {
 background-color: #FFF;
background-image: url(images/bg_main.jpg);
background-position: left top;
background-repeat: no-repeat;
}
.banner {
margin-top: 48px;
}
.announcement {
background: url(images/scroll_top.jpg) no-repeat center top,
url(images/scroll_top.jpg) no-repeat center bottom,
url(images/scroll_middle.jpg) repeat-y center top;
padding: 70px 0 60px 0;
margin-top: 115px;
}
.announcement li {
list-style: none;
background-image: url(images/bullet.png);
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 25px;
margin-bottom: 10px;
margin-left: 30px;
margin-right: 40px;
}
.main h2 {
background-image: url(images/underline.png);
background-repeat: no-repeat;
background-position: left bottom;
padding-bottom: 7px;
}
.announcement li {
list-style: none;
background-image: url(images/bullet.png);
background-repeat: no-repeat;
background-position: 0 4px;
padding-left: 25px;
margin-bottom: 10px;
}
#bookfig {
width: 134px;
float: right;
margin-left: 10px;
}
#bookfig img {
padding: 3px;
border: 1px solid black;
background-color: #DDF;
box-shadow: 3px 3px 6px rgba(0, 0, 150,.5);
}
#bookfig figcaption {
font: 75% Arial, sans-serif;
text-align: center;
}

#hotelfig { /* add borders and margin to your hotel image here */

width: 134px;
float: right;
margin-left: 10px;
}
#hotelfig img {
padding: 3px;
border: 1px solid pink;
background-color: #DDF;
box-shadow: 3px 3px 6px rgba(0, 0, 150,.5);
}
#hotelfig figcaption {
font: 75% Arial, sans-serif;
text-align: center;
}