View difference between Paste ID: PkbxyyVW and Yecechpw

 <!--
   a layout emulating the one shown in "My Hero Academia Official Character Book Ultra Archive", well to the best of my abilities. I hope everyone enjoys it and it can be helpful in the future.
   Per usual, feel free to frankencode, use it as a base, et cetera. Credit is nice but not required, just don't claim it as yours.
   Huge thanks to Jay for helping me figure out why the hell my code kept braking and fatpeanut for having very helpful links to doing tab panes.
   Plus Ultra!!
 
-  Notes: All text boxes scroll. All card headers use the BG Color #aaa - feel free to change; the code includes two pictures but more can be added, I suggest ones that are vertically orientated and not too wide; i over document stuff sorry.
+  Notes: All text boxes scroll. All card headers use the BG Color #aaa - feel free to change; the code includes two pictures but more can be added, I suggest ones that are vertically orientated and not too wide; i over document stuff sorry. This is a version with just the "first page" (character info, personal data, stats, img, words from a friend)
 
   Code name: Plus Ultra!
   Creator: @_featherweather
   Date: 24 May 2018
 -->
 
 <div class="container-fluid">
-  <div class="tab-content">
+
-    <!-- first tab, basic info, personal data, stats, words from a friend -->
+
-    <div class="tab-pane fade show active" id="BASICInfo">
+
           <!--some basics, good for a primer on the character, box scrolls -->
           <div class="ui-accordion card card-outline-info bg-faded">
             <!-- character's name -->
             <h2 class="card-inverse card-info card-header" style="background-color:#aaa;border-color:#333;">Character Name</h2>
             <!-- post info about character below -->
             <div class="ui-accordion-content card-block " style="height:150px;">
               have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!  have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!  have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!
             </div>
           </div><br>
           <!-- a quote by the character -->
           <div class="row mb-5 text-center justify-content-center"><h1 class="text-center">❝[character quote here]❞</h1>  </div>
           <!-- basic stats using the ones featured in Ultra Archive, feel free to change -->
           <div class="row mb-5">
             <div class="col-md-6 mb-5">
               <div class="ui-accordion card card-outline-info bg-faded" >
                 <h3 class="card-header" style="background-color:#aaa;border-color:#333;">Personal Data</h3>
                 <!-- in order Affiliation, Former Instutition, Birthday, Height, Blood Type, Birthplace, Likes, Fighting Style -->
                 <div class="ui-accordion-content card-block " style="height:180px;">
                   <table style="width: 100%;border:none;"><tbody>
                    <tr><td style="width: 50%; text-align: right;"><strong>Affiliation</strong></td><td style="width: 50%;">(U.A.? Heroes? Villians? A company?)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Former Institution</strong></td><td style="width: 50%;">(former group or school)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Birthday</strong></td><td style="width: 50%;">(obvs)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Height</strong><br></td><td style="width: 50%;">(normally in cm)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Blood Type</strong><br></td><td style="width: 50%;">(nothing says anime like blood type)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Birthplace</strong><br></td><td style="width: 50%;">(where you from)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Likes</strong><br></td><td style="width: 50%;">(whatcha into?)</td></tr>
                    <tr><td style="width: 50%; text-align: right;"><strong>Fighting STyle</strong><br></td><td style="width: 50%;">(how do you fight?)</td></tr>
                   </tbody></table>
                 </div>
-                   <tr><td style="width: 50%; text-align: right;"><strong>Fighting Style</strong><br></td><td style="width: 50%;">(how do you fight?)</td></tr>
+
             </div>
             <!-- stats, also based on the Ultra Archive. Stats are rated on a grade scale, 100% = A. To emulate the 5 levels in the UA, use 20% increments -->
             <div class="col-md-6 mb-5">
               <div class="ui-accordion card card-outline-info bg-faded">
                 <h3 class="card-header" style="background-color:#aaa;">Statistics</h3>
                 <div class="ui-accordion-content card-block " style="height:180px;">
                   <table style="width: 100%;border:none;"><tbody>
                     <tr><td style="width: 100%;">Power</td></tr>
                     <tr><td style="width: 95%; text-align:right;"><div class="progress"><div class="progress-bar" style="width:75%;"></div></div></td><td style="width: 5%;">C</td></tr>
                     <tr><td style="width: 100%;">Speed</td></tr>
                     <tr><td style="width: 95%; text-align:right;"><div class="progress"><div class="progress-bar" style="width:75%;"></div></div></td><td style="width: 5%;">C</td></tr>
                     <tr><td style="width: 100%;">Technique</td></tr>
                     <tr><td style="width: 95%; text-align:right;"><div class="progress"><div class="progress-bar" style="width:75%;"></div></div></td><td style="width: 5%;">C</td></tr>
                     <tr><td style="width: 100%;">Intelligence</td></tr>
                     <tr><td style="width: 95%; text-align:right;"><div class="progress"><div class="progress-bar" style="width:75%;"></div></div></td><td style="width: 5%;">C</td></tr>
                     <tr><td style="width: 100%;">Cooperativeness</td></tr>
                     <tr><td style="width: 95%; text-align:right;"><div class="progress"><div class="progress-bar" style="width:75%;"></div></div></td><td style="width: 5%;">C</td></tr>
                   </tbody></table>
                 </div>
               </div>
             </div>
             <div class="col-md-12 mb-5">
               <!-- "Words from a Friend" - the icon links to another character of your choice; a kind of cute way for another OC to explain about the main. Don't forget to change the link's title to the character's name!-->
               <h2><a href="https://toyhou.se/EXAMPLE" title="[Character's Name]"><i class="fa fa-group"></i><a> Words From a Friend</h2>
               <div class="ui-accordion card card-outline-info bg-faded">
                 <div class="ui-accordion-content card-block " style="height:50px;">
         	         have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!  have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!  have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!
                  </div>
                </div><br>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <!-- Insert character image here! -->
            <img alt="placeholder image" src="https://file.toyhou.se/images/7785566_OfeygwehX7ksgVo.png" />
          </div>
        </div>
      </div>
 
 
-     </div><!-- ends main tab -->
+
 <p align="right"><a href="https://toyhou.se/1505596.-feather-s-codes-" title="_featherweather's codes"><i class="fa fa-user-secret"></i></a></p>
-    <!-- second tab: quirkm, heroics, misc, professional -->
+
-    <div class="tab-pane fade" id="INDEPTHInfo">
+