Skip to content

week19

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

week19

README.md

Week 19 - Dynamic CSS

Here are all the challenges for this week. Take the code from the challenge<#>.html and try to get it to match as closely as possible with the challenge<#>-res.html page.

Use CSS as much as possible. The only time you should be modifying the HTML is to add an id or class. The contents and layout should never be changed.

Challenge 1

  • Center the heading.
  • Make all links turn green when you hover over them.
  • Make all visited links turn yellow.
  • Make the "cool-buttons" look nicer (subjective).
  • Make the "cool-buttons" turn purple when you hover over them.
  • Make the form more visually appealing by adding some space between the inputs
  • Make an disabled buttons brown.
  • Make the text boxes' background gray when the user selects them.

Challenge 2

Container 1:

  • Make every other box green.
  • Make every 4th box yellow.

Container 2:

  • Make every other box green.
  • Make the 1st paragraph have a font-size of 30pt.
  • Make the last box purple.
  • Add a spade to the end of the last paragraph (♠/♠)

Container 3:

  • Make every odd-numbered box pink when the device has a width of at least 992px.
  • When the device has a width of at least 992px, set the last box to fill the rest of the space using flex-grow.
  • Make every even-numbered box change to green when you hover over it.
  • Add a brown box with the same height and width as the rest of the boxes to the first box WITHOUT MODIFYING THE HTML.

Container 4:

  • When the devices has a width of at least 1200px, make the boxes 250px by 250px.
  • Change the selection background of the last paragraph to green.

Challenge 3

  • Change the CSS to use transformations instead of positional properties.
  • Scale box1 to be 1.5x.
  • Rotate the 3rd box 90 degrees.

Challenge 4

  • Make every 3rd box smoothly ease to green over 2s when you hover over it.
  • Make the 5th box smoothly ease to double its size when you hover over it.
  • Make the 5th box smoothly change to black over 6s linearly when you hover over it.
  • Make the 10th box smoothly ease to a 67 degree rotation when you hover over it.

Challenge 5

  • Make box1 turn from green to yellow as it moves back and forth across the screen 5 times.
  • Make box2 grow to double its size and then back as it moves back and forth across the screen forever.
  • Make box3 rotate infinitely while changing from red to yellow to green.