snail-legs

layout: cosmos

Nov 7th, 2020 (edited)
351
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container-fluid" style="margin: auto; max-width: 800px;">
  2.    
  3.   <!-- image and about section -->
  4.   <div class="row no-gutters">
  5.     <div class="card-group">
  6.       <!-- image/s!  one is visible on desktop, the other is visible on mobile -->
  7.       <div class="card border-0 bg-faded" style="border-radius: 0; background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0); background-size: cover; background-position; center;"> <!-- this one is visible on desktop -->
  8.         <img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?6?0" class="card-img d-sm-none" style="object-fit: cover;"> <!-- this one is visible on mobile -->
  9.       </div>
  10.      
  11.       <!-- about section -->
  12.       <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
  13.          
  14.         <!-- header -->
  15.         <div style="line-height: 0.5em;">
  16.           <h1 class="text-center text-primary"><i class="fad fa-sparkles"></i> username <i class="fad fa-sparkles"></i></h1>
  17.           <p class="text-center text-secondary">info | info | info</p>
  18.         </div>
  19.         <hr style="width: 50%;">
  20.        
  21.         <!-- content -->
  22.         <p>
  23.           Talk a bit about yourself here!  the image will scale with the text :-)<br>
  24.           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  25.         </p>
  26.        
  27.         <hr style="width: 50%;">
  28.        
  29.         <!-- links -->
  30.         <div class="btn-group" role="group" aria-label="links" style="margin: auto;">
  31.           <a href="#" class="btn btn-outline-primary btn-sm"><i class="fad fa-code"></i> link</a>
  32.           <a href="#" class="btn btn-outline-primary btn-sm"><i class="fas fa-user"></i> link</a>
  33.           <a href="#" class="btn btn-outline-primary btn-sm"><i class="fad fa-link"></i> link</a>
  34.         </div>
  35.        
  36.       </div>
  37.     </div>
  38.   </div>
  39.  
  40.   <!-- art status and self-promo-->
  41.   <div class="row no-gutters">
  42.     <div class="card-group">
  43.       <hr style="width: 100%;">
  44.      
  45.       <!-- art status -->
  46.       <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
  47.         <h1 class="text-center text-primary"><i class="fad fa-sparkles"></i> art status <i class="fad fa-sparkles"></i></h1>
  48.         <table class="table table-bordered table-hover table-sm">
  49.           <tbody>
  50.             <tr>
  51.               <th scope="row">commissions:</th>
  52.               <td><a href="#">status</a></td>
  53.             </tr>
  54.             <tr>
  55.               <th scope="row">art trades:</th>
  56.               <td><a href="#">status</a></td>
  57.             </tr>
  58.             <tr>
  59.               <th scope="row">requests:</th>
  60.               <td><a href="#">status</a></td>
  61.             </tr>
  62.           </tbody>
  63.         </table>
  64.       </div>
  65.      
  66.       <!-- self promo -->
  67.       <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
  68.         <div style="line-height: 0.5em;">
  69.           <h1 class="text-center text-primary"><i class="fad fa-sparkles"></i> [self-promo/other info] <i class="fad fa-sparkles"></i></h1>
  70.         </div>
  71.         <p>Talk about the stuff you make here!!  maybe add a couple links and things?  this can be comics, characters, anything really!  Alternatively you could put trivia or other info here too, it depends on what you're after!</p>
  72.       </div>
  73.     </div>
  74.   </div>
  75.  
  76.   <!-- social media links -->
  77.   <div class="row no-gutters">
  78.     <hr style="width: 100%;">
  79.     <div class="card card-block border-0 bg-faded" style="border-radius: 0;">
  80.       <div class="row" style="margin: auto; text-align: center; max-width: 600px;">
  81.         <div class="col"><a href="#" class="text-secondary"><i class="fab fa-instagram fa-2x"></i></a></div>
  82.         <div class="col"><a href="#" class="text-secondary"><i class="fab fa-twitch fa-2x"></i></a></div>
  83.         <div class="col"><a href="#" class="text-secondary"><i class="fab fa-twitter fa-2x"></i></a></div>
  84.         <div class="col"><a href="#" class="text-secondary"><i class="fab fa-tumblr fa-2x"></i></a></div>
  85.         <div class="col"><a href="#" class="text-secondary"><i class="fab fa-youtube fa-2x"></i></a></div>
  86.         <div class="col"><a href="https://toyhou.se/~forums/16.htmlcss-graphics/139364.the-snail-s-shell-html-codes" class="text-secondary"><i class="fad fa-code fa-2x"></i></a></div> <!-- this is the code credit! you can move/reformat it but please keep it intact!! -->
  87.       </div>
  88.     </div>
  89.   </div>
  90. </div>
RAW Paste Data Copied