I recently launched my new website where I played with the concept of styling my homepage to look like code. To continue this theme I have designed a series of four business cards. Each card is designed to look like an hCard with the difference being that they each have a different stylesheet: “A hCard is a microformat for publishing contact details.”

Moo Business Cards

If you were to type up the markup and render it in a browser you’d get a correspondingly styled card. Typing it up takes time so here they are:

38XrJr.css

This first hCard is styled to look like a normal business card, inspired by Mr Damme’s madebyelephant.com:

Business Card Stylesheet

42GdJc.css

This hCard is styled to look like an Apple Finder window:

Finder Window Stylesheet

76KuBm.css

As I spend an inordinate amount of time in Photoshop I have styled this hCard to look like so:

Photoshop Stylesheet

91TySv.css

This final hCard is my homage to the Web of the 90′s but with a sprinkle of WebKit, old meets new:

Rocking the 90's Stylesheet

Update

The Web Standardistas were kind enough to mention my virtual business cards in a recent blog post.