Advertisement
snail-legs

factfile | user profile

Feb 15th, 2021
925
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container-flex" style="max-width: 1000px; margin: auto;">
  2. <div class="row no-gutters">
  3.  
  4. <!-- picture, art status, mini links sections -->
  5. <div class="col-md-4" style="padding: 5px;">
  6. <div class="card bg-faded border-0">
  7.  
  8. <!-- header image -->
  9. <div class="card border-0" style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: center; height: 200px; width: 100%;"></div>
  10.  
  11. <!-- username and info -->
  12. <div class="card-header text-center border-0" style="line-height: 5px;">
  13. <h1 class="text-primary">username</h1><!-- to use a custom colour here, delete //class="text-primary"//, and replace it with //style="color: #hexcode;"//-->
  14. <p class="text-secondary" style="margin-bottom: 1em;"><i>info | info | info</i></p>
  15. </div>
  16.  
  17. <!-- art status -->
  18. <div class="card-block">
  19. <table class="table table-hover" style="border: 0;">
  20. <tr>
  21. <td style="padding: 0.25em; font-weight: bold;">commissions</td>
  22. <td style="padding: 0.25em; text-align: right;">status</td>
  23. </tr>
  24. <tr>
  25. <td style="padding: 0.25em; font-weight: bold;">art trades</td>
  26. <td style="padding: 0.25em; text-align: right;">status</td>
  27. </tr>
  28. <tr>
  29. <td style="padding: 0.25em; font-weight: bold;">requests</td>
  30. <td style="padding: 0.25em; text-align: right;">status</td>
  31. </tr>
  32. </table>
  33. </div>
  34.  
  35. <!-- code credit -->
  36. <div class="card-footer border-0 text-center" style="margin-top: -1em;">
  37. <p class="text-secondary"><i>code by @snail-legs</i></p>
  38. </div>
  39. </div>
  40. </div>
  41.  
  42. <!-- about section -->
  43. <div class="col-md-8" style="padding: 5px;">
  44. <div class="card bg-faded border-0">
  45. <div class="card-header border-0">
  46. <h1 class="text-primary">about me</h1>
  47. </div>
  48. <div class="card-block" style="padding-top: 0.5em;">
  49.  
  50. <!-- main text -->
  51. <h5 class="text-primary">introduction</h5>
  52. <p>
  53. 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. <br><br>
  54. 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.
  55. </p>
  56. <hr class="border-0">
  57.  
  58. <!-- more info -->
  59. <h5 class="text-primary">more info</h5>
  60. <p>
  61. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  62. </p>
  63. <hr class="border-0">
  64.  
  65. <!-- friends -->
  66. <h5 class="text-primary">friends!</h5>
  67. <p>@/friend @/friend @/friend @/friend @/friend @/friend @/friend @/friend</p>
  68. <hr class="border-0">
  69.  
  70. <!-- featured characters -->
  71. <hr style="width: 50%;">
  72. <div class="card-group text-center">
  73. <div class="card card-block border-0 bg-faded" style="padding: 0;">
  74. <a href="#"> <!-- link to character -->
  75. <img class="rounded-circle" src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin" style="width: 100px; height: 100px;"> <!-- image -->
  76. <p class="text-center">character name</p>
  77. </a>
  78. </div>
  79. <div class="card card-block border-0 bg-faded" style="padding: 0;">
  80. <a href="#"> <!-- link to character -->
  81. <img class="rounded-circle" src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin" style="width: 100px; height: 100px;"> <!-- image -->
  82. <p class="text-center">character name</p>
  83. </a>
  84. </div>
  85. <div class="card card-block border-0 bg-faded" style="padding: 0;">
  86. <a href="#"> <!-- link to character -->
  87. <img class="rounded-circle" src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin" style="width: 100px; height: 100px;"> <!-- image -->
  88. <p class="text-center">character name</p>
  89. </a>
  90. </div>
  91. <div class="card card-block border-0 bg-faded" style="padding: 0;">
  92. <a href="#"> <!-- link to character -->
  93. <img class="rounded-circle" src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin" style="width: 100px; height: 100px;"> <!-- image -->
  94. <p class="text-center">character name</p>
  95. </a>
  96. </div>
  97. </div>
  98. </div>
  99.  
  100. <!-- social media links -->
  101. <div class="card-footer border-0" >
  102. <div style="border-radius: 0;">
  103. <div class="row" style="margin: auto; text-align: center; max-width: 600px;">
  104. <div class="col"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></div> <!-- instagram -->
  105. <div class="col"><a href="#"><i class="fab fa-twitch fa-2x"></i></a></div> <!-- twitch -->
  106. <div class="col"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></div> <!-- twitter -->
  107. <div class="col"><a href="#"><i class="fab fa-tumblr fa-2x"></i></a></div> <!-- tumblr -->
  108. <div class="col"><a href="#"><i class="fab fa-youtube fa-2x"></i></a></div> <!-- youtube -->
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement