Tutorial 4 Graphic Design with CSS - Assignment

  1. Create a new folder called hw5. This folder will contain everything you do for this assignment.
  2. Create an html file.
  3. In this html file, create a div with an id of wrapper.
  4. All the CSS for this assignment should be in an external CSS file which is referenced from your html file.
  5. Using CSS, give the wrapper a width, center the wrapper on the page using margin:auto, and give it a background color.
  6. In the web page, but not in the wrapper, tile a background image. You can tile it anyway you like. Since there is no text in this area (outside the wrapper), you don't need to worry about readibility of text against the background image.
  7. Put a figure element in the wrapper area of the page and display an inline image (not a background image) inside the figure element and give it a caption.
  8. Give the figure element rounded corners.
  9. Make the figure element semi-transparent - i.e. with an opacity between 0 and 1.
  10. Put some text in the wrapper area and give it a text shadow.
  11. Give the figure element a box shadow.
  12. Put a div element in the wrapper section of the page and apply a linear or radial gradient to the div.

There is no minimum content requirement for this assignment and you will not be graded on appearance.. It's just designed to give you some practice with these features.

When done, upload your hw5 folder to your myDrive webspace or to the www.nvccitd110 webspace described in my September 19 Canvas announcement. Submit the URL in Canvas as well as the zipped hw5 folder.

Revised: October 20, 2020