Use what you learned about HTML and CSS to convert an initial design into a functional web page!
- HTML is used to structure your site
- CSS is used for styling
You will be provided with the following files:
- card.html
- styles.css
- placeholder.png
- design-prototype.jpg
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
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 <div> 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)