Advertisement
snail-legs

layout: midnight oil

Apr 5th, 2020 (edited)
110
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="card" style="width: 80%; margin: auto; border-width: 5px;">
  2.  
  3.   <!-- card header/basic info section -->
  4.   <div class="card-header card-inverse" style="background-image: linear-gradient(to right, #8FBC8F, #00CED1); text-align: center; border-width: 0px 0px 2px 0px;">
  5.     <h1><i class="far fa-star"></i> character name (nickname)</h1>
  6.     <h4>pronouns | job | story</h4>
  7.   </div>
  8.  
  9.   <!-- biography section -->
  10.   <div class="card-block">
  11.     <h3 class="card-title" style="text-align: center;">Biography</h3>
  12.     <p>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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  13.   </div>
  14.  
  15.   <!-- design notes section -->
  16.   <div class="card-block" style="margin: auto;">
  17.     <h3 class="card-title" style="text-align: center;">Design Notes</h3>
  18.     <div class="card-block container-fluid">
  19.       <div class="row">
  20.        
  21.         <!-- you can put anything in these but I'd reccomend trying to keep it short and sweet -->
  22.         <div class="btn btn-default" style="text-align: center; margin: 5px;">
  23.           wears friendship bracelets
  24.         </div>
  25.        
  26.         <div class="btn btn-default" style="text-align: center; margin: 5px;">
  27.           many freckles
  28.         </div>
  29.        
  30.         <div class="btn btn-default" style="text-align: center; margin: 5px;">
  31.           always smiling
  32.         </div>
  33.        
  34.         <div class="btn btn-default" style="text-align: center; margin: 5px;">
  35.           can be drawn covered in paint!
  36.         </div>
  37.        
  38.       </div>
  39.     </div>
  40.   </div>
  41.  
  42.   <!-- trivia section -->
  43.   <div class="card-block">
  44.   <h3 class="card-title" style="text-align: center;">Trivia</h3>
  45.     <ul class="list-group list-group-flush">
  46.       <li class="list-group-item">appears as a character in this comic!</li>
  47.       <li class="list-group-item">hates spaghetti</li>
  48.       <li class="list-group-item">secretly really good at making popcorn</li>
  49.     </ul>
  50.   </div>
  51.  
  52.   <!-- relationships section -->
  53.   <div class="card-block">
  54.     <h3 class="card-title" style="text-align: center;">Relationships</h3>
  55.    
  56.     <div class="card-group" style="text-align: center;">
  57.      
  58.       <div class="card card-block">
  59.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
  60.         <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
  61.         <p>character name's childhood best friend!</p>
  62.       </div>
  63.      
  64.       <div class="card card-block">
  65.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
  66.         <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
  67.         <p>character name's childhood best friend!</p>
  68.       </div>
  69.      
  70.       <div class="card card-block">
  71.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
  72.         <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
  73.         <p>character name's childhood best friend!</p>
  74.       </div>
  75.      
  76.       <div class="card card-block">
  77.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/6488161?1586041871" width=100px height=100px class="rounded-circle" style="margin: auto;">
  78.         <a href="#"><h3 style="margin-top: 10px;">character name</h3></a>
  79.         <p>character name's childhood best friend!</p>
  80.       </div>
  81.     </div>
  82.   </div>
  83. </div>
  84.  
  85. <!-- this is the code credit! feel free to move it, but please keep it in here somewhere -->
  86. <div style="width: 80%; margin: auto;">code by [<a href="https://toyhou.se/snail-legs">snail-legs</a>]</div>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement