Project Instructions

Review the Animal Trading Cards project rubric.

1. Download and unzip fend-animal-trading-cards-master.zip. Inside, you’ll find card.html, styles.css, placeholder.png, and the design-prototype.png.

2. Next, open card.html and replace the placeholder image and information with your favorite animal’s image and information. For the image, you will want to use an image with a width of 300 pixels. If your image is larger, you can set the image’s width to 300 pixels in your CSS, but be aware that your image might end up squished or distorted. Later, we’ll talk about how you can fix this problem using responsive images. Also, don’t forget to change the image’s alt attribute to the name of your animal. So, alt="name-of-your-animal"` should be replaced with the actual name of your animal.

3. Once you’ve added your favorite animal’s image and information, add the proper CSS to styles.css to recreate the design-prototype.png by applying the style rules in step 4. You’ll need to modify card.html to include attributes and use selectors to specify the elements you want to style. Also, make sure to link to your stylesheet in card.html or else your CSS will not be applied to your webpage.

4. The CSS should apply these styles to match the design prototype:

   • italicized text for the animal’s interesting fact
   • bolded labels for the animal’s list items (e.g. ‘Habitat’)
   • no dots for the animal’s list items
   • border around the animal’s name, image, and information
   • border around the animal’s information
   • spacing between the animal’s name, image, and information (you will need to use the property padding)