Furniture Emporium

A card is a common design pattern in web development. It consists of a single container that groups together content, such as thumbnails, supporting text, and buttons, that is all related to a single topic. A use-case that you might already be familiar with is the product card, which displays information about a product for an online store.

In this workshop, you will be working on the product cards for a fictional furniture store named Furniture Emporium.

Getting Started

1. Create a new repository under your GitHub account using this one as a template.
2. Clone your repository down to your local machine.
3. Open the cloned folder with VS Code.
4. Live serve index.html to see an unstyled page for Furniture Emporium.

Instructions

Your task is to style the given index.html file so that the product cards are visually distinct from the rest of the page. You are free to style the cards however you'd like, as long as your submission meets the following requirements. You may use the provided screenshot above as a reference for one possible solution, but be creative and make it your own!

1. CSS rules are written in index.css and linked to index.html.
2. At least one CSS rule uses a type selector.
3. At least one class has been added to at least one tag in index.html. The class name describes the semantic purpose of that element.
4. At least one CSS rule uses a class selector.
5. A combination of margin and padding have been used for visual spacing between elements.
6. The product cards have a different background color from the rest of the page.
7. The add-to-cart buttons have a different background color from the rest of the page.
8. Properties, such as family, color, or size, of the text inside the product cards have been changed.
9. The contrast ratios of all text on the page pass the WCAG AA standards.

Extensions

If you finish early, consider the following:

1. Style the "Add to cart" buttons so that the cursor and background color change when a user hovers over the button.
2. Check your CSS for any repeated declarations. Is it possible to merge rules or apply the same declarations to multiple selectors?

Submission

Please submit the link to your public GitHub repository.