API tools faq
paste
Advertisement
yokare

Cog Nation HTML

yokare
Mar 19th, 2019
493
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 18.52 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.           <!---Cog Name--->
  6.             <h1 class="display-3"><span class="badge badge-pill badge-danger">Cog 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-danger bg-faded">
  20.           <h1 class="display-4 text-uppercase card-inverse card-danger 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">Model Number:</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">Mental Age:</b> -
  39.             </div>
  40.          
  41.             <div class="col-sm mb-3">
  42.                 <b class="text-uppercase text-muted mr-2">Type:</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-danger 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-danger bg-faded">
  76.           <h1 class="display-4 text-uppercase card-inverse card-danger card-header">
  77.            <i class="fas fa-cog"></i> Attacks
  78.           </h1>
  79.         <div class="card-block">
  80.          
  81.             <div class="col-sm mb-3 text-center">
  82.               <!---Level--->
  83.               <h1 class="display-4"><span class="badge badge-pill badge-success">Level ???</span></h1>
  84.               <!---Health (if applicable)--->
  85.               <b class="text-uppercase text-primary">350 health</b>
  86.             </div>
  87.          
  88.           <!---Your cog's attacks--->
  89.             <div class="col-sm mb-3">
  90.                 <b class="text-uppercase text-muted mr-2">Attack:</b> -0 laff
  91.             </div>
  92.          
  93.             <div class="col-sm mb-3">
  94.                 <b class="text-uppercase text-muted mr-2">Attack:</b> -0 laff
  95.             </div>
  96.          
  97.             <div class="col-sm mb-3">
  98.                 <b class="text-uppercase text-muted mr-2">Attack:</b> -0 laff
  99.             </div>
  100.            
  101.             <div class="col-sm mb-3">
  102.                 <b class="text-uppercase text-muted mr-2">Attack:</b> -0 laff
  103.             </div>
  104.             <div class="col-sm mb-3">
  105.                 <b class="text-uppercase text-muted mr-2">Attack:</b> -0 laff
  106.             </div>
  107.  
  108.             <div class="col-sm mb-3 text-center">
  109.               <b class="text-uppercase text-muted mr-2"><i class="fas fa-fist-raised mr-1"></i>Resistant to:</b> -
  110.               <br>
  111.               <b class="text-uppercase text-muted mr-2"><i class="fas fa-level-down-alt mr-1"></i>Weak to:</b> -
  112.             </div>
  113.            
  114.         </div>
  115.       </div>
  116.     </div>
  117.     </div>
  118. </div>
  119. </div>
  120.  
  121. <br>
  122.  
  123. <div class="container px-6">
  124.   <div class="container-fluid">
  125.     <div class="row">
  126.       <div class="col-md-12">
  127.         <div class="card card-outline-danger bg-faded">
  128.           <div class="card-block">
  129.            <div class="card-block">
  130.              <!---Quote, make it whatever you like. Change the font size by editing 'display-4'--->
  131.                 <h1 class="display-4 text-danger"><i class="fas fa-quote-left pull-left"></i></h1>
  132.                   <h1 class="display-4 text-uppercase text-muted text-center"><b>The Chairman won't be happy until you are.</b></h1>
  133.                 <h1 class="display-4 text-danger"><i class="fas fa-quote-right pull-right"></i></h1>
  134.            </div>
  135.          </div>
  136.         </div>
  137.       </div>
  138.     </div>
  139.     </div>
  140.  
  141. </div>
  142.  
  143. <br>
  144.  
  145. <!---Personality, will automaticaly add a scrollbar if box contents exceed 470px--->
  146. <div class="container px-8">
  147.   <div class="container-fluid">
  148.     <div class="row">
  149.       <div class="col-md-6 mb-1">
  150.         <div class="card card-outline-danger bg-faded">
  151.           <h1 class="display-4 text-uppercase card-inverse card-danger card-header">
  152.            <i class="fas fa-theater-masks"></i> Personality
  153.           </h1>
  154.           <div class="card-block">
  155.            
  156.             <!---Values, represented by stars. use fas for filled and far for unfilled--->
  157.             <div class="col-sm mb-3">
  158.                 <b class="text-uppercase text-muted mr-2">Charisma:</b>
  159.                 <span class="pull-right">
  160.                 <i class="fas fa-heart mx-1" />
  161.                 <i class="fas fa-heart mx-1" />
  162.                 <i class="fas fa-heart mx-1" />
  163.                 <i class="far fa-heart mx-1" />
  164.                 <i class="far fa-heart mx-1" />
  165.                 </span>
  166.             </div>
  167.            
  168.             <div class="col-sm mb-3">
  169.                 <b class="text-uppercase text-muted mr-2">Empathy:</b>
  170.                 <span class="pull-right">
  171.                 <i class="fas fa-heart mx-1" />
  172.                 <i class="fas fa-heart mx-1" />
  173.                 <i class="fas fa-heart mx-1" />
  174.                 <i class="far fa-heart mx-1" />
  175.                 <i class="far fa-heart mx-1" />
  176.                 </span>
  177.             </div>
  178.            
  179.             <div class="col-sm mb-3">
  180.                 <b class="text-uppercase text-muted mr-2">Intelligence:</b>
  181.                 <span class="pull-right">
  182.                 <i class="fas fa-heart mx-1" />
  183.                 <i class="fas fa-heart mx-1" />
  184.                 <i class="fas fa-heart mx-1" />
  185.                 <i class="far fa-heart mx-1" />
  186.                 <i class="far fa-heart mx-1" />
  187.                 </span>
  188.             </div>
  189.            
  190.             <div class="col-sm mb-3">
  191.                 <b class="text-uppercase text-muted mr-2">Integrity:</b>
  192.                 <span class="pull-right">
  193.                 <i class="fas fa-heart mx-1" />
  194.                 <i class="fas fa-heart mx-1" />
  195.                 <i class="fas fa-heart mx-1" />
  196.                 <i class="far fa-heart mx-1" />
  197.                 <i class="far fa-heart mx-1" />
  198.                 </span>
  199.             </div>
  200.            
  201.             <div class="col-sm mb-3">
  202.                 <b class="text-uppercase text-muted mr-2">Discipline:</b>
  203.                 <span class="pull-right">
  204.                 <i class="fas fa-heart mx-1" />
  205.                 <i class="fas fa-heart mx-1" />
  206.                 <i class="fas fa-heart mx-1" />
  207.                 <i class="far fa-heart mx-1" />
  208.                 <i class="far fa-heart mx-1" />
  209.                 </span>
  210.             </div>
  211.            
  212.             <div class="col-sm mb-3">
  213.                 <b class="text-uppercase text-muted mr-2">Humour:</b>
  214.                 <span class="pull-right">
  215.                 <i class="fas fa-heart mx-1" />
  216.                 <i class="fas fa-heart mx-1" />
  217.                 <i class="fas fa-heart mx-1" />
  218.                 <i class="far fa-heart mx-1" />
  219.                 <i class="far fa-heart mx-1" />
  220.                 </span>
  221.             </div>
  222.             <br>
  223.             <!---Personality Description--->
  224.             <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et magna eu felis rhoncus venenatis. Etiam eget erat eu nulla faucibus ultricies non ut metus. Nam aliquet augue a mauris accumsan euismod. Aliquam cursus purus vulputate, ultrices tortor ac, pulvinar dolor. Phasellus pellentesque tempus ante ut sollicitudin. In dapibus vestibulum leo a laoreet. Suspendisse molestie risus ac leo volutpat, eget vulputate justo molestie. Suspendisse tincidunt facilisis lorem, eget fermentum nulla suscipit et.</p>
  225.            
  226.           </div>
  227.         </div>
  228.       </div>
  229.      
  230.       <div class="col-md-6">
  231.         <!---Interests, will also auto-scroll--->
  232.         <div class="ui-accordion card card-outline-danger bg-faded">
  233.           <h1 class="display-4 text-uppercase card-inverse card-danger card-header">
  234.             <i class="fas fa-stars"></i> Interests
  235.           </h1>
  236.          
  237.           <div class="ui-accordion-content card-block" style="height:200px;">
  238.             <div class="card-block">
  239.               <div class="row">
  240.                 <div class="col-sm-6">
  241.                   <h1 class="text-uppercase text-muted"><i class="far fa-heart mr-1"></i>Likes</h1>
  242.                   <ul class="mb-0">
  243.                     <li class="mb-1">1</li>
  244.                     <li class="mb-1">2</li>
  245.                     <li class="mb-1">3</li>
  246.                     <li class="mb-1">4</li>
  247.                   </ul>
  248.                 </div>
  249.                
  250.                 <div class="col-sm-6">
  251.                   <h1 class="text-uppercase text-muted"><i class="far fa-times mr-1"></i>Dislikes</h1>
  252.                   <ul class="mb-0">
  253.                     <li class="mb-1">1</li>
  254.                     <li class="mb-1">2</li>
  255.                     <li class="mb-1">3</li>
  256.                     <li class="mb-1">4</li>
  257.                   </ul>
  258.                 </div>
  259.               </div>
  260.           </div>
  261.         </div>
  262.         </div>
  263.        
  264.         <!---Relationship tab, copy/paste all the content within CHARACTER and END to add new characters.
  265.        IMGs will auto-size.
  266.        Change hearts to fas for filled and far for unfilled--->
  267.         <div class="ui-accordion card card-outline-danger bg-faded mt-2">
  268.           <h1 class="display-4 text-uppercase card-inverse card-danger card-header">
  269.            <i class="fas fa-users-cog"></i> Relationships
  270.           </h1>
  271.          
  272.           <div class="ui-accordion-content card-block" style="height:200px;">
  273.             <!---CHARACTER--->
  274.             <div class="card-block">
  275.             <div class="col-md mb-3">
  276.             <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;">
  277.             <b class="text-uppercase text-muted mr-2">Name</b>
  278.             <b class="text-muted mr-2"><i class="fas fa-cog"></i></b>
  279.             Relationship
  280.            
  281.             <p>
  282.               <i class="fas fa-heart mx-1" />
  283.               <i class="fas fa-heart mx-1" />
  284.               <i class="fas fa-heart mx-1" />
  285.               <i class="far fa-heart mx-1" />
  286.               <i class="far fa-heart mx-1" />
  287.             <br>
  288.            
  289.             Placeholder text.</p>
  290.            
  291.             </div>
  292.             </div>
  293.             <!---END--->
  294.            
  295.             <!---CHARACTER--->
  296.             <div class="card-block">
  297.             <div class="col-md mb-3">
  298.             <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;">
  299.             <b class="text-uppercase text-muted mr-2">Name</b>
  300.             <b class="text-muted mr-2"><i class="fas fa-cog"></i></b>
  301.             Relationship
  302.            
  303.             <p>
  304.               <i class="fas fa-heart mx-1" />
  305.               <i class="fas fa-heart mx-1" />
  306.               <i class="fas fa-heart mx-1" />
  307.               <i class="far fa-heart mx-1" />
  308.               <i class="far fa-heart mx-1" />
  309.               <br>
  310.              
  311.                 Placeholder text.</p>
  312.  
  313.             </div>
  314.             </div>
  315.             <!---END--->
  316.            
  317.             <!---CHARACTER--->
  318.             <div class="card-block">
  319.             <div class="col-md mb-3">
  320.             <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;">
  321.             <b class="text-uppercase text-muted mr-2">Name</b>
  322.             <b class="text-muted mr-2"><i class="fas fa-cog"></i></b>
  323.             Relationship
  324.            
  325.             <p>
  326.               <i class="fas fa-heart mx-1" />
  327.               <i class="fas fa-heart mx-1" />
  328.               <i class="fas fa-heart mx-1" />
  329.               <i class="far fa-heart mx-1" />
  330.               <i class="far fa-heart mx-1" />
  331.             <br>
  332.              
  333.             Placeholder text.</p>
  334.            
  335.             </div>
  336.             </div>
  337.             <!---END--->
  338.            
  339.           </div>
  340.         </div>
  341.        
  342.       </div>
  343.     </div>
  344.     </div>
  345.   </div>
  346.  
  347.   <br>
  348.  
  349.   <!---Story/background, feel free to add as much text as you want, it will auto-scroll--->
  350.  <div class="container px-8">
  351.    <div class="container-fluid">
  352.     <div class="row">
  353.       <div class="col-md-12 mb-1">
  354.         <div class="ui-accordion card card-outline-danger bg-faded">
  355.           <h1 class="display-4 text-uppercase card-inverse card-danger card-header">
  356.            <i class="fas fa-books"></i> Story
  357.           </h1>
  358.          
  359.           <div class="ui-accordion-content card-block" style="height:250px;">
  360.             <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.
  361.               <br><br>
  362.               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.
  363.               <br><br>
  364.               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>
  365.             </div>
  366.            
  367.           </div>
  368.         </div>
  369.       </div>
  370.    </div>
  371.  </div>
  372.  
  373.  <br>
  374.  
  375.   <!---Aesthetic images, will autosize to 150px--->
  376.  <div class="container px-8">
  377.    <div class="container-fluid">
  378.      <div class="row">
  379.        <div class="col-md mr-1 text-center">
  380.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  381.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  382.        </div>
  383.        <!------>
  384.        
  385.        <div class="col-md-8 mb-1">
  386.          <div class="ui-accordion card card-outline-danger bg-faded">
  387.            <h1 class="display-4 text-uppercase card-inverse card-danger card-header">
  388.            <i class="fas fa-music"></i> Playlist
  389.           </h1>
  390.           <!---Songs, direct embeds don't work on TH, so just add a link to Youtube or Spotify
  391.          Add as many as you like--->
  392.           <div class="ui-accordion-content card-block" style="height:245px;">
  393.             <div class="card-block pt-2">
  394.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  395.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  396.                 </p>
  397.                 <hr>
  398.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  399.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  400.                 </p>
  401.                 <hr>
  402.                 <p><b class="text-uppercase text-muted mr-2">Song Name</b>/ Artist
  403.                     <a href="/MUSIC LINK" target="_BLANK"><i class="fas fa-play pull-right m-1" /></a>
  404.                 </p>
  405.                 <hr>
  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.              </div>
  414.              </div>
  415.          </div>
  416.        </div>
  417.        
  418.         <!---Aesthetic images, will autosize to 150px--->
  419.        <div class="col-md ml-1 text-center">
  420.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  421.          <img src="https://file.toyhou.se/images/12810763_CYL3GLPMzuNAaqe.png" class="rounded d-block mb-2" style="max-height: 150px;">
  422.        </div>
  423.        <!------>
  424.      </div>
  425.      <!---Credit, please leave intact--->
  426.      <p class="text-right small">HTML by <i class="fas fa-cog mr-1"></i><a href="/sillyvizion">sillyvizion</a></p>
  427.    </div>
  428.  </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!