API tools faq
paste
t3ch13-c0l0rs

destructo!

t3ch13-c0l0rs
Apr 10th, 2022 (edited)
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.59 KB | None | 0 0
raw download clone embed print report
  1. <!-- gm microwave nation its time for more small codes. this time its warriors themed and has an ACCENT yipee
  2. the accent is #b986db
  3.  
  4. ENJOY THE CODE i like this one
  5. -->
  6.  
  7. <div class="col-lg-4 col-md-7 col-sm-12 mx-auto p-2">
  8.  
  9.  
  10. <div class="justify-content-between">
  11.  
  12. <!-- name -->
  13. <div class="col align-items-end text-truncate" style="color: #b986db; font-style:italic; font-weight: 400; text-transform: uppercase; font-size: 20px;">
  14. NAMENAME
  15. </div>
  16.  
  17. <!-- avatar img. square img recommended -->
  18. <div class="col-3 p-2 bg-faded" style="border-radius: 40px 40px 0px 0px; overflow: hidden; max-height: 70px; max-width: 100px;">
  19.  
  20. <ul class="nav nav-tabs card-header-tabs row no-gutters">
  21.  
  22. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/15243105?1647559652" style="background-size: cover; background-position: center; padding-bottom: 100px; border-radius: 40px 40px 0px 0px;">
  23.  
  24. </ul>
  25.  
  26. </div>
  27.  
  28. </div>
  29.  
  30. <!-- the divider that is the col -->
  31.  
  32. <div class="bg-faded p-2" style="border-radius: 5px 0px 5px 5px">
  33.  
  34.  
  35. <!-- """"header""""" (its a p class and not one of the <h#> classes) -->
  36.  
  37. <p class="ml-2 mb-0" style="color: #b986db; font-style:italic; font-weight: 400; text-transform: uppercase; font-size: 18px">ABOUT... <i class="fad fa-stars"></i></p>
  38.  
  39. <!-- divider -->
  40.  
  41. <hr class="mt-0 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  42.  
  43. <!-- about paragraph -->
  44. <p style="font-size: 12px; text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  45.  
  46. <!-- another divider -->
  47.  
  48. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  49.  
  50. <!-- quote -->
  51. <p style="font-size: 16px; text-align: center; font-weight: 300; font-style: italic">cool quote here lol</p>
  52.  
  53. <!-- hara stop with the dividers -->
  54.  
  55. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  56.  
  57. <!-- ok some.. stats.... -->
  58.  
  59. <div class="justify-content-between">
  60.  
  61. <span class="w-100 p-1 text-truncate text-uppercase">Hunting</span>
  62.  
  63. <div class="w-100 progress my-auto rounded-0 card border-0" style="height:5px">
  64.  
  65. <div class="progress-bar" style="width: 50%; background-color:#b986db"></div></div>
  66.  
  67. </div>
  68.  
  69. <div class="justify-content-between">
  70.  
  71. <span class="w-100 p-1 text-truncate text-uppercase">Stealth</span>
  72.  
  73. <div class="w-100 progress my-auto rounded-0 card border-0" style="height:5px">
  74.  
  75. <div class="progress-bar" style="width: 50%; background-color:#b986db"></div></div>
  76.  
  77. </div>
  78.  
  79. <div class="justify-content-between">
  80.  
  81. <span class="w-100 p-1 text-truncate text-uppercase">Attack</span>
  82.  
  83. <div class="w-100 progress my-auto rounded-0 card border-0" style="height:5px">
  84.  
  85. <div class="progress-bar" style="width: 50%; background-color:#b986db"></div></div>
  86.  
  87. </div>
  88.  
  89. <div class="justify-content-between">
  90.  
  91. <span class="w-100 p-1 text-truncate text-uppercase">Defense</span>
  92.  
  93. <div class="w-100 progress my-auto rounded-0 card border-0" style="height:5px">
  94.  
  95. <div class="progress-bar" style="width: 50%; background-color:#b986db"></div></div>
  96.  
  97. </div>
  98.  
  99. <div class="justify-content-between">
  100.  
  101. <span class="w-100 p-1 text-truncate text-uppercase">Healing</span>
  102.  
  103. <div class="w-100 progress my-auto rounded-0 card border-0" style="height:5px">
  104.  
  105. <div class="progress-bar" style="width: 50%; background-color:#b986db"></div></div>
  106.  
  107. </div>
  108.  
  109.  
  110. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  111.  
  112. <!-- end of main content -->
  113.  
  114. <div class="collapse" id="more">
  115.  
  116. <p class="ml-2 mb-2" style="color: #b986db; font-style:italic; font-weight: 400; text-transform: uppercase; font-size: 18px">fighting... <i class="fad fa-claw-marks"></i></p>
  117.  
  118.  
  119. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  120. <!-- weapon 1: claws -->
  121.  
  122. <div class="card p-3 border-0 mb-2">
  123.  
  124. <div class="justify-content-between">
  125.  
  126. <div class="d-flex bg-faded p-3 float-right" style="border-radius: 8px; max-height: 60px">
  127.  
  128. <span data-toggle="tooltip" title="claws">
  129. <i class="fad fa-claw-marks fa-2x"></i>
  130. </span>
  131.  
  132. </div>
  133.  
  134. <div class="col-10"> KEEP IT SHORT THIS DOES NOT LOOK GOOD WHEN IT'S LONG. </div>
  135.  
  136. </div>
  137.  
  138. </div>
  139.  
  140. <!-- weapon 2: jaws -->
  141.  
  142. <div class="card p-3 border-0 mb-2">
  143.  
  144. <div class="justify-content-between">
  145.  
  146. <div class="d-flex bg-faded p-3 float-right" style="border-radius: 8px; max-height: 60px">
  147.  
  148. <span data-toggle="tooltip" title="jaws">
  149. <i class="fad fa-teeth fa-2x"></i>
  150. </span>
  151.  
  152. </div>
  153.  
  154. <div class="col-10"> KEEP IT SHORT THIS DOES NOT LOOK GOOD WHEN IT'S LONG. </div>
  155.  
  156. </div>
  157.  
  158. </div>
  159.  
  160. <!-- healing 2: herbs -->
  161.  
  162. <div class="card p-3 border-0 mb-2">
  163.  
  164. <div class="justify-content-between">
  165.  
  166. <div class="d-flex bg-faded p-3 float-right" style="border-radius: 8px; max-height: 60px">
  167.  
  168. <span data-toggle="tooltip" title="herbs">
  169. <i class="fad fa-leaf-heart fa-2x"></i>
  170. </span>
  171.  
  172. </div>
  173.  
  174. <div class="col-10"> herb knowledge... how can dey help on da battlefield. </div>
  175.  
  176. </div>
  177.  
  178. </div>
  179.  
  180. <!-- end of weaponssss -->
  181.  
  182. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  183.  
  184. <!-- relationships -->
  185.  
  186. <p class="ml-2 mb-2" style="color: #b986db; font-style:italic; font-weight: 400; text-transform: uppercase; font-size: 18px">Relations... <i class="fad fa-heart"></i></p>
  187.  
  188. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  189.  
  190. <!-- relationship 1 -->
  191.  
  192. <div class="card p-3 border-0 mb-2">
  193.  
  194. <div class="justify-content-between">
  195.  
  196. <div class="d-flex bg-faded float-right" style="border-radius: 8px; max-height: 60px">
  197.  
  198. <a href="character" target=_blank style="height: 60px; width: 60px;">
  199.  
  200. <!-- img -->
  201.  
  202. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/15580842?1649505991" style="border-radius: 8px;">
  203. </a>
  204.  
  205. </div>
  206.  
  207. <!-- desc -->
  208.  
  209. <div class="col-10"> Describe relation here. </div>
  210.  
  211. </div>
  212.  
  213. </div>
  214.  
  215. <!-- relationship 2 -->
  216.  
  217. <div class="card p-3 border-0 mb-2">
  218.  
  219. <div class="justify-content-between">
  220.  
  221. <div class="d-flex bg-faded float-right" style="border-radius: 8px; max-height: 60px">
  222.  
  223. <a href="character" target=_blank style="height: 60px; width: 60px;">
  224.  
  225.  
  226. <!-- img -->
  227. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/9999860?1643425232" style="border-radius: 8px;">
  228. </a>
  229.  
  230. </div>
  231.  
  232. <!-- desc -->
  233. <div class="col-10"> The game. </div>
  234.  
  235. </div>
  236.  
  237. </div>
  238.  
  239. <!-- relationship 2 -->
  240.  
  241. <div class="card p-3 border-0 mb-2">
  242.  
  243. <div class="justify-content-between">
  244.  
  245. <div class="d-flex bg-faded float-right" style="border-radius: 8px; max-height: 60px">
  246.  
  247. <a href="character" target=_blank style="height: 60px; width: 60px;">
  248.  
  249. <!-- img -->
  250.  
  251. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/15467332?1648860160" style="border-radius: 8px;">
  252. </a>
  253.  
  254. </div>
  255.  
  256. <!-- relationship desc -->
  257.  
  258. <div class="col-10"> I'm gay. </div>
  259.  
  260. </div>
  261.  
  262. </div>
  263.  
  264. <hr class="mt-2 mb-2" style="border-width: 2px; border-color: #b986db; opacity: .5">
  265.  
  266. </div>
  267.  
  268.  
  269. <p style="text-align: center"><a href="#more" data-toggle="collapse"><i class="fas fa-caret-down"></i></a></p>
  270.  
  271.  
  272.  
  273.  
  274.  
  275. </div>
  276.  
  277. <a href="/micro-wave" data-toggle="tooltip" title="code by hara"><i class="fas fa-microwave"></i></a>
  278.  
  279. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!