The Product Cards exercise from "1-the-static-web" milestone
To use HTML and CSS only to create a product grid.
Your task is to build a grid of cards for a company's products. Here are the requirements for the basic structure of the cards.
- Each card should be an article.
- Each card should take up 30% of the width of the browser window.
- Each product should contain a header element that, itself, contains an h2 element where the product's title will be written.
- Each product should have three sections.
- The first section should contain three child block elements.
- The first element contains the product image.
- The second element contains the product description.
- The third element contains the product availability (e.g. "Available" or "Not Available")
- The second section contains product specifications.
- This section should have a header containing the word "Specifications"
- This section should contain two block elements
- The first block element specifies the size.
- The second block element specifies the weight.
- This section should contain a footer.
- The footer contains text stating when the product specifications become invalid.
- The third section contains the product pricing.
- This section should contain a header.
- This section should contain three block elements.
- Each block element contains information about the price for different quantities.
- The entire card has a solid 1px border that is lightblue.
- The card title has a dotted 1px border that is lightgray.
- The title and product image are centered.
- Notice that the text for the description in the image is justified.
- The text for the product specification details and pricing details is bold.
- The availability element extends the full width of the card, with a dark grey background and yellow text.
Here's an image that shows how the cards should appear. https://github.com/nashville-software-school/ux-developer-milestones/blob/master/1-the-static-web/learning-materials/SW_HTML_CSS_exercise.png Static Web Product Cards Example