Advertisement
Sergiovan

CSSing

Aug 5th, 2016
313
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.24 KB | None | 0 0
  1. <body>
  2.     <div id="info-content">
  3.         <div class="row" id="main-info">
  4.             <div class="left" id="avatar-outer"> <!-- For a border around the image -->
  5.                 <div id="avatar-inner"></div> <!-- 184x184 px image --->
  6.             </div>
  7.             <div class="right" id="main-info-text">
  8.                 <div id="main-info-name-group">
  9.                     <span id="main-info-prefix">Master</span>
  10.                     <span id="main-info-race">Human</span>
  11.                     <span id="main-info-class">Programmer</span>
  12.                     <span id="main-info-name">Sergiovan</span>
  13.                     <span id="main-info-alias">"The Serg"</span> <!-- SHOWS ONLY IF ALIAS IS SET -->
  14.                 </div>
  15.                 <div id="main-info-status"><!--BANNED UNTRUSTED TRUSTED SUPERUSER -->ADMIN</div> <!-- ONLY ONE WILL SHOW, OR NOTHING IF NONE APPLY-->
  16.             </div>
  17.         </div>
  18.  
  19.         <div class="row title" id="lore-title">LORE</div>
  20.         <div class="row content" id="lore-content">Lore Ipsum is simply dummy text of the printing and typesetting industry. Lore Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lore Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lore Ipsum.</div>
  21.  
  22.         <div class="row title" id="rpg-title">RPG</div>
  23.         <div class="row" id="rpg-level">
  24.             <div class="left" id="rpg-level-name">Level</div>
  25.             <div class="right" id="rpg-level-content">1</div>
  26.         </div>
  27.         <div class="row" id="rpg-xp">
  28.             <div class="left" id="rpg-xp-name">XP</div>
  29.             <div class="right" id="rpg-xp-content">100</div>
  30.         </div>
  31.         <div class="row" id="rpg-total-xp">
  32.             <div class="left" id="rpg-total-xp-name">Total XP</div>
  33.             <div class="right" id="rpg-total-xp-content">7236728</div>
  34.         </div>
  35.         <div class="row" id="rpg-hourglasses">
  36.             <div class="left" id="rpg-hourglasses-name">Magic hourglasses</div>
  37.             <div class="right" id="rpg-hourglasses-content">24</div>
  38.         </div>
  39.         <div class="row" id="rpg-fires">
  40.             <div class="left" id="rpg-fires-name">Fires in a jar</div>
  41.             <div class="right" id="rpg-fires-content">12</div>
  42.         </div>
  43.         <div class="row" id="rpg-curses">
  44.             <div class="right" id="rpg-curses-content">Dark shadows loom over Sergiovan</div> <!-- SHOW ONLY IF ACTUALLY TRUE -->
  45.         </div>
  46.         <div class="row title" id="attributes-title">ATTRIBUTES</div>
  47.         <div class="row" id="attribute-example"> <!-- AUTOGENERATED -->
  48.             <div class="left" id="attribute-example-name">Example</div>
  49.             <div class="right" id="attribute-example-content">78</div>
  50.         </div>
  51.     </div>
  52.  
  53.     <div id="hat"></div> <!-- THIS GOES ON TOP OF THE AVATAR IF IT EXISTS, POSITION FIXED, TAKE INTO ACCOUNT IT'S AN IMAGE -->
  54.     <div id="info-box"></div> <!-- INFO WHEN HOVERING OVER CERTAIN ELEMENTS -->
  55. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement