API tools faq
paste
Advertisement
yokare

Toontastic HTML

yokare
Mar 19th, 2019
603
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 19.29 KB | None | 0 0
raw download clone embed print report
  1. <div class="container px-0">
  2.   <div class="container-fluid">
  3.     <div class="row">
  4.         <div class="col-sm mb-3 text-center">
  5.           <!---Toon Name--->
  6.             <h1 class="display-3"><span class="badge badge-pill badge-info">Toon Name</span></h1>
  7.              
  8.         </div>
  9.     </div>
  10.   </div>
  11. </div>
  12.  
  13. <div class="container px-0">
  14.  
  15. <div class="container-fluid">
  16.     <div class="row">
  17.      
  18.       <div class="col-sm-4 mb-1">
  19.         <div class="card card-outline-info bg-faded">
  20.           <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  21.            <i class="far fa-info-circle"></i> Info
  22.           </h1>
  23.         <div class="card-block">
  24.           <!---Basic Info--->
  25.             <div class="col-sm mb-3">
  26.                 <b class="text-uppercase text-muted mr-2">Name:</b> -
  27.             </div>
  28.          
  29.             <div class="col-sm mb-3">
  30.                 <b class="text-uppercase text-muted mr-2">Aliases:</b> -
  31.             </div>
  32.            
  33.             <div class="col-sm mb-3">
  34.                 <b class="text-uppercase text-muted mr-2">Pronouns:</b> -
  35.             </div>
  36.          
  37.             <div class="col-sm mb-3">
  38.                 <b class="text-uppercase text-muted mr-2">Age:</b> -
  39.             </div>
  40.          
  41.             <div class="col-sm mb-3">
  42.                 <b class="text-uppercase text-muted mr-2">Species:</b> -
  43.             </div>
  44.        
  45.             <div class="col-sm mb-3">
  46.                 <b class="text-uppercase text-muted mr-2">Affiliation:</b> -
  47.             </div>  
  48.  
  49.             <div class="col-sm mb-3">
  50.                 <b class="text-uppercase text-muted mr-2">Occupation:</b> -
  51.             </div>
  52.  
  53.             <div class="col-sm mb-3">
  54.                 <b class="text-uppercase text-muted mr-2">Residency:</b> -
  55.             </div>
  56.            
  57.             <div class="col-sm mb-3">
  58.                 <b class="text-uppercase text-muted mr-2">Alignment:</b> -
  59.             </div>  
  60.          
  61.         </div>
  62.       </div>
  63.     </div>
  64.  
  65.        
  66.         <div class="col-sm-4 mb-1"><div class="card card-outline-info bg-faded">
  67.           <!---Main IMG, will resize within the defined height limit (470px default)--->
  68.           <div class="card-block text-center">
  69.             <img src="https://file.toyhou.se/images/12810757_WbnHcZKFy5MtGrO.png" class="rounded" style="max-height:470px;">
  70.             </div>
  71.           </div>
  72.         </div>
  73.        
  74.       <div class="col-sm-4">
  75.         <div class="card card-outline-info bg-faded">
  76.           <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  77.            <i class="fas fa-birthday-cake"></i> Gags
  78.           </h1>
  79.         <div class="card-block">
  80.          
  81.           <!---Your toon's laff--->
  82.             <div class="col-sm mb-3 text-center">
  83.               <h1 class="display-4"><span class="badge badge-pill badge-success">LAFF</span></h1>
  84.              
  85.             </div>
  86.          
  87.           <!---Your toon's Gags,
  88.          use <i class="fas fa-times"></i> for the tracks they lack--->
  89.             <div class="col-sm mb-3">
  90.                 <b class="text-uppercase text-muted mr-2">Toon-Up:</b> <i class="fas fa-times"></i>
  91.             </div>
  92.          
  93.             <div class="col-sm mb-3">
  94.                 <b class="text-uppercase text-muted mr-2">Trap:</b> -
  95.             </div>
  96.          
  97.             <div class="col-sm mb-3">
  98.                 <b class="text-uppercase text-muted mr-2">Lure:</b> -
  99.             </div>
  100.          
  101.             <div class="col-sm mb-3">
  102.                 <b class="text-uppercase text-muted mr-2">Sound:</b> -
  103.             </div>
  104.        
  105.             <div class="col-sm mb-3">
  106.                 <b class="text-uppercase text-muted mr-2">Throw:</b> -
  107.             </div>  
  108.          
  109.             <div class="col-sm mb-3">
  110.                 <b class="text-uppercase text-muted mr-2">Squirt:</b> -
  111.             </div>
  112.            
  113.             <div class="col-sm mb-3">
  114.                 <b class="text-uppercase text-muted mr-2">Drop:</b> -
  115.             </div>  
  116.            
  117.             <div class="col-sm mb-3 text-center">
  118.               <b class="text-uppercase text-muted mr-2"><i class="fas fa-heart"></i></b> Favourite Gags
  119.             </div>
  120.            
  121.         </div>
  122.       </div>
  123.     </div>
  124.     </div>
  125. </div>
  126. </div>
  127.  
  128. <br>
  129.  
  130. <div class="container px-6">
  131.   <div class="container-fluid">
  132.     <div class="row">
  133.       <div class="col-md-12">
  134.         <div class="card card-outline-info bg-faded">
  135.           <div class="card-block">
  136.            <div class="card-block">
  137.              <!---Quote, make it whatever you like. Change the font size by editing 'display-4'--->
  138.                 <h1 class="display-4 text-danger"><i class="fas fa-quote-left pull-left"></i></h1>
  139.                   <h1 class="display-4 text-uppercase text-muted text-center"><b>Welcome to Toontown!</b></h1>
  140.                 <h1 class="display-4 text-danger"><i class="fas fa-quote-right pull-right"></i></h1>
  141.            </div>
  142.          </div>
  143.         </div>
  144.       </div>
  145.     </div>
  146.     </div>
  147.  
  148. </div>
  149.  
  150. <br>
  151.  
  152. <!---Personality, will automaticaly add a scrollbar if box contents exceed 470px--->
  153.  
  154. <div class="container px-8">
  155.   <div class="container-fluid">
  156.     <div class="row">
  157.       <div class="col-md-6 mb-1">
  158.         <div class="ui-accordion card card-outline-info bg-faded">
  159.           <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  160.            <i class="fas fa-theater-masks"></i> Personality
  161.           </h1>
  162.           <div class="ui-accordion-content card-block" style="height:470px;">
  163.            
  164.             <!---Values, represented by stars. use fas for filled and far for unfilled--->
  165.             <div class="col-sm mb-3">
  166.                 <b class="text-uppercase text-muted mr-2">Charisma:</b>
  167.                 <span class="pull-right">
  168.                 <i class="fas fa-heart mx-1" />
  169.                 <i class="fas fa-heart mx-1" />
  170.                 <i class="fas fa-heart mx-1" />
  171.                 <i class="far fa-heart mx-1" />
  172.                 <i class="far fa-heart mx-1" />
  173.                 </span>
  174.             </div>
  175.            
  176.             <div class="col-sm mb-3">
  177.                 <b class="text-uppercase text-muted mr-2">Empathy:</b>
  178.                 <span class="pull-right">
  179.                 <i class="fas fa-heart mx-1" />
  180.                 <i class="fas fa-heart mx-1" />
  181.                 <i class="fas fa-heart mx-1" />
  182.                 <i class="far fa-heart mx-1" />
  183.                 <i class="far fa-heart mx-1" />
  184.                 </span>
  185.             </div>
  186.            
  187.             <div class="col-sm mb-3">
  188.                 <b class="text-uppercase text-muted mr-2">Intelligence:</b>
  189.                 <span class="pull-right">
  190.                 <i class="fas fa-heart mx-1" />
  191.                 <i class="fas fa-heart mx-1" />
  192.                 <i class="fas fa-heart mx-1" />
  193.                 <i class="far fa-heart mx-1" />
  194.                 <i class="far fa-heart mx-1" />
  195.                 </span>
  196.             </div>
  197.            
  198.             <div class="col-sm mb-3">
  199.                 <b class="text-uppercase text-muted mr-2">Integrity:</b>
  200.                 <span class="pull-right">
  201.                 <i class="fas fa-heart mx-1" />
  202.                 <i class="fas fa-heart mx-1" />
  203.                 <i class="fas fa-heart mx-1" />
  204.                 <i class="far fa-heart mx-1" />
  205.                 <i class="far fa-heart mx-1" />
  206.                 </span>
  207.             </div>
  208.            
  209.             <div class="col-sm mb-3">
  210.                 <b class="text-uppercase text-muted mr-2">Discipline:</b>
  211.                 <span class="pull-right">
  212.                 <i class="fas fa-heart mx-1" />
  213.                 <i class="fas fa-heart mx-1" />
  214.                 <i class="fas fa-heart mx-1" />
  215.                 <i class="far fa-heart mx-1" />
  216.                 <i class="far fa-heart mx-1" />
  217.                 </span>
  218.             </div>
  219.            
  220.             <div class="col-sm mb-3">
  221.                 <b class="text-uppercase text-muted mr-2">Humour:</b>
  222.                 <span class="pull-right">
  223.                 <i class="fas fa-heart mx-1" />
  224.                 <i class="fas fa-heart mx-1" />
  225.                 <i class="fas fa-heart mx-1" />
  226.                 <i class="far fa-heart mx-1" />
  227.                 <i class="far fa-heart mx-1" />
  228.                 </span>
  229.             </div>
  230.             <br>
  231.            
  232.             <!---Personality Description--->
  233.             <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis nisi quis lectus ornare, eget ultrices ipsum maximus. Mauris vitae arcu sed magna consequat dictum sit amet non urna. Etiam facilisis leo bibendum lacus pellentesque blandit eu nec lacus. Fusce quis tortor accumsan arcu mattis hendrerit. Morbi eget libero ac est scelerisque placerat. Phasellus pellentesque, magna aliquam rhoncus cursus, ante turpis sodales purus, at tempus nunc elit ac sapien. Donec condimentum leo elit, ut congue neque ultrices commodo. Donec justo odio, posuere sed condimentum commodo, eleifend eu nibh. Curabitur eget nisl a massa pulvinar finibus eu et nibh.
  234.  
  235. In rutrum, tortor vitae sodales iaculis, risus metus ornare massa, vel aliquam elit nibh nec arcu. Etiam sed mauris quis lectus commodo tincidunt. Donec congue risus at odio pharetra accumsan. Nunc ac mattis urna, non scelerisque sapien. Duis at sapien eget lacus hendrerit vulputate. Nulla iaculis lacus et ante tincidunt condimentum. Maecenas aliquet diam sed mauris mattis, a condimentum eros vestibulum. In tincidunt risus id turpis tincidunt, venenatis euismod quam tristique. </p>
  236.            
  237.           </div>
  238.         </div>
  239.       </div>
  240.      
  241.       <div class="col-md-6">
  242.         <!---Interests, will also auto-scroll--->
  243.         <div class="ui-accordion card card-outline-info bg-faded">
  244.           <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  245.             <i class="fas fa-stars"></i> Interests
  246.           </h1>
  247.          
  248.           <div class="ui-accordion-content card-block" style="height:200px;">
  249.             <div class="card-block">
  250.               <div class="row">
  251.                 <div class="col-sm-6">
  252.                   <h1 class="text-uppercase text-muted"><i class="far fa-heart mr-1"></i>Likes</h1>
  253.                   <ul class="mb-0">
  254.                     <li class="mb-1">1</li>
  255.                     <li class="mb-1">2</li>
  256.                     <li class="mb-1">3</li>
  257.                     <li class="mb-1">4</li>
  258.                   </ul>
  259.                 </div>
  260.                
  261.                 <div class="col-sm-6">
  262.                   <h1 class="text-uppercase text-muted"><i class="far fa-times mr-1"></i>Dislikes</h1>
  263.                   <ul class="mb-0">
  264.                     <li class="mb-1">1</li>
  265.                     <li class="mb-1">2</li>
  266.                     <li class="mb-1">3</li>
  267.                     <li class="mb-1">4</li>
  268.                   </ul>
  269.                 </div>
  270.               </div>
  271.           </div>
  272.         </div>
  273.         </div>
  274.        
  275.        
  276.         <!---Relationship tab, copy/paste all the content within CHARACTER and END to add new characters.
  277.        IMGs will auto-size.
  278.        Change hearts to fas for filled and far for unfilled--->
  279.         <div class="ui-accordion card card-outline-info bg-faded mt-2">
  280.           <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  281.            <i class="fas fa-users"></i> Relationships
  282.           </h1>
  283.          
  284.           <div class="ui-accordion-content card-block" style="height:200px;">
  285.             <!---CHARACTER--->
  286.             <div class="card-block">
  287.             <div class="col-md mb-3">
  288.             <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded float-left d-block mx-left mb-2 mr-2" style="max-height: 100px;">
  289.             <b class="text-uppercase text-muted mr-2">Name</b>
  290.             <b class="text-muted mr-2"><i class="fas fa-star"></i></b>
  291.             Relationship
  292.            
  293.             <p>
  294.               <i class="fas fa-heart mx-1" />
  295.               <i class="fas fa-heart mx-1" />
  296.               <i class="fas fa-heart mx-1" />
  297.               <i class="far fa-heart mx-1" />
  298.               <i class="far fa-heart mx-1" />
  299.             <br>
  300.            
  301.             Placeholder text.</p>
  302.            
  303.             </div>
  304.             </div>
  305.             <!---END--->
  306.            
  307.             <!---CHARACTER--->
  308.             <div class="card-block">
  309.             <div class="col-md mb-3">
  310.             <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded float-left d-block mx-left mb-2 mr-2" style="max-height: 100px;">
  311.             <b class="text-uppercase text-muted mr-2">Name</b>
  312.             <b class="text-muted mr-2"><i class="fas fa-star"></i></b>
  313.             Relationship
  314.            
  315.             <p>
  316.               <i class="fas fa-heart mx-1" />
  317.               <i class="fas fa-heart mx-1" />
  318.               <i class="fas fa-heart mx-1" />
  319.               <i class="far fa-heart mx-1" />
  320.               <i class="far fa-heart mx-1" />
  321.               <br>
  322.              
  323.                 Placeholder text.</p>
  324.  
  325.             </div>
  326.             </div>
  327.             <!---END--->
  328.            
  329.             <!---CHARACTER--->
  330.             <div class="card-block">
  331.             <div class="col-md mb-3">
  332.             <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded float-left d-block mx-left mb-2 mr-2" style="max-height: 100px;">
  333.             <b class="text-uppercase text-muted mr-2">Name</b>
  334.             <b class="text-muted mr-2"><i class="fas fa-star"></i></b>
  335.             Relationship
  336.            
  337.             <p>
  338.               <i class="fas fa-heart mx-1" />
  339.               <i class="fas fa-heart mx-1" />
  340.               <i class="fas fa-heart mx-1" />
  341.               <i class="far fa-heart mx-1" />
  342.               <i class="far fa-heart mx-1" />
  343.             <br>
  344.              
  345.             Placeholder text.</p>
  346.            
  347.             </div>
  348.             </div>
  349.             <!---END--->
  350.            
  351.           </div>
  352.         </div>
  353.        
  354.       </div>
  355.     </div>
  356.     </div>
  357.   </div>
  358.  
  359.   <br>
  360.  
  361.   <!---Story/background, feel free to add as much text as you want, it will auto-scroll--->
  362.  <div class="container px-8">
  363.    <div class="container-fluid">
  364.     <div class="row">
  365.       <div class="col-md-12 mb-1">
  366.         <div class="ui-accordion card card-outline-info bg-faded">
  367.           <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  368.            <i class="fas fa-books"></i> Story
  369.           </h1>
  370.          
  371.           <div class="ui-accordion-content card-block" style="height:250px;">
  372.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis nisi quis lectus ornare, eget ultrices ipsum maximus. Mauris vitae arcu sed magna consequat dictum sit amet non urna. Etiam facilisis leo bibendum lacus pellentesque blandit eu nec lacus. Fusce quis tortor accumsan arcu mattis hendrerit. Morbi eget libero ac est scelerisque placerat. Phasellus pellentesque, magna aliquam rhoncus cursus, ante turpis sodales purus, at tempus nunc elit ac sapien. Donec condimentum leo elit, ut congue neque ultrices commodo. Donec justo odio, posuere sed condimentum commodo, eleifend eu nibh. Curabitur eget nisl a massa pulvinar finibus eu et nibh.
  373.               <br><br>
  374.               In rutrum, tortor vitae sodales iaculis, risus metus ornare massa, vel aliquam elit nibh nec arcu. Etiam sed mauris quis lectus commodo tincidunt. Donec congue risus at odio pharetra accumsan. Nunc ac mattis urna, non scelerisque sapien. Duis at sapien eget lacus hendrerit vulputate. Nulla iaculis lacus et ante tincidunt condimentum. Maecenas aliquet diam sed mauris mattis, a condimentum eros vestibulum. In tincidunt risus id turpis tincidunt, venenatis euismod quam tristique.
  375.               <br><br>
  376.               Phasellus at porta sem. Pellentesque quis risus volutpat, feugiat arcu a, faucibus nisi. Maecenas non elit magna. Proin et molestie nulla. Nunc sodales cursus purus, ac aliquam arcu. Vivamus nec felis sagittis, suscipit arcu id, maximus felis. Nullam ullamcorper purus id quam blandit pellentesque. Nullam malesuada lectus sit amet lorem sagittis, id accumsan turpis aliquam. Nulla pellentesque tincidunt orci, non molestie libero elementum in. Integer tempus gravida enim, ac posuere mi rhoncus ut.</p>
  377.             </div>
  378.            
  379.           </div>
  380.         </div>
  381.       </div>
  382.    </div>
  383.  </div>
  384.  
  385.  <br>
  386.  
  387.  <!---Aesthetic images, will autosize to 150px--->
  388.  <div class="container px-8">
  389.    <div class="container-fluid">
  390.      <div class="row">
  391.        <div class="col-md mr-1 text-center">
  392.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  393.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  394.        </div>
  395.        <!------>
  396.        
  397.        <div class="col-md-8 mb-1">
  398.          <div class="ui-accordion card card-outline-info bg-faded">
  399.            <h1 class="display-4 text-uppercase card-inverse card-info card-header">
  400.            <i class="fas fa-music"></i> Playlist
  401.           </h1>
  402.           <!---Songs, direct embeds don't work on TH, so just add a link to Youtube or Spotify
  403.          Add as many as you like--->
  404.           <div class="ui-accordion-content card-block" style="height:245px;">
  405.             <div class="card-block pt-2">
  406.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  407.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  408.                 </p>
  409.                 <hr>
  410.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  411.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  412.                 </p>
  413.                 <hr>
  414.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  415.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  416.                 </p>
  417.                 <hr>
  418.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  419.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  420.                 </p>
  421.                 <hr>
  422.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  423.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  424.                 </p>
  425.              </div>
  426.              </div>
  427.          </div>
  428.        </div>
  429.        
  430.         <!---Aesthetic images, will autosize to 150px--->
  431.        <div class="col-md ml-1 text-center">
  432.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  433.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  434.        </div>
  435.        <!------>
  436.      </div>
  437.      <!---Credit, please leave intact--->
  438.      <p class="text-right small">HTML by <i class="far fa-pie mr-1"></i><a href="/sillyvizion">sillyvizion</a></p>
  439.    </div>
  440.  </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!