<raw-code>
<div style="display: block; background: url(http://i.imgur.com/COMtHew.png); height: 652px; width: 350px; margin: auto;">

  <!--START PHONE SCREEN-->
  <div style="display: inline-block; height: 493px; width: 286px; background: url(); margin-top: 85px; margin-left: 29px; overflow: hidden;">

    <!--START INDEX-->
    <a name="HOME"></a>
    <div style="display: inline-block; height: 493px; width: 286px;">
      <div style="display: block; width: 266px; text-align: center; padding: 10px 0px 5px 0px; margin: 0px 10px 0px; 10px; border-bottom: 1px solid #0099ff;">
        <span style="font-size: 25px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">
        CONTACTS<br/>
        </span>
      </div>

      <div style="display: block; padding: 20px; width: 246px; height: 398px; overflow: auto;">
        <center>
        <div style="margin-left: 2px;">


        <!--START IMAGE LINK-->
        <a href="#CR-LINK"><img src="IMG-URL" style="height: 55px; width: 55px; border-radius: 10px; border: 1px solid #0055ee" alt="NAME"></a>
        <!--END IMAGE LINK-->

      </div>
      </center>
      </div>

    </div>
    <!--END INDEX-->

    <!--START ENTRY-->
    <a name="CR-LINK"></a>
    <div style="display: inline-block; height: 493px; width: 286px; overflow: auto;">
      <div style="width: 286px; margin-top: 20px;">
        <img src="IMG-URL" style="border-radius: 50px; border: 2px solid #0055ee; margin-left: 91px;" alt="NAME">
      </div>
      <div style="width: 276px; border-bottom: 1px solid #0099ff; margin: 5px; height: 40px; text-align: center;">
        <span style="font-size: 25px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">
        NAME<br/>
        </span>
      </div>
      <div style="width: 286px; height: 20px;">
        <div style="display: inline-block; margin-left: 10px;">
          <span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;">
            <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #888;">USERNAME</a>
            </span>
          </div>
          <div style="display: inline-block; float: right; margin-right: 10px;">
            <span style="font-family: helvetica, arial, sans-serif; font-size:10px; color:#888; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;">
            <a href="INBOX-LINK" style="text-decoration: none; color: #888;">MESSAGE</a>
            </span>
          </div>
      </div>

      <div style="width: 266px; height: 175px; margin: 10px; background: rgba(245, 245, 255, 0.6)">
        <div style="text-align: left; padding: 5px; font-family: helvetica, arial, sans-serif; color:#888; font-size: 10px; letter-spacing: 0.5px;">
          SHORT BLURB.
        </div>
      </div>

      <div style="width: 266px; margin: 0px 10px 0px 10px; height: 90px; background: rgba(245, 245, 255, 0.6);">
        <div style="text-align: center;">
          <span style="font-size: 20px; font-family:helvetica; color:#0055ee; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #47738E 0px 1px 1px;">
          RANK
          </span>
        </div>
        <!--BARS START-->
			     <div style="display: inline-block; height: 20px; width: 130px; border: 2px solid #47738E; margin-bottom: 3px; margin-top: 8px; background: #FFF;">
				         <div style="height: 100%; width: PERCENT%; background: #HEX-COLOR;">
				          </div>
			      </div>
            <div style="display: inline-block; float: right; width: 125px; height: 40px; text-align: center;">
              <span style="font-size: 20px; font-family:helvetica; color: #HEX-COLOR; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #HEX-COLOR 0px 1px 1px; ">
              STATUS
              </span>
            </div>
		    <!--BARS END-->
      </div>
    </div>
    <!--END ENTRY-->

  </div>
  <!--END PHONE SCREEN-->

  <!--START NAVIGATION-->
  <div style="height: 50px; width: 250px; margin-left: 50px; margin-top: 5px;">
    <div id="MENU-BUTTON" style="display: inline-block;">
      <a href="#HOME"><img src="http://i.imgur.com/HoFM2eL.png" alt="Menu Button"></a>
    </div>
    <div id="HOME-BUTTON" style="display: inline-block; margin-left: 42px">
      <a href="#HOME"><img src="http://i.imgur.com/AnouINm.png" alt="Home Button"></a>
    </div>
    <div id="BACK-BUTTON" style="display: inline-block; float: right;">
      <a href="#HOME"><img src="http://i.imgur.com/rHw5yxu.png" alt="Back Button"></a>
    </div>
  </div>
  <!--END NAVIGATION-->

</div>
<div style="display: block; clear: both; height: 10px; text-align: center; font-variant: small-caps; padding: 5px;">Code by <a href="http://yuff.dreamwidth.org">Yuff</a></div>
</raw-code>