Code some "mini-cards" in HTML/CSS

PROJECT SUMMARY
---------------


We are working on an app that essentially lets you make little HTML “cards” from bits of text and images. You can think of them as very tiny little, limited websites. We are to provide a range of card templates for the user to choose from. Just like mini-website templates.

Each card is 480 x 690 pixels.

WHAT YOU WILL DO
---------------

I need help setting up the core HTML and CSS framework for the various “card” types we’ll offer. You will do these two attached examples to start.

I’d like someone to code up these initial templates, some of which you are can see are structurally different template “families” and some are just very simplified variants of those same “families”.

Each card “type” we offer we call a “family”. Basically, a card “family” is just a card structure which can then be styled to make variation design iterations of a particular family. Two "family" examples are shown. You will code these first.

CARD DETAIL
---------------
All the cards will use the same basic margins for the main container. That will never vary.**

Sometimes, cards will have borders. Sometimes not. It depends on which design template the user chooses in the app.

HOW TO THINK ABOUT THIS PROJECT
---------------

You could simply start with a framework like bootstrap and strip out all the bits that are not relevant to this exercise or you can custom code your own HTML and CSS. The key is that you provide a framework that we can build upon to do hundreds of cards. Meaning, there may be just a few card families but with a bunch of variances. So, some images may have colored borders in some of the cards and a patterned background while another card with the same basic structure might just have a solid color or gradient background and no colored borders around the images.

IS THERE AN EXAMPLE CARD TO LOOK AT?
---------------

Yes, see here: http://codepen.io/glossi/pen/vzkun


SOME QUESTIONS (AND ANSWERS) YOU MAY HAVE
---------------

- do you need any amount of responsiveness built into this? Or are we literally assuming one screen size/card size in all cases?

No, our engine takes care of making it fluid/adaptive. Just make sure any CSS sizing and positioning is done in ems.
 
- if a card is loaded on a larger mobile screen, shall we address background behind card? I am assuming these aren't truly fluid.

Yes please propose a solution. I feel there is too much whitespace on some devices that don't fit the iPhone5 aspect ratio.
 
- what about HTML resets?  Should they be included?

yes though we'll probably want to host it on our side. FOr now you can send them over and we'll stick the our global images directory. We can hash out the paths later.
 

- should I add web/server typography code to these templates in instances where a design might call for it?

Yes for the two custom font faces shown here (Roboto and Open Sans, both free downloads) please use @font-face
 

- min browsers and fallback support? Necessary to consider?  

IE9+, FF13+, Chrome 22+, Safari 5+
 

- doc type? Html5? Css3 ok?

Yes