hCard microformat Validator (beta, of course)

This is an unofficial validator¹/conformance checker of the hCard microformat.

Po polsku En français
(translations welcome!)

Input

URL

Check entire XHTML or HTML page by entering its HTTP URL.

Fragment

Paste well-formed XHTML fragment or complete document containing hCard.

Upload

Upload HTML or XHTML file to validate it. For this to work your browser must be setting MIME types properly.

Example

If searching for hCards in the wild is tiring, check one of the test-cases:

Browse examples

API & Other

Any page by Referer

<a href="http://hcard.geekhood.net/referrer/">Validate hCards</a>

Bookmarklet

hCard?

RESTful JSON API

Send GET request to http://hcard.geekhood.net/?url=URL to validate&output=json.

Output will be roughly compatible with the Validator.nu JSON API. Likely to change in the future.

Please use this API for validation, not just as an converter/extraction tool.


Send Feedback

You can send feedback via e-mail or the form below.

If you're reporting a bug or have a suggestion, don't forget to include example hCard code.

Result

This document contains errors.

File source

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Person">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
<meta name="google-site-verification" content="uKFZX04veKfvVy9J­WNAehpBjoBCZFyiecVl4pckFQis" />
<title>Antoine BERNIER (abernier)</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

<link rel="openid2.provider" href="https://www.google.com/accounts/o8/ud?source=profiles"> 
<link rel="openid2.local_id" href="https://profiles.google.com/112312460559484712912">
<link rel="stylesheet" href="index.css">
<style>
aside {font-size:80%; text-align:right;}
h1 abbr {letter-spacing:-.13em; margin-right:.1em;}

h1 {/*overflow:hidden; padding-top:.5em;padding-bottom:.5em;*/}

abbr[title].short +span {display:none;}
@media (min-width:769px) {
  abbr[title].short {display:none;}
  abbr[title].short +span {display:initial;}
}

blockquote {margin-left:0; margin-right:0; font-style:italic;}
blockquote p:before {content:"\201C";}
blockquote p:after {content:"\201D";}

.gallery {white-space:nowrap; overflow:auto;-webkit-overflow-scrolling:touch;}
.gallery a {display:inline-block; height:6em; border:2px solid;border-radius:2px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box;}
.gallery img {display:inline-block;vertical-align:bottom; height:100%;}

.gallery.big a {height:12em;}

/* justify grid */
.grid {text-align:justify; font-size:0;}
.grid > * {display:inline-block; font-size:1rem;font-size:initial;}
.grid:after {content: ''; display:inline-block; width:100%;}

/* rwd */
.rwd {
  display:block; white-space:nowrap; padding-left:1.7em; padding-bottom:5.5em;
}
.rwd .device {position:relative; margin-right:.5rem;}
.rwd .device:before {content:" "; position:absolute; top:0;left:0;right:0;bottom:0; z-index:1; border:3px solid; margin:-3px; border-radius:2px;}
.rwd .device:after {content:"."; display:block; width:100%; height:0; overflow:hidden;}

.rwd .header,
.rwd .article1,
.rwd .article2,
.rwd .footer {display:block;}

