I’m stuck on a Html / CSS question and need an explanation.
WILL PROVIDE EVERYTHING NEEDED
Download the zip file marylambsp20.zip, and extract it to your laptop it250 folder. Once you extract it
you should have a folder named marylamb.
You are going to build and style a webpage loosely based on the page portrayed in the image
“mary_lamb_mockup.jpg” contained within the folder (which means I don’t expect it to be EXACT).
In the provided index.html file:
Familiarize yourself with the html contents and the div tag and id placements.
1. Fill in your name, date and purpose (“Exam2” would be sufficient)
2. Create a link to the provided mary_lamb.css in the html file (your links should be relative to the
file location, so, as long as all of your files are in the marylamb folder, a link to another file
WITHIN that folder should just be the filename (e.g., mary_lamb.css)
3. Insert the lamb_photo.jpg and ornament.gif images where indicated, being sure to include
alternate text (for the ornament.gif, you can use “decorative image” as the alt text).
4. Finish setting up the navigation bar within the provided <nav> tags, using an unordered list, and
entering the following 4 list items:
o “Hear the Song”, with a hyperlink to “#”
o “See more Lamb Pictures”, with a hyperlink to “#”
o “More Nursery Rhymes”, with a hyperlink to “#” and
o “Wikipedia page”, with a hyperlink to the website address of :
Save your page!
In the provided mary_lamb.css
1. Style the html window with a background color of “ivory”.
2. Style the body to a width of 80%, center the body on the window (using auto margins for left and
right). Set font to Georgia, with an alternate of Times New Roman and then serif. Use box sizing of
3. Set your h1 tags to a font size of 30px, normal font weight, and a font color of #7B8A45.
Set line height to 36px, 0px margins, 18px padding on the bottom.
4. Set your h2 tags to a font size of 12px and a normal font weight, font color of #000000, and italics.
The line height should be 18px, margins of 0px, and bottom padding of 12px.
5. Your paragraph (p) tags should use a font size of 12px, normal font-weight, and color should be
#000000. The line height is 18px., 0px margins and bottom padding of 12px.
6. The outer container has 0px margins and 0px padding. The width of the outer container should be
830px wide and 700px high. We want this outer container to be centered on the page, so again use
the auto setting of margin-left and margin-right.
Place a solid border of 1px width around entire container in color #000000. Apply the background
color of white, and the background image running_lamb.gif but set it to only repeat across the x
axis, with a horizontal position left, and a vertical position of 36 (hint: use background-position).
7. Your photo container needs a width of 353px, a top margin of 40px, right margin of 10px, bottom
margin of 0px and left margin of 10px. 0px padding, float left, and set the height to 440px.
8. The middle container needs a width of 150px; top margin 84px, margin right and bottom of 0px, and
margin left 30px. Padding of 0px, float left, height auto. Center align the text.
9. The lyrics container will have margins of 70px top, 12px right, 0px bottom and 0px left.
Padding of 0px, float right, and height auto.
10. The nav bar you created in the index file should be styled as follows: each item in the nav list should
display block, float left, have a width of 25% and a line height of 50px.
11. All hyperlinks within the nav should display block, and have no text decoration.
12. Unvisited and visited links in the nav should use font Verdana size 12px and colors darkblue
(unvisited links) and slategray (visited links)
13. If you have trouble with the quotation marks in the nursery rhyme, replace the quote characters
with the following codes:
you want double left quotation marks
wherever you want double right quotation marks
wherever you want single left quotation marks
wherever you want single right quotation marks
The page should look pretty close to the mockup. You can make additional modifications if you’d like,
but if you do please include an explanation in the comment area of the Dropbox explaining the changes
you made beyond those listed here – you want to get credit for them, not lose credit for not doing
something the way I asked!
When you’ve completed the page, test it in Chrome.
Zip the entire “marylamb” folder and place in the Exam2 Dropbox. Open the index.htm page and take a
screenshot of how the page displays. Save that screenshot and upload it to the Exam2 dropbox, as well.
I cannot help you troubleshoot problems you have with this – it is an exam. I can clarify instructions, just
can’t tell you how to do it. If I identify any problems in the instructions, I will email you the necessary