API tools faq
paste
Advertisement
feather--weather

Plus Ultra!

feather--weather
May 24th, 2018
574
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.59 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  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.
  3.  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.
  4.  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.
  5.  Plus Ultra!!
  6.  
  7.  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.
  8.  
  9.  Code name: Plus Ultra!
  10.  Creator: @_featherweather
  11.  Date: 24 May 2018
  12. -->
  13.  
  14. <div class="container-fluid">
  15.   <div class="tab-content">
  16.     <!-- first tab, basic info, personal data, stats, words from a friend -->
  17.     <div class="tab-pane fade show active" id="BASICInfo">
  18.       <div class="row">
  19.         <!-- main info -->
  20.         <div class="col-md-8 mb-5">
  21.           <!--some basics, good for a primer on the character, box scrolls -->
  22.           <div class="ui-accordion card card-outline-info bg-faded">
  23.             <!-- character's name -->
  24.             <h2 class="card-inverse card-info card-header" style="background-color:#aaa;border-color:#333;">Character Name</h2>
  25.             <!-- post info about character below -->
  26.             <div class="ui-accordion-content card-block " style="height:150px;">
  27.               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!
  28.             </div>
  29.           </div><br>
  30.           <!-- a quote by the character -->
  31.           <div class="row mb-5 text-center justify-content-center"><h1 class="text-center">❝[character quote here]❞</h1>  </div>
  32.           <!-- basic stats using the ones featured in Ultra Archive, feel free to change -->
  33.           <div class="row mb-5">
  34.             <div class="col-md-6 mb-5">
  35.               <div class="ui-accordion card card-outline-info bg-faded" >
  36.                 <h3 class="card-header" style="background-color:#aaa;border-color:#333;">Personal Data</h3>
  37.                 <!-- in order Affiliation, Former Instutition, Birthday, Height, Blood Type, Birthplace, Likes, Fighting Style -->
  38.                 <div class="ui-accordion-content card-block " style="height:180px;">
  39.                   <table style="width: 100%;border:none;"><tbody>
  40.                    <tr><td style="width: 50%; text-align: right;"><strong>Affiliation</strong></td><td style="width: 50%;">(U.A.? Heroes? Villians? A company?)</td></tr>
  41.                    <tr><td style="width: 50%; text-align: right;"><strong>Former Institution</strong></td><td style="width: 50%;">(former group or school)</td></tr>
  42.                    <tr><td style="width: 50%; text-align: right;"><strong>Birthday</strong></td><td style="width: 50%;">(obvs)</td></tr>
  43.                    <tr><td style="width: 50%; text-align: right;"><strong>Height</strong><br></td><td style="width: 50%;">(normally in cm)</td></tr>
  44.                    <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>
  45.                    <tr><td style="width: 50%; text-align: right;"><strong>Birthplace</strong><br></td><td style="width: 50%;">(where you from)</td></tr>
  46.                    <tr><td style="width: 50%; text-align: right;"><strong>Likes</strong><br></td><td style="width: 50%;">(whatcha into?)</td></tr>
  47.                    <tr><td style="width: 50%; text-align: right;"><strong>Fighting Style</strong><br></td><td style="width: 50%;">(how do you fight?)</td></tr>
  48.                   </tbody></table>
  49.                 </div>
  50.               </div>
  51.             </div>
  52.             <!-- 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 -->
  53.             <div class="col-md-6 mb-5">
  54.               <div class="ui-accordion card card-outline-info bg-faded">
  55.                 <h3 class="card-header" style="background-color:#aaa;">Statistics</h3>
  56.                 <div class="ui-accordion-content card-block " style="height:180px;">
  57.                   <table style="width: 100%;border:none;"><tbody>
  58.                     <tr><td style="width: 100%;">Power</td></tr>
  59.                     <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>
  60.                     <tr><td style="width: 100%;">Speed</td></tr>
  61.                     <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>
  62.                     <tr><td style="width: 100%;">Technique</td></tr>
  63.                     <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>
  64.                     <tr><td style="width: 100%;">Intelligence</td></tr>
  65.                     <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>
  66.                     <tr><td style="width: 100%;">Cooperativeness</td></tr>
  67.                     <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>
  68.                   </tbody></table>
  69.                 </div>
  70.               </div>
  71.             </div>
  72.             <div class="col-md-12 mb-5">
  73.               <!-- "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!-->
  74.               <h2><a href="https://toyhou.se/EXAMPLE" title="[Character's Name]"><i class="fa fa-group"></i><a> Words From a Friend</h2>
  75.               <div class="ui-accordion card card-outline-info bg-faded">
  76.                 <div class="ui-accordion-content card-block " style="height:50px;">
  77.                      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!!
  78.                  </div>
  79.                </div><br>
  80.              </div>
  81.            </div>
  82.          </div>
  83.          <div class="col-md-4">
  84.            <!-- Insert character image here! -->
  85.            <img alt="placeholder image" src="https://file.toyhou.se/images/7785566_OfeygwehX7ksgVo.png" />
  86.          </div>
  87.        </div>
  88.      </div><!-- ends main tab -->
  89.  
  90.     <!-- second tab: quirkm, heroics, misc, professional -->
  91.     <div class="tab-pane fade" id="INDEPTHInfo">
  92.       <div class="row">
  93.         <!-- character image, ones that aren't too wide work best! -->
  94.         <div class="col-md-4 mb-5"><img alt="placeholder" src="https://file.toyhou.se/images/7785566_OfeygwehX7ksgVo.png" /></div>
  95.         <!-- quirk & hero info section -->
  96.         <div class="col-md-8 mb-5">
  97.           <div class="row">
  98.             <!--Quirk Info -->
  99.             <div class="col-md-6 mb-5">
  100.               <div class="ui-accordion card card-outline-info bg-faded">
  101.                 <h3 class="card-inverse card-info card-header" style="background-color:#aaa;border-color:#333;">Quirk Name</h3>
  102.                 <div class="ui-accordion-content card-block " style="height:150px;">
  103.                   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!!
  104.                 </div>
  105.               </div>
  106.             </div>
  107.             <!-- hero info, best location for like... hero suit and stuff -->
  108.             <div class="col-md-6 mb-5">
  109.               <div class="ui-accordion card card-outline-info bg-faded">
  110.                 <h3 class="card-header" style="background-color:#aaa;border-color:#333;">The ??? Hero: ???</h3>
  111.                 <div class="ui-accordion-content card-block " style="height:150px;">
  112.                   info about the hero, hero suit, et cetera. 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!!
  113.                 </div>
  114.               </div>
  115.             </div>
  116.                 </div>
  117.           <!-- misc info section -->
  118.           <div class="row">
  119.             <div class="col-md-12 mb-5">
  120.               <!-- any random info you want here-->
  121.               <div class="ui-accordion card card-outline-info bg-faded">
  122.                 <h3 class="card-inverse card-info card-header" style="background-color:#aaa;border-color:#333;">Misc</h3>
  123.                 <div class="ui-accordion-content card-block " style="height:150px;">
  124.                   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!!
  125.                 </div>
  126.               </div>
  127.             </div>
  128.           </div>
  129.           <!-- A Professional's Opinion Section -->
  130.           <div class="row">
  131.             <div class="col-md-12 mb-5">
  132.               <!-- the icon links to another character of your choice; a kind of cute way for another OC to explain about the main-->
  133.               <h2><a href="https://toyhou.se/EXAMPLE"><i class="fa fa-group"></i><a> A Professional's Opinion</h2>
  134.               <div class="ui-accordion card card-outline-info bg-faded">
  135.                 <div class="ui-accordion-content card-block " style="height:50px;">
  136.                   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!!
  137.                 </div>
  138.               </div>
  139.             </div>
  140.           </div>
  141.         </div>
  142.       </div>  <!-- ends -->
  143.     </div> <!--ends tab 2 -->
  144.   </div>
  145.   <hr class="bg-warning">
  146.   <ul class="nav nav-pills justify-content-center row text-center">
  147.     <li class="nav-item col-lg-2 col-md-3">
  148.       <a class="nav-link p-2 active" data-toggle="tab" href="#BASICInfo"target="_top">Basics</a>
  149.     </li>
  150.     <li class="nav-item col-lg-2 col-md-3">
  151.       <a class="nav-link p-2" data-toggle="tab" href="#INDEPTHInfo"target="_top">More</a>
  152.     </li>
  153.     <li class="nav-item col-lg-2 col-md-3">
  154.       <!-- please link character gallery here -->
  155.       <a class="nav-link p-2" href="/[CHARACTER CODE]./gallery">Images</a>
  156.     </li>
  157.   </ul>
  158.  
  159.   <!-- credit link, moving is okay -->
  160. <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>
  161.  
  162. </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!