html-css-test-1.md

HTML & CSS Test - 1

Create a single web page

Resources:

Colors: https://www.december.com/html/spec/color4.html W3Schools: https://www.w3schools.com/

Why is is not working?

• Did I forget something?
• Look for syntax errors.
• Are the tags opened and closed?
• Am I using the correct tag?
• What did I expect to happen? Describe out loud what should be happening. Think about the process of how that happens.
• Do small changes and check that it is working in your browser.
• When was it working last? What did I add since then?
• Walk away and come back to it in 5 minutes.
• Use the web to search for anything you can't figure out on your own.

---

Directions

1. Container

Create a div to contain all content

Put all content in a single div with a background color of your choice, a width of 80%, a 10px border or your choice, no padding at the top, 50px padding on the left & right, 10px padding on the bottom, a margin of 25px on the top and bottom, and a margin of 100px on the left and right.

2. Main Heading

Create a centered h1 heading "hamsters are adorable" with a color of your choice.

3. Images

Add these six images with links to their source that open in a new page. Have the width of the images be 175px wide.

1. image-url: https://camo.githubusercontent.com/0b4462a4d6b81f3c16845a64bb02b938cc0b689c/68747470733a2f2f7065742d75706c6f6164732e61646f7074617065742e636f6d2f352f372f322f3238343835343734382e6a7067
   link: https://camo.githubusercontent.com/0b4462a4d6b81f3c16845a64bb02b938cc0b689c/68747470733a2f2f7065742d75706c6f6164732e61646f7074617065742e636f6d2f352f372f322f3238343835343734382e6a7067" target="_blank

2. image: https://i.pinimg.com/564x/8a/f9/fe/8af9fe24cae357db19f7c92a99396da3.jpg
   link: https://www.pinterest.com/pin/528750812480225752/

3. image: https://media.giphy.com/media/Jq80I3ZiZh77sqhsUV/giphy.gif
   link: https://tenor.com/view/wash-your-hands-hamster-clean-pet-gif-17376300

4. image: https://camo.githubusercontent.com/f90e5fe7a869454be9e145ac415f78dcaeb0d346/68747470733a2f2f6973332d73736c2e6d7a7374617469632e636f6d2f696d6167652f7468756d622f507572706c65372f76342f65302f30332f38642f65303033386434632d323263632d306434642d383666662d6231306337633737333937322f6d7a6c2e797868766e726b712e706e672f3230307830772e6a7067
   link: https://camo.githubusercontent.com/f90e5fe7a869454be9e145ac415f78dcaeb0d346/68747470733a2f2f6973332d73736c2e6d7a7374617469632e636f6d2f696d6167652f7468756d622f507572706c65372f76342f65302f30332f38642f65303033386434632d323263632d306434642d383666662d6231306337633737333937322f6d7a6c2e797868766e726b712e706e672f3230307830772e6a7067

5. image: https://camo.githubusercontent.com/f9eb9d7278524b71b70efdef0dc8de0ae845e68a/68747470733a2f2f692e70696e696d672e636f6d2f323336782f34312f32612f32302f34313261323035666165303639383530653533366134393864343861656532382e6a7067
   link: https://camo.githubusercontent.com/7d223414467334ab32e393a1601f52645df2e528/68747470733a2f2f7468756d62732e6766796361742e636f6d2f496e73697374656e74476976696e67436869636b2d6d61782d316d622e676966

6. image: https://camo.githubusercontent.com/7d223414467334ab32e393a1601f52645df2e528/68747470733a2f2f7468756d62732e6766796361742e636f6d2f496e73697374656e74476976696e67436869636b2d6d61782d316d622e676966
   link: https://camo.githubusercontent.com/7d223414467334ab32e393a1601f52645df2e528/68747470733a2f2f7468756d62732e6766796361742e636f6d2f496e73697374656e74476976696e67436869636b2d6d61782d316d622e676966

4. Secondary heading

Create a heading "hamster facts" with and h2 heading with the text color of your choice and the font size 48px

5. Ordered list

Create an ordered list of these 10 hamster facts using the font-family Arial, make the size 24px and text color of your choice

• Hamsters are “crepuscular”, which means they are most active during the twilight hours.
• The largest type of hamster can grow to 13 inches (33cm) long.
• The smallest type of hamster is just 2 to 4 inches (5 to 10cm) long.
• Hamsters can store food in their cheeks, then eat it later!
• There are five different hamster species often kept as pets, Roborovski, Syrian, Campbell’s Dwarf, Chinese and Winter White Russian Dwarf hamsters.
• Hamsters are omnivores. In the wild, hamsters have been known to hunt and eat insects.
• Hamsters can live for up to 4 years. The average hamster life span is around 2 to 2.5 years.
• Hamsters are born blind. Hamster babies (known as ‘pups’) cannot open their eyes until around two weeks after birth.
• Hamster’s incisor teeth never stop growing.
• Hamsters can have up to 24 babies at a time.

6. Horizontal Rule

Add a horizontal rule tag to separate the top section from the bottom section

7. Use a paragraph as a footer

Add the following in a paragraph tag with a pipe between each.

Use the font family Arial, make the size 14px, add a 50px margin at the top, and center it in the page. Each item should be a link that opens in another page.

• Hamster care - https://www.aspca.org/sites/default/files/upload/images/hamster_edu.pdf
• Handling a hamster - https://petcentral.chewy.com/how-to-hold-and-handle-a-hamster/#:~:text=Place%20a%20hand%20in%20the,it%20as%20long%20as%20possible.
• Hamster habits - https://ypte.org.uk/factsheets/hamster/hamster-habits
• Hamster diet - https://www.pdsa.org.uk/taking-care-of-your-pet/looking-after-your-pet/small-pets/your-hamsters-diet
• Hamster jokes - https://furrywizard.com/hamster-jokes/

7. BONUS

Add another HTML element & CSS style of your choice.