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

  <!--START PHONE SCREEN-->
  <div style="display: inline-block; height: 493px; width: 286px; background: url(https://i.imgur.com/wWiismG.png); 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 #6793f4;">
        <span style="font-size: 25px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 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 #6793f4" 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="display: inline-block; margin-left: 10px;">
          <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;">
            <a href="http://USERNAME.dreamwidth.org/" style="text-decoration: none; color: #f4f9fc;">USERNAME</a>
            </span>
          </div>
          <div style="display: inline-block; float: right; margin-right: 10px;">
            <span style="font-family: Palatino, helvetica, arial, sans-serif; font-size:10px; color:#f4f9fc; letter-spacing:1px; text-align:justify; line-height: 10px; text-transform: uppercase;">
            <a href="INBOX-URL" style="text-decoration: none; color: #f4f9fc;">MESSAGE</a>
            </span>
          </div>
      <div style="width: 286px; margin-top: 10px;">
        <img src="ICON-URL" style="border-radius: 50px; border: 2px solid #6793f4; margin-left: 91px;" alt="NAME">
      </div>
      <div style="width: 276px; border-bottom: 1px solid #6793f4; margin: 5px; height: 40px; text-align: center;">
        <span style="font-size: 22px; font-family: Palatino, helvetica; color:#f4f9fc; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #00040e 0px 1px 1px;">
        NAME MCNAME<br/>
        </span>
      </div>

      <div style="width: 266px; height: 133px; margin: 10px;">
        <div style="text-align: left; padding: 5px; font-family: Palatino, helvetica, arial, sans-serif; color:#f4f9fc; font-size: 10px; letter-spacing: 0.5px;">
          SHORT BLURB GOES HERE.
        </div>
      </div>

      <div style="width: 266px; margin: 0px 10px 0px 10px; height: 90px;">
        <div style="text-align: center;">
          <span style="font-size: 20px; font-family: Palatino, helvetica; color:#eff0eb; line-height:35px; letter-spacing:1px; font-variant: small-caps; text-shadow: #393d3c 0px 1px 1px;">
          Rank Lv #
          </span>
        </div>
        <!--BARS START-->
           <div style="display: block; margin: auto; height: 20px; width: 200px; border: 2px solid #1c484b; margin-bottom: 3px; background: #1e3c3a; border-radius: 12px;">
                 <div style="height: 100%; width: PERCENT%; background: #92f6ea; border-radius: 10px 0px 0px 10px;">
                  </div>
            </div>
            <div style="display: block; margin: auto; margin-top: 8px; width: 125px; height: 40px; text-align: center;">
              <span style="font-size: 14px; font-family: Palatino, helvetica; color: #eff0eb; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #393d3c 0px 1px 1px;">
              STATUS
              </span>
            </div>
        <!--BARS END-->
      </div>
      <div style="display: block; margin: auto; margin-top: 25px; height: 40px; text-align: center;">
              <span style="font-size: 24px; font-family: Palatino, helvetica; color: #A6A6A6; line-height:35px; letter-spacing:1px; text-transform: uppercase; text-shadow: #747474 0px 1px 1px;">
              <a href="SONG-URL" style="color: #92f6ea; text-decoration: none;" target="_blank">♫</a>
              </span>
            </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>