Homework 6: Responsive Design

20 points

For this assignment you will modify your portfolio page to use responsive design. Copy your portfolio directory to portfolio3. Make your responsive design changes there.

Your portfolio should behave as follows:

  1. Make your content div expandable, with a minimum and maximum width of 400 and 800 pts.
  2. Give your header and footer divs a fixed height.
  3. Give your menu div a fixed width [vertical] or height [horizontal].
  4. Make sure all your divs have a suitable amount of padding.
  5. When the window is >=768 pixels wide, use a full-width presentation, with a vertical menu in a left column and a large floating graphic in the content section of the home page.
  6. When the window is >480 but <768, and make the image(s) in the content section half the size.
  7. When the window is <=480 pixels wide, move the menu to a horizontal div between the header and content divs. Hide the image.
  8. Any other changes needed to make your responsive design make sense at the three different size points.
  9. Also add a drop shadow and a box with rounded corners somewhere on the home page.
  10. Make your image ease in, and make it rotate when the mouse is over it.

Turn In:

I'll check your responsive portfolio at the URL abc123.calvincs.com/~abc123/portfolio3