API tools faq
paste
Advertisement
ColoradoBluesCodes

Beblune TH Tabs

ColoradoBluesCodes
Feb 4th, 2019
372
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.25 KB | None | 0 0
raw download clone embed print report
  1. <!-------------
  2. Tabulicious Tectore by @ColoradoBlues on TH and DA
  3. This is a free to use format for Beblune members!
  4. Do not sell, redistribute, or misuse this code in any way.
  5. -------------->
  6.  
  7.  
  8. <!-------------RIGHT SIDE BLOCK--------->
  9. <div class="row justify-content-between">
  10. <div class="col-md-3 push-md-9">
  11.    
  12. <!-------------NAME AND ICON--------->
  13.      <h2 class="card-inverse card-header" style="letter-spacing:3px; text-transform:uppercase; background-color:#2b1512; border:1px; border-color:#2b1512; text-align: center">NAME  <i class="fas fa-star"></i></h2>
  14.   <div class="card card-block bg-faded mb-3" style="border-color: #2b1512;">
  15. <img src="SQUAREIMG" class="img-rounded img-thumbnail float-md-center d-block mx-auto" style="width:250px; height:250px;"><br>
  16.  
  17. <!-------------INFO UNDER ICON--------->
  18.     <table class="double table-hover" style="margin-right: calc(0%); width: 100%; margin-left: calc(0%); border:none;">
  19.       <tbody>
  20.                 <tr>
  21.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Subspecies</strong></td>
  22.                     <td style="width: 25.394%; text-align: left;">SPECIES</td>
  23.                 </tr>
  24.                 <tr>
  25.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Gender</strong></td>
  26.                     <td style="text-align: left; width: 27.4451%;">GENDER</td>
  27.                 </tr>
  28.                 <tr>
  29.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Pronouns</strong></td>
  30.                     <td style="width: 25.394%; text-align: left;">PROUNOUNS</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Age</strong></td>
  34.                     <td style="text-align: left; width: 27.4451%;">AGE</td>
  35.                 </tr>
  36.                 <tr>
  37.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Artist</strong></td>
  38.                     <td style="text-align: left; width: 27.4451%;">ARTIST</td>
  39.                 </tr>
  40.                 <tr>
  41.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Database Entry</strong></td>
  42.                     <td style="text-align: left; width: 27.4451%;"><a href="LINK" id="">WORD</a></td>
  43.                 </tr>
  44.                 <tr>
  45.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Taking Offers?</strong></td>
  46.                     <td style="width: 25.394%; text-align: left;">OFFERS</td>
  47.                 </tr>
  48.       </tbody>
  49.     </table><br>
  50.    
  51. <!-------------TAB BUTTONS--------->
  52.          <ul class="nav nav-tabs card-header-tabs row">
  53.            <li class="nav-item col-12 mb-2"><a class="btn btn-outline-default btn-block active show" data-toggle="tab" style="width:50; border-color: #884d34;" href="#ONE">
  54.              TAB ONE</a></li>
  55.            <li class="nav-item col-12 mb-2"><a class="btn btn-outline-default btn-block" data-toggle="tab" style="width:50; border-color: #2b1512;" href="#TWO">
  56.              TAB TWO</a></li>  
  57.            <li class="nav-item col-12 mb-2"><a class="btn btn-outline-default btn-block" data-toggle="tab" style="width:50; border-color: #884d34;" href="#THREE">
  58.              TAB THREE</a></li>
  59.            <li class="nav-item col-12 mb-2"><a class="btn btn-outline-default btn-block" data-toggle="tab" style="width:50; border-color: #2b1512;" href="#FOUR">
  60.              TAB FOUR</a></li>
  61.          </ul>
  62.     </div>
  63. </div>
  64. <!-------------RIGHT BOX ENDS--------->
  65.  
  66. <!-------------TABS BEGIN HERE--------->
  67.  <div class="col-md-9 pull-md-3">
  68.   <div class="tab-content">
  69.    
  70. <!-------------TAB ONE--------->
  71. <div class="tab-pane fade in active show" id="ONE">
  72.  
  73. <!-------------INFO BOX--------->
  74.   <div class="ui-accordion card bg-faded mb-3" style="border-color:#884d34;">
  75.     <div class="ui-accordion-content card-block" style="height:600px;">
  76.      <p style="text-align: justify;">
  77. Vestibulum cursus nisi at nunc lobortis vestibulum. Aliquam at ultricies turpis. Phasellus orci nulla, lacinia pharetra vehicula quis, egestas eget elit. Duis a suscipit ligula, quis rhoncus turpis. Suspendisse potenti. Nunc luctus finibus scelerisque. Duis lacus lectus, tincidunt et est ut, mattis accumsan dui. Fusce aliquet tortor et interdum interdum. Cras et iaculis magna. Integer placerat ut mauris ac ultricies. Vivamus hendrerit consectetur nulla, ac vestibulum metus tristique sit amet. Morbi vitae placerat diam. Vestibulum maximus ante vitae ex facilisis semper. Duis et augue feugiat, placerat ligula non, gravida leo.</p>
  78.       <p style="text-align: justify;">
  79. Integer lacinia odio at erat fringilla ornare. Vestibulum odio dui, lobortis ut iaculis vitae, viverra sit amet purus. Mauris non lectus quis ex ornare ornare Curabitur sagittis erat sit amet metus dapibus, sed vehicula nunc consectetur. In blandit fringilla mauris ut ultrices. Aenean in egestas ligula. Mauris nisl leo, vulputate at vehicula a, auctor eu sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  80.       </p>
  81.    </div>
  82. </div>
  83. <!-------------STATS BOX--------->
  84. <div class="ui-accordion card bg-faded mb-3" style="border-color:#884d34;">
  85.   <div class="ui-accordion-content card-block" style="height:175px; margin-top: 5px;">
  86. <table class="double table-hover" style="margin-right: calc(0%); width: 100%; margin-left: calc(0%); border:none;">
  87.    <tbody>
  88.                 <tr>
  89.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Traits</strong></td>
  90.                     <td style="width: 25.394%; text-align: left;">TRAITS</td>
  91.                 </tr>
  92.                 <tr>
  93.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Mutations</strong></td>
  94.                     <td style="width: 25.394%; text-align: left;">MUTATIONS</td>
  95.                 </tr>
  96.                 <tr>
  97.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Abilities</strong></td>
  98.                     <td style="text-align: left; width: 27.4451%;">ABILITIES</td>
  99.                 </tr>
  100.                 <tr>
  101.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Obtained</strong></td>
  102.                     <td style="width: 25.394%; text-align: left;">OBTAINED</td>
  103.                 </tr>
  104.                 <tr>
  105.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Design Value</strong></td>
  106.                     <td style="text-align: left; width: 27.4451%;">VALUE</td>
  107.                 </tr>
  108.                 <tr>
  109.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Art Value</strong></td>
  110.                     <td style="width: 25.394%; text-align: left;">VALUE</td>
  111.                 </tr>
  112.                 <tr>
  113.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Taking Offers?</strong></td>
  114.                     <td style="width: 25.394%; text-align: left;">OFFERS</td>
  115.                 </tr>
  116.                 <tr>
  117.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Doing RPs?</strong></td>
  118.                     <td style="width: 25.394%; text-align: left;">ROLEPLAYS</td>
  119.                 </tr>
  120.                 <tr>
  121.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Relationships/Lore Sharing?</strong></td>
  122.                     <td style="width: 25.394%; text-align: left;">RELATIONSHIPS</td>
  123.                 </tr>
  124.                 <tr>
  125.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Available For Breedings?</strong></td>
  126.                     <td style="width: 25.394%; text-align: left;">BREEDINGS</td>
  127.                 </tr>
  128.    </tbody>
  129. </table>
  130.   </div>
  131.  </div>
  132. </div>
  133.  
  134. <!-------------TAB TWO--------->
  135.    <div class="tab-pane fade in" id="TWO">
  136.     <div class="ui-accordion card bg-faded mb-3" style="border-color:#2b1512;">
  137.      <div class="ui-accordion-content card-block" style="height:798px;">
  138.        
  139. <!-------------HISTORY--------->
  140.     <h4 class="text-right" style="color:#faf393;">TITLE GOES HERE</h4>
  141.      <p style="text-align: justify;">
  142.        Vestibulum cursus nisi at nunc lobortis vestibulum. Aliquam at ultricies turpis. Phasellus orci nulla, lacinia pharetra vehicula quis, egestas eget elit. Duis a suscipit ligula, quis rhoncus turpis. Suspendisse potenti. Nunc luctus finibus scelerisque. Duis lacus lectus, tincidunt et est ut, mattis accumsan dui. Fusce aliquet tortor et interdum interdum. Cras et iaculis magna. Integer placerat ut mauris ac ultricies. Vivamus hendrerit consectetur nulla, ac vestibulum metus tristique sit amet. Morbi vitae placerat diam. Vestibulum maximus ante vitae ex facilisis semper. Duis et augue feugiat, placerat ligula non, gravida leo.</p>
  143.      <p style="text-align: justify;">
  144.        Integer lacinia odio at erat fringilla ornare. Vestibulum odio dui, lobortis ut iaculis vitae, viverra sit amet purus. Mauris non lectus quis ex ornare ornare. Curabitur sagittis erat sit amet metus dapibus, sed vehicula nunc consectetur. In blandit fringilla mauris ut ultrices. Aenean in egestas ligula. Mauris nisl leo, vulputate at vehicula a, auctor eu sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
  145.        </p>
  146.       <br>
  147.     <br>
  148.   <h4 class="text-left" style="color:#faf393;">TITLE GOES HERE</h4>
  149.     <p style="text-align: justify;">
  150.         Nunc in nulla bibendum, consequat odio vitae, condimentum massa. In ac purus et est scelerisque lobortis. Nulla at quam ac urna rutrum cursus eu non eros. In sed risus at justo iaculis feugiat vitae quis turpis. Quisque quis metus eu magna volutpat iaculis. Pellentesque ante ipsum, molestie sollicitudin tempus quis, facilisis nec diam. Curabitur molestie nibh lobortis purus egestas molestie. Proin sodales felis vitae sodales faucibus. Duis diam leo, blandit ultricies urna eu, condimentum iaculis odio. In viverra tincidunt sem a scelerisque. Maecenas in rutrum neque, vitae laoreet orci. Fusce nec ex ac mauris aliquet luctus at quis enim.
  151.       </p>
  152.     </div>
  153.   </div>
  154. </div>
  155.  
  156. <!-------------TAB THREE--------->
  157. <div class="tab-pane fade in" id="THREE">
  158.  <div class="ui-accordion card bg-faded mb-3" style="border-color:#884d34;">
  159.   <div class="ui-accordion-content card-block" style="height:798px;">
  160.     <table class="double table-hover" style="margin-right: calc(0%); width: 100%; margin-left: calc(0%); border:none;">
  161.       <tbody>
  162.                 <tr>
  163.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Bebliseum Participations</strong></td>
  164.                     <td style="width: 25.394%; text-align: left;">PARTICIPATION</td>
  165.                 </tr>
  166.                 <tr>
  167.                     <td class="title" style="width: 25.2363%; text-align: left;"><strong>Bebliseum Placements</strong></td>
  168.                     <td style="width: 25.394%; text-align: left;">PLACEMENTS</td>
  169.                 </tr>
  170.                 <tr>
  171.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Bebliseum Wins</strong></td>
  172.                     <td style="text-align: left; width: 27.4451%;">WINS</td>
  173.                 </tr>
  174.                 <tr>
  175.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Quest Participations</strong></td>
  176.                     <td style="text-align: left; width: 27.4451%;">QUESTS</td>
  177.                 </tr>
  178.                 <tr>
  179.                     <td class="title" style="width: 21.9243%; text-align: left;"><strong>Quest Wins</strong></td>
  180.                     <td style="text-align: left; width: 27.4451%;">WINS</td>
  181.                 </tr>
  182.        </tbody>
  183.      </table>
  184.    <br>
  185.     <br>
  186.      <h3 class="text-center" style="color:#faf393;">R E W A R D S</h3>
  187.     <br>
  188.    </div>
  189.   </div>
  190.  </div>
  191.  
  192. <!-------------TAB FOUR--------->
  193.    <div class="tab-pane fade in" id="FOUR">
  194.     <div class="ui-accordion card bg-faded mb-3" style="border-color:#2b1512;">
  195.     <div class="ui-accordion-content card-block" style="height:798px;">
  196.      
  197. <!-------------QUOTE--------->
  198.      <h3 class="text-right" style="color:#faf393;"><em>"A quote from me goes here."</em></h3>
  199.      
  200. <!-------------MOODBOARD TOP--------->
  201.                      <p style="text-align: justify;">
  202.                         <div class="row">
  203.                             <div class="col-md-3 col-6 mb-3 text-center">
  204.                                 <img src="IMGLINK" class="rounded">
  205.                             </div>
  206.                            
  207.                             <div class="col-md-3 col-6 mb-3 text-center">
  208.                                 <img src="IMGLINK" class="rounded">
  209.                             </div>
  210.                            
  211.                             <div class="col-md-3 col-6 mb-3 text-center">
  212.                                 <img src="IMGLINK" class="rounded">
  213.                             </div>
  214.                            
  215.                             <div class="col-md-3 col-6 mb-3 text-center">
  216.                                 <img src="IMGLINK" class="rounded">
  217.                             </div>
  218.                          </div>
  219.                       </p>
  220.                    <br>
  221.                    
  222. <!-------------APPREL/WRITING/ETC--------->
  223.    <h3 class="text-center" style="color:#faf393;">Apparel Choices</h3>
  224.      <p style="text-align: justify;">
  225.        Nunc in nulla bibendum, consequat odio vitae, condimentum massa. In ac purus et est scelerisque lobortis. Nulla at quam ac urna rutrum cursus eu non eros. In sed risus at justo iaculis feugiat vitae quis turpis. Quisque quis metus eu magna volutpat iaculis. Pellentesque ante ipsum, molestie sollicitudin tempus quis, facilisis nec diam. Curabitur molestie nibh lobortis purus egestas molestie. Proin sodales felis vitae sodales faucibus. Duis diam leo, blandit ultricies urna eu, condimentum iaculis odio. In viverra tincidunt sem a scelerisque. Maecenas in rutrum neque, vitae laoreet orci. Fusce nec ex ac mauris aliquet luctus at quis enim.
  226.      <br>
  227.    <br>
  228.    
  229. <!-------------MOODBOARD BOTTOM--------->
  230.                         <div class="row">
  231.                             <div class="col-md-3 col-6 mb-3 text-center">
  232.                                 <img src="IMGLINK" class="rounded">
  233.                             </div>
  234.                            
  235.                             <div class="col-md-3 col-6 mb-3 text-center">
  236.                                 <img src="IMGLINK" class="rounded">
  237.                             </div>
  238.                            
  239.                             <div class="col-md-3 col-6 mb-3 text-center">
  240.                                 <img src="IMGLINK" class="rounded">
  241.                             </div>
  242.                            
  243.                             <div class="col-md-3 col-6 mb-3 text-center">
  244.                                 <img src="IMGLINK" class="rounded">
  245.                             </div>
  246.                           </div>
  247.                         </p>
  248.                        
  249. <!-------------SONG LINK--------->
  250.          <h3 class="text-left" style="color:#884d34;">
  251.           <a href="SONG LINK" id=""><em>
  252.              "Song" - Artist
  253.           </em>
  254.          </a>
  255.         </h3>
  256.        </div>
  257.       </div>
  258.      </div>
  259.     </div>
  260.    </div>
  261.   </div>
  262.  </div>
  263. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!