/ASSIGNMENT-product-cards

Primary LanguageHTML

Product Cards

Issue tickets have been created so that you can track your progress. As you complete a ticket, close it out.

Study Group Requirements

  • You should be using flexbox.
  • You may use Bootstrap for Card Components
  • Decide as a team how many branches you will need and what will happen on each branch (remember one feature per branch).

Setup

  • While in ~/workspace/foundations/exercises, clone this repo
  • Create a setup branch and push up the usual stuff

Requirements

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.

  1. Cards should be 3 per row.
  2. Each product should contain a header element that, itself, contains an h2 element where the product's title will be written.
  3. The first section should contain three child block elements.
    1. The first element contains the product image.
    2. The second element contains the product description.
    3. The third element contains the product availability (e.g. "Available" or "Not Available")
  4. The second section contains product specifications.
    1. This section should have a header containing the word "Specifications"
    2. This section should contain two block elements
    3. The first block element specifies the size.
    4. The second block element specifies the weight.
    5. This section should contain a footer.
    6. The footer contains text stating when the product specifications become invalid.
  5. The third section contains the product pricing.
    1. This section should contain a header.
    2. This section should contain three block elements.
    3. Each block element contains information about the price for different quantities.

Additional style requirements

  1. The card title has a solid 1px border that is lightblue.
  2. The title and product image are centered.
  3. Notice that the text for the description in the image is justified.
  4. The text for the product specification details and pricing details is bold.
  5. The availability element extends the full width of the card, with a dark grey background and yellow text.

Visual example

Here's an image that shows how the cards should appear. This visual example is a wireframe, which means it is only an example of layout. Style your cards based on the requirements and then use your own judgment after doing so. All the data needs to be on the cards.

Static Web Product Cards Example

Challenges

Challenge 1: Switch up the font!

  1. Pick font(s) from Google Font and include them in your project. You can use them wherever you want, but uh, don't make it too ugly.

Challenge 2: Sold out.

  1. For items that are no longer available, place this image over top of the product card. Note this is complex positioning, it is going to challenge you.. What I mean by "over the product card" is Sold Out

Challenge 3: Display responsively on any size screen!

  1. Use CSS to conditionally apply styles depending on the width of the screen! (or the size of the browser window) You can do this using a fancy thing called media queries. You can find a good example of how to do that here.