API tools faq
paste
Advertisement
feather--weather

fortitude

feather--weather
Oct 23rd, 2018
580
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.48 KB | None | 0 0
raw download clone embed print report
  1. another heroaca theme originally by <a href="https://glenthemes.tumblr.com/post/159250053564/character-page-01-fortitude-by-glenthemes-a">glenthemes</a>.<br>an expanded version of @shinsou's @@2766946<br><br>code can be found <a href="https://pastebin.com/0L2wxjK4">here</a><br><br>--  if you are using @@2944946 by @lowkeywicked --<br>add the following to all text in the quirk, story, and words from a friend section to make it legible:  <pre style='color:#000000;background:#ffffff;'><span style='color:#a65700; '><</span><span style='color:#800000; font-weight:bold; '>p</span><span style='color:#274796; '> </span><span style='color:#074726; '>style</span><span style='color:#808030; '>=</span><span style='color:#0000e6; '>"</span><span style='color:#bb7977; font-weight:bold; '>color</span><span style='color:#808030; '>:</span><span style='color:#008c00; '>#</span><span style='color:#008000; '>777</span><span style='color:#800080; '>;</span><span style='color:#0000e6; '>"</span><span style='color:#a65700; '>></span> </pre><br>
  2.  
  3. <hr>
  4. <!------------
  5.  
  6. main bg: #f3f3f3
  7. borders: #ccc
  8. font: #777
  9. boxes: #fff
  10.  
  11. original theme by GlenThemes (https://glenthemes.tumblr.com/post/159250053564/character-page-01-fortitude-by-glenthemes-a)
  12. coded for TH by @shinsou
  13. expanded & edited by @_featherweather
  14. -------------->
  15.  
  16. <div class="col-lg-12 p-0 mx-auto">
  17.     <div class="container p-1 rounded-0 mx-auto" style="background:#f3f3f3;border:1px solid #ccc;">
  18.         <!-- Character's Name or Title -->
  19.         <div class="row no-gutters">
  20.             <div class="col-lg-12 p-1">
  21.                 <h2 class="card d-block display-4 border-0 rounded-0 p-1 font-weight-bold" style="font-variant:small-caps;color:#777;background:transparent;letter-spacing:2px;font-size:17pt;">Character Name</h2>
  22.                 <hr class="m-0" style="background:#ccc;">
  23.             </div>
  24.         </div>
  25.         <!-- 3 Colums of data - img + basic/stats/quirk + data/hist
  26.                     all of these can be inter changeable but you MUST move all of the column
  27.         -->
  28.         <div class="row no-gutters" style="color:#777;">
  29.             <!----- IMAGE COLUMN ----->
  30.             <div class="col-lg-4 p-1">
  31.                 <!------- DESKTOP IMG - 700px HIGH --------->
  32.                 <div class="hidden-sm-down">
  33.                   <div class="card d-block rounded-0 p-2 hidden-sm-down" style="background:url('https://i.imgur.com/JXbNsWT.png') top #fff;background-repeat:no-repeat;height:700px;border-color:#ccc;">
  34.                     <br>
  35.                   </div>
  36.                 </div>
  37.                 <!------- MOBILE IMG - 300px HIGH --------->
  38.                 <div class="hidden-md-up">
  39.                   <div class="card d-block hidden-md-up rounded-0 p-2" style="background:url('https://i.imgur.com/dsoaFWe.png') center #fff;height:300px;border-color:#ccc;">
  40.                       <br>
  41.                   </div>
  42.                 </div>
  43.             </div>
  44.             <!----- BASIC + STATS + QUIRK  ----->
  45.             <div class="col-lg-4 p-1">
  46.                 <!------------------ BASICS ------------------>
  47.                 <div class="card d-block rounded-0 p-2 mb-2" style="background:#fff;border:1px solid #ccc;letter-spacing:1px;">
  48.  
  49.                     <h2 class="d-block display-4 text-center p-1" style="font-variant:small-caps;color:#777;font-size:15pt;border-bottom:1px solid #ccc;">Basics</h2>
  50.                     <!---- name button---->
  51.                     <div class="mb-2">
  52.                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-id-card"></i></div>
  53.                         <!---- name --->
  54.                         <span class="text-uppercase font-weight-bold mr-lg-2">Name</span> Shinsou Hitoshi</div>
  55.                     <!---- age button---->
  56.                     <div class="mb-2">
  57.                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-user"></i></div>
  58.                         <!---- age --->
  59.                         <span class="text-uppercase font-weight-bold mr-lg-2">age</span> 16</div>
  60.                     <!---- birthday button---->
  61.                     <div class="mb-2">
  62.                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-birthday-cake"></i></div>
  63.                         <!---- birthday --->
  64.                         <span class="text-uppercase font-weight-bold mr-lg-2">birthdate</span> July 1</div>
  65.                 </div>
  66.                 <!--------- END BASICS ----------->
  67.                 <!------------------ STATS -------------------->
  68.                 <div class="card d-block rounded-0 p-2 mb-2" style="background:#fff;border:1px solid #ccc;letter-spacing:1px;">
  69.  
  70.                     <h2 class="d-block display-4 text-center p-1" style="font-variant:small-caps;color:#777;font-size:15pt;border-bottom:1px solid #ccc;">Stats</h2>
  71.                     <table class="border-0 text-lowercase" style="width: 100%;border:none;font-variant:small-caps;letter-spacing:1px;">
  72.                         <tbody>
  73.                             <!----------- prog bar ------------>
  74.                             <tr>
  75.                                 <td style="width: 30%; text-align: right;">power</td>
  76.                                 <td style="width: 60%;">
  77.                                     <div class="progress" style="background: #f3f3f3;">
  78.                                         <!--------------change the 50%----------------->
  79.                                         <div class="progress-bar" style="background: #777; width:50%;height:6px;">
  80.                                             <br>
  81.                                         </div>
  82.                                     </div>
  83.                                 </td>
  84.                                 <td style="width: 10%; text-align: right;">C</td>
  85.                             </tr>
  86.                             <!----------- prog bar ------------>
  87.                             <tr>
  88.                                 <td style="width: 30%; text-align: right;">speed</td>
  89.                                 <td style="width: 60%;">
  90.                                     <div class="progress" style="background: #f3f3f3;">
  91.                                         <!--------------change the 50%----------------->
  92.                                         <div class="progress-bar" style="background: #777; width:50%;height:6px;">
  93.                                             <br>
  94.                                         </div>
  95.                                     </div>
  96.                                 </td>
  97.                                 <td style="width: 10%; text-align: right;">C</td>
  98.                             </tr>
  99.                             <!----------- prog bar ------------>
  100.                             <tr>
  101.                                 <td style="width: 30%; text-align: right;">technique</td>
  102.                                 <td style="width: 60%;">
  103.                                     <div class="progress" style="background: #f3f3f3;">
  104.                                         <!--------------change the 50%----------------->
  105.                                         <div class="progress-bar" style="background: #777; width:50%;height:6px;">
  106.                                             <br>
  107.                                         </div>
  108.                                     </div>
  109.                                 </td>
  110.                                 <td style="width: 10%; text-align: right;">C</td>
  111.                             </tr>
  112.                             <!----------- prog bar ------------>
  113.                             <tr>
  114.                                 <td style="width: 30%; text-align: right;">intelligence</td>
  115.                                 <td style="width: 60%;">
  116.                                     <div class="progress" style="background: #f3f3f3;">
  117.                                         <!--------------change the 50%----------------->
  118.                                         <div class="progress-bar" style="background: #777; width:50%;height:6px;">
  119.                                             <br>
  120.                                         </div>
  121.                                     </div>
  122.                                 </td>
  123.                                 <td style="width: 10%; text-align: right;">C</td>
  124.                             </tr>
  125.                             <!----------- prog bar ------------>
  126.                             <tr>
  127.                                 <td style="width: 30%; text-align: right;">cooperativeness</td>
  128.                                 <td style="width: 60%;">
  129.                                     <div class="progress" style="background: #f3f3f3;">
  130.                                         <!--------------change the 50%----------------->
  131.                                         <div class="progress-bar" style="background: #777; width:50%;height:6px;">
  132.                                             <br>
  133.                                         </div>
  134.                                     </div>
  135.                                 </td>
  136.                                 <td style="width: 10%; text-align: right;">C</td>
  137.                             </tr>
  138.                         </tbody>
  139.                     </table>
  140.                 </div>
  141.                 <!--------- END STATS ----------->
  142.                 <!------------------ QUIRK -------------------->
  143.                 <div class="card d-block rounded-0 p-2" style="background:#fff;border:1px solid #ccc;letter-spacing:1px;height:256px;">
  144.  
  145.                     <h2 class="d-block display-4 text-center p-1" style="font-variant:small-caps;color:#777;font-size:15pt;border-bottom:1px solid #ccc;">Quirk: Brainwashing</h2>
  146.                     <!---- quirk info here ---->
  147.                     <div class="text-justify p-1" style="height:200px;overflow:auto;font-variant:color:#777;">
  148.  
  149.                         <p style="color:#777;">Brainwashing allows the user to control anyone who responds to one of their statements, forcing the opponent to do as they say.</p>
  150.                         <p style="color:#777;">The quirk must be willfully activated</p>
  151.                         <p style="color:#777;">Victims will feel dazed when being controlled, but will remain largely aware of their current state of being brainwashed, despite looking completely spaced out. They are rendered essentially caged in their own bodies and feeling helpless all the time, until the brainwashing effect breaks. Those who end up brainwashed will be forced to follow all of Hitoshi's commands, however, any orders that require them to think or talk will not work.</p>
  152.                     </div>
  153.                 </div>
  154.                 <!--------- END QUIRK ----------->
  155.             </div>
  156.             <!-- DATA + STORY -->
  157.             <div class="col-lg-4 p-1">
  158.                 <!------------------ PERSONAL DATA ------------------>
  159.                 <div class="card d-block rounded-0 p-2 mb-2" style="background:#fff;border:1px solid #ccc;letter-spacing:1px;">
  160.  
  161.                     <h2 class="d-block display-4 text-center p-1" style="font-variant:small-caps;color:#777;font-size:15pt;border-bottom:1px solid #ccc;">Personal Data</h2>
  162.                     <!---- affiliation button---->
  163.                     <div class="mb-2">
  164.                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-users"></i></div>
  165.                         <!---- affiliation --->
  166.                         <span class="text-uppercase font-weight-bold mr-lg-2">Affiliation</span> School/Team</div>
  167.                     <!---- former Instutition button---->
  168.                     <div class="mb-2">
  169.                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-user-times"></i></div>
  170.                         <!---- former Institution --->
  171.                         <span class="text-uppercase font-weight-bold mr-lg-2">Former Institution</span> frmr group</div>
  172.                     <!---- height button---->
  173.                     <div class="mb-2">
  174.                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-street-view"></i></div>
  175.                         <!---- height --->
  176.                         <span class="text-uppercase font-weight-bold mr-lg-2">Height</span> ???</div>
  177.                         <!---- blood button---->
  178.                         <div class="mb-2">
  179.                             <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-heartbeat"></i></div>
  180.                             <!---- blood --->
  181.                             <span class="text-uppercase font-weight-bold mr-lg-2">Blood Type</span> ABO</div>
  182.                             <!---- birthplace button---->
  183.                             <div class="mb-2">
  184.                                 <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-map-pin"></i></div>
  185.                                 <!---- birthplace --->
  186.                                 <span class="text-uppercase font-weight-bold mr-lg-2">Birthplace</span> ???</div>
  187.                                 <!---- likes button---->
  188.                                 <div class="mb-2">
  189.                                     <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-thumbs-up"></i></div>
  190.                                     <!---- likes --->
  191.                                     <span class="text-uppercase font-weight-bold mr-lg-2">Likes</span> ???</div>
  192.                                     <!---- fighting button---->
  193.                                     <div class="mb-2">
  194.                                         <div class="btn border-0 rounded-0 p-2 text-center mr-2" style="background:#777;height:35px;width:35px;"><i class="fal text-white fa-spinner"></i></div>
  195.                                         <!---- fighting --->
  196.                                         <span class="text-uppercase font-weight-bold mr-lg-2">Fighting Style</span> ???</div>
  197.                 </div>
  198.                 <!--------- END PERSONAL DATA ----------->
  199.                 <!------------------ STORY -------------------->
  200.                 <div class="card d-block rounded-0 p-2" style="background:#fff;border:1px solid #ccc;letter-spacing:1px;height:338px;">
  201.  
  202.                     <h2 class="d-block display-4 text-center p-1" style="font-variant:small-caps;color:#777;font-size:15pt;border-bottom:1px solid #ccc;">Story</h2>
  203.                     <!---- story here ---->
  204.                     <div class="text-justify p-1" style="height:280px;overflow:auto;">
  205.  
  206.                         <p style="color:#777;">Hitoshi is a very stoic and straightforward person with an innate ability to spark conversation with anyone, despite holding a quiet and reserved attitude most of the time. He is shown to be rather clever, being able to manipulate others into replying to his words, allowing him the opportunity to activate his Quirk.</p>
  207.  
  208.                         <p style="color:#777;">Due to having his Quirk perceived as evil throughout his whole life, Hitoshi is somewhat feared by those who are aware of it, feeling discriminated solely because of his ability. This led him to become resentful of those who had Quirks more associated with Hero work. Regardless, Hitoshi desires to become a Hero more than anything, with a deep longing to disprove those that doubt his heroic intentions. Not only does he want to refute those who shame his abilities, but he also aspires to usurp students who walk the path towards becoming a Pro Hero, as he wished to.</p>
  209.                     </div>
  210.                 </div>
  211.                 <!--------- END STORY ----------->
  212.             </div>
  213.             <!---- end rows ---->
  214.         </div>
  215.         <!-- WORDS FROM A FRIEND
  216.                     This is optional portion that links to another character.
  217.                     can opt for "A Professional's Opinion"
  218.             -->
  219.         <div class="row no-gutters" style="color:#777;">
  220.             <div class="col-lg-12 p-1">
  221.                 <div class="card d-block rounded-0 p-2" style="background:#fff;border:1px solid #ccc;letter-spacing:1px;height:110px;"
  222.                 <h2 class="d-block display-4 text-center p-1" style="font-variant:small-caps;color:#777;font-size:15pt;border-bottom:1px solid #ccc;"><a href="https://toyhou.se/EXAMPLE" title="[Character's Name]" class="text-primary" ><i class="fa fa-comments"></i><a><span style="float:right;font-variant:small-caps;">Words from a Friend</span></h2>
  223.                     <div class="text-justify p-1" style="height:70px;overflow:auto;">
  224.                         <p style="color:#777;">have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!  have all sorts of text!!</p>
  225.                         <p style="color:#777;">have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!! have all sorts of text!!  have all sorts of text!!</p>
  226.                     </div>
  227.                 </div>
  228.                 </div>
  229.              </div>
  230.              <!-- end WORDS FROM A FRIEND -->
  231.  
  232.         <!----end container - credit ----->
  233.         <a class="pl-1 tooltipster text-left" href="/Shinsou" style="color:#777;" title="original code by shinsou"><i class="fal fa-code"></i></a><a class="pl-1 tooltipster text-right" href="https://toyhou.se/a-brilliant-loser" style="color:#777;" title="edits by _featherweather"><i class="fal fa-code"></i></a></div>
  234.     <!------- wrap up --------->
  235. </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!