• Download lab5challenge.html & lab5style.css and save them to your desktop.
• Change the name of the html file to lab5challenge.html and the css file to lab5style.css.
• Open and read the html and css files to understand the layout and the design. It is a two column layout by using float and clear properties.
• By using the media query, change the two-column layout to a one-column layout for screens less than 750px in width, so that the one column layout has the following properties:

1. The navigation bar (nav tag) has to change from a vertical to a horizontal navigation bar.
2. The horizontal navigation bar will be underneath the header and on top of the main content.
3. Change the background-color of the navigation items from blue to the background-color of the navigation column.
4. Add another media query to disappear the div with id="food" when the width of the screen is less than 500px.
5. At the end, you need to take care of small details and try to fix properties like margin, padding, border ... if they made the page inappropriate.

lab5style.css

* {margin:0; padding:0; box-sizing: border-box;}

body{font-family: Copperplate, "Copperplate Gothic Light",fantasy;}

header {font-size: calc(8px + 2vw); text-align: center; background-color: #8D8741; border-bottom: dotted black; padding: 20px 0; }

.row-body {float: left; width: 100%; background-color: #DAAD86; border-bottom: dotted black;}

.column-nav {float: left; width: 22%; background-color: #DAAD86; }

ul#nav {text-align: center;}

nav li {list-style-type: none; background-color: #659DBD; margin: 10px; text-decoration: none;}

nav a {display: inline-block; padding: 15px 0; text-decoration: none; color: black; font-size: calc(8px + 1vw);}

.column-body {float: left; width: 78%; background-color: #FBEEC1; padding: 2% 5% 2% 5%; border-left: solid black;}

#environment {padding: 2% 0; font-size: calc(5px + 1vw);} #environment h2 {padding: 4px 0;}

#food {padding: 2% 0; font-size: calc(5px + 1vw);} #food h2 {padding: 4px 0;}

#funfacts {padding: 2% 0; font-size: calc(5px + 1vw);} #funfacts h2 {padding: 4px 0;} #funfacts ul {padding-left: 4%;} #funfacts li {padding: 3px;}

footer {clear: both; background-color: #BC986A; text-align: center; padding: 5px; font-size: calc(5px + 1vw);}

footer p {padding: 5px; color: black;}

lab5challenge.html (below)

CHINCHILLAS

Who are they?

• Home
• Films
• Photography

Environment

Chinchillas originally come from South America. Because of hunters, wild chinchillas are almost extinct. However, they are now being kept as domestic pets. Chinchillas hide when they feel threatened, so any habitat must have sufficient hiding space for the chinchilla. Often, PVC pipes are a good option if housing a chinchilla in your home.

Food

Chinchillas eat many different things like pellets, hay, grass, and leafy greens. They also like an occasional treat consisting of dried fruit or sunflower seeds. It is important for them to get enough nutrients in their diet. A pellet-only diet is not sufficient. There must be variety.

Fun Facts

• Chinchillas are very susceptible to heat stroke
• Chinchillas groom themselves through what is called a dust bath
• Chinchillas are prone to dental disease and constipation
• Chinchillas that have good health are normally shy
• Food is really good to entice chinchillas and get them to like you

Kate Wauschek © 2018. All Rights Reserved.