anghelom / pet-store

[Beginner] HTML, CSS - Basics of HTML, HTML5, and CSS Project

Welcome To The Pet Adoption Store!

You will be creating a web app that helps pets find homes!

Before you begin

Please create a mockup of your website for an instructor to approve :)

Set-up your files

Please create the following files:

• index.html
• styles.css
• README.md

Create a link tag for your CSS stylesheet in your html document.

HTML

1. Create a header containing the name of your pet store using a header tag and set the value of the id attribute to store-name.

2. Create a container for all of your pet profiles using a div tag and set the value of the id attribute to all-pets.

3. Create at least 5 individual pet profiles using a div tag and set the value of the class attribute to individual-pet for each profile.

4. Find five images of your five different pets on the internet.

5. For each pet profile:

• Create a Header containing the pet's name using a header tag smaller than h1.
• Create a profile photo for each pet using an image tag and set the value of the source attribute to the image's URL.
• Create a description for each pet using a paragraph tag.

Stretch Goals Wouldn't it be cool if each profile could make a sound? Add an audio tag to each pet profile.

CSS

1. Set the background color of the body using the element selector.

2. Change the font color of the header using the id selector.

3. Change the styles of the pet profiles using the class selector.

• Align all the pet profiles and their content to the center of their container element.
• Set all pet profile photos to the same size.
• Align all pet profile text to the center.

4. Modify your elements with these style attributes:

• background-color
• color
• font-size
• font-family
• height
• text-align
• width

Stretch Goals Use at least 5 different style attributes that we did not mention!