Animal-Trading-Cards

Implement a web page using HTML & CSS

Task

Use what you learned about HTML and CSS to convert an initial design into a functional web page!

Instructions

You will be provided with the following files:

card.html styles.css placeholder.png design-prototype.jpg Required Changes Make the following changes to card.html

Change the heading to the name of your favorite animal Replace the placeholder image with your favorite animal's image. Also, 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.

Note: 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.

Edit the interesting fact paragraph Edit the key characteristics Edit the informational paragraph Style the Page Try to recreate the design-prototype.jpg.

You’ll need to modify card.html to include attributes and use selectors to specify the elements you want to style.

The CSS must apply these styles to match the design prototype:

link your stylesheet styles.css to the HTML or else your CSS will not be applied. give the interesting facts

a CSS class of animal-info italicize the text for the animal's interesting fact bold the labels for the animal's list items (e.g. 'Habitat') remove dots from the animal's list items add a border around the animal's name, image, and information add a border around the animal's information add spacing between the animal's name, image, and information (you will need to use the property padding)