Convert mockup to well formed semantic HTML / CSS

Create an HTML / CSS version of this image: <[login to view URL]> I need two versions of this template - a desktop browser version and a mobile version. They should be delivered as one deliverable that automatically displays the properly formatted content given the browser. For the desktop version, HTML font size, color and spacing needs to match as closely as possible. It is fine to use an image for the titles "John Doe" and "Graphic Designer" and the "Contact me" wording. Rolling over the linkedin / twitter / flickr / facebook images should make them highlight via css similarly to the way they do at <[login to view URL]> but don't worry about making them significantly different. (the designer will tweak that) Pay careful attention to the grey gradient background and the single pixel divider between sections in the content area. Don't worry about including the dates that are half hidden behind the iPhone. For the mobile version, stick as closely as you can but obviously don't worry about rollovers. Ideally the deliverable will open up "full" in a desktop browser and "mobile" on a mobile browser. The target here is WebKit.