Advertisement
ColoradoBluesCodes

Beblune ToyHouse Formatting

Dec 8th, 2018
375
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.33 KB | None | 0 0
  1. <!------------
  2. Taurnar Bestiary By @ColoradoBlues
  3. PLEASE DO NOT SELL - This is a free to use template for Beblune owners!
  4. ------------>
  5.  
  6. <div class="container">
  7.      <div class="card card-block d-block mb-4">
  8.           <h2 class="card-inverse card-header" style="letter-spacing:5px; text-transform:uppercase; background-color:#272527; text-align: left">NAME
  9.      </h2>
  10. <br>
  11.  
  12. <!-----------------------------IMAGE----------------------------->
  13. <div class="card bg-faded" style="width:275px; height:600px; border:1px solid #272527;">
  14.      <div class="card-block"><img src="https://i.imgur.com/wRBFBMV.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:250px; height:550px;"></div>
  15. </div>
  16.  
  17. <!---------------MAIN PANEL------------>
  18. <div class="ui-accordion card bg-faded" style="width:775px; height:600px; margin-left:290px; margin-top:-600px; border:1px solid #272527;">
  19.      <div class="ui-accordion-content card-block bg-faded" style="height: 600px; text-align: left">
  20.           <table class="double table-hover" style="margin-right: calc(0%); width: 100%; margin-left: calc(0%); border:none;">
  21.                <tbody>
  22.                 <tr>
  23.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Nickname</strong></td>
  24.                     <td style="width: 25.394%; text-align: left;">NICKNAME</td>
  25.                 </tr>
  26.                 <tr>
  27.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Subspecies</strong></td>
  28.                     <td style="width: 25.394%; text-align: left;">SUBSPECIES</td>
  29.                 </tr>
  30.                 <tr>
  31.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Gender</strong></td>
  32.                     <td style="text-align: left; width: 27.4451%;">GENDER</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Pronouns</strong></td>
  36.                     <td style="width: 25.394%; text-align: left;">PRONOUNS</td>
  37.                 </tr>
  38.                 <tr>
  39.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Age</strong></td>
  40.                     <td style="text-align: left; width: 27.4451%;">AGE</td>
  41.                 </tr>
  42.                 <tr>
  43.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Height</strong></td>
  44.                     <td style="text-align: left; width: 27.4451%;">HEIGHT</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Weight</strong></td>
  48.                     <td style="text-align: left; width: 27.4451%;">WEIGHT</td>
  49.                 </tr>
  50.                 <tr>
  51.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Traits</strong></td>
  52.                     <td style="width: 25.394%; text-align: left;">TRAITS</td>
  53.                 </tr>
  54.                 <tr>
  55.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Special Traits</strong></td>
  56.                     <td style="width: 25.394%; text-align: left;">SPECIALTRAITS</td>
  57.                 </tr>
  58.                 <tr>
  59.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Abilities</strong></td>
  60.                     <td style="text-align: left; width: 27.4451%;">ABILITIES</td>
  61.                 </tr>
  62.                 <tr>
  63.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Artist</strong></td>
  64.                     <td style="text-align: left; width: 27.4451%;">ARTIST</td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Obtained</strong></td>
  68.                     <td style="width: 25.394%; text-align: left;">OBTAINED</td>
  69.                 </tr>
  70.                 <tr>
  71.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Design Value</strong></td>
  72.                     <td style="text-align: left; width: 27.4451%;">DESIGNVALUE</td>
  73.                 </tr>
  74.                 <tr>
  75.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Art Value</strong></td>
  76.                     <td style="width: 25.394%; text-align: left;">ARTVALUE</td>
  77.                 </tr>
  78.                 <tr>
  79.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Database Entry</strong></td>
  80.                     <td style="text-align: left; width: 27.4451%;"><a href="LINK" id="">ENTRY</a></td>
  81.                 </tr>
  82.                 <tr>
  83.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Taking Offers?</strong></td>
  84.                     <td style="width: 25.394%; text-align: left;">OFFERS</td>
  85.                 </tr>
  86.                 <tr>
  87.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Doing RPs?</strong></td>
  88.                     <td style="width: 25.394%; text-align: left;">ROLEPLAY</td>
  89.                 </tr>
  90.                 <tr>
  91.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Relationships/Lore Sharing?</strong></td>
  92.                     <td style="width: 25.394%; text-align: left;">REPSNLORE</td>
  93.                 </tr>
  94.                 <tr>
  95.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Available For Breedings?</strong></td>
  96.                     <td style="width: 25.394%; text-align: left;">BREEDING</td>
  97.                 </tr>
  98.                </tbody>
  99.           </table>
  100.      </div>
  101. </div>
  102. <br>
  103.  
  104. <!-----------------------------INVENTORY PANEL----------------------------->
  105. <div class="card bg-faded" style="width:250px; height:250px; border:1px solid #272527;">
  106.      <div class="ui-accordion-content card-block bg-faded" style="height: 250; text-align: center">
  107.           <h1><i class="fas fa-treasure-chest"></i>   INVENTORY   <i class="fas fa-treasure-chest"></i></h1><br>
  108. <img src="https://orig00.deviantart.net/4221/f/2018/207/1/a/aura_quartz_by_volturai-dcicgx1.png">
  109.      </div>
  110. </div>
  111.  
  112. <!---------------BIO PANEL------------>
  113. <div class="ui-accordion card bg-faded" style="width:800px; height:250px; margin-left:265px; margin-top:-250px; border:1px solid #272527;">
  114.      <div class="ui-accordion-content card-block bg-faded" style="height: 250; text-align: center">
  115. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur congue diam eu dolor pulvinar, at malesuada mauris tristique. Proin varius condimentum lacus suscipit vulputate. Sed pretium lectus nisl, eget bibendum ipsum porttitor eget. Nam scelerisque interdum cursus. Pellentesque tincidunt vel augue sit amet malesuada. Vestibulum in lacus fringilla, scelerisque nibh id, convallis sapien. Quisque est augue, finibus sit amet vestibulum id, rhoncus vel enim. Aenean efficitur diam ligula, vel tempor lectus finibus in. Etiam eleifend ut erat ac bibendum. In facilisis sed sem at iaculis. Quisque eleifend mauris eget suscipit facilisis. Nam vel ante libero. Maecenas enim leo, viverra eu augue vel, molestie interdum justo. In efficitur sem in lectus dignissim, vitae vulputate elit vestibulum. Aliquam tempus metus quis sagittis eleifend. Donec eu vulputate urna. Cras aliquet consectetur lacus sed posuere. Aenean porttitor ipsum sem, sit amet suscipit diam auctor at. Quisque sollicitudin ex lorem, in volutpat tellus rutrum ac. Integer auctor turpis id felis iaculis sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis euismod tristique quam vitae faucibus. Praesent nec semper mauris, vitae mollis ex. Maecenas ut massa vitae sapien semper volutpat ac id quam. Donec at ante eget justo aliquet faucibus. Mauris at tellus est.
  116.      </div></div><br>
  117.  
  118. <!-----------------------------HORIZONTAL IMAGE----------------------------->
  119. <div class="card bg-faded" style="width:600px; height:250px; border:1px solid #272527;">
  120.     <div class="card-block"><img src="https://i.imgur.com/4Kpp5xH.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:550px; height:200px;"></div>
  121. </div>
  122.  
  123. <!---------------NOTES PANEL------------>
  124. <div class="ui-accordion card bg-faded" style="width:450px; height:250px; margin-left:615px; margin-top:-250px; border:1px solid #272527;">
  125.      <div class="ui-accordion-content card-block bg-faded" style="height: 250; text-align: center">
  126.           <h1><i class="fas fa-scroll-old"></i>   NOTES   <i class="fas fa-scroll-old"></i></h1>
  127. Dooble de do, I'm some words
  128.           </div>
  129.      </div>
  130. <br>
  131.  
  132. <!---------------MUSIC PANEL------------>
  133. <div class="card bg-faded" style="width:255px; height:255px; border:1px solid #272527;">
  134.     <div class="card-block"><a href="LINK" id=""><img src="https://i.imgur.com/lYkTgJo.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:210px; height:210px;"></a></div>
  135. </div>
  136.  
  137. <!---------------LIKES PANEL------------>
  138. <div class="ui-accordion card bg-faded" style="width:255px; height:255px; margin-left:270px; margin-top:-255px; border:1px solid #272527; text-align: left">
  139.     <div class="card-block"><h1><i class="fas fa-heart"></i> Likes</h1><ul class="mb-0"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li></ul></div>
  140. </div>
  141.  
  142. <!---------------DISLIKES PANEL------------>
  143. <div class="ui-accordion card bg-faded" style="width:255px; height:255px; margin-left:540px; margin-top:-255px; border:1px solid #272527; text-align: left">
  144.     <div class="card-block"><h1><i class="fas fa-times"></i> Dislikes</h1><ul class="mb-0"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li></ul></div>
  145. </div>
  146.  
  147. <!---------------EXTRA IMAGE PANEL------------>
  148. <div class="ui-accordion card bg-faded" style="width:255px; height:255px; margin-left:810px; margin-top:-255px; border:1px solid #272527;">
  149.     <div class="card-block"><img src="https://i.imgur.com/dL5rT7T.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:210px; height:210px;"></div>
  150. </div>
  151. <br>
  152.  
  153. <!-----------------------------LONGEST IMAGE----------------------------->
  154. <div class="card bg-faded" style="width:1065px; height:400px; border:1px solid #272527;">
  155.      <div class="card-block"><img src="https://i.imgur.com/8VjOnEM.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:1000px; height:355px;"></div>
  156.      </div>
  157. <br>
  158.  
  159. <!---------------RELATIONSHIP PANEL 1------------>
  160. <div class="card bg-faded" style="width:255px; height:325px; border:1px solid #272527; text-align: center">
  161.      <div class="card-block"><a href="LINK TO BEB" id=""><img src="https://i.imgur.com/dL5rT7T.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:210px; height:210px;"></a><br>
  162. <h1>NAME</h1> Relationship
  163.      </div>
  164. </div>
  165.  
  166. <!---------------RELATIONSHIP PANEL 2------------>
  167. <div class="ui-accordion card bg-faded" style="width:255px; height:325px; margin-left:270px; margin-top:-325px; border:1px solid #272527; text-align: center">
  168.      <div class="card-block"><a href="LINK TO BEB" id=""><img src="https://i.imgur.com/dL5rT7T.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:210px; height:210px;"></a><br>
  169. <h1>NAME</h1> Relationship
  170.      </div>
  171. </div>
  172.  
  173. <!---------------RELATIONSHIP PANEL 3------------>
  174. <div class="ui-accordion card bg-faded" style="width:255px; height:325px; margin-left:540px; margin-top:-325px; border:1px solid #272527; text-align: center">
  175.      <div class="card-block"><a href="LINK TO BEB" id=""><img src="https://i.imgur.com/dL5rT7T.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:210px; height:210px;"></a><br>
  176. <h1>NAME</h1> Relationship
  177.      </div>
  178. </div>
  179.  
  180. <!---------------RELATIONSHIP PANEL 4------------>
  181. <div class="ui-accordion card bg-faded" style="width:255px; height:325px; margin-left:810px; margin-top:-325px; border:1px solid #272527; text-align: center">
  182.      <div class="card-block"><a href="LINK TO BEB" id=""><img src="https://i.imgur.com/dL5rT7T.png" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:210px; height:210px;"></a><br>
  183. <h1>NAME</h1> Relationship
  184.      </div>
  185. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement