Skip to content

Latest commit

 

History

History
36 lines (27 loc) · 1.32 KB

super-hero-css.md

File metadata and controls

36 lines (27 loc) · 1.32 KB

Super-hero CSS

Copy the HTML from this CodePen pen.

{% embed url="https://codepen.io/annechinn/pen/eYgXOpw?editors=1000" %}

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.
  • 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

{% embed url="https://imagecolorpicker.com/en" %}