For this lab, you'll be adding images and even more CSS to further enhance the look of your insider's guide page. The instructions will increasingly become more vague as I expect you to start making good, informed design decisions based on what we've discussed and for you to rely on others' opinions of what is readable.
bodyelement to zero. Set the margin for all
sectionelements to 8 pixels.
sectionthat starts with a
headerelement containing an
h2element with the text "Images"
figureelement and use
figcaptionto describe each photo's content.
headerto make it completely visible below the header before the user scrolls down the page.
h1elements to have:
h2elements to have:
header, but with either a lighter or darker shade
asidethat causes it to appear to the right of the "Facts" list. Hint: Remember that float requires the element to be moved in the HTML to make it appear in the desired spot, but keeps semantics in mind as you consider where to place it.
blockquoteto the right
figureis a block element). Use CSS positioning to line up the three figure elements horizontally. Hints:
figcaptionelements to have:
footerlook like your
header. It should NOT be fixed like the header, though.
HTML and CSS should be properly formatted following their respective coding conventions discussed in class.
Be sure to check the live URL at
https://dci110w19.github.io/insiders-YOURUSERNAME (e.g. "https://dci110w19.github.io/insiders-mickelj") to see that it is completely uploaded and working.
The final result should look similar to this:
You will be graded on:
The lab will begin with a full score of 75 points and deductions will be made according to the amount and severity of errors.