# LP0

## Get the Skeleton Files

Directions You can work locally on your machine or you can work on the server.

Server DirectionsIf you have not already gotten the shell and image files, do this to get them. These directions keep it simple and they put everything in the same directory.

$cd public_html$ cp ~cs/data/LP0.zip .
$unzip LP0.zip$ cd LP0
$ls ls five.css four.css index.php one.html rhino.gif three.html two.html five.html four.html jahnke.JPG policastro.JPG three.css two.css$


Local Directions Download LP0.zip. Uncompress and everything will be in a folder named LP0.

Edit the files and do your work.

For Mac/Linux Open a terminal and navigate to your LP0 folder. Then follow the directions above, but you will not need to do the cd .. if you are in the directory containing the LP0 folder.

For Windows Directions are here for zipping and unzipping files.

You have all of the necessary stuff. It will save you annoying typing.

Useful Feature You can click on the LP0 directory shown on the left and download any file or files you need from the page that shows. If you do this, put all of your work in a directory named LP0.

## Turn In Directions

First, directions for the server.

$cd ..$ mv LP0 yourUserNameLP0
$zip -r yourUserNameLP0.zip yourUserNameLP0$ ls


Email me once you have done this and I can fetch your work.

If you are working on your PC Zip your files and you will be able to upload them onto Canvas. If you have trouble with this, attach the files to a single email with subject line LP0.

## Allowable Resources

There will be a Canvas portal for you to upload work. If you have trouble, you can attach all files to an email.

1. Replicate this in a file named one.html. Do not use any styles; this is pure HTML. You will need to learn about blockquote.

2. Replicate this in a file named two.html. Put all of your styles in a file named two.css

3. Replicate this in a file named three.html. Put all of your styles in a file named three.css. When you mouse over the table's cells, the colors invert. The lists' items change color, as specified in the document, when moused over.

4. Replicate this in a file named four.html. Put all of your styles in a file named four.css. This will require you to work with the display property.

• Pro Solution Make the panes disappear when moused over.
• Wimpier Solution Invert the two colors when moused over.

5. Replicate this in a file named five.html. Put all of your styles in a file named five.css.

Here is the ugly feature: As you mouse inside the rectangles, they disappear! This problem requires some ingenuity to bring to full functionality.

Here it is when the mouse is not inside of any rectangles.

Here it is when the mouse is not inside some of the rectangles.

Here it is when the mouse is not inside all of the rectangles.