API tools faq
paste
Advertisement
parasti

Simple Card

parasti
Mar 27th, 2019 (edited)
173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.75 KB | None | 0 0
raw download clone embed print report
  1. <div class="container m-1">
  2.   <div class="row justify-content-center">
  3.    
  4.     <!---------- ICON (LOOKS BEST W/ SQUARE IMG) ---------->
  5.     <div class="d-flex align-items-stretch m-1">
  6.      
  7.         <!----- TO USE YOUR OWN BACKGROUND, REPLACE THE NEXT LINE WITH THE FOLLOWING: ----->
  8.         <!----- <div class="d-flex align-items-center rounded" style="background-image:url(IMG_URL);"> ----->
  9.       <div class="d-flex align-items-center rounded bg-primary">
  10.         <img src="https://via.placeholder.com/250" style="width:250px;height:auto;">
  11.       </div>
  12.      
  13.     </div>
  14.    
  15.     <!----- BASICS ----->
  16.     <div class="d-flex align-items-stretch m-1" style="min-width:250px;">
  17.  
  18.       <div class="card py-2" style="min-width:250px;">
  19.        
  20.         <div class="card-header bg-faded p-2">
  21.           <p class="display-4 text-center text-uppercase text-primary">
  22.             Full Name
  23.           </p>
  24.         </div>
  25.        
  26.         <div class="card-body bg-faded p-3 h-100">
  27.           <ul class="list-group list-group-flush">
  28.             <li class="list-group-item flex justify-content-between bg-faded">
  29.               <span class="text-uppercase text-primary mr-2">Age</span>
  30.               <span class="text-lowercase font-italic">something</span>
  31.             </li>
  32.             <li class="list-group-item flex justify-content-between bg-faded">
  33.               <span class="text-uppercase text-primary mr-2">Birthday</span>
  34.               <span class="text-lowercase font-italic">something</span>
  35.             </li>
  36.             <li class="list-group-item flex justify-content-between bg-faded">
  37.               <span class="text-uppercase text-primary mr-2">Gender</span>
  38.               <span class="text-lowercase font-italic">something</span>
  39.             </li>
  40.             <li class="list-group-item flex justify-content-between bg-faded">
  41.               <span class="text-uppercase text-primary mr-2">Race</span>
  42.               <span class="text-lowercase font-italic">something</span>
  43.             </li>
  44.             <li class="list-group-item flex justify-content-between bg-faded">
  45.               <span class="text-uppercase text-primary mr-2">Height</span>
  46.               <span class="text-lowercase font-italic">something</span>
  47.             </li>
  48.           </ul>
  49.          
  50.         </div>
  51.        
  52.       </div>
  53.  
  54.     </div>
  55.    
  56.     <!----- STATS ----->
  57.     <div class="m-1" style="min-width:250px;">
  58.      
  59.       <div class="card py-2 mb-2">
  60.         <div class="card-body bg-faded p-2">
  61.           <div class="container my-2">
  62.             <i class="fas fa-fist-raised float-left" style="width:25px;"></i>
  63.             <div class="progress">
  64.               <div class="progress-bar" style="width:0%;"></div>
  65.             </div>
  66.           </div>
  67.           <div class="container my-2">
  68.             <i class="fas fa-shield-alt float-left" style="width:25px;"></i>
  69.             <div class="progress">
  70.               <div class="progress-bar" style="width:25%;"></div>
  71.             </div>
  72.           </div>
  73.           <div class="container my-2">
  74.             <i class="fas fa-running float-left" style="width:25px;"></i>
  75.             <div class="progress">
  76.               <div class="progress-bar" style="width:50%;"></div>
  77.             </div>
  78.           </div>
  79.           <div class="container my-2">
  80.             <i class="fas fa-brain float-left" style="width:25px;"></i>
  81.             <div class="progress">
  82.               <div class="progress-bar" style="width:75%;"></div>
  83.             </div>
  84.           </div>
  85.           <div class="container my-2">
  86.             <i class="fas fa-heart float-left" style="width:25px;"></i>
  87.             <div class="progress">
  88.               <div class="progress-bar" style="width:100%;"></div>
  89.             </div>
  90.           </div>
  91.         </div>
  92.       </div>
  93.      
  94.       <!----- PREFERENCES ----->
  95.       <div class="card py-2">
  96.         <div class="card-body bg-faded">
  97.           <ul class="list-group list-group-flush">
  98.             <li class="list-group-item flex justify-content-between bg-faded">
  99.               <i class="fas fa-check float-left mr-2" style="width:25px;"></i>
  100.               <span class="text-lowercase font-italic">something</span>
  101.             </li>
  102.             <li class="list-group-item flex justify-content-between bg-faded">
  103.               <i class="fas fa-check float-left mr-2" style="width:25px;"></i>
  104.               <span class="text-lowercase font-italic">something</span>
  105.             </li>
  106.             <li class="list-group-item flex justify-content-between bg-faded">
  107.               <i class="fas fa-check float-left mr-2" style="width:25px;"></i>
  108.               <span class="text-lowercase font-italic">something</span>
  109.             </li>
  110.             <li class="list-group-item flex justify-content-between bg-faded">
  111.               <i class="fas fa-times float-left mr-2" style="width:25px;"></i>
  112.               <span class="text-lowercase font-italic">something</span>
  113.             </li>
  114.             <li class="list-group-item flex justify-content-between bg-faded">
  115.               <i class="fas fa-times float-left mr-2" style="width:25px;"></i>
  116.               <span class="text-lowercase font-italic">something</span>
  117.             </li>
  118.             <li class="list-group-item flex justify-content-between bg-faded">
  119.               <i class="fas fa-times float-left mr-2" style="width:25px;"></i>
  120.               <span class="text-lowercase font-italic">something</span>
  121.             </li>
  122.           </ul>
  123.         </div>
  124.       </div>
  125.      
  126.     </div>
  127.  
  128.   </div>
  129.  
  130.   <div class="row justify-content-center">
  131.    
  132.     <div class="m-1" style="max-width:800px;">
  133.      
  134.       <a class="d-flex justify-content-center mb-2" href="#readmore" data-toggle="collapse" id="toggle">
  135.         <span class="text-lowercase text-primary" id="toggle-txt">Read more</span>
  136.       </a>
  137.      
  138.       <div class="collapse" id="readmore">
  139.        
  140.         <div class="card py-2">
  141.          
  142.           <div class="card-header bg-faded p-2">
  143.             <p class="display-4 text-center text-uppercase text-primary">
  144.               Header
  145.             </p>
  146.           </div>
  147.          
  148.           <div class="card-body bg-faded p-4">
  149.             <p>
  150.               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et tortor at risus viverra adipiscing at. Velit dignissim sodales ut eu. Turpis cursus in hac habitasse platea. Mauris rhoncus aenean vel elit scelerisque. Ac odio tempor orci dapibus ultrices in iaculis. Magna eget est lorem ipsum. Quis hendrerit dolor magna eget est lorem. Feugiat sed lectus vestibulum mattis ullamcorper. Ut tellus elementum sagittis vitae et leo duis ut. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Suspendisse interdum consectetur libero id faucibus nisl tincidunt eget nullam. Tempor orci eu lobortis elementum nibh tellus. Est ullamcorper eget nulla facilisi. Nisl nisi scelerisque eu ultrices.
  151.             </p>
  152.           </div>
  153.          
  154.         </div>
  155.        
  156.         <div class="row my-2">
  157.           <div class="col-xs-6 col-sm-3 text-center my-1">
  158.             <a href="#">
  159.               <img class="rounded-circle" src="https://via.placeholder.com/150" style="max-width:150px;height:auto;">
  160.             </a>
  161.             <div>
  162.               <span class="text-lowercase text-primary">Name · Relationship</span>
  163.             </div>
  164.           </div>
  165.           <div class="col-xs-6 col-sm-3 text-center my-1">
  166.             <a href="#">
  167.               <img class="rounded-circle" src="https://via.placeholder.com/150" style="max-width:150px;height:auto;">
  168.             </a>
  169.             <div>
  170.               <span class="text-lowercase text-primary">Name · Relationship</span>
  171.             </div>
  172.           </div>
  173.           <div class="col-xs-6 col-sm-3 text-center my-1">
  174.             <a href="#">
  175.               <img class="rounded-circle" src="https://via.placeholder.com/150" style="max-width:150px;height:auto;">
  176.             </a>
  177.             <div>
  178.               <span class="text-lowercase text-primary">Name · Relationship</span>
  179.             </div>
  180.           </div>
  181.           <div class="col-xs-6 col-sm-3 text-center my-1">
  182.             <a href="#">
  183.               <img class="rounded-circle" src="https://via.placeholder.com/150" style="max-width:150px;height:auto;">
  184.             </a>
  185.             <div>
  186.               <span class="text-lowercase text-primary">Name · Relationship</span>
  187.             </div>
  188.           </div>
  189.         </div>
  190.        
  191.       </div>
  192.      
  193.       <a class="d-flex justify-content-center mt-2" data-toggle="tooltip" data-placement="top" title="paras7i" href="https://toyhou.se/paras7i" style="opacity:0.25;">
  194.         <i class="fas fa-code small"></i>
  195.       </a>
  196.      
  197.     </div>
  198.    
  199.   </div>
  200.  
  201. </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!