Issue tickets have been created so that you can track your progress. As you complete a ticket, close it out.
ASSIGNMENT-product-cards
~/workspace/foundations/exercises/product-cards
. ~/workspace/foundations/exercises
, make a directory called product-cards
product-cards
and push up a README.md fileYour task is to build a grid of cards for a company's products. Here are the requirements for the basic structure of the cards.
div
.header
element that, itself, contains an h2
element where the product's title will be written.lightblue
.Here's an image that shows how the cards should appear.
/* 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!
1. Pick font(s) from [Google Font](https://fonts.google.com/) and include them in your project. You can use them wherever you want, but uh, don't make it too ugly.
#### Challenge 3: Sold out.
1. For items that are no longer available, place [this image](https://raw.githubusercontent.com/morecallan/css102-e6/master/images/soldOut.png) 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](https://raw.githubusercontent.com/morecallan/css102-e6/master/images/CSS102-Mockup.png)
#### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). You can find a good example of how to do that [here](https://css-tricks.com/designing-a-product-page-layout-with-flexbox/#article-header-id-4).