Advertisement
snail-legs

simple card layout

Apr 2nd, 2020 (edited)
71
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="card card-outline-primary" style="width: 80%; margin: auto;">
  2.   <div class="card-block">
  3.    
  4.     <!-- image and character name -->
  5.     <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/4550580?1585838613" class="fr-fic fr-dii card card-outline-primary" style="float: left; margin-right: 20px;" width="200" height="200">
  6.     <h2 class="card-title"><i class="far fa-star"></i><strong>&nbsp;Character Name (nickname)</strong></h2>
  7.    
  8.     <!-- pills -->
  9.     <span class="badge badge-primary">pronouns</span>
  10.     <span class="badge badge-primary">story</span>
  11.     <span class="badge badge-primary">job title/status</span>
  12.     <br><br>
  13.    
  14.     <!-- character bio info -->
  15.     <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.</p>
  16.    
  17.   </div>
  18. </div>
  19.  
  20. <!-- this is the code credit! feel free to move it, but please keep it in here somewhere -->
  21. <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