The goal of this exercise is to practice columns, floating and list styling.
Due Date and Time
Exercise 5 is due by 5:59pm on February 14th, 2019. I will disable submission at the start of class.
Instructions
Setup
- Download the exercise files from the Box Folder named CS0134-E5-<username> that I shared with you.
- Unzip and copy the ‘CS0134-E5-<username>’ folder onto your flash drive.
- Open index.html and style.css in Notepad++.
Goals
Each goal is worth 1 point.
Place all style rules in the style.css file.
- Rearrange the HTML in index.html so that the ul element is a child of an aside element. The aside element must be a sibling of hte main element.
- Remove <h2>Animal Categories</h2>
- Float the paw print image to the left
- Add a 20px right margin to the paw print image
- Remove the bullets from the li elements
- Set the left padding for the ul element to 0
- Float the aside element to the left
- Float the main element to the right
- Set the width of the aside element to 170px
- Set the width of the main element to 570px
- Set the padding for both the main and aside elements to 0 for the top and bottom and 15px for the left and right
- Clear the floating in both directions for the footer element
Results
Your site should look similar to the following.
How to Submit Your Work
Upload your index.html and style.css file to the ‘CS0134-E5-<username>’ Box folder.
Note: When you want to upload a new version of one of your exercise files, click on the file in box and select “Upload New Version”.
I highly recommend that each time you work on this or any other exercise, that you upload your files to Box even if you are not done with the exercise. In this way, if something happens before the submission deadline that keeps you from uploading the finished exercise, there is still something to be graded.