marceljones/assignment-product-cards

assignment-product-cards's Issues

Requirements

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. Each card should be a div.
2. Cards should be 3 per row.
3. Each product should contain a header element that, itself, contains an h2 element where the product's title will be written.
4. Each product should have three block level html elements.
5. 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")
6. 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.
7. 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 entire card has a box shadow.
2. The card title has a solid 1px border that is lightblue.
3. The title and product image are centered.
4. Notice that the text for the description in the image is justified.
5. The text for the product specification details and pricing details is bold.
6. The availability element extends the full width of the card, with a dark grey background and yellow text.

Additional style requirements

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

Challenge 4: Display responsively on any size screen!

Challenge 4: 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.

Challenge 3: Sold out.

Challenge 3: 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

Challenge 4: Display responsively on any size screen!

Challenge 4: 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.

Setup

Setup

• While in ~/workspace/foundations/exercises, make a directory called product-cards
• Create a github repository called product-cards and push up a README.md file
• Create a setup branch and push up the usual stuff

Challenge 2: Switch up the font!

Challenge 2: 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 1: Switch up the colors!

Challenge 1: Switch up the colors!

1. Design your application and use some colors that aren't weird or boring.
2. Use a tool called Material Palette and pick 2 colors and you will get a resulting palette. You can click to download and then select "CSS" and you will get a file that looks like this:

/* Palette generated by Material Palette - materialpalette.com/brown/teal */

.dark-primary-color    { background: #5D4037; }
.default-primary-color { background: #795548; }
.light-primary-color   { background: #D7CCC8; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #009688; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #757575; }
.divider-color         { border-color: #BDBDBD; }

3. Modify your CSS and/or HTML classes to incorporate this new color palette.

Challenge 2: Switch up the font!

Challenge 2: 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.

Requirements

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. Each card should be a div.
2. Cards should be 3 per row.
3. Each product should contain a header element that, itself, contains an h2 element where the product's title will be written.
4. Each product should have three block level html elements.
5. 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")
6. 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.
7. 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.

Challenge 1: Switch up the colors!

Challenge 1: Switch up the colors!

1. Design your application and use some colors that aren't weird or boring.
2. Use a tool called Material Palette and pick 2 colors and you will get a resulting palette. You can click to download and then select "CSS" and you will get a file that looks like this:

/* Palette generated by Material Palette - materialpalette.com/brown/teal */

.dark-primary-color    { background: #5D4037; }
.default-primary-color { background: #795548; }
.light-primary-color   { background: #D7CCC8; }
.text-primary-color    { color: #FFFFFF; }
.accent-color          { background: #009688; }
.primary-text-color    { color: #212121; }
.secondary-text-color  { color: #757575; }
.divider-color         { border-color: #BDBDBD; }

3. Modify your CSS and/or HTML classes to incorporate this new color palette.

Challenge 3: Sold out.

Challenge 3: 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

Setup

Setup

• While in ~/workspace/foundations/exercises, make a directory called product-cards
• Create a github repository called product-cards and push up a README.md file
• Create a setup branch and push up the usual stuff