API tools faq
paste
t3ch13-c0l0rs

not applicable

t3ch13-c0l0rs
Jan 26th, 2024 (edited)
331
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.47 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. accent color: #ff8bc0
  3. -->
  4.  
  5. <div class="col-md-6 col-sm-12 mx-auto p-0" style="border-radius: 1em; overflow: hidden">
  6.  
  7. <div class="bg-faded p-2">
  8. <div class="row no-gutters">
  9.  
  10. <!-- left side -->
  11. <div class="col-md-4 px-1">
  12.  
  13. <!-- name title -->
  14. <div class="text-center font-weight-bold text-monospace" style="color: #ff8bc0; font-size: 19px">
  15. NAME
  16. </div>
  17.  
  18. <!-- icon -->
  19. <div class="p-2 rounded-circle card my-1" style="border: solid 1px #ff8bc0">
  20.  
  21. <img src="IMGSRC" class="rounded-circle" style="max-height: 100%">
  22.  
  23. </div>
  24.  
  25. <!-- flavor text, random day random time -->
  26. <div class="font-italic text-center" style="color: #ff8bc0; opacity: .7">
  27. 10:21 / friday 21st..
  28. </div>
  29.  
  30. <!-- tab buttons -->
  31. <div class="">
  32. <ul class="nav nav-tabs border-0 justify-content-center">
  33. <li class="nav-item">
  34. <a class="nav-link active border-0 p-0 mr-2 text-danger" data-toggle="tab" href="#texts" style="background: none; border: none">
  35. <i class="fas fa-circle fa-2xs"></i>
  36. </a>
  37. </li>
  38. <li class="nav-item">
  39. <a class="nav-link border-0 p-0 mr-2 text-warning" data-toggle="tab" href="#basic" style="background: none; border: none">
  40. <i class="fas fa-circle fa-2xs"></i>
  41. </a>
  42. </li>
  43. <li class="nav-item">
  44. <a class="nav-link border-0 p-0 mr-2 text-success" data-toggle="tab" href="#misc" style="background: none; border: none">
  45. <i class="fas fa-circle fa-2xs"></i>
  46. </a>
  47. </li>
  48. </ul>
  49. </div>
  50.  
  51. </div>
  52.  
  53. <!-- right side -->
  54. <div class="col p-3 d-block d-md-flex flex-column">
  55. <div class="card border-0" style="flex: 1 1 100px; min-height: 100px; overflow-y: auto; overflow-x: hidden">
  56.  
  57. <div class="tab-content">
  58.  
  59. <!-- texting tab -->
  60. <div class="tab-pane fade active show" id="texts">
  61.  
  62. <div class="bg-faded sticky-top">
  63.  
  64. <!-- this doesnt matter much -->
  65. <div class="row no-gutters">
  66.  
  67. <div class="col align-items-center">
  68. <i class="fas fa-arrow-left btn" style="cursor: pointer"></i>
  69. </div>
  70.  
  71. <!-- put other ocs name here -->
  72. <div class="col font-weight-bold align-items-center justify-content-center">name</div>
  73.  
  74. <div class="col text-right">
  75. <a class="btn" data-bs-toggle="collapse" data-toggle="collapse" href="#profilelink" aria-controls="profilelink" style="cursor: pointer; color: #ff8bc0"><i class="fas fa-ellipsis"></i></a>
  76. </div>
  77.  
  78. </div>
  79.  
  80. <!-- collapse -->
  81. <div class="collapse bg-faded p-2 sticky-top" id="profilelink">
  82. <div class="card border-0 p-2">
  83.  
  84. <!-- put link to other ocs profile here -->
  85. <a class="font-weight-light font-italic w-100 justify-content-between" style="color: #ff8bc0" href="URLHERE">
  86. Link to profile
  87. <i class="fa-light fa-arrow-up-right-from-square my-auto"></i>
  88. </a>
  89.  
  90. </div>
  91. </div>
  92.  
  93. </div>
  94.  
  95. <!-- texts -->
  96.  
  97. <div class="p-1">
  98.  
  99. <!-- left side -->
  100. <div class="w-100">
  101. <div class="col p-0 mb-1"><div class="bg-faded p-2 d-inline-flex" style="border-radius: 10px">INSERT TEXT MSG HERE</div></div>
  102. <div class="col p-0 mb-1"><div class="bg-faded p-2 d-inline-flex" style="border-radius: 10px">testing testing</div></div>
  103.  
  104. <!-- copy and paste above this to add more to this side -->
  105. </div>
  106.  
  107. <!-- right side -->
  108. <div class="w-100">
  109. <!-- image text can be deleted -->
  110. <div class="col p-0 mb-1 justify-content-end"><div class="p-2 d-inline-flex text-dark" style="border-radius: 10px; background: #ff8bc0;"><img src="IMGURLHERE"></div></div>
  111. <div class="col p-0 mb-1 justify-content-end"><div class="p-2 d-inline-flex text-dark" style="border-radius: 10px; background: #ff8bc0;">okay lets keep testing</div></div>
  112.  
  113. <!-- can be put above the left side im just lazy so youll have to figure it out yourself -->
  114. </div>
  115.  
  116. <!-- left side again -->
  117. <div class="w-100">
  118. <div class="col p-0 mb-1"><div class="bg-faded p-2 d-inline-flex" style="border-radius: 10px">no lets not</div></div>
  119. </div>
  120.  
  121. <!-- right side -->
  122. <div class="w-100">
  123. <div class="col p-0 mb-1 justify-content-end"><div class="p-2 d-inline-flex text-dark" style="border-radius: 10px; background: #ff8bc0;">why</div>
  124. </div>
  125.  
  126. <!-- keep this at the bottom lol -->
  127. <p class="small text-right" style="color: #ff8bc0">seen <i class="fas fa-check"></i></p>
  128. </div>
  129.  
  130. </div>
  131.  
  132. </div>
  133.  
  134. <!-- basic info -->
  135. <div class="tab-pane fade p-1" id="basic">
  136.  
  137. <div class="card bg-faded p-2 mb-1">
  138.  
  139. <div class="font-weight-light font-italic justify-content-between">
  140.  
  141. <span style="color: #ff8bc0">Full Name</span>
  142.  
  143. <span class="font-weight-light font-italic">
  144. Name Surname
  145. </span>
  146.  
  147. </div>
  148. </div>
  149.  
  150. <div class="card bg-faded p-2 mb-1">
  151.  
  152. <div class="font-weight-light font-italic justify-content-between">
  153.  
  154. <span style="color: #ff8bc0">Nickname(s)</span>
  155.  
  156. <span class="font-weight-light font-italic">
  157. Nickname, Nickname
  158. </span>
  159.  
  160. </div>
  161. </div>
  162.  
  163. <div class="card bg-faded p-2 mb-1">
  164.  
  165. <div class="font-weight-light font-italic justify-content-between">
  166.  
  167. <span style="color: #ff8bc0">Age</span>
  168.  
  169. <span class="font-weight-light font-italic">
  170. #
  171. </span>
  172.  
  173. </div>
  174. </div>
  175.  
  176. <div class="card bg-faded p-2 mb-1">
  177.  
  178. <div class="font-weight-light font-italic justify-content-between">
  179.  
  180. <span style="color: #ff8bc0">Gender</span>
  181.  
  182. <span class="font-weight-light font-italic">
  183. Gender
  184. </span>
  185.  
  186. </div>
  187. </div>
  188.  
  189. <div class="card bg-faded p-2 mb-1">
  190.  
  191. <div class="font-weight-light font-italic justify-content-between">
  192.  
  193. <span style="color: #ff8bc0">Pronouns</span>
  194.  
  195. <span class="font-weight-light font-italic">
  196. Any/All
  197. </span>
  198.  
  199. </div>
  200. </div>
  201.  
  202. <div class="card bg-faded p-2 mb-1">
  203.  
  204. <div class="font-weight-light font-italic justify-content-between">
  205.  
  206. <span style="color: #ff8bc0">Sexuality</span>
  207.  
  208. <span class="font-weight-light font-italic">
  209. Somethingsexual
  210. </span>
  211.  
  212. </div>
  213. </div>
  214.  
  215. <div class="card bg-faded p-2 mb-1">
  216.  
  217. <div class="font-weight-light font-italic justify-content-between">
  218.  
  219. <span style="color: #ff8bc0">Species</span>
  220.  
  221. <span class="font-weight-light font-italic">
  222. Anything
  223. </span>
  224.  
  225. </div>
  226. </div>
  227.  
  228. <div class="card bg-faded p-2 mb-1">
  229.  
  230. <div class="font-weight-light font-italic justify-content-between">
  231.  
  232. <span style="color: #ff8bc0">Theme</span>
  233.  
  234. <a href="https://youtu.be/H-RBJNqdnoM" style="color: #ff8bc0"><i class="fas fa-play"></i></a>
  235.  
  236. </div>
  237. </div>
  238.  
  239. <!-- add more above this line -->
  240. </div>
  241.  
  242. <!-- -->
  243. <div class="tab-pane fade" id="misc">
  244.  
  245. <table class="table table-striped table-hover mb-0 border-0">
  246. <tbody>
  247.  
  248. <!-- song 1 -->
  249. <tr>
  250. <td>
  251. <a href="0" class="font-weight-bold text-reset">artist - song</a>
  252. </td>
  253. <td class="text-right">
  254. 00:00
  255. </td>
  256. </tr>
  257.  
  258. <!-- song 2 -->
  259. <tr>
  260. <td>
  261. <a href="0" class="font-weight-bold text-reset">artist - song</a>
  262. </td>
  263. <td class="text-right">
  264. 00:00
  265. </td>
  266. </tr>
  267.  
  268. <!-- song 3 -->
  269. <tr>
  270. <td>
  271. <a href="0" class="font-weight-bold text-reset">artist - song</a>
  272. </td>
  273. <td class="text-right">
  274. 00:00
  275. </td>
  276. </tr>
  277.  
  278. <!-- song 4 -->
  279. <tr>
  280. <td>
  281. <a href="0" class="font-weight-bold text-reset">artist - song</a>
  282. </td>
  283. <td class="text-right">
  284. 00:00
  285. </td>
  286. </tr>
  287.  
  288. <!-- add more above this line -->
  289.  
  290. </tbody></table>
  291.  
  292. </div>
  293.  
  294. </div>
  295.  
  296. </div>
  297. </div>
  298.  
  299. </div>
  300. </div>
  301.  
  302. </div>
  303.  
  304. <div class="col-md-6 col-sm-12 mx-auto p-0"><a href="/micro-wave" style="color: #ff8bc0" class="mx-2"><i class="fas fa-microwave"></i></a></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!