.rwd .header {background:#E0E0E0; height:100%;}
.rwd .article1 {background:#FEEF70; height:100%;}
.rwd .article2 {background:#F4F4F4;height:140%;}
.rwd .footer {background:#EBEBEB; height:40%;}

.rwd .device {width:1.68em; height:3em; display:inline-block;vertical-align:bottom;}
.rwd .device.mobile .header {float:left; width:100%; position:relative;left:-100%;}

.rwd .device.tablet {width:3.45em;height:4.68em;}
.rwd .device.tablet .header {height:17%;}
.rwd .device.tablet .article1 {height:37%;}
.rwd .device.tablet .article2 {height:57%;}
.rwd .device.tablet .footer {height:13%;}

.rwd .device.desktop {width:9em;height:7.56em;}
.rwd .device.desktop .header {height:17%;}
.rwd .device.desktop .article1 {float:left;width:30%; height:100%;}
.rwd .device.desktop .article2 {margin-left:30%; height:100%;}
.rwd .device.desktop .footer {clear:both; height:13%;}

.rwd {position:relative;}
.rwd .tagline {position:absolute; left:0;bottom:0;top:9.8em; width:100%; padding-left:4em;padding-right:3px; color:rgba(0,0,0,.8); font-style:italic; font-weight:100; line-height:1.2;}
.rwd .tagline strong {font-weight:400;}

.rwd .tagline:before,
.rwd .tagline >.in {display:inline-block;vertical-align:middle;}
.rwd .tagline:before {content:" ";height:100%;}

.rwd .tagline >.in {/*font-size:80%;*/}

@media (min-width:769px) {
  .rwd {font-size:100%; margin-top:0;}
  
  header {float:left; width:17.5em; text-align:right;}
  header ~ .main {margin-left:20em; margin-top:5.2em;}
}
@media (max-width:768px) {
  p.gallery,
  #overview .calltoaction {
    width:112.49998593750175%; /* λ = 1 / (1 - 2*5.55555%) */
    margin-left:-6.249992968750878%; /* λ * 5.55555% */
    padding-left:6.249992968750878%;padding-right:6.249992968750878%;
  }
}

.btn {border:1px solid;padding-left:.25em;padding-right:.25em; border-radius:2px;}
a.btn:hover {text-decoration:none;}

a.demo:before {content:"\f11b"; font-family:"aberniericonfont";}
/*a.call:before {content:"\f11c"; font-family:"aberniericonfont";}
a.mail:before {content:"\f11d"; font-family:"aberniericonfont";}*/

#overview ul strong {font-weight:400;}
#overview li strong + p {margin-top:0}
#overview .calltoaction {text-align:center;background-color:#F4F4F4;padding:1em;}
#overview .calltoaction p {margin:0;}
#overview .calltoaction p:first-child {margin-bottom:.5em}
#overview .calltoaction strong {text-transform:uppercase; line-height:1;}
#overview .calltoaction .btn:first-child {margin-bottom:.25em;}
</style>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900">
</head>
<body>

<aside>
  <h1 class="visuallyhidden">Me elsewhere</h1>
  <p>
    <a href="#contact">Contact</a> — 
    <a rel="me" href="http://fr.creasenso.com/web/integrateurs-html-css/antoine-3">creasenso</a> 
    <a rel="me" href="http://github.com/abernier">github</a> 
    <a rel="me" href="http://twitter.com/abernier_">Twitter</a> 
    <a rel="me author publisher" href="https://plus.google.com/112312460559484712912?rel=author">G+</a>
    <a rel="me" href="http://stackoverflow.com/users/133327/abernier">Stackoverflow</a> 
    <a rel="me" href="http://dribbble.com/abernier">dribbble</a> 
    <a rel="me" href="http://pinterest.com/aaabernier/">Pinterest</a> 
    <a rel="me" href="http://www.colourlovers.com/lover/abernier">COLOURlovers</a> 
  </p>
</aside>

<header>
  <h1>
    <a href="http://abernier.name" class="fn-and-photo" itemprop="url"><img alt class="avatar" src="http://i.imgur.com/fGcHrJy.jpg" itemprop="image"><span itemprop="name">Antoine BERNIER</span></a>
    <abbr title="World Wide Web">www</abbr><span>ebsite</span>
  </h1>
  <span class="rwd">
    <span class="device mobile">
      <span class="header"></span>
      <span class="article1"></span>
      <span class="article2"></span>
      <span class="footer"></span>
    </span>
    <span class="device tablet">
      <span class="header"></span>
      <span class="article1"></span>
      <span class="article2"></span>
      <span class="footer"></span>
    </span>
    <span class="device desktop">
      <span class="header"></span>
      <span class="article1"></span>
      <span class="article2"></span>
      <span class="footer"></span>
    </span>
    <span class="tagline"><span class="in">
      responsive web <strong>design</strong> <br>& <strong>development</strong>
    </span></span>
  </span>
</header>

<div class="main">
  <main>
    <section id="overview">
      <h2>Got a minute?</h2>
      <p>Quickly, here is what I can do for you:</p>
      <ul>
        <li>
          <strong class="h3">PSD to HTML</strong>
          <p>I turn pixels into live html/css elements — (<a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html">see a demo</a>)</p>
        </li><li>
          <strong class="h3">Javascript development</strong>
          <p>I can create UI plugins/widgets for you or custom behaviors for web and mobile — (<a class="demo" href="http://bl.ocks.org/abernier/raw/8561651/">see a demo</a>)</p>
        </li><li>
          <strong class="h3">UI/UX design</strong>
          <p>I can help you (re-)design your pages by delivering clear and simple mockups  — (<a class="demo" href="https://docs.google.com/file/d/0BwQNm5fx5y30Q2Z4Zm1JM2tvRGM/preview">see an example</a>)</p>
        </li>
      </ul>

      <div class="calltoaction">
        <p><strong class="h3">Let's talk about your project</strong></p>
        <p>Contact me by phone <a class="btn call" href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='tel:'+this.innerText;">914404806.33+</a> or email <a class="btn mail" href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='mailto:'+this.­innerText;">moc.liamg@reinreb.eniotna</a></p>
      </div>
    </section>
    <section id="recent">
      <h2>Recent work</h2>

      <article id="bpwww">
        <h3>Black Pizza portfolio</h3>

        <p class="gallery no-c">
          <a href="images/bpwww-altaglio-mobile.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html"><img src="images/bpwww-altaglio-mobile-h200.png" alt></a>
          <a href="images/bpwww-altaglio-tablet.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html"><img src="images/bpwww-altaglio-tablet-h200.png" alt></a>
          <a href="images/bpwww-altaglio-desktop.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html"><img src="images/bpwww-altaglio-desktop-h200.png" alt></a>

          <a href="images/bpwww-thekase-mobile.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html"><img src="images/bpwww-thekase-mobile-h200.png" alt></a>
          <a href="images/bpwww-thekase-tablet.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html"><img src="images/bpwww-thekase-tablet-h200.png" alt></a>
          <a href="images/bpwww-thekase-desktop.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html"><img src="images/bpwww-thekase-desktop-h200.png" alt></a>

          <a href="images/bpwww-ccc-mobile.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html"><img src="images/bpwww-ccc-mobile-h200.png" alt></a>
          <a href="images/bpwww-ccc-tablet.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html"><img src="images/bpwww-ccc-tablet-h200.png" alt></a>
          <a href="images/bpwww-ccc-desktop.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html"><img src="images/bpwww-ccc-desktop-h200.png" alt></a>
        </p>

        <p>
          Live demos: <a class="demo" href="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html">Altaglio</a>, <a class="demo" href="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html">the Kase</a>, <a class="demo" href="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html">CCC</a>
        </p>

        <p>Agence : <a href="http://blackpizza.com/" target="_blank">Black Pizza</a></p>
      </article>

      <article id="lv">
        <h3>Louis Vuitton</h3>

        <p class="gallery no-c">
          <a href="images/lv01-home-mobile.png"><img src="images/lv01-home-mobile-h200.png" alt></a>
          <a href="images/lv02-home-mobile-landscape.png"><img src="images/lv02-home-mobile-landscape-h200.png" alt></a>
          <a href="images/lv03-home-tablet-portrait.png"><img src="images/lv03-home-tablet-portrait-h200.png" alt></a>
          <a href="images/lv04-home-tablet-landscape.png"><img src="images/lv04-home-tablet-landscape-h200.png" alt></a>

          <a href="images/lv05-home-mobile-overlay.png"><img src="images/lv05-home-mobile-overlay-h200.png" alt></a>
          <a href="images/lv06-home-mobile-landscape-overlay.png"><img src="images/lv06-home-mobile-landscape-overlay-h200.png" alt></a>
          <a href="images/lv07-home-tablet-portrait-overlay.png"><img src="images/lv07-home-tablet-portrait-overlay-h200.png" alt></a>
          <a href="images/lv08-home-tablet-landscape-overlay.png"><img src="images/lv08-home-tablet-landscape-overlay-h200.png" alt></a>
        </p>

        <p>UX design for men's closet section of <a href="http://fr.louisvuitton.com/fra-fr/histoires/le-dressing-homme-hiver-2014">louisvuitton.com</a></p>
      </article>

      <article id="ccc">
        <h3>Confidential CC</h3>

        <p class="gallery no-c">
          <a href="images/ccc-mobile-w360.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-mobile-w360-h200.png" alt></a>
          <a href="images/ccc-tablet-w768.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-tablet-w768-h200.png" alt></a>
          <a href="images/ccc-tablet-w1024.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-tablet-w1024-h200.png" alt></a>
          <a href="images/ccc-tablet-w1400.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-tablet-w1400-h200.png" alt></a>
        </p>

        <p>Responsive CCC landing page</p>
        <p>
          <a class="demo" href="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html">Live demo</a>
        </p>

        <p>Agence : <a href="http://blackpizza.com/" target="_blank">Black Pizza</a></p>
      </article>

      <article id="msbmockups">
        <h3>My Social Book</h3>

        <p class="gallery no-c">
          <a href="images/msb-mobile_0032_Layer-1.png"><img src="images/msb-mobile_0032_Layer-1-h200.png" alt></a>
          <a href="images/msb-mobile_0031_Layer-2.png"><img src="images/msb-mobile_0031_Layer-2-h200.png" alt></a>
          <a href="images/msb-mobile_0030_Layer-3.png"><img src="images/msb-mobile_0030_Layer-3-h200.png" alt></a>
          <a href="images/msb-mobile_0029_Layer-4.png"><img src="images/msb-mobile_0029_Layer-4-h200.png" alt></a>
          <a href="images/msb-mobile_0028_Layer-5.png"><img src="images/msb-mobile_0028_Layer-5-h200.png" alt></a>
          <a href="images/msb-mobile_0027_Layer-6.png"><img src="images/msb-mobile_0027_Layer-6-h200.png" alt></a>
          <a href="images/msb-mobile_0026_Layer-7.png"><img src="images/msb-mobile_0026_Layer-7-h200.png" alt></a>
          <a href="images/msb-mobile_0025_Layer-8.png"><img src="images/msb-mobile_0025_Layer-8-h200.png" alt></a>
          <a href="images/msb-mobile_0024_Layer-9.png"><img src="images/msb-mobile_0024_Layer-9-h200.png" alt></a>
          <a href="images/msb-mobile_0023_Layer-10.png"><img src="images/msb-mobile_0023_Layer-10-h200.png" alt></a>
          <a href="images/msb-mobile_0022_Layer-11.png"><img src="images/msb-mobile_0022_Layer-11-h200.png" alt></a>
          <a href="images/msb-mobile_0021_Layer-12.png"><img src="images/msb-mobile_0021_Layer-12-h200.png" alt></a>
          <a href="images/msb-mobile_0020_Layer-13.png"><img src="images/msb-mobile_0020_Layer-13-h200.png" alt></a>
          <a href="images/msb-mobile_0019_Layer-14.png"><img src="images/msb-mobile_0019_Layer-14-h200.png" alt></a>
          <a href="images/msb-mobile_0018_Layer-15.png"><img src="images/msb-mobile_0018_Layer-15-h200.png" alt></a>
          <a href="images/msb-mobile_0017_Layer-16.png"><img src="images/msb-mobile_0017_Layer-16-h200.png" alt></a>
          <a href="images/msb-mobile_0016_Layer-17.png"><img src="images/msb-mobile_0016_Layer-17-h200.png" alt></a>
          <a href="images/msb-mobile_0015_Layer-18.png"><img src="images/msb-mobile_0015_Layer-18-h200.png" alt></a>
          <a href="images/msb-mobile_0014_Layer-19.png"><img src="images/msb-mobile_0014_Layer-19-h200.png" alt></a>
          <a href="images/msb-mobile_0013_Layer-20.png"><img src="images/msb-mobile_0013_Layer-20-h200.png" alt></a>
          <a href="images/msb-mobile_0012_Layer-21.png"><img src="images/msb-mobile_0012_Layer-21-h200.png" alt></a>
          <a href="images/msb-mobile_0011_Layer-22.png"><img src="images/msb-mobile_0011_Layer-22-h200.png" alt></a>
          <a href="images/msb-mobile_0010_Layer-23.png"><img src="images/msb-mobile_0010_Layer-23-h200.png" alt></a>
          <a href="images/msb-mobile_0009_Layer-24.png"><img src="images/msb-mobile_0009_Layer-24-h200.png" alt></a>
          <a href="images/msb-mobile_0008_Layer-25.png"><img src="images/msb-mobile_0008_Layer-25-h200.png" alt></a>
          <a href="images/msb-mobile_0007_Layer-26.png"><img src="images/msb-mobile_0007_Layer-26-h200.png" alt></a>
          <a href="images/msb-mobile_0006_Layer-27.png"><img src="images/msb-mobile_0006_Layer-27-h200.png" alt></a>
          <a href="images/msb-mobile_0005_Layer-28.png"><img src="images/msb-mobile_0005_Layer-28-h200.png" alt></a>
          <a href="images/msb-mobile_0004_Layer-29.png"><img src="images/msb-mobile_0004_Layer-29-h200.png" alt></a>
          <a href="images/msb-mobile_0003_Layer-30.png"><img src="images/msb-mobile_0003_Layer-30-h200.png" alt></a>
          <a href="images/msb-mobile_0002_Layer-31.png"><img src="images/msb-mobile_0002_Layer-31-h200.png" alt></a>
          <a href="images/msb-mobile_0001_Layer-32.png"><img src="images/msb-mobile_0001_Layer-32-h200.png" alt></a>
          <a href="images/msb-mobile_0000_Layer-33.png"><img src="images/msb-mobile_0000_Layer-33-h200.png" alt></a>
          <a href="images/msb-tablet_0013_Layer-1.png"><img src="images/msb-tablet_0013_Layer-1-h200.png" alt></a>
          <a href="images/msb-tablet_0012_Layer-2.png"><img src="images/msb-tablet_0012_Layer-2-h200.png" alt></a>
          <a href="images/msb-tablet_0011_Layer-3.png"><img src="images/msb-tablet_0011_Layer-3-h200.png" alt></a>
          <a href="images/msb-tablet_0010_Layer-4.png"><img src="images/msb-tablet_0010_Layer-4-h200.png" alt></a>
          <a href="images/msb-tablet_0009_Layer-5.png"><img src="images/msb-tablet_0009_Layer-5-h200.png" alt></a>
          <a href="images/msb-tablet_0008_Layer-6.png"><img src="images/msb-tablet_0008_Layer-6-h200.png" alt></a>
          <a href="images/msb-tablet_0007_Layer-11.png"><img src="images/msb-tablet_0007_Layer-11-h200.png" alt></a>
          <a href="images/msb-tablet_0006_Layer-12.png"><img src="images/msb-tablet_0006_Layer-12-h200.png" alt></a>
          <a href="images/msb-tablet_0005_Layer-13.png"><img src="images/msb-tablet_0005_Layer-13-h200.png" alt></a>
          <a href="images/msb-tablet_0004_Layer-14.png"><img src="images/msb-tablet_0004_Layer-14-h200.png" alt></a>
          <a href="images/msb-tablet_0003_Layer-7.png"><img src="images/msb-tablet_0003_Layer-7-h200.png" alt></a>
          <a href="images/msb-tablet_0002_Layer-8.png"><img src="images/msb-tablet_0002_Layer-8-h200.png" alt></a>
          <a href="images/msb-tablet_0001_Layer-9.png"><img src="images/msb-tablet_0001_Layer-9-h200.png" alt></a>
          <a href="images/msb-tablet_0000_Layer-10.png"><img src="images/msb-tablet_0000_Layer-10-h200.png" alt></a>
          <a href="images/msb-desktop_0006_Layer-1.png"><img src="images/msb-desktop_0006_Layer-1-h200.png" alt></a>
          <a href="images/msb-desktop_0005_Layer-2.png"><img src="images/msb-desktop_0005_Layer-2-h200.png" alt></a>
          <a href="images/msb-desktop_0004_Layer-3.png"><img src="images/msb-desktop_0004_Layer-3-h200.png" alt></a>
          <a href="images/msb-desktop_0003_Layer-4.png"><img src="images/msb-desktop_0003_Layer-4-h200.png" alt></a>
          <a href="images/msb-desktop_0002_Layer-5.png"><img src="images/msb-desktop_0002_Layer-5-h200.png" alt></a>
          <a href="images/msb-desktop_0001_Layer-7.png"><img src="images/msb-desktop_0001_Layer-7-h200.png" alt></a>
          <a href="images/msb-desktop_0000_Layer-8.png"><img src="images/msb-desktop_0000_Layer-8-h200.png" alt></a>
        </p>

        <p>UX responsive design for MySocialBook web-app.</p>
      </article>

      <article id="rm">
        <h3>Richard Mille</h3>

        <p class="gallery no-c">
          <a href="images/rm-splash.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-splash-h200.png" alt></a>
          <a href="images/rm-home.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-h200.png" alt></a>
          <a href="images/rm-home-hover.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-hover-h200.png" alt></a>
          <a href="images/rm-home-zoom1.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom1-h200.png" alt></a>
          <a href="images/rm-home-zoom2.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom2-h200.png" alt></a>
          <a href="images/rm-home-zoom3.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom3-h200.png" alt></a>
          <a href="images/rm-home-zoom4.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom4-h200.png" alt></a>
          <a href="images/rm-home-filters.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-filters-h200.png" alt></a>
          <a href="images/rm-27.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/overview.html"><img src="images/rm-27-h200.png" alt></a>
          <a href="images/rm-27-details.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/overview.html"><img src="images/rm-27-details-h200.png" alt></a>
          <a href="images/rm-27-slideshow.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/details-rm27.html"><img src="images/rm-27-slideshow-h200.png" alt></a>
          <a href="images/rm-home-menu.png"><img src="images/rm-home-menu-h200.png" alt></a>
        </p>

        <p>Agence : <a href="http://www.5emegauche.com/" target="_blank">5ème gauche</a></p>
      </article>

      <article id="msb">
        <h3>bpifrance: Banque Publique d'Investissement</h3>

        <p class="gallery no-c">
          <a href="images/bpi-home-desktop.png" data-lightbox-demo="http://www.bpifrance.fr"><img src="images/bpi-home-desktop-h200.png" alt></a>
          <a href="images/bpi-home-desktop-steps.png" data-lightbox-demo="http://www.bpifrance.fr"><img src="images/bpi-home-desktop-steps-h200.png" alt></a>
          <a href="images/bpi-mission-desktop.png"><img src="images/bpi-mission-desktop-h200.png" alt></a>
          <a href="images/bpi-news-desktop.png"><img src="images/bpi-news-desktop-h200.png" alt></a>
          <a href="images/bpi-solutions-desktop.png"><img src="images/bpi-solutions-desktop-h200.png" alt></a>
          <a href="images/bpi-menu-councellor.png"><img src="images/bpi-menu-councellor-h200.png" alt></a>
          <a href="images/bpi-entrepreneurs.png"><img src="images/bpi-entrepreneurs-h200.png" alt></a>
          <a href="images/bpi-search.png"><img src="images/bpi-search-h200.png" alt></a>
          <a href="images/bpi-home-mobile.png" data-lightbox-demo="http://www.bpifrance.com"><img src="images/bpi-home-mobile-h200.png" alt></a>
          <a href="images/bpi-mission-mobile.png"><img src="images/bpi-mission-mobile-h200.png" alt></a>
          <a href="images/bpi-news-mobile.png"><img src="images/bpi-news-mobile-h200.png" alt></a>
          <a href="images/bpi-solutions-mobile.png"><img src="images/bpi-solutions-mobile-h200.png" alt></a>
        </p>
        <p>Responsive website for the french <cite>Banque Publique d'Investissement</cite></p>
        <p>Agence : <a href="http://www.5emegauche.com/" target="_blank">5ème gauche</a></p>
        <p>
          <a href="http://www.bpifrance.fr" class="demo">Live demo</a>
        </p>
      </article>

      <article id="msb">
        <h3>MSB</h3>

        <p class="gallery no-c">
          <a href="images/msb-mailing-desktop.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30V3JGOG9nVmdBc0E/exclusive-offer.html"><img src="images/msb-mailing-desktop-h200.png" alt></a>
          <a href="images/msb-mailing-mobile.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30V3JGOG9nVmdBc0E/exclusive-offer.html"><img src="images/msb-mailing-mobile-h200.png" alt></a>
        </p>
        <p>Responsive emailing for MySocialBook company.</p>
        <p>
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30V3JGOG9nVmdBc0E/exclusive-offer.html">Live demo</a>
        </p>
      </article>
      
      <article id="milka">
        <h3>Milka - les oeufs cachés</h3>

        <p class="gallery no-c">
          <a href="images/milka00-preloading.png"><img src="images/milka00-preloading-h200.png" alt></a>
          <a href="images/milka01-ready.jpg"><img src="images/milka01-ready-h200.png" alt></a>
          <a href="images/milka02-howto.jpg"><img src="images/milka02-howto-h200.png" alt></a>
          <a href="images/milka03-gardens.jpg"><img src="images/milka03-gardens-h200.png" alt></a>
          <a href="images/milka04-gardens2.jpg"><img src="images/milka04-gardens2-h200.png" alt></a>
          <a href="images/milka05-scratch.jpg"><img src="images/milka05-scratch-h200.png" alt></a>
          <a href="images/milka06-scratch-done.jpg"><img src="images/milka06-scratch-done-h200.png" alt></a>
          <a href="images/milka07-scratch-popup.jpg"><img src="images/milka07-scratch-popup-h200.png" alt></a>
        </p>
        <p>Tablet version of the Milka's special easter event application.</p>
        <p>Agence : <a href="http://www.grouek.com" target="_blank">Grouek</a></p>
      </article>
      
      <article id="upup">
        <h3>Upup</h3>

        <p class="gallery no-c">
          <a href="images/upup-cover.png"><img src="images/upup-cover-h200.png" alt></a>
          <a href="images/upup-splash.png"><img src="images/upup-splash-h200.png" alt></a>
          <a href="images/upup-home.png"><img src="images/upup-home-h200.png" alt></a>
          <a href="images/upup-sales.png"><img src="images/upup-sales-h200.png" alt></a>
          <a href="images/upup-wallet.png"><img src="images/upup-wallet-h200.png" alt></a>
          <a href="images/upup-plan.png"><img src="images/upup-plan-h200.png" alt></a>
          <a href="images/upup-boxes.png"><img src="images/upup-boxes-h200.png" alt></a>
          <a href="images/upup-upload1.png"><img src="images/upup-upload1-h200.png" alt></a>
          <a href="images/upup-page.png"><img src="images/upup-page-h200.png" alt></a>
          <a href="images/upup-purchase.png"><img src="images/upup-purchase-h200.png" alt></a>
        </p>
        <p>UX design of the selling downloads web-application Upup.</p>
      </article>

      <article  id="pnensba">
        <h3><abbr class="short" title="Pôle numérique de l'École Nationale des Beaux-Arts">pnENSBA</abbr><span>Pôle numérique de l'École Nationale des Beaux-Arts</span></h3>

        <p class="gallery no-c">
          <a href="images/pnensba-mockup.png"><img src="images/pnensba-mockup-h200.jpg" alt></a>
        </p>
        <p>UX design of Pnensba's mobile website.</p>
      </article>

      <article  id="likebook">
        <h3>My Social Book <small>(previously Likebook)</small></h3>

        <p class="gallery">
          <a href="images/likebook-homepage.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html"><img src="images/likebook-homepage-h200.jpg" alt></a>
          <a href="images/likebook-homepage-global.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html"><img src="images/likebook-homepage-global-h200.png" alt></a>
          <a href="images/likebook-3d-parametric-cover.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/cover.html"><img src="images/likebook-3d-parametric-cover-h200.jpg" alt></a>
          <a href="images/likebook-app1.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/app.html"><img src="images/likebook-app1-h200.jpg" alt></a>
          <a href="images/likebook-app2.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/app.html"><img src="images/likebook-app2-h200.jpg" alt></a>
          <a href="images/likebook-library.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/profile.html"><img src="images/likebook-library-h200.jpg" alt></a>
          <a href="images/likebook-gp-mockup.png" data-lightbox-demo="https://docs.google.com/file/d/0BwQNm5fx5y30Q2Z4Zm1JM2tvRGM/preview"><img src="images/likebook-gp-mockup-h200.jpg" alt></a>
          <a href="images/likebook-gp-web.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/gerardpique.html"><img src="images/likebook-gp-web-h200.jpg" alt></a>
        </p>

       <p>HTML/CSS integration and animations of Likebook website.</p>

        <p>
          <strong>Live demos</strong>:
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html">homepage</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/cover.html">3d parametric cover</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/checkout.html">checkout</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/app.html">application</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/profile.html">profile</a>, 
          <a class="demo" href="https://docs.google.com/file/d/0BwQNm5fx5y30Q2Z4Zm1JM2tvRGM/preview">Gerard Pique's page mockup</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/gerardpique.html">Gerard Piqué's page</a>
        </p>
      </article>

      <article>
        <h3>Dailymotion</h3>

        <p class="gallery">
          <a href="images/dailymotion-grundig-poc.png"><img src="images/dailymotion-grundig-poc-h200.png" alt></a>
        </p>
        <p>Speech-recognition proof of concept for dailymotion.</p>
      </article>
      
      <article>
        <h3>ZAPtélé</h3>

        <p class="gallery">
          <a href="images/zaptele-logo.png" data-lightbox-demo="http://dabblet.com/gist/5319853/"><img src="images/zaptele-logo-h200.jpg" alt></a>
        </p>
        <p>Responsive HTML5 integration of zap-tele website.</p>
        <p>
          <strong>Live demos</strong>:
          <a class="demo" href="http://dabblet.com/gist/5319853/">parametric logo</a>,
          <a class="demo" href="http://www.zap-tele.com">responsive website</a>
        </p>
      </article>

      <article>
        <h3>Is Cool</h3>

        <p class="gallery">
          <a href="images/iscool-pelican.png"><img src="images/iscool-pelican-h200.jpg" alt></a>
          <a href="images/iscool-mammoth.png"><img src="images/iscool-mammoth-h200.jpg" alt></a>
          <a href="images/iscool-mammoth2.png"><img src="images/iscool-mammoth2-h200.jpg" alt></a>
          <a href="images/iscool-tickets.png"><img src="images/iscool-tickets-h200.jpg" alt></a>
          <a href="images/iscool-album.png"><img src="images/iscool-album-h200.jpg" alt></a>
          <a href="images/iscool-yeti-bathroom.png"><img src="images/iscool-yeti-bathroom-h200.jpg" alt></a>
          <a href="images/iscool-yeti-village.png"><img src="images/iscool-yeti-village-h200.jpg" alt></a>
        </p>
      </article>

    </section>

    <section>
      <h2>Experiments</h2>

      <p class="gallery">
        <a href="images/pizzaideoscope.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/9070122/"><img src="images/pizzaideoscope-h200.png" alt></a>
        <a href="images/box2d-demo.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/8561651/"><img src="images/box2d-demo-h200.jpg" alt></a>
        <a href="images/pictocool.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/afdea084a7bf48fbddfc/"><img src="images/pictocool-h200.jpg" alt></a>
        <a href="images/inertia.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/3306964/"><img src="images/inertia-h200.jpg" alt></a>
        <a href="images/pacman.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/4961058/"><img src="images/pacman-h200.jpg" alt></a>
        <a href="images/css3patterns.png" data-lightbox-demo="http://lea.verou.me/css3patterns/#houndstooth"><img src="images/css3patterns-h200.png" alt></a>
        <a href="images/renard.png" data-lightbox-demo="http://bl.ocks.org/3156626"><img src="images/renard-h200.jpg" alt></a>
        <a href="images/flipbook.png" data-lightbox-demo="http://bl.ocks.org/3136589"><img src="images/flipbook-h200.jpg" alt></a>
        <a href="images/googlecamera.png" data-lightbox-demo="http://bl.ocks.org/1515911"><img src="images/googlecamera-h200.jpg" alt></a>
      </p>
      
      <p>
        <a href="http://bl.ocks.org/abernier/e082a201b0865de1a41f">scribble.js</a>, 
        <a href="http://bl.ocks.org/abernier/c3b9584d63bfd802e08f">watchcss.js</a>, 
        <a href="http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e">domvertices.js</a>, 
        <a href="https://gist.github.com/abernier/e2b89babf490a4d0fee2">CSS cheat sheet</a>, 
        <a href="http://bl.ocks.org/abernier/raw/0837661e346360b5385b/">parallax.js</a>, 
        <a href="https://gist.github.com/abernier/83eee1cf3c019a0fa43d">CarouselView.js</a>, 
        <a href="https://gist.github.com/abernier/11097105">google spreadsheet cheat sheet</a>, 
        <a href="https://gist.github.com/abernier/9482101">index.html boiler</a>, 
        <a href="http://bl.ocks.org/abernier/raw/9070122/">Pizzaïdoscope</a>, 
        <a href="http://bl.ocks.org/abernier/raw/8561651/">Box2D-demo</a>, 
        <a href="http://bl.ocks.org/abernier/raw/afdea084a7bf48fbddfc/">Pictocool</a>, 
        <a href="http://bl.ocks.org/abernier/raw/3306964/">Inertia</a>, 
        <a href="http://bl.ocks.org/abernier/raw/4961058/">PAC-SS</a>, 
        <a href="http://bl.ocks.org/abernier/raw/8275645/">Responsive flyout menu</a>, 
        <a href="http://bl.ocks.org/abernier/raw/8544489/">TransitionAB</a>, 
        <a href="https://gist.github.com/abernier/7296362">UNIX cheat sheet</a>, 
        <a href="https://gist.github.com/abernier/6461914">JavaScript cheat sheet</a>, 
        <a href="http://jsfiddle.net/abernier/GzAxS/">CSS counter increment</a>, 
        <a href="https://gist.github.com/abernier/6008348">cURL tips</a>, 
        <a href="javascript:(function (src) {var s;s=document.createElemen­t('script');s.src=src;document.body.appendChild(s);}('https://gist.github.com/abernier/cb2cf45a75225f96eff1/raw/bookmarklet.js'));">bookmarklet</a>, 
        <a href="http://bl.ocks.org/3411189">Box2D</a>, 
        <a href="https://gist.github.com/3227047">Clone gist in Mac</a>, 
        <a href="https://gist.github.com/3225993">loop.coffee</a>, 
        <a href="http://bl.ocks.org/3193698">$.inside</a>, 
        <a href="https://gist.github.com/3191472">$.fn.offsetRelative</a>, 
        <a href="http://bl.ocks.org/3156626">#Renard's</a>, 
        <a href="http://bl.ocks.org/3157389">$.fn.baseline</a>, 
        <a href="http://stackoverflow.com/questions/1034881/what-is-the-best-practice-for-parsing-remote-content-with-jquery/11379717#11379717">fetchDoc</a>, 
        <a href="http://bl.ocks.org/abernier/1653407">$.fn.segment</a>, 
        <a href="http://bl.ocks.org/3111167">CSS 3D Gauge</a>, 
        <a href="http://bl.ocks.org/1512474">2D camera</a>, 
        <a href="http://bl.ocks.org/1515911">Google camera</a>, 
        <a href="http://bl.ocks.org/3136589">flipbook</a>, 
        <a href="http://bl.ocks.org/3070589">Link anatomy</a>, 
        <a href="https://gist.github.com/2890490">µdatas memo</a>, 
        <a href="http://bl.ocks.org/2867324">CSS vertical centering technique</a>, 
        <a href="http://lea.verou.me/css3patterns/#houndstooth">Houndstooth CSS3 pattern</a>, 
        <a href="http://bl.ocks.org/1788900">$.fn.firework</a>, 
        <a href="https://gist.github.com/raw/1368637/acegist.user.js">ACEgist (userscript)</a>, 
        <a href="http://search.npmjs.org/#/nq">nq</a>, 
        <a href="http://bl.ocks.org/3136666">animationframe</a>, 
        <a href="http://bl.ocks.org/abernier/1101653">method/function invocation pattern</a>
      </p>
    </section>
  </main>

  <footer class="foot" id="contact">
    <h1 class="visuallyhidden">Contact</h1>
    <address><p>
      <a href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='mailto:'+this.­innerText;">moc.liamg@reinreb.eniotna</a>
       —  
      <a href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='tel:'+this.innerText;">914404806.33+</a>
       — 
      <a href="geo:48.8617795,2.3696959000000106" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">passage Saint Sébastien</span>, <span itemprop="postalCode">75011</span> <span itemprop="addressLocality">Paris</span>, <span itemprop="addressCountry">France</span></a>
    </p></address>
  </footer>
</div>

<style>
/*lightbox component*/
.lightbox {position:fixed; left:0;right:0;top:0;bottom:0; z-index:99; background:rgba(0,0,0,.8); overflow:auto;}
.lightbox {text-align:center;}

.lightbox {white-space:nowrap;}
.lightbox * {white-space:normal;white-space:initial;}
.lightbox:before {content:" "; display:inline-block;vertical-align:middle; height:100%; width:0;}
.lightbox img {display:inline-block;vertical-align:middle; max-width:100%;/* max-height:100%;*/}

.lightbox nav {position:fixed;bottom:0;right:0;z-index:99; margin:.5em;}
.lightbox nav a+a {margin-left:.25em;}
.lightbox .kbd {display:inline-block; background:black; color:white; padding:.5em; border-radius:3px;}
.lightbox kbd {font-family:inherit; font-size:50%; vertical-align:middle;}
.lightbox kbd:before {content:"(";}
.lightbox kbd:after {content:")";}
.lightbox a {text-decoration:none; opacity:.5;}
.lightbox a:hover,
.lightbox a:active,
.lightbox a.active {opacity:1;}
.lightbox a.disabled {opacity:0.2; cursor:not-allowed;}
.lightbox .close {position:fixed;left:0;top:0;z-index:99; margin:.5em;}
.lightbox .demo {position:fixed;right:0;top:0;z-index:99; margin:.5em; background:#FEEF70; color:black; opacity:.8; text-align:left; max-width:60%;}
.lightbox .demo:after {content:attr(href); display:block; font-size:50%; text-overflow: ellipsis;overflow:hidden;}
.lightbox .demo:hover:after {max-width:99em;}
.lightbox .meter {position:fixed;top:0;left:0;z-index:99; width:0%; height:3px; background:#FEEF70;}
</style>
<script src="jquery-2.0.3.js"></script>
<script src="lightbox.js"></script>
<script>
(function () {
  // listen to instantiate lightbox instances
  $('body').delegate('.gallery a', 'click', function (e) {
    e.preventDefault();

    var link = this;
    new Lightbox(link, {
      //transitionduration: 500,
      //progressbar: false
    });
  });
}());
</script>

<script src="jquery-2.0.3.js"></script>
<style>
.gallery + p a.highlight {text-decoration:underline;}
.gallery [data-lightbox-demo].highlight {/*border-color:transparent;*/}
</style>
<script>
(function () {
  $('.gallery [data-lightbox-demo]').hover(function () {
    var demoLink = $(this).data('lightbox-demo');
    
    $(this).closest('.gallery').find('+p a[href]').filter(function (i, el) {return $(el).attr('href') === demoLink;}).addClass('highlight');
  }, function () {
    $(this).closest('.gallery').find('+p a[href]').removeClass('highlight')
  });

  $('.gallery + p a[href]').hover(function () {
    var link = $(this).attr('href');
    
    $(this).closest('p').prev().find('[data-lightbox-demo]').filter(function (i, el) {return $(el).data('lightbox-demo') === link;}).addClass('highlight');
  }, function () {
    $(this).closest('p').prev().find('[data-lightbox-demo]').removeClass('highlight')
  });
}());
</script>

<script src="jquery-2.0.3.js"></script>
<script>
(function($) {
  $.fn.uncomment = function(recurse) {
    $(this).contents().each(function () {
      if (recurse && this.hasChildNodes()) {
        $(this).uncomment(recurse);
      } else if (this.nodeType === 8) {
        // Need to "evaluate" the HTML content, otherwise simple text won't replace
        var $div = $('<div>' + this.nodeValue + '</div>');
        $(this).replaceWith($div.contents());
      }
    });
  };
})(jQuery);
if (document.location.search && document.location.search.match(/uncomment(=(true|1))?/)) {
  $('*:not(iframe)').uncomment();
}
</script>

<script>
(function(i,s,o,g,r,a,m){­i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(­o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script>

<script data-cfasync="false" type='text/javascript'>/*<![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.l­ocation.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
f[z]=function(){
(a.s=a.s||[]).push(arguments)};var a=f[z]._={
},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
f[z]("call",n,arguments)}­})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
0:+new Date};a.P=function(u){
a.p[u]=new Date-a.p[0]};function s(){
a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,fa­lse):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
hd="head";return["<",hd,"></",hd,"><",i,' onl' + 'oad="var d=',g,";d.getElementsByTa­gName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"></",i,">"].join("")}var i="body",m=d[i];if(!m){
return setTimeout(ld,100)}a.P(1);var j="appendChild",h="create­Element",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d­[h]("iframe"),g="document",e="domain",o;n.style.di­splay="none";m.insertBefore(n,m.firstChild).id=z;b­.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
b.src="javascript:false"}­b.allowTransparency="true";v[j](b);try{
b.contentWindow[g].open()}catch(w){
c[e]=d[e];o="javascript:var d="+g+".open();d.domain='­"+d.domain+"';";b[k]=o+"void(0);"}try{
var t=b.contentWindow[g];t.wr­ite(p());t.close()}catch(x){
b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)­+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
loader: "static.olark.com/jsclient/loader0.js",name:"olark",­methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify('2691-966-10-1702');/*]]>*/</script><noscript><a href="https://www.olark.com/site/2691-966-10-1702/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
</body>
</html>

Parsed source

<html xmlns="http://www.w3.org/1999/xhtml" itemscope="" itemtype="http://schema.org/Person">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1"/>
    <meta name="google-site-verification" content="uKFZX04veKfvVy9J­WNAehpBjoBCZFyiecVl4pckFQis"/>
    <title>Antoine BERNIER (abernier)</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="openid2.provider" href="https://www.google.com/accounts/o8/ud?source=profiles"/>
    <link rel="openid2.local_id" href="https://profiles.google.com/112312460559484712912"/>
    <link rel="stylesheet" href="index.css"/>
    <style>
aside {font-size:80%; text-align:right;}
h1 abbr {letter-spacing:-.13em; margin-right:.1em;}

h1 {/*overflow:hidden; padding-top:.5em;padding-bottom:.5em;*/}

abbr[title].short +span {display:none;}
@media (min-width:769px) {
  abbr[title].short {display:none;}
  abbr[title].short +span {display:initial;}
}

blockquote {margin-left:0; margin-right:0; font-style:italic;}
blockquote p:before {content:"\201C";}
blockquote p:after {content:"\201D";}

.gallery {white-space:nowrap; overflow:auto;-webkit-overflow-scrolling:touch;}
.gallery a {display:inline-block; height:6em; border:2px solid;border-radius:2px;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box;}
.gallery img {display:inline-block;vertical-align:bottom; height:100%;}

.gallery.big a {height:12em;}

/* justify grid */
.grid {text-align:justify; font-size:0;}
.grid &gt; * {display:inline-block; font-size:1rem;font-size:initial;}
.grid:after {content: ''; display:inline-block; width:100%;}

/* rwd */
.rwd {
  display:block; white-space:nowrap; padding-left:1.7em; padding-bottom:5.5em;
}
.rwd .device {position:relative; margin-right:.5rem;}
.rwd .device:before {content:" "; position:absolute; top:0;left:0;right:0;bottom:0; z-index:1; border:3px solid; margin:-3px; border-radius:2px;}
.rwd .device:after {content:"."; display:block; width:100%; height:0; overflow:hidden;}

.rwd .header,
.rwd .article1,
.rwd .article2,
.rwd .footer {display:block;}

.rwd .header {background:#E0E0E0; height:100%;}
.rwd .article1 {background:#FEEF70; height:100%;}
.rwd .article2 {background:#F4F4F4;height:140%;}
.rwd .footer {background:#EBEBEB; height:40%;}

.rwd .device {width:1.68em; height:3em; display:inline-block;vertical-align:bottom;}
.rwd .device.mobile .header {float:left; width:100%; position:relative;left:-100%;}

.rwd .device.tablet {width:3.45em;height:4.68em;}
.rwd .device.tablet .header {height:17%;}
.rwd .device.tablet .article1 {height:37%;}
.rwd .device.tablet .article2 {height:57%;}
.rwd .device.tablet .footer {height:13%;}

.rwd .device.desktop {width:9em;height:7.56em;}
.rwd .device.desktop .header {height:17%;}
.rwd .device.desktop .article1 {float:left;width:30%; height:100%;}
.rwd .device.desktop .article2 {margin-left:30%; height:100%;}
.rwd .device.desktop .footer {clear:both; height:13%;}

.rwd {position:relative;}
.rwd .tagline {position:absolute; left:0;bottom:0;top:9.8em; width:100%; padding-left:4em;padding-right:3px; color:rgba(0,0,0,.8); font-style:italic; font-weight:100; line-height:1.2;}
.rwd .tagline strong {font-weight:400;}

.rwd .tagline:before,
.rwd .tagline &gt;.in {display:inline-block;vertical-align:middle;}
.rwd .tagline:before {content:" ";height:100%;}

.rwd .tagline &gt;.in {/*font-size:80%;*/}

@media (min-width:769px) {
  .rwd {font-size:100%; margin-top:0;}
  
  header {float:left; width:17.5em; text-align:right;}
  header ~ .main {margin-left:20em; margin-top:5.2em;}
}
@media (max-width:768px) {
  p.gallery,
  #overview .calltoaction {
    width:112.49998593750175%; /* λ = 1 / (1 - 2*5.55555%) */
    margin-left:-6.249992968750878%; /* λ * 5.55555% */
    padding-left:6.249992968750878%;padding-right:6.249992968750878%;
  }
}

.btn {border:1px solid;padding-left:.25em;padding-right:.25em; border-radius:2px;}
a.btn:hover {text-decoration:none;}

a.demo:before {content:"\f11b"; font-family:"aberniericonfont";}
/*a.call:before {content:"\f11c"; font-family:"aberniericonfont";}
a.mail:before {content:"\f11d"; font-family:"aberniericonfont";}*/

#overview ul strong {font-weight:400;}
#overview li strong + p {margin-top:0}
#overview .calltoaction {text-align:center;background-color:#F4F4F4;padding:1em;}
#overview .calltoaction p {margin:0;}
#overview .calltoaction p:first-child {margin-bottom:.5em}
#overview .calltoaction strong {text-transform:uppercase; line-height:1;}
#overview .calltoaction .btn:first-child {margin-bottom:.25em;}
</style>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900"/>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <!-- meta inserted by hCard Validator -->
  </head>
  <body>

<aside><h1 class="visuallyhidden">Me elsewhere</h1>
  <p>
    <a href="#contact">Contact</a> — 
    <a rel="me" href="http://fr.creasenso.com/web/integrateurs-html-css/antoine-3">creasenso</a> 
    <a rel="me" href="http://github.com/abernier">github</a> 
    <a rel="me" href="http://twitter.com/abernier_">Twitter</a> 
    <a rel="me author publisher" href="https://plus.google.com/112312460559484712912?rel=author">G+</a>
    <a rel="me" href="http://stackoverflow.com/users/133327/abernier">Stackoverflow</a> 
    <a rel="me" href="http://dribbble.com/abernier">dribbble</a> 
    <a rel="me" href="http://pinterest.com/aaabernier/">Pinterest</a> 
    <a rel="me" href="http://www.colourlovers.com/lover/abernier">COLOURlovers</a> 
  </p>
</aside><header><h1>
    <a href="http://abernier.name" class="fn-and-photo" itemprop="url"><img alt="" class="avatar" src="http://i.imgur.com/fGcHrJy.jpg" itemprop="image"/><span itemprop="name">Antoine BERNIER</span></a>
    <abbr title="World Wide Web">www</abbr><span>ebsite</span>
  </h1>
  <span class="rwd">
    <span class="device mobile">
      <span class="header"/>
      <span class="article1"/>
      <span class="article2"/>
      <span class="footer"/>
    </span>
    <span class="device tablet">
      <span class="header"/>
      <span class="article1"/>
      <span class="article2"/>
      <span class="footer"/>
    </span>
    <span class="device desktop">
      <span class="header"/>
      <span class="article1"/>
      <span class="article2"/>
      <span class="footer"/>
    </span>
    <span class="tagline"><span class="in">
      responsive web <strong>design</strong> <br/>&amp; <strong>development</strong>
    </span></span>
  </span>
</header><div class="main">
  <main><section id="overview"><h2>Got a minute?</h2>
      <p>Quickly, here is what I can do for you:</p>
      <ul><li>
          <strong class="h3">PSD to HTML</strong>
          <p>I turn pixels into live html/css elements — (<a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html">see a demo</a>)</p>
        </li><li>
          <strong class="h3">Javascript development</strong>
          <p>I can create UI plugins/widgets for you or custom behaviors for web and mobile — (<a class="demo" href="http://bl.ocks.org/abernier/raw/8561651/">see a demo</a>)</p>
        </li><li>
          <strong class="h3">UI/UX design</strong>
          <p>I can help you (re-)design your pages by delivering clear and simple mockups  — (<a class="demo" href="https://docs.google.com/file/d/0BwQNm5fx5y30Q2Z4Zm1JM2tvRGM/preview">see an example</a>)</p>
        </li>
      </ul><div class="calltoaction">
        <p><strong class="h3">Let's talk about your project</strong></p>
        <p>Contact me by phone <a class="btn call" href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='tel:'+this.innerText;">914404806.33+</a> or email <a class="btn mail" href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='mailto:'+this.­innerText;">moc.liamg@reinreb.eniotna</a></p>
      </div>
    </section><section id="recent"><h2>Recent work</h2>

      <article id="bpwww"><h3>Black Pizza portfolio</h3>

        <p class="gallery no-c">
          <a href="images/bpwww-altaglio-mobile.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html"><img src="images/bpwww-altaglio-mobile-h200.png" alt=""/></a>
          <a href="images/bpwww-altaglio-tablet.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html"><img src="images/bpwww-altaglio-tablet-h200.png" alt=""/></a>
          <a href="images/bpwww-altaglio-desktop.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html"><img src="images/bpwww-altaglio-desktop-h200.png" alt=""/></a>

          <a href="images/bpwww-thekase-mobile.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html"><img src="images/bpwww-thekase-mobile-h200.png" alt=""/></a>
          <a href="images/bpwww-thekase-tablet.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html"><img src="images/bpwww-thekase-tablet-h200.png" alt=""/></a>
          <a href="images/bpwww-thekase-desktop.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html"><img src="images/bpwww-thekase-desktop-h200.png" alt=""/></a>

          <a href="images/bpwww-ccc-mobile.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html"><img src="images/bpwww-ccc-mobile-h200.png" alt=""/></a>
          <a href="images/bpwww-ccc-tablet.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html"><img src="images/bpwww-ccc-tablet-h200.png" alt=""/></a>
          <a href="images/bpwww-ccc-desktop.png" data-lightbox-demo="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html"><img src="images/bpwww-ccc-desktop-h200.png" alt=""/></a>
        </p>

        <p>
          Live demos: <a class="demo" href="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/altaglio.html">Altaglio</a>, <a class="demo" href="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/thekase.html">the Kase</a>, <a class="demo" href="https://cfbf48e6968a641407b8c1d5c­db18891152bc743.googledrive.com/host/0BwQNm5fx5y30VkdQRTI4VloxUFU/ccc.html">CCC</a>
        </p>

        <p>Agence : <a href="http://blackpizza.com/" target="_blank">Black Pizza</a></p>
      </article><article id="lv"><h3>Louis Vuitton</h3>

        <p class="gallery no-c">
          <a href="images/lv01-home-mobile.png"><img src="images/lv01-home-mobile-h200.png" alt=""/></a>
          <a href="images/lv02-home-mobile-landscape.png"><img src="images/lv02-home-mobile-landscape-h200.png" alt=""/></a>
          <a href="images/lv03-home-tablet-portrait.png"><img src="images/lv03-home-tablet-portrait-h200.png" alt=""/></a>
          <a href="images/lv04-home-tablet-landscape.png"><img src="images/lv04-home-tablet-landscape-h200.png" alt=""/></a>

          <a href="images/lv05-home-mobile-overlay.png"><img src="images/lv05-home-mobile-overlay-h200.png" alt=""/></a>
          <a href="images/lv06-home-mobile-landscape-overlay.png"><img src="images/lv06-home-mobile-landscape-overlay-h200.png" alt=""/></a>
          <a href="images/lv07-home-tablet-portrait-overlay.png"><img src="images/lv07-home-tablet-portrait-overlay-h200.png" alt=""/></a>
          <a href="images/lv08-home-tablet-landscape-overlay.png"><img src="images/lv08-home-tablet-landscape-overlay-h200.png" alt=""/></a>
        </p>

        <p>UX design for men's closet section of <a href="http://fr.louisvuitton.com/fra-fr/histoires/le-dressing-homme-hiver-2014">louisvuitton.com</a></p>
      </article><article id="ccc"><h3>Confidential CC</h3>

        <p class="gallery no-c">
          <a href="images/ccc-mobile-w360.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-mobile-w360-h200.png" alt=""/></a>
          <a href="images/ccc-tablet-w768.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-tablet-w768-h200.png" alt=""/></a>
          <a href="images/ccc-tablet-w1024.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-tablet-w1024-h200.png" alt=""/></a>
          <a href="images/ccc-tablet-w1400.jpg" data-lightbox-demo="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html"><img src="images/ccc-tablet-w1400-h200.png" alt=""/></a>
        </p>

        <p>Responsive CCC landing page</p>
        <p>
          <a class="demo" href="https://149898f58e1b1f163c3365169­0c1e509281870b6.googledrive.com/host/0BwQNm5fx5y30U1lybUtmdzhsc2M/index.html">Live demo</a>
        </p>

        <p>Agence : <a href="http://blackpizza.com/" target="_blank">Black Pizza</a></p>
      </article><article id="msbmockups"><h3>My Social Book</h3>

        <p class="gallery no-c">
          <a href="images/msb-mobile_0032_Layer-1.png"><img src="images/msb-mobile_0032_Layer-1-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0031_Layer-2.png"><img src="images/msb-mobile_0031_Layer-2-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0030_Layer-3.png"><img src="images/msb-mobile_0030_Layer-3-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0029_Layer-4.png"><img src="images/msb-mobile_0029_Layer-4-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0028_Layer-5.png"><img src="images/msb-mobile_0028_Layer-5-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0027_Layer-6.png"><img src="images/msb-mobile_0027_Layer-6-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0026_Layer-7.png"><img src="images/msb-mobile_0026_Layer-7-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0025_Layer-8.png"><img src="images/msb-mobile_0025_Layer-8-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0024_Layer-9.png"><img src="images/msb-mobile_0024_Layer-9-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0023_Layer-10.png"><img src="images/msb-mobile_0023_Layer-10-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0022_Layer-11.png"><img src="images/msb-mobile_0022_Layer-11-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0021_Layer-12.png"><img src="images/msb-mobile_0021_Layer-12-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0020_Layer-13.png"><img src="images/msb-mobile_0020_Layer-13-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0019_Layer-14.png"><img src="images/msb-mobile_0019_Layer-14-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0018_Layer-15.png"><img src="images/msb-mobile_0018_Layer-15-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0017_Layer-16.png"><img src="images/msb-mobile_0017_Layer-16-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0016_Layer-17.png"><img src="images/msb-mobile_0016_Layer-17-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0015_Layer-18.png"><img src="images/msb-mobile_0015_Layer-18-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0014_Layer-19.png"><img src="images/msb-mobile_0014_Layer-19-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0013_Layer-20.png"><img src="images/msb-mobile_0013_Layer-20-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0012_Layer-21.png"><img src="images/msb-mobile_0012_Layer-21-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0011_Layer-22.png"><img src="images/msb-mobile_0011_Layer-22-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0010_Layer-23.png"><img src="images/msb-mobile_0010_Layer-23-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0009_Layer-24.png"><img src="images/msb-mobile_0009_Layer-24-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0008_Layer-25.png"><img src="images/msb-mobile_0008_Layer-25-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0007_Layer-26.png"><img src="images/msb-mobile_0007_Layer-26-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0006_Layer-27.png"><img src="images/msb-mobile_0006_Layer-27-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0005_Layer-28.png"><img src="images/msb-mobile_0005_Layer-28-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0004_Layer-29.png"><img src="images/msb-mobile_0004_Layer-29-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0003_Layer-30.png"><img src="images/msb-mobile_0003_Layer-30-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0002_Layer-31.png"><img src="images/msb-mobile_0002_Layer-31-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0001_Layer-32.png"><img src="images/msb-mobile_0001_Layer-32-h200.png" alt=""/></a>
          <a href="images/msb-mobile_0000_Layer-33.png"><img src="images/msb-mobile_0000_Layer-33-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0013_Layer-1.png"><img src="images/msb-tablet_0013_Layer-1-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0012_Layer-2.png"><img src="images/msb-tablet_0012_Layer-2-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0011_Layer-3.png"><img src="images/msb-tablet_0011_Layer-3-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0010_Layer-4.png"><img src="images/msb-tablet_0010_Layer-4-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0009_Layer-5.png"><img src="images/msb-tablet_0009_Layer-5-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0008_Layer-6.png"><img src="images/msb-tablet_0008_Layer-6-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0007_Layer-11.png"><img src="images/msb-tablet_0007_Layer-11-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0006_Layer-12.png"><img src="images/msb-tablet_0006_Layer-12-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0005_Layer-13.png"><img src="images/msb-tablet_0005_Layer-13-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0004_Layer-14.png"><img src="images/msb-tablet_0004_Layer-14-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0003_Layer-7.png"><img src="images/msb-tablet_0003_Layer-7-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0002_Layer-8.png"><img src="images/msb-tablet_0002_Layer-8-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0001_Layer-9.png"><img src="images/msb-tablet_0001_Layer-9-h200.png" alt=""/></a>
          <a href="images/msb-tablet_0000_Layer-10.png"><img src="images/msb-tablet_0000_Layer-10-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0006_Layer-1.png"><img src="images/msb-desktop_0006_Layer-1-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0005_Layer-2.png"><img src="images/msb-desktop_0005_Layer-2-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0004_Layer-3.png"><img src="images/msb-desktop_0004_Layer-3-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0003_Layer-4.png"><img src="images/msb-desktop_0003_Layer-4-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0002_Layer-5.png"><img src="images/msb-desktop_0002_Layer-5-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0001_Layer-7.png"><img src="images/msb-desktop_0001_Layer-7-h200.png" alt=""/></a>
          <a href="images/msb-desktop_0000_Layer-8.png"><img src="images/msb-desktop_0000_Layer-8-h200.png" alt=""/></a>
        </p>

        <p>UX responsive design for MySocialBook web-app.</p>
      </article><article id="rm"><h3>Richard Mille</h3>

        <p class="gallery no-c">
          <a href="images/rm-splash.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-splash-h200.png" alt=""/></a>
          <a href="images/rm-home.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-h200.png" alt=""/></a>
          <a href="images/rm-home-hover.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-hover-h200.png" alt=""/></a>
          <a href="images/rm-home-zoom1.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom1-h200.png" alt=""/></a>
          <a href="images/rm-home-zoom2.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom2-h200.png" alt=""/></a>
          <a href="images/rm-home-zoom3.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom3-h200.png" alt=""/></a>
          <a href="images/rm-home-zoom4.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-zoom4-h200.png" alt=""/></a>
          <a href="images/rm-home-filters.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/home.html"><img src="images/rm-home-filters-h200.png" alt=""/></a>
          <a href="images/rm-27.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/overview.html"><img src="images/rm-27-h200.png" alt=""/></a>
          <a href="images/rm-27-details.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/overview.html"><img src="images/rm-27-details-h200.png" alt=""/></a>
          <a href="images/rm-27-slideshow.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30UlRZdWNBNE5yNFU/details-rm27.html"><img src="images/rm-27-slideshow-h200.png" alt=""/></a>
          <a href="images/rm-home-menu.png"><img src="images/rm-home-menu-h200.png" alt=""/></a>
        </p>

        <p>Agence : <a href="http://www.5emegauche.com/" target="_blank">5ème gauche</a></p>
      </article><article id="msb"><h3>bpifrance: Banque Publique d'Investissement</h3>

        <p class="gallery no-c">
          <a href="images/bpi-home-desktop.png" data-lightbox-demo="http://www.bpifrance.fr"><img src="images/bpi-home-desktop-h200.png" alt=""/></a>
          <a href="images/bpi-home-desktop-steps.png" data-lightbox-demo="http://www.bpifrance.fr"><img src="images/bpi-home-desktop-steps-h200.png" alt=""/></a>
          <a href="images/bpi-mission-desktop.png"><img src="images/bpi-mission-desktop-h200.png" alt=""/></a>
          <a href="images/bpi-news-desktop.png"><img src="images/bpi-news-desktop-h200.png" alt=""/></a>
          <a href="images/bpi-solutions-desktop.png"><img src="images/bpi-solutions-desktop-h200.png" alt=""/></a>
          <a href="images/bpi-menu-councellor.png"><img src="images/bpi-menu-councellor-h200.png" alt=""/></a>
          <a href="images/bpi-entrepreneurs.png"><img src="images/bpi-entrepreneurs-h200.png" alt=""/></a>
          <a href="images/bpi-search.png"><img src="images/bpi-search-h200.png" alt=""/></a>
          <a href="images/bpi-home-mobile.png" data-lightbox-demo="http://www.bpifrance.com"><img src="images/bpi-home-mobile-h200.png" alt=""/></a>
          <a href="images/bpi-mission-mobile.png"><img src="images/bpi-mission-mobile-h200.png" alt=""/></a>
          <a href="images/bpi-news-mobile.png"><img src="images/bpi-news-mobile-h200.png" alt=""/></a>
          <a href="images/bpi-solutions-mobile.png"><img src="images/bpi-solutions-mobile-h200.png" alt=""/></a>
        </p>
        <p>Responsive website for the french <cite>Banque Publique d'Investissement</cite></p>
        <p>Agence : <a href="http://www.5emegauche.com/" target="_blank">5ème gauche</a></p>
        <p>
          <a href="http://www.bpifrance.fr" class="demo">Live demo</a>
        </p>
      </article><article id="msb"><h3>MSB</h3>

        <p class="gallery no-c">
          <a href="images/msb-mailing-desktop.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30V3JGOG9nVmdBc0E/exclusive-offer.html"><img src="images/msb-mailing-desktop-h200.png" alt=""/></a>
          <a href="images/msb-mailing-mobile.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30V3JGOG9nVmdBc0E/exclusive-offer.html"><img src="images/msb-mailing-mobile-h200.png" alt=""/></a>
        </p>
        <p>Responsive emailing for MySocialBook company.</p>
        <p>
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30V3JGOG9nVmdBc0E/exclusive-offer.html">Live demo</a>
        </p>
      </article><article id="milka"><h3>Milka - les oeufs cachés</h3>

        <p class="gallery no-c">
          <a href="images/milka00-preloading.png"><img src="images/milka00-preloading-h200.png" alt=""/></a>
          <a href="images/milka01-ready.jpg"><img src="images/milka01-ready-h200.png" alt=""/></a>
          <a href="images/milka02-howto.jpg"><img src="images/milka02-howto-h200.png" alt=""/></a>
          <a href="images/milka03-gardens.jpg"><img src="images/milka03-gardens-h200.png" alt=""/></a>
          <a href="images/milka04-gardens2.jpg"><img src="images/milka04-gardens2-h200.png" alt=""/></a>
          <a href="images/milka05-scratch.jpg"><img src="images/milka05-scratch-h200.png" alt=""/></a>
          <a href="images/milka06-scratch-done.jpg"><img src="images/milka06-scratch-done-h200.png" alt=""/></a>
          <a href="images/milka07-scratch-popup.jpg"><img src="images/milka07-scratch-popup-h200.png" alt=""/></a>
        </p>
        <p>Tablet version of the Milka's special easter event application.</p>
        <p>Agence : <a href="http://www.grouek.com" target="_blank">Grouek</a></p>
      </article><article id="upup"><h3>Upup</h3>

        <p class="gallery no-c">
          <a href="images/upup-cover.png"><img src="images/upup-cover-h200.png" alt=""/></a>
          <a href="images/upup-splash.png"><img src="images/upup-splash-h200.png" alt=""/></a>
          <a href="images/upup-home.png"><img src="images/upup-home-h200.png" alt=""/></a>
          <a href="images/upup-sales.png"><img src="images/upup-sales-h200.png" alt=""/></a>
          <a href="images/upup-wallet.png"><img src="images/upup-wallet-h200.png" alt=""/></a>
          <a href="images/upup-plan.png"><img src="images/upup-plan-h200.png" alt=""/></a>
          <a href="images/upup-boxes.png"><img src="images/upup-boxes-h200.png" alt=""/></a>
          <a href="images/upup-upload1.png"><img src="images/upup-upload1-h200.png" alt=""/></a>
          <a href="images/upup-page.png"><img src="images/upup-page-h200.png" alt=""/></a>
          <a href="images/upup-purchase.png"><img src="images/upup-purchase-h200.png" alt=""/></a>
        </p>
        <p>UX design of the selling downloads web-application Upup.</p>
      </article><article id="pnensba"><h3><abbr class="short" title="Pôle numérique de l'École Nationale des Beaux-Arts">pnENSBA</abbr><span>Pôle numérique de l'École Nationale des Beaux-Arts</span></h3>

        <p class="gallery no-c">
          <a href="images/pnensba-mockup.png"><img src="images/pnensba-mockup-h200.jpg" alt=""/></a>
        </p>
        <p>UX design of Pnensba's mobile website.</p>
      </article><article id="likebook"><h3>My Social Book <small>(previously Likebook)</small></h3>

        <p class="gallery">
          <a href="images/likebook-homepage.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html"><img src="images/likebook-homepage-h200.jpg" alt=""/></a>
          <a href="images/likebook-homepage-global.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html"><img src="images/likebook-homepage-global-h200.png" alt=""/></a>
          <a href="images/likebook-3d-parametric-cover.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/cover.html"><img src="images/likebook-3d-parametric-cover-h200.jpg" alt=""/></a>
          <a href="images/likebook-app1.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/app.html"><img src="images/likebook-app1-h200.jpg" alt=""/></a>
          <a href="images/likebook-app2.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/app.html"><img src="images/likebook-app2-h200.jpg" alt=""/></a>
          <a href="images/likebook-library.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/profile.html"><img src="images/likebook-library-h200.jpg" alt=""/></a>
          <a href="images/likebook-gp-mockup.png" data-lightbox-demo="https://docs.google.com/file/d/0BwQNm5fx5y30Q2Z4Zm1JM2tvRGM/preview"><img src="images/likebook-gp-mockup-h200.jpg" alt=""/></a>
          <a href="images/likebook-gp-web.png" data-lightbox-demo="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/gerardpique.html"><img src="images/likebook-gp-web-h200.jpg" alt=""/></a>
        </p>

       <p>HTML/CSS integration and animations of Likebook website.</p>

        <p>
          <strong>Live demos</strong>:
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/index.html">homepage</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/cover.html">3d parametric cover</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/checkout.html">checkout</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/app.html">application</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30RXlldXF4ODUtT3c/profile.html">profile</a>, 
          <a class="demo" href="https://docs.google.com/file/d/0BwQNm5fx5y30Q2Z4Zm1JM2tvRGM/preview">Gerard Pique's page mockup</a>, 
          <a class="demo" href="https://googledrive.com/host/0BwQNm5fx5y30NFNKWVJfMmhsdTQ/gerardpique.html">Gerard Piqué's page</a>
        </p>
      </article><article><h3>Dailymotion</h3>

        <p class="gallery">
          <a href="images/dailymotion-grundig-poc.png"><img src="images/dailymotion-grundig-poc-h200.png" alt=""/></a>
        </p>
        <p>Speech-recognition proof of concept for dailymotion.</p>
      </article><article><h3>ZAPtélé</h3>

        <p class="gallery">
          <a href="images/zaptele-logo.png" data-lightbox-demo="http://dabblet.com/gist/5319853/"><img src="images/zaptele-logo-h200.jpg" alt=""/></a>
        </p>
        <p>Responsive HTML5 integration of zap-tele website.</p>
        <p>
          <strong>Live demos</strong>:
          <a class="demo" href="http://dabblet.com/gist/5319853/">parametric logo</a>,
          <a class="demo" href="http://www.zap-tele.com">responsive website</a>
        </p>
      </article><article><h3>Is Cool</h3>

        <p class="gallery">
          <a href="images/iscool-pelican.png"><img src="images/iscool-pelican-h200.jpg" alt=""/></a>
          <a href="images/iscool-mammoth.png"><img src="images/iscool-mammoth-h200.jpg" alt=""/></a>
          <a href="images/iscool-mammoth2.png"><img src="images/iscool-mammoth2-h200.jpg" alt=""/></a>
          <a href="images/iscool-tickets.png"><img src="images/iscool-tickets-h200.jpg" alt=""/></a>
          <a href="images/iscool-album.png"><img src="images/iscool-album-h200.jpg" alt=""/></a>
          <a href="images/iscool-yeti-bathroom.png"><img src="images/iscool-yeti-bathroom-h200.jpg" alt=""/></a>
          <a href="images/iscool-yeti-village.png"><img src="images/iscool-yeti-village-h200.jpg" alt=""/></a>
        </p>
      </article></section><section><h2>Experiments</h2>

      <p class="gallery">
        <a href="images/pizzaideoscope.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/9070122/"><img src="images/pizzaideoscope-h200.png" alt=""/></a>
        <a href="images/box2d-demo.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/8561651/"><img src="images/box2d-demo-h200.jpg" alt=""/></a>
        <a href="images/pictocool.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/afdea084a7bf48fbddfc/"><img src="images/pictocool-h200.jpg" alt=""/></a>
        <a href="images/inertia.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/3306964/"><img src="images/inertia-h200.jpg" alt=""/></a>
        <a href="images/pacman.png" data-lightbox-demo="http://bl.ocks.org/abernier/raw/4961058/"><img src="images/pacman-h200.jpg" alt=""/></a>
        <a href="images/css3patterns.png" data-lightbox-demo="http://lea.verou.me/css3patterns/#houndstooth"><img src="images/css3patterns-h200.png" alt=""/></a>
        <a href="images/renard.png" data-lightbox-demo="http://bl.ocks.org/3156626"><img src="images/renard-h200.jpg" alt=""/></a>
        <a href="images/flipbook.png" data-lightbox-demo="http://bl.ocks.org/3136589"><img src="images/flipbook-h200.jpg" alt=""/></a>
        <a href="images/googlecamera.png" data-lightbox-demo="http://bl.ocks.org/1515911"><img src="images/googlecamera-h200.jpg" alt=""/></a>
      </p>
      
      <p>
        <a href="http://bl.ocks.org/abernier/e082a201b0865de1a41f">scribble.js</a>, 
        <a href="http://bl.ocks.org/abernier/c3b9584d63bfd802e08f">watchcss.js</a>, 
        <a href="http://bl.ocks.org/abernier/97a5fb8c1bebacd1958e">domvertices.js</a>, 
        <a href="https://gist.github.com/abernier/e2b89babf490a4d0fee2">CSS cheat sheet</a>, 
        <a href="http://bl.ocks.org/abernier/raw/0837661e346360b5385b/">parallax.js</a>, 
        <a href="https://gist.github.com/abernier/83eee1cf3c019a0fa43d">CarouselView.js</a>, 
        <a href="https://gist.github.com/abernier/11097105">google spreadsheet cheat sheet</a>, 
        <a href="https://gist.github.com/abernier/9482101">index.html boiler</a>, 
        <a href="http://bl.ocks.org/abernier/raw/9070122/">Pizzaïdoscope</a>, 
        <a href="http://bl.ocks.org/abernier/raw/8561651/">Box2D-demo</a>, 
        <a href="http://bl.ocks.org/abernier/raw/afdea084a7bf48fbddfc/">Pictocool</a>, 
        <a href="http://bl.ocks.org/abernier/raw/3306964/">Inertia</a>, 
        <a href="http://bl.ocks.org/abernier/raw/4961058/">PAC-SS</a>, 
        <a href="http://bl.ocks.org/abernier/raw/8275645/">Responsive flyout menu</a>, 
        <a href="http://bl.ocks.org/abernier/raw/8544489/">TransitionAB</a>, 
        <a href="https://gist.github.com/abernier/7296362">UNIX cheat sheet</a>, 
        <a href="https://gist.github.com/abernier/6461914">JavaScript cheat sheet</a>, 
        <a href="http://jsfiddle.net/abernier/GzAxS/">CSS counter increment</a>, 
        <a href="https://gist.github.com/abernier/6008348">cURL tips</a>, 
        <a href="javascript:(function (src) {var s;s=document.createElemen­t('script');s.src=src;document.body.appendChild(s);}('https://gist.github.com/abernier/cb2cf45a75225f96eff1/raw/bookmarklet.js'));">bookmarklet</a>, 
        <a href="http://bl.ocks.org/3411189">Box2D</a>, 
        <a href="https://gist.github.com/3227047">Clone gist in Mac</a>, 
        <a href="https://gist.github.com/3225993">loop.coffee</a>, 
        <a href="http://bl.ocks.org/3193698">$.inside</a>, 
        <a href="https://gist.github.com/3191472">$.fn.offsetRelative</a>, 
        <a href="http://bl.ocks.org/3156626">#Renard's</a>, 
        <a href="http://bl.ocks.org/3157389">$.fn.baseline</a>, 
        <a href="http://stackoverflow.com/questions/1034881/what-is-the-best-practice-for-parsing-remote-content-with-jquery/11379717#11379717">fetchDoc</a>, 
        <a href="http://bl.ocks.org/abernier/1653407">$.fn.segment</a>, 
        <a href="http://bl.ocks.org/3111167">CSS 3D Gauge</a>, 
        <a href="http://bl.ocks.org/1512474">2D camera</a>, 
        <a href="http://bl.ocks.org/1515911">Google camera</a>, 
        <a href="http://bl.ocks.org/3136589">flipbook</a>, 
        <a href="http://bl.ocks.org/3070589">Link anatomy</a>, 
        <a href="https://gist.github.com/2890490">µdatas memo</a>, 
        <a href="http://bl.ocks.org/2867324">CSS vertical centering technique</a>, 
        <a href="http://lea.verou.me/css3patterns/#houndstooth">Houndstooth CSS3 pattern</a>, 
        <a href="http://bl.ocks.org/1788900">$.fn.firework</a>, 
        <a href="https://gist.github.com/raw/1368637/acegist.user.js">ACEgist (userscript)</a>, 
        <a href="http://search.npmjs.org/#/nq">nq</a>, 
        <a href="http://bl.ocks.org/3136666">animationframe</a>, 
        <a href="http://bl.ocks.org/abernier/1101653">method/function invocation pattern</a>
      </p>
    </section></main><footer class="foot" id="contact"><h1 class="visuallyhidden">Contact</h1>
    <address><p>
      <a href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='mailto:'+this.­innerText;">moc.liamg@reinreb.eniotna</a>
       —  
      <a href="javascript:void 0;" style="display:inline-block; unicode-bidi:bidi-override; direction: rtl;" onmouseover="this.innerTe­xt=this.innerText.split('').reverse().join(''); this.style.unicodeBidi=''­;this.style.direction=''; this.removeAttribute('onmouseover'); this.href='tel:'+this.innerText;">914404806.33+</a>
       — 
      <a href="geo:48.8617795,2.3696959000000106" itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">passage Saint Sébastien</span>, <span itemprop="postalCode">75011</span> <span itemprop="addressLocality">Paris</span>, <span itemprop="addressCountry">France</span></a>
    </p></address>
  </footer></div>

<style>
/*lightbox component*/
.lightbox {position:fixed; left:0;right:0;top:0;bottom:0; z-index:99; background:rgba(0,0,0,.8); overflow:auto;}
.lightbox {text-align:center;}

.lightbox {white-space:nowrap;}
.lightbox * {white-space:normal;white-space:initial;}
.lightbox:before {content:" "; display:inline-block;vertical-align:middle; height:100%; width:0;}
.lightbox img {display:inline-block;vertical-align:middle; max-width:100%;/* max-height:100%;*/}

.lightbox nav {position:fixed;bottom:0;right:0;z-index:99; margin:.5em;}
.lightbox nav a+a {margin-left:.25em;}
.lightbox .kbd {display:inline-block; background:black; color:white; padding:.5em; border-radius:3px;}
.lightbox kbd {font-family:inherit; font-size:50%; vertical-align:middle;}
.lightbox kbd:before {content:"(";}
.lightbox kbd:after {content:")";}
.lightbox a {text-decoration:none; opacity:.5;}
.lightbox a:hover,
.lightbox a:active,
.lightbox a.active {opacity:1;}
.lightbox a.disabled {opacity:0.2; cursor:not-allowed;}
.lightbox .close {position:fixed;left:0;top:0;z-index:99; margin:.5em;}
.lightbox .demo {position:fixed;right:0;top:0;z-index:99; margin:.5em; background:#FEEF70; color:black; opacity:.8; text-align:left; max-width:60%;}
.lightbox .demo:after {content:attr(href); display:block; font-size:50%; text-overflow: ellipsis;overflow:hidden;}
.lightbox .demo:hover:after {max-width:99em;}
.lightbox .meter {position:fixed;top:0;left:0;z-index:99; width:0%; height:3px; background:#FEEF70;}
</style><script src="jquery-2.0.3.js"/><script src="lightbox.js"/><script>
(function () {
  // listen to instantiate lightbox instances
  $('body').delegate('.gallery a', 'click', function (e) {
    e.preventDefault();

    var link = this;
    new Lightbox(link, {
      //transitionduration: 500,
      //progressbar: false
    });
  });
}());
</script><script src="jquery-2.0.3.js"/><style>
.gallery + p a.highlight {text-decoration:underline;}
.gallery [data-lightbox-demo].highlight {/*border-color:transparent;*/}
</style><script>
(function () {
  $('.gallery [data-lightbox-demo]').hover(function () {
    var demoLink = $(this).data('lightbox-demo');
    
    $(this).closest('.gallery').find('+p a[href]').filter(function (i, el) {return $(el).attr('href') === demoLink;}).addClass('highlight');
  }, function () {
    $(this).closest('.gallery').find('+p a[href]').removeClass('highlight')
  });

  $('.gallery + p a[href]').hover(function () {
    var link = $(this).attr('href');
    
    $(this).closest('p').prev().find('[data-lightbox-demo]').filter(function (i, el) {return $(el).data('lightbox-demo') === link;}).addClass('highlight');
  }, function () {
    $(this).closest('p').prev().find('[data-lightbox-demo]').removeClass('highlight')
  });
}());
</script><script src="jquery-2.0.3.js"/><script>
(function($) {
  $.fn.uncomment = function(recurse) {
    $(this).contents().each(function () {
      if (recurse &amp;&amp; this.hasChildNodes()) {
        $(this).uncomment(recurse);
      } else if (this.nodeType === 8) {
        // Need to "evaluate" the HTML content, otherwise simple text won't replace
        var $div = $('&lt;div&gt;' + this.nodeValue + '');
        $(this).replaceWith($div.contents());
      }
    });
  };
})(jQuery);
if (document.location.search &amp;&amp; document.location.search.match(/uncomment(=(true|1))?/)) {
  $('*:not(iframe)').uncomment();
}
</script><script>
(function(i,s,o,g,r,a,m){­i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(­o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script><script data-cfasync="false" type="text/javascript">/*&lt;![CDATA[*/window.olark||(function(c){var f=window,d=document,l=f.l­ocation.protocol=="https:"?"https:":"http:",z=c.name,r="load";var nt=function(){
f[z]=function(){
(a.s=a.s||[]).push(arguments)};var a=f[z]._={
},q=c.methods.length;while(q--){(function(n){f[z][n]=function(){
f[z]("call",n,arguments)}­})(c.methods[q])}a.l=c.loader;a.i=nt;a.p={
0:+new Date};a.P=function(u){
a.p[u]=new Date-a.p[0]};function s(){
a.P(r);f[z](r)}f.addEventListener?f.addEventListener(r,s,fa­lse):f.attachEvent("on"+r,s);var ld=function(){function p(hd){
hd="head";return["&lt;",hd,"&gt;&lt;/",hd,"&gt;&lt;",i,' onl' + 'oad="var d=',g,";d.getElementsByTa­gName('head')[0].",j,"(d.",h,"('script')).",k,"='",l,"//",a.l,"'",'"',"&gt;&lt;/",i,"&gt;"].join("")}var i="body",m=d[i];if(!m){
return setTimeout(ld,100)}a.P(1);var j="appendChild",h="create­Element",k="src",n=d[h]("div"),v=n[j](d[h](z)),b=d­[h]("iframe"),g="document",e="domain",o;n.style.di­splay="none";m.insertBefore(n,m.firstChild).id=z;b­.frameBorder="0";b.id=z+"-loader";if(/MSIE[ ]+6/.test(navigator.userAgent)){
b.src="javascript:false"}­b.allowTransparency="true";v[j](b);try{
b.contentWindow[g].open()}catch(w){
c[e]=d[e];o="javascript:var d="+g+".open();d.domain='­"+d.domain+"';";b[k]=o+"void(0);"}try{
var t=b.contentWindow[g];t.wr­ite(p());t.close()}catch(x){
b[k]=o+'d.write("'+p().replace(/"/g,String.fromCharCode(92)­+'"')+'");d.close();'}a.P(2)};ld()};nt()})({
loader: "static.olark.com/jsclient/loader0.js",name:"olark",­methods:["configure","extend","declare","identify"]});
/* custom configuration goes here (www.olark.com/documentation) */
olark.identify('2691-966-10-1702');/*]]&gt;*/</script><noscript><a href="https://www.olark.com/site/2691-966-10-1702/contact" title="Contact us" target="_blank">Questions? Feedback?</a> powered by <a href="http://www.olark.com?welcome" title="Olark live chat software">Olark live chat software</a></noscript>
</body>
</html>

Credits

Written by . Icons are from Tango Icon Library. Test cases include hCard Acid test by Dmitry Baranovskiy, examples from microformats.org and hCard test suite.

Source code is available under the BSD license.


¹ It's not a validator in the XML/SGML sense.