HTML5 and CSS3 "Hello My name is" Sticker

dabblet.css

/**
 * HTML5 and CSS3 "Hello My name is" Sticker
 * by @girlie_mac
 * Thank you @futomi and @thesifter, for correcting my original markup to make it in semantic html5, and @mikeleeorg, @kevinmarks and @dmitrykharlamov for suggesting me to use hCard microformat! I maybe still doing wrong with the vCard class names and semantics...
 *
*/​
article, div {
    box-sizing: border-box;
}
.vcard {
    width: 300px; height: 200px;
    background: #e00;
    border-radius: 10px;
    box-shadow: 1px 2px 5px rgba(0,0,0,.5), inset 0 0 20px rgba(0,0,0,.25); 
    transform: rotate(-10deg);
    margin: 3em auto;
}
.vcard div:first-child {
    height: 65px;
    padding-top: 5px;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .2em;
}
h1, p { 
    padding: 0; 
    margin: 0;
}
h1 {
    font-size: 2em;
}
.fn {
    background: #fff;    
    height: 120px;
    font-family: "Coming Soon", "Comic Sans MS", cursive;
    text-align: center;
    padding-top: 5px;
}
.given-name {
    font-size: 3em;
    font-weight: bold;
}    
.nickname {
    font-size: 1.5em;
    font-weight: bold;
    font-style: normal;
} ​

dabblet.html

<link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
<link rel="profile" href="http://microformats.org/profile/hcard">

<article class="vcard"> 
    <div> 
        <h1>Hello</h1> 
        <p>my name is</p> 
    </div> 
    <div class="fn"> 
        <p class="given-name">Tomomi</p> 
        <address class="nickname">@girlie_mac</address> 
    </div>
</article>

​

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"css"}