API tools faq
paste
snail-legs

layout: sona

snail-legs
Nov 7th, 2020
248
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.00 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid" style="max-width: 600px;">
  2.   <div class="card card-block bg-faded border-0">
  3.      
  4.     <!-- header!  character name, basic/quick info -->
  5.     <div class="text-center" style="line-height: 0.5em;">
  6.       <h1 class="text-primary display-4"><i class="fad fa-sparkles"></i> <b>character name</b> <i class="fad fa-sparkles"></i></h1>
  7.       <p class="text-secondary"><i>info | info | info</i></p>
  8.     </div>
  9.     <hr style="width: 95%; margin-bottom: 0.5em;">
  10.    
  11.     <!-- content -->
  12.     <div class="tab-content" id="pills-tabContent" style="height: 20em; overflow-y: scroll; padding: 1em;">
  13.        
  14.       <!-- tab 1 -->
  15.       <div class="tab-pane fade show active" id="pills-tab-1" role="tabpanel" aria-labelledby="pills-tab-1">
  16.        
  17.         <!-- stats block -->
  18.         <h2 class="text-primary" style="text-align: center;">stats</h2>
  19.         <!-- stats: 1, 2 -->
  20.         <div class="row">
  21.           <!-- 1 -->
  22.           <div class="col">
  23.             <span class="progress">
  24.             <span class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>1</b></span>
  25.             </span>
  26.           </div>
  27.           <!-- 2 -->
  28.           <div class="col">
  29.             <span class="progress">
  30.             <span class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="10"><b>2</b></span>
  31.             </span>
  32.           </div>
  33.         </div>
  34.         <!-- stats: 3, 4 -->
  35.         <div class="row" style="margin-top:10px;">
  36.           <!-- 3 -->
  37.           <div class="col">
  38.             <span class="progress">
  39.             <span class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"><b>3</b></span>
  40.             </span>
  41.           </div>
  42.           <!-- 4 -->
  43.           <div class="col">
  44.             <span class="progress">
  45.             <span class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="6" aria-valuemin="0" aria-valuemax="10"><b>4</b></span>
  46.             </span>
  47.           </div>
  48.         </div>
  49.        
  50.         <!-- quote -->
  51.         <hr style="width: 70%;">
  52.         <h4 class="text-primary" style="text-align: center;"><i>"put a quote, or song lyrics here!"</i></h4>
  53.         <hr style="width: 70%;">
  54.        
  55.         <!-- image -->
  56.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" style="height: 20em; width: auto; display: block; margin-left: auto; margin-right: auto;">
  57.         <hr style="width: 70%;">
  58.        
  59.         <!-- playlist -->
  60.         <h3 class="text-primary">Playlist</h3>
  61.         <ul class="fa-ul">
  62.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  63.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  64.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  65.         </ul>
  66.         <hr style="width: 70%;">
  67.        
  68.         <!-- character bio -->
  69.         <h2 class="text-primary" style="text-align: center;">biography</h2>
  70.         <p>
  71.           Pop some info in here!!  The box will scroll! :-D<br><br>
  72.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  73.         </p>
  74.         <hr style="width: 70%;">
  75.        
  76.         <!-- design notes -->
  77.         <h2 class="text-primary" style="text-align: center;">design notes</h2>
  78.         <ul class="fa-ul">
  79.           <li><i class="fad fa-sparkles text-primary"></i> info about the design!</li>
  80.           <li><i class="fad fa-sparkles text-primary"></i> you could use this list for something else though</li>
  81.           <li><i class="fad fa-sparkles text-primary"></i> if you want to!</li>
  82.         </ul>
  83.         <hr style="width: 70%;">
  84.        
  85.         <!-- code credit!  you can move/reformat it, but please keep it intact! -->
  86.         <p class="text-secondary" style="text-align: center; padding-bottom: 1em;">code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</p>
  87.       </div>
  88.      
  89.       <!-- tab 2 -->
  90.       <div class="tab-pane fade" id="pills-tab-2" role="tabpanel" aria-labelledby="pills-tab-2">
  91.          
  92.         <!-- stats block -->
  93.         <h2 class="text-primary" style="text-align: center;">stats</h2>
  94.         <!-- stats: 1, 2 -->
  95.         <div class="row">
  96.           <!-- 1 -->
  97.           <div class="col">
  98.             <span class="progress">
  99.             <span class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>1</b></span>
  100.             </span>
  101.           </div>
  102.           <!-- 2 -->
  103.           <div class="col">
  104.             <span class="progress">
  105.             <span class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="10"><b>2</b></span>
  106.             </span>
  107.           </div>
  108.         </div>
  109.         <!-- stats: 3, 4 -->
  110.         <div class="row" style="margin-top:10px;">
  111.           <!-- 3 -->
  112.           <div class="col">
  113.             <span class="progress">
  114.             <span class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"><b>3</b></span>
  115.             </span>
  116.           </div>
  117.           <!-- 4 -->
  118.           <div class="col">
  119.             <span class="progress">
  120.             <span class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="6" aria-valuemin="0" aria-valuemax="10"><b>4</b></span>
  121.             </span>
  122.           </div>
  123.         </div>
  124.        
  125.         <!-- quote -->
  126.         <hr style="width: 70%;">
  127.         <h4 class="text-primary" style="text-align: center;"><i>"put a quote, or song lyrics here!"</i></h4>
  128.         <hr style="width: 70%;">
  129.        
  130.         <!-- image -->
  131.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" style="height: 20em; width: auto; display: block; margin-left: auto; margin-right: auto;">
  132.         <hr style="width: 70%;">
  133.        
  134.         <!-- playlist -->
  135.         <h3 class="text-primary">Playlist</h3>
  136.         <ul class="fa-ul">
  137.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  138.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  139.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  140.         </ul>
  141.         <hr style="width: 70%;">
  142.        
  143.         <!-- character bio -->
  144.         <h2 class="text-primary" style="text-align: center;">biography</h2>
  145.         <p>
  146.           Pop some info in here!!  The box will scroll! :-D<br><br>
  147.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  148.         </p>
  149.         <hr style="width: 70%;">
  150.        
  151.         <!-- design notes -->
  152.         <h2 class="text-primary" style="text-align: center;">design notes</h2>
  153.         <ul class="fa-ul">
  154.           <li><i class="fad fa-sparkles text-primary"></i> info about the design!</li>
  155.           <li><i class="fad fa-sparkles text-primary"></i> you could use this list for something else though</li>
  156.           <li><i class="fad fa-sparkles text-primary"></i> if you want to!</li>
  157.         </ul>
  158.         <hr style="width: 70%;">
  159.        
  160.         <!-- code credit!  you can move/reformat it, but please keep it intact! -->
  161.         <p class="text-secondary" style="text-align: center; padding-bottom: 1em;">code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</p>
  162.       </div>
  163.      
  164.       <!-- tab 3 -->
  165.       <div class="tab-pane fade" id="pills-tab-3" role="tabpanel" aria-labelledby="pills-tab-3">
  166.          
  167.         <!-- stats block -->
  168.         <h2 class="text-primary" style="text-align: center;">stats</h2>
  169.         <!-- stats: 1, 2 -->
  170.         <div class="row">
  171.           <!-- 1 -->
  172.           <div class="col">
  173.             <span class="progress">
  174.             <span class="progress-bar" role="progressbar" style="width: 80%;" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"><b>1</b></span>
  175.             </span>
  176.           </div>
  177.           <!-- 2 -->
  178.           <div class="col">
  179.             <span class="progress">
  180.             <span class="progress-bar" role="progressbar" style="width: 30%;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="10"><b>2</b></span>
  181.             </span>
  182.           </div>
  183.         </div>
  184.         <!-- stats: 3, 4 -->
  185.         <div class="row" style="margin-top:10px;">
  186.           <!-- 3 -->
  187.           <div class="col">
  188.             <span class="progress">
  189.             <span class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="10"><b>3</b></span>
  190.             </span>
  191.           </div>
  192.           <!-- 4 -->
  193.           <div class="col">
  194.             <span class="progress">
  195.             <span class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="6" aria-valuemin="0" aria-valuemax="10"><b>4</b></span>
  196.             </span>
  197.           </div>
  198.         </div>
  199.        
  200.         <!-- quote -->
  201.         <hr style="width: 70%;">
  202.         <h4 class="text-primary" style="text-align: center;"><i>"put a quote, or song lyrics here!"</i></h4>
  203.         <hr style="width: 70%;">
  204.        
  205.         <!-- image -->
  206.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" style="height: 20em; width: auto; display: block; margin-left: auto; margin-right: auto;">
  207.         <hr style="width: 70%;">
  208.        
  209.         <!-- playlist -->
  210.         <h3 class="text-primary">Playlist</h3>
  211.         <ul class="fa-ul">
  212.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  213.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  214.           <li style="margin: 0.25em;"><span class="fa-li text-primary"><i class="fas fa-play"></i></span><a href="#">song name</a> | artist</li>
  215.         </ul>
  216.         <hr style="width: 70%;">
  217.        
  218.         <!-- character bio -->
  219.         <h2 class="text-primary" style="text-align: center;">biography</h2>
  220.         <p>
  221.           Pop some info in here!!  The box will scroll! :-D<br><br>
  222.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  223.         </p>
  224.         <hr style="width: 70%;">
  225.        
  226.         <!-- design notes -->
  227.         <h2 class="text-primary" style="text-align: center;">design notes</h2>
  228.         <ul class="fa-ul">
  229.           <li><i class="fad fa-sparkles text-primary"></i> info about the design!</li>
  230.           <li><i class="fad fa-sparkles text-primary"></i> you could use this list for something else though</li>
  231.           <li><i class="fad fa-sparkles text-primary"></i> if you want to!</li>
  232.         </ul>
  233.         <hr style="width: 70%;">
  234.        
  235.         <!-- code credit!  you can move/reformat it, but please keep it intact! -->
  236.         <p class="text-secondary" style="text-align: center; padding-bottom: 1em;">code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</p>
  237.       </div>
  238.     </div>
  239.     <hr style="width: 95%; margin-bottom: 0.5em;">
  240.    
  241.     <!-- nav tabs -->
  242.     <ul class="nav nav-pills nav-fill flex-xs-column" id="pills-tab" role="tablist">
  243.        
  244.       <!-- tab 1 -->
  245.       <li class="nav-item" role="presentation">
  246.         <a class="nav-link active" id="pills-tab-1" data-toggle="pill" href="#pills-tab-1" role="tab" aria-controls="pills-tab-1" aria-selected="true">tab 1</a>
  247.       </li>
  248.      
  249.       <!-- tab 2 -->
  250.       <li class="nav-item" role="presentation">
  251.         <a class="nav-link" id="pills-tab-2" data-toggle="pill" href="#pills-tab-2" role="tab" aria-controls="pills-tab-2" aria-selected="false">tab 2</a>
  252.       </li>
  253.      
  254.       <!-- tab 3 -->
  255.       <li class="nav-item" role="presentation">
  256.         <a class="nav-link" id="pills-tab-3" data-toggle="pill" href="#pills-tab-3" role="tab" aria-controls="pills-tab-3" aria-selected="false">tab 3</a>
  257.       </li>
  258.     </ul>
  259.   </div>
  260. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!