super-hero CSS

Copy the HTML from this CodePen pen.

Make the following style changes

  • give the body a margin of 20px on top and bottom and 40px on left and right sides.

  • set the font-family for the entire web page to "Poppins" as first choice and san-serif as fallback. Poppins is a google font. In the Typography topic there is an explanation of now to include an external font.

  • for all of the sections

    • set a padding of 20px around the content

    • set a margin of 60px on the bottom so there is space between sections

  • first section

    • set the background color to a shade of red close to his costume

    • set the text color to white

    • set the color of the list item text to black and the font weight to a darker shade than default.

  • second section

    • set the background color to a shade of blue close to his costume.

    • set the text color to white

    • set the hover color for the anchor to black

  • third section

    • set the background color to a shade of grey close to his costume

    • set the font-family to use "Georgia" as the first choice

  • image

    • set the width to 100% so that it will be sized to the size of its container

    • create a solid black border 2px wide around each image

Assignment Submission

You can either submit a CodePen url or a netifly url.

Resources

Last updated