wats1010-css

This is the source repository for WATS1010: Introduction to Web Development Basic CSS assignment. This assignment is designed to help you practice your use of common CSS properties and patterns.

Please refer to the resources page within the course for additional information about how to complete the assignment and resources about CSS.

Requirements

To complete this assignment, you must write styles to create an elegant visual presentation for the poem "Kubla Khan" by Samuel Taylor Coleridge. Your goal is to create an elegant and appealing presentation for the information contained in the index.html file. (Please note: You do not need to edit the HTML file to complete this assignment.)

Be sure to complete all of the following steps:

1. Create styles that help visually group the information on the page.
2. Remove the bullets on lists where bullets do not help with readability.
3. Use at least one background image somewhere on the page.
4. Use two fonts on the page: One font for headings and another font for body text. (Do not use MORE than two fonts on the page.)
5. Use margin and padding to control spacing on the page.
6. Use line-height to make the text easily readable.
7. Use background-color and color to alter the appearance of a section.
8. Size the image that is included on the page appropriately.

Resources Provided

This repository contains the index.html file, a starter styles.css file and and images directory with some images for you to use. One of the images is included in the page with an <img> tag, and should be styled as content on the page. The remaining images can be used as background images in style definitions. You do not need to use all of the images that are provided. All of the provided resources are cited on the index.html page. You do not need to remove unused resources. (You do not need to edit the index.html file.)

Stretch Goals

If you want to take your styling further, you might try some of the following challenges:

• Use first-letter to style the poem in a fancy way.
• Try to float the aside.
• Try to make the social-links list go horizontal.
• Use opacity in a background-color definition by using rgba color definition.
• Give something rounded corners using border-radius.