API tools faq
paste
t3ch13-c0l0rs

stank you smelly much

t3ch13-c0l0rs
Dec 24th, 2022 (edited)
272
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.72 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. colors:
  4. #a69b8b - gradient color 1 (the beige)
  5. #921f2f - gradient color 2 + ornament button color + some link colors
  6. #4d6633 - gradient color 3 + ornament button color + some link colors
  7. #30354f - gradient color 4
  8. #dad2c8 - background color 1
  9. #332426 - text color
  10. #C3B8A7 - background color 2
  11.  
  12. ctrl + f for quick n easy changing.
  13.  
  14. -->
  15.  
  16. <div class="col-lg-8 col-md-10 col-sm-12 mx-auto">
  17.  
  18. <!-- top part -->
  19. <div class="row no-gutters">
  20.  
  21. <!-- fun fact there used to be a sidebar here but it was breaking the code for certain viewports so i removed it -->
  22.  
  23. <div class="col-md-8 col-sm-12 pr-1">
  24.  
  25. <!-- yay scrollbox time -->
  26. <div class="col-md col-sm-12 p-2 mb-1" style="background-image: linear-gradient(125deg, #a69b8b, #a69b8b 25%, #921f2f 25%, #921f2f 50%, #4d6633 50%, #4d6633 75%, #a69b8b 75%);">
  27. <div class="col-12 p-2" style="background-color: #dad2c8; color: #332426; overflow: hidden;">
  28. <div class="col-12 mx-auto p-0 mb-1">
  29. <div class="row no-gutters">
  30.  
  31. <!-- its a fontawesome icon -->
  32. <div class="col-md-auto col-sm-auto mb-sm-2 mb-md-0 p-2" style="background-color: #C3B8A7">
  33. <p style="text-align:center">
  34.  
  35. <!-- you can change this by going to fontawesome.com -->
  36. <i class="fas fa-snowflake fa-2x"></i>
  37. </p>
  38. </div>
  39.  
  40. <!-- quote -->
  41. <div class="col-md col-sm-12 p-2 ml-md-1 ml-sm-0 overflow-auto" style="background-color: #C3B8A7; white-space: nowrap; font-size: 20px;">
  42. This quote scrolls babeyyyyy yipee :P</div>
  43. </div>
  44. </div>
  45.  
  46. <!-- abt the oc paragraph -->
  47. <div class="col-12 p-1 overflow-auto mb-1" style="background-color: #C3B8A7; max-height: 105px">
  48. 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.
  49. </div>
  50.  
  51. <!-- just some basic stats -->
  52.  
  53. <div class="col-12 p-0">
  54. <div class="justify-content-between">
  55.  
  56. <!-- name -->
  57. <div class="col-auto p-1" style="background-color: #C3B8A7;"><i class="fas fa-user my-auto"></i> name</div>
  58.  
  59. <!-- age -->
  60. <div class="col-auto p-1" style="background-color: #C3B8A7;"><i class="fas fa-birthday-cake my-auto"></i> age</div>
  61.  
  62. <!-- gender -->
  63. <div class="col-auto p-1" style="background-color: #C3B8A7;"><i class="fas fa-transgender my-auto"></i> gender</div>
  64.  
  65. <!-- pronouns -->
  66. <div class="col-auto p-1" style="background-color: #C3B8A7;"><i class="fas fa-id-card my-auto"></i> prns/prns</div>
  67.  
  68. <!-- credit Dont remove -->
  69. <div class="col-auto p-1" style="background-color: #C3B8A7;">
  70. <a href="/micro-wave" style="color: #332426"><i class="fas fa-microwave my-auto"></i> </a>
  71. </div>
  72.  
  73. </div>
  74. </div>
  75.  
  76. </div>
  77. </div>
  78. </div>
  79.  
  80. <!-- profile picture. be square -->
  81. <div class="col-4 p-2 mb-1 mx-auto"
  82. style="
  83. background-image: linear-gradient(325deg, #a69b8b, #a69b8b 20%, #921f2f 20%, #921f2f 40%, #30354f 40%, #30354f 60%, #4d6633 60%, #4d6633 80%, #a69b8b 80%);
  84. max-width: 220px">
  85. <!-- actual img. replace the https://i.ibb.co/kKzQyKh/cover.png w yr img -->
  86. <img src="https://i.ibb.co/kKzQyKh/cover.png" style="height: 205px; width: 205px; ">
  87. </div>
  88.  
  89. </div>
  90.  
  91.  
  92. <!-- bottom part -->
  93.  
  94. <div class="col-md-12 col-sm-12 p-2 mx-auto" style="background-image: linear-gradient(125deg, #a69b8b, #a69b8b 20%, #921f2f 20%, #921f2f 40%, #30354f 40%, #30354f 60%, #4d6633 60%, #4d6633 80%, #a69b8b 80%);">
  95.  
  96. <!-- tabs -->
  97. <div class="col-12 p-2" style="background-color: #dad2c8; color: #332426; overflow: hidden;">
  98. <div class="tab-content">
  99.  
  100. <!-- tab 1: about me -->
  101. <div class="tab-pane fade active show" id="about">
  102.  
  103. <!-- title -->
  104. <div class="col-12 mx-auto p-0 mb-1">
  105. <div class="row no-gutters">
  106. <!-- technically you can change the icon but theres no real point?? lol -->
  107. <div class="col-md-auto col-sm-12 p-2" style="background-color: #C3B8A7"><p style="text-align:center"><i class="fal fa-user fa-2x"></i></p></div>
  108.  
  109. <!-- title -->
  110. <div class="col-md col-sm-12 p-2 ml-md-1 ml-sm-0 overflow-auto" style="background-color: #C3B8A7; white-space: nowrap; font-size: 20px;">ABOUT ME...</div>
  111. </div>
  112. </div>
  113.  
  114. <!-- this is like the bigger about me paragraph. so write more! -->
  115.  
  116. <div class="col-12 p-1 overflow-auto mb-1" style="background-color: #C3B8A7; max-height: 150px">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.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.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.</div>
  117.  
  118. <!-- its statistic time -->
  119.  
  120. <div class="col-12 p-1 overflow-auto mb-1" style="background-color: #C3B8A7; max-height: 90px">
  121. <div class="row no-gutters">
  122.  
  123.  
  124. <!-- stat 1 -->
  125. <div class="col-md-6 col-sm-12 p-1">
  126. <div class="justify-content-between">
  127.  
  128. <!-- technically you can change this stat?? like to say smtn else but idk i dont see why you would -->
  129. <p class="mb-0">KINDNESS</p>
  130.  
  131. <!-- same amount you put in the actual bar -->
  132. <p class="font-italic faded mb-0">50%</p>
  133. </div>
  134.  
  135. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  136.  
  137. <!-- whats the percentage you put in the top part? replace the 50% in the width with that. keep the percentage -->
  138. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  139. </div>
  140. </div>
  141.  
  142. <!-- stat 2 -->
  143.  
  144. <div class="col-md-6 col-sm-12 p-1">
  145. <div class="justify-content-between">
  146. <p class="mb-0">HONESTY</p>
  147.  
  148. <!-- percentage to put in bar below -->
  149. <p class="font-italic faded mb-0">50%</p>
  150. </div>
  151.  
  152. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  153.  
  154. <!-- bar below -->
  155. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  156. </div>
  157. </div>
  158.  
  159. <!-- stat 3 -->
  160.  
  161. <div class="col-md-6 col-sm-12 p-1">
  162. <div class="justify-content-between">
  163. <p class="mb-0">GENEROUSITY</p>
  164.  
  165. <!-- so far i've given you 3 of the 6 mlp horses elements -->
  166. <p class="font-italic faded mb-0">50%</p>
  167. </div>
  168.  
  169. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  170.  
  171. <!-- the rest aren't the elements of harmony but i found it funny. -->
  172. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  173. </div>
  174. </div>
  175.  
  176. <!-- stat 4 -->
  177.  
  178. <div class="col-md-6 col-sm-12 p-1">
  179. <div class="justify-content-between">
  180. <p class="mb-0">BRAVERY</p>
  181.  
  182. <!-- stat percentage to put in bar below -->
  183. <p class="font-italic faded mb-0">50%</p>
  184. </div>
  185.  
  186. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  187.  
  188. <!-- bar below -->
  189. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  190. </div>
  191. </div>
  192.  
  193. <!-- stat 5 -->
  194.  
  195. <div class="col-md-6 col-sm-12 p-1">
  196. <div class="justify-content-between">
  197. <p class="mb-0">OVERTNESS</p>
  198.  
  199. <!-- change this -->
  200. <p class="font-italic faded mb-0">50%</p>
  201. </div>
  202.  
  203. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  204.  
  205. <!-- to have an easier path to changing this -->
  206. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  207. </div>
  208. </div>
  209.  
  210. <!-- stat 6 -->
  211.  
  212. <div class="col-md-6 col-sm-12 p-1">
  213. <div class="justify-content-between">
  214. <p class="mb-0">TEMPER</p>
  215.  
  216. <!-- commenting is the bane of my existence -->
  217. <p class="font-italic faded mb-0">50%</p>
  218. </div>
  219.  
  220. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  221.  
  222. <!-- we got hit by a cold front here and it currently feels like -11 degrees. Farenheight. -->
  223. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  224. </div>
  225. </div>
  226.  
  227. </div>
  228. </div>
  229.  
  230. <!-- uhhhhh youtube song wait lemme upload lie balls to my side acct real quick its currently wham's last christmas -->
  231.  
  232. <div class="justify-content-between align-items-center" style="font-size: 25px">
  233.  
  234. <div class="col-auto px-1 mr-1" style="background-color: #C3B8A7">
  235.  
  236. <!-- ok so you see this iframe. this is gonna take a second to do. so you grab your youtube video right. https://www.youtube.com/watch?v=26IbdZzb8dg lets say. and then you see the youtube embed right. https://www.youtube.com/embed/26IbdZzb8dg ok you take the LAST PART OF THE REGULAR VIDEO (the 26IbdZzb8dg) and dump it riight after the embed/ so like https://www.youtube.com/watch?v=26IbdZzb8dg https://www.youtube.com/embed/embedhere put the 26IbdZzb8dg where the embedhere is. capiche -->
  237. <iframe class="flex-fill" style="height:1em;width:1em;opacity:.01;position:absolute;margin-top:6px;z-index:1;"
  238.  
  239. src="https://www.youtube.com/embed/26IbdZzb8dg"
  240.  
  241. frameborder="0"></iframe>
  242. <i class="fal fa-play-circle fa-fw"></i>
  243. </div>
  244.  
  245. <div class="col-md justify-content-end pr-2" style="background-color: #C3B8A7; font-size: 25px;">
  246.  
  247. <!-- song title -->
  248. <em>LIE BALLS - DERREK</em>
  249. </div>
  250.  
  251. <!-- congrat youre done with tab 1 yayyy -->
  252.  
  253. </div>
  254. </div>
  255.  
  256. <!-- tab 2 -->
  257.  
  258. <div class="tab-pane fade" id="likesndislikes">
  259. <div class="col-12 mx-auto p-0 mb-1">
  260. <div class="row no-gutters">
  261. <div class="col-auto p-2" style="background-color: #C3B8A7"><i class="fal fa-thumbs-up fa-2x"></i></div>
  262.  
  263. <div class="col-md col-sm-12 p-2 ml-md-1 ml-sm-0 overflow-auto" style="background-color: #C3B8A7; white-space: nowrap; font-size: 20px;">FAVORITES...</div>
  264. </div>
  265. </div>
  266.  
  267. <!-- this one's pretty simple. just put the favorite thing where it says favorite thing -->
  268.  
  269. <div class="col-12 p-1 overflow-auto mb-1" style="background-color: #C3B8A7; max-height: 200px">
  270. <div class="row no-gutters">
  271.  
  272. <!-- season -->
  273. <div class="col-md-4 col-sm-12 p-2 mb-1">
  274. <div class="justify-content-between p-0">
  275.  
  276. <div class="col-sm-1 p-0 d-flex" style="font-size: 25px">
  277. <i class="fas fa-snowflake fa-2x" style="transform: rotate(-45deg); opacity: 0.4"></i>
  278. </div>
  279.  
  280. <div class="col-11 p-0">
  281.  
  282. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  283. <span>FAVORITE SEASON</span>
  284. </p>
  285.  
  286. <!-- put season here. my favorite is fall! -->
  287. <p class="font-italic" style="font-size: 15px;">season name</p>
  288. </div>
  289.  
  290. </div>
  291. </div>
  292.  
  293. <!-- color -->
  294. <div class="col-md-4 col-sm-12 p-2 mb-1">
  295. <div class="justify-content-between">
  296.  
  297. <div class="col-sm-1 p-0 d-flex" style="font-size: 23px">
  298. <i class="fas fa-paint-brush fa-2x" style=" opacity: 0.4"></i>
  299. </div>
  300.  
  301. <div class="col-11 p-0">
  302.  
  303. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  304. <span>FAVORITE COLOR</span>
  305. </p>
  306.  
  307. <!-- put color here! i think orange is a nice color. -->
  308. <p class="font-italic" style="font-size: 15px;">#000</p>
  309. </div>
  310.  
  311. </div>
  312. </div>
  313.  
  314. <!-- food -->
  315. <div class="col-md-4 col-sm-12 p-2 mb-1">
  316. <div class="justify-content-between">
  317.  
  318. <div class="col-sm-1 p-0 d-flex" style="font-size: 25px">
  319. <i class="fas fa-bread-loaf fa-2x" style="opacity: 0.4"></i>
  320. </div>
  321.  
  322. <div class="col-11 p-0">
  323.  
  324. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  325. <span>FAVORITE FOOD</span>
  326. </p>
  327.  
  328. <!-- put food here.. my favorite food is probably chocolate eclairs.. -->
  329. <p class="font-italic" style="font-size: 15px; ">food name</p>
  330. </div>
  331.  
  332. </div>
  333. </div>
  334.  
  335. <!-- animal -->
  336. <div class="col-md-4 col-sm-12 p-2 mb-1">
  337. <div class="justify-content-between">
  338.  
  339. <div class="col-sm-1 p-0 d-flex" style="font-size: 25px">
  340. <i class="fas fa-cat fa-2x" style="opacity: 0.4"></i>
  341. </div>
  342.  
  343. <div class="col-11 p-0">
  344.  
  345. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  346. <span>FAVORITE ANIMAL</span>
  347. </p>
  348.  
  349. <!-- ok this ones easy my favorite animal (and also the goat it solos every other animal) is the borzoi!!!!!!!!! -->
  350. <p class="font-italic" style="font-size: 15px;">animal name</p>
  351. </div>
  352.  
  353. </div>
  354. </div>
  355.  
  356. <!-- item -->
  357. <div class="col-md-4 col-sm-12 p-2 mb-1">
  358. <div class="justify-content-between">
  359.  
  360. <div class="col-sm-1 p-0 d-flex" style="font-size: 23px">
  361. <i class="fas fa-wand fa-2x" style=" opacity: 0.4"></i>
  362. </div>
  363.  
  364. <div class="col-11 p-0">
  365.  
  366. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  367. <span>FAVORITE ITEM</span>
  368. </p>
  369.  
  370. <!-- can you tell i was running out of ideas -->
  371. <p class="font-italic" style="font-size: 15px;">item name</p>
  372. </div>
  373.  
  374. </div>
  375. </div>
  376.  
  377. <!-- style -->
  378. <div class="col-md-4 col-sm-12 p-2 mb-1">
  379. <div class="justify-content-between">
  380.  
  381. <div class="col-sm-1 p-0 d-flex" style="font-size: 25px">
  382. <i class="fas fa-shirt fa-2x" style="opacity: 0.4"></i>
  383. </div>
  384.  
  385. <div class="col-11 p-0">
  386.  
  387. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  388. <span>FAVORITE STYLE</span>
  389. </p>
  390.  
  391. <!-- i literally dont even know what this one means im gonna be honest with you. i guess how they like to dress??? -->
  392. <p class="font-italic" style="font-size: 15px; ">style name</p>
  393. </div>
  394.  
  395. </div>
  396. </div>
  397.  
  398. <!-- element -->
  399. <div class="col-md-4 col-sm-12 p-2 mb-1">
  400. <div class="justify-content-between">
  401.  
  402. <div class="col-sm-1 p-0 d-flex" style="font-size: 25px">
  403. <i class="fas fa-fire fa-2x" style="opacity: 0.4"></i>
  404. </div>
  405.  
  406. <div class="col-11 p-0">
  407.  
  408. <p class="mt-2" style="font-size: 17.5px; margin-bottom: -5px;">
  409. <span>FAVORITE ELEMENT</span>
  410. </p>
  411.  
  412. <!-- ok this one makes... more sense i thinnk but??? -->
  413. <p class="font-italic" style="font-size: 15px; ">element name</p>
  414. </div>
  415.  
  416. </div>
  417. </div>
  418.  
  419. <!-- hobby -->
  420. <div class="col-md-4 col-sm-12 p-2 mb-1">
  421. <div class="justify-content-between">
  422.  
  423. <div class="col-sm-1 p-0 d-flex" style="font-size: 23px">
  424. <i class="fas fa-reel fa-2x" style=" opacity: 0.4"></i>
  425. </div>
  426.  
  427. <div class="col-11 p-0">
  428.  
  429. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  430. <span>FAVORITE HOBBY</span>
  431. </p>
  432.  
  433. <!-- wow this one actually works -->
  434. <p class="font-italic" style="font-size: 15px;">hobby name</p>
  435. </div>
  436.  
  437. </div>
  438. </div>
  439.  
  440. <!-- topic -->
  441. <div class="col-md-4 col-sm-12 p-2 mb-1">
  442. <div class="justify-content-between">
  443.  
  444. <div class="col-sm-1 p-0 d-flex" style="font-size: 25px">
  445. <i class="fas fa-comment fa-2x" style="opacity: 0.4"></i>
  446. </div>
  447.  
  448. <div class="col-11 p-0">
  449.  
  450. <p class="mt-1" style="font-size: 18.5px; margin-bottom: -5px">
  451. <span>FAVORITE TOPIC</span>
  452. </p>
  453.  
  454. <!-- what they like talking about.. i guess? i like talking about my oc mew. -->
  455. <p class="font-italic" style="font-size: 15px; ">topic name</p>
  456. </div>
  457.  
  458. </div>
  459. </div>
  460.  
  461. <!-- wow we're done with the next tab -->
  462.  
  463. </div>
  464. </div>
  465. </div>
  466.  
  467. <!-- tab 3 -->
  468.  
  469. <div class="tab-pane fade" id="mood">
  470.  
  471. <div class="col-12 mx-auto p-0 mb-1">
  472. <div class="row no-gutters">
  473. <div class="col-md-auto col-sm-12 p-2" style="background-color: #C3B8A7"><p style="text-align:center"><i class="fal fa-images fa-2x"></i></p></div>
  474.  
  475. <div class="col-md col-sm-12 p-2 ml-md-1 ml-sm-0 overflow-auto" style="background-color: #C3B8A7; white-space: nowrap; font-size: 20px;">MOODBOARD...</div>
  476. </div>
  477. </div>
  478.  
  479. <!-- every image except for one is of spasm rainbowtail. thank you rico for letting me use them as placeholder! -->
  480. <div class="col-12 p-1 mb-1" style="background-color: #C3B8A7;">
  481.  
  482. <div class="row no-gutters">
  483.  
  484. <div class="col-md-1 col-sm-12 p-1 mb-1">
  485.  
  486. <!-- tall image. replace https://i.ibb.co/kKzQyKh/cover.png with your image. -->
  487. <div style="background-image: url(https://i.ibb.co/kKzQyKh/cover.png); background-position: center; background-size: cover; min-height: 184px"></div>
  488. </div>
  489.  
  490. <div class="col-md-8 col-sm-12 p-1">
  491.  
  492. <!-- wide image, image by speedcore (rico), replace https://f2.toyhou.se/file/f2-toyhou-se/images/58085861_DPthjaS0dAbIdrE.png w ur img -->
  493. <div class="col-12 p-4 mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/58085861_DPthjaS0dAbIdrE.png); background-position: center; background-size: cover; "></div>
  494.  
  495. <div class="row no-gutters">
  496.  
  497. <!-- kinda square image. image by clown-cake on toyhouse, replace https://f2.toyhou.se/file/f2-toyhou-se/images/27076991_ecG0dBOX9IB8xOW.png w ur img -->
  498. <div class="col-md-6 col-sm-12 mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/27076991_ecG0dBOX9IB8xOW.png); background-position: center; background-size: cover; min-height: 132px"></div>
  499.  
  500. <div class="col-md-6 pl-md-1 pl-sm-0">
  501.  
  502. <!-- this is a pallete. dont have enough colors to fill it? uhh remove some then make the padding bigger on the ones you didnt remove (the p-# thing goes up to 5. also replace the background color w ur hex code to change it -->
  503. <div class="col-12 p-0 mb-1">
  504. <div class="col-12 p-1" style="background-color: #f050ae"></div>
  505. <div class="col-12 p-1" style="background-color: #ffab00"></div>
  506. <div class="col-12 p-1" style="background-color: #fdf148"></div>
  507. <div class="col-12 p-1" style="background-color: #a0e426"></div>
  508. <div class="col-12 p-1" style="background-color: #52e3e1"></div>
  509. <div class="col-12 p-1" style="background-color: #43beff"></div>
  510. <div class="col-12 p-1" style="background-color: #a65de3"></div>
  511. <div class="col-12 p-1" style="background-color: #e7f1f9"></div>
  512. <div class="col-12 p-1" style="background-color: #ff93dd"></div>
  513. </div>
  514.  
  515. <div class="col-12 p-0">
  516.  
  517. <!-- more wide than tall, img by speedcore. replace https://f2.toyhou.se/file/f2-toyhou-se/images/41805648_r4iWwsvI9BwrBz4.png w ur img to change -->
  518. <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/41805648_r4iWwsvI9BwrBz4.png); background-size: cover; background-position: center; padding-top: 28%"></div>
  519. </div>
  520.  
  521. </div>
  522. </div>
  523. </div>
  524.  
  525. <div class="col-md-3 col-sm-12 p-1">
  526.  
  527. <!-- kkinda square img by dethdaze on twitter. replace https://f2.toyhou.se/file/f2-toyhou-se/images/32193539_OlAWMtgot0RROci.png -->
  528. <div class="col-12 p-5 mb-1" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/32193539_OlAWMtgot0RROci.png); background-size: cover; background-position: center"></div>
  529.  
  530. <!-- kinda square img by speedcore on toyhouse replace https://f2.toyhou.se/file/f2-toyhou-se/images/39049458_TdCugM4jbeMsyS3.png w ur img -->
  531. <div class="col-12" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/39049458_TdCugM4jbeMsyS3.png); background-size: cover; background-position: center; padding-top: 57%"></div>
  532.  
  533. </div>
  534.  
  535. </div>
  536. </div>
  537.  
  538. <!-- end tab 3 -->
  539. </div>
  540.  
  541. <!-- wow final tab yay -->
  542. <div class="tab-pane fade" id="relations">
  543. <div class="col-12 mx-auto p-0 mb-1">
  544. <div class="row no-gutters">
  545. <div class="col-md-auto col-sm-12 p-2" style="background-color: #C3B8A7"><p style="text-align:center"><i class="fal fa-handshake fa-2x"></i></p></div>
  546.  
  547. <div class="col-md col-sm-12 p-2 ml-md-1 ml-sm-0 overflow-auto" style="background-color: #C3B8A7; white-space: nowrap; font-size: 20px;">RELATIONSHIPS...</div>
  548. </div>
  549. </div>
  550.  
  551.  
  552. <div class="col-12 p-1 mb-1 overflow-auto" style="background-color: #C3B8A7; max-height: 200px">
  553.  
  554. <!-- guy 1 -->
  555.  
  556. <div class="col-12 p-0 mb-2">
  557. <div class="row no-gutters">
  558.  
  559. <!-- be there or be square 💥💥💥 (use square image use square image use square ima) -->
  560. <div class="col-md-3 col-sm-12" style="text-align: center">
  561.  
  562. <!-- replace https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg with your image -->
  563. <img src="https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg" style="border: 4px double #332426; position: sticky; top: 0" class="p-1">
  564. </div>
  565.  
  566. <div class="col-md-9 col-sm-12 p-1">
  567. <div class="justify-content-between mb-1" style="border-bottom: 2px dashed #4d6633; font-size: 20px">
  568.  
  569. <!-- link to another oc and also their NAME -->
  570. <a href="#OC NAME" style="color: #4d6633; font-style: italic; font-family: georgia; font-weight: 700">Lorem Ipsum</a>
  571.  
  572. <!-- random font awesome icon idk you can change it if you wanna -->
  573. <p style="color: #4d6633; font-style: italic" class="faded"><i class="fas fa-ornament"></i></p>
  574. </div>
  575.  
  576. <!-- write about em -->
  577. <div class="p-2 overflow-auto mb-1" style="border: 4px double #332426; background-color: #dad2c8; max-height: 150px">
  578. <em>Something important here..</em> 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. 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.
  579. </div>
  580.  
  581. <div class="p-2 overflow-auto" style="border: 4px double #332426; background-color: #dad2c8; max-height: 150px">
  582. <div class="row no-gutters">
  583.  
  584.  
  585. <!-- "hey wait this is-" YES I KNOW SHUT UP -->
  586. <div class="col-md-6 col-sm-12 p-1">
  587. <div class="justify-content-between">
  588. <p class="mb-0">TRUST</p>
  589.  
  590. <!-- percentage -->
  591. <p class="font-italic faded mb-0">50%</p>
  592. </div>
  593.  
  594. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  595.  
  596. <!-- bar to put percentage in -->
  597. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  598. </div>
  599. </div>
  600.  
  601. <!-- bar 2 -->
  602.  
  603. <div class="col-md-6 col-sm-12 p-1">
  604. <div class="justify-content-between">
  605. <p class="mb-0">HONESTY</p>
  606.  
  607. <!-- percentage -->
  608. <p class="font-italic faded mb-0">50%</p>
  609. </div>
  610.  
  611. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  612.  
  613. <!-- bar to put percentage in -->
  614. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  615. </div>
  616. </div>
  617.  
  618. <div class="col-md-6 col-sm-12 p-1">
  619. <div class="justify-content-between">
  620. <p class="mb-0">COMMUNICATION</p>
  621.  
  622. <!-- percentage -->
  623. <p class="font-italic faded mb-0">50%</p>
  624. </div>
  625.  
  626. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  627.  
  628. <!-- bar to put percentage in -->
  629. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  630. </div>
  631. </div>
  632.  
  633. <!-- bar 4 -->
  634.  
  635. <div class="col-md-6 col-sm-12 p-1">
  636. <div class="justify-content-between">
  637. <p class="mb-0">UNDERSTANDING</p>
  638.  
  639. <!-- percentage -->
  640. <p class="font-italic faded mb-0">50%</p>
  641. </div>
  642.  
  643. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  644.  
  645. <!-- bar to put percentage in -->
  646. <div class="progress-bar rounded-0" style="width: 50%; background-color: #4d6633"></div>
  647. </div>
  648. </div>
  649.  
  650. </div>
  651. </div>
  652.  
  653. <!-- first relationship done -->
  654.  
  655. </div>
  656.  
  657. </div>
  658. </div>
  659.  
  660. <!-- END OF GUY 1 -->
  661.  
  662.  
  663. <hr style="border-color: #332426">
  664.  
  665. <!-- second guy -->
  666.  
  667. <div class="col-12 p-0 mb-2">
  668. <div class="row no-gutters">
  669.  
  670. <div class="col-md-9 col-sm-12 p-1">
  671. <div class="justify-content-between mb-1" style="border-bottom: 2px dashed #921f2f; font-size: 20px">
  672.  
  673. <!-- this time the font awesome icons first how original -->
  674. <p style="color: #921f2f; font-style: italic" class="faded"><i class="fas fa-snowflake"></i></p>
  675.  
  676. <!-- oc name and link -->
  677. <a href="#OC NAME" style="color: #921f2f; font-style: italic; font-family: georgia; font-weight: 700">Lorem Ipsum</a>
  678. </div>
  679.  
  680. <!-- write -->
  681. <div class="p-2 overflow-auto mb-1" style="border: 4px double #332426; background-color: #dad2c8; max-height: 150px">
  682. <em>Something important here..</em> 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. 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.
  683. </div>
  684.  
  685. <div class="p-2 overflow-auto" style="border: 4px double #332426; background-color: #dad2c8; max-height: 150px">
  686. <div class="row no-gutters">
  687.  
  688. <div class="col-md-6 col-sm-12 p-1">
  689. <div class="justify-content-between">
  690. <p class="mb-0">TRUST</p>
  691.  
  692. <!-- percentage -->
  693. <p class="font-italic faded mb-0">50%</p>
  694. </div>
  695.  
  696. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  697.  
  698. <!-- bar -->
  699. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  700. </div>
  701. </div>
  702.  
  703. <!-- bar 2 -->
  704.  
  705. <div class="col-md-6 col-sm-12 p-1">
  706. <div class="justify-content-between">
  707. <p class="mb-0">HONESTY</p>
  708.  
  709. <!-- percentage bar -->
  710. <p class="font-italic faded mb-0">50%</p>
  711. </div>
  712.  
  713. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  714.  
  715. <!-- bar -->
  716. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  717. </div>
  718. </div>
  719.  
  720. <!-- bar 3 -->
  721.  
  722. <div class="col-md-6 col-sm-12 p-1">
  723. <div class="justify-content-between">
  724. <p class="mb-0">COMMUNICATION</p>
  725.  
  726. <!-- percentage -->
  727. <p class="font-italic faded mb-0">50%</p>
  728. </div>
  729.  
  730. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  731.  
  732. <!-- bar -->
  733. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  734. </div>
  735. </div>
  736.  
  737. <div class="col-md-6 col-sm-12 p-1">
  738. <div class="justify-content-between">
  739. <p class="mb-0">UNDERSTANDING</p>
  740.  
  741. <!-- percentage -->
  742. <p class="font-italic faded mb-0">50%</p>
  743. </div>
  744.  
  745. <div class="progress rounded-0" style="background-color: #332426; max-height: 12px">
  746.  
  747. <!-- bar -->
  748. <div class="progress-bar rounded-0" style="width: 50%; background-color: #921f2f"></div>
  749. </div>
  750. </div>
  751.  
  752. </div>
  753. </div>
  754.  
  755.  
  756. </div>
  757.  
  758. <div class="col-md-3 col-sm-12" style="text-align: center">
  759. <img src="https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg" style="border: 4px double #332426; position: sticky; top: 0" class="p-1">
  760. </div>
  761.  
  762. </div>
  763. </div>
  764.  
  765. <!-- end of the second guy -->
  766.  
  767.  
  768. <!-- ok before i go i just want to mention you can add more of these guys by FIRST COPY AND PASTING THE HR BETWEEN THEM PLEASE COPY AND PASTE THE HR BEFORE ADDING and then adding all code between the notes of "guy 1" and "END OF GUY 1" and "second guy" and "end of the second guy. please add guy 1 before adding guy 2 for my own sanity -->
  769.  
  770. </div>
  771. </div>
  772.  
  773. </div>
  774. </div>
  775. </div>
  776.  
  777. <!-- TABS DONE and now its just the tab buttons -->
  778.  
  779. <ul class="nav justify-content-between text-center mb-0" style="margin-top: -22px; max-width: 670px">
  780.  
  781. <!-- btn 1 -->
  782. <li class="col-md-3 col-sm-auto mx-auto nav-item" style="border-radius: 1em;">
  783. <p class="py-0 px-0" style="font-size: 30px; margin-bottom: -7px;">
  784.  
  785. <span style="color: #921f2f"><i class="fas fa-question"></i></span>
  786.  
  787. </p>
  788. <a class="btn nav-link active py-0 px-0" data-toggle="tab" href="#about" style="font-size: 30px; margin-left: -1.55px;">
  789.  
  790. <!-- if you really want you can change the ornament icons LOL just replace fa-ornament with fa-whatever -->
  791. <span style="color: #921f2f"><i class="fad fa-ornament"></i></span>
  792.  
  793. </a>
  794. </li>
  795.  
  796. <!-- btn 2 -->
  797. <li class="col-md-3 col-sm-auto mx-auto nav-item" style="border-radius: 1em;">
  798. <p class="p-0" style="font-size: 30px; margin-bottom: -7px; ">
  799.  
  800. <span style="color: #4d6633"><i class="fas fa-question"></i></span>
  801.  
  802. </p>
  803. <a class="btn nav-link p-0" data-toggle="tab" href="#likesndislikes" style="font-size: 30px; margin-left: -1.55px;">
  804.  
  805. <!-- ornament icon -->
  806. <span style=" color: #4d6633"><i class="fad fa-snowflake"></i></span>
  807.  
  808. </a>
  809. </li>
  810.  
  811. <!-- btn 3 -->
  812. <li class="col-md-3 col-sm-auto mx-auto nav-item" style="border-radius: 1em;">
  813. <p class="p-0" style="font-size: 30px; margin-bottom: -7px;">
  814.  
  815. <span style="color: #921f2f"><i class="fas fa-question"></i></span>
  816.  
  817. </p>
  818. <a class="btn nav-link p-0" data-toggle="tab" href="#mood" style="font-size: 30px; margin-left: -1.55px;">
  819.  
  820. <!-- ornament icon -->
  821. <span style="color: #921f2f"><i class="fad fa-holly-berry"></i></span>
  822.  
  823. </a>
  824. </li>
  825.  
  826. <!-- btn 4 -->
  827. <li class="col-md-3 col-sm-auto mx-auto nav-item" style="border-radius: 1em;">
  828. <p class="p-0" style="font-size: 30px; margin-bottom: -7px; ">
  829.  
  830. <span style="color: #4d6633"><i class="fas fa-question"></i></span>
  831. </p>
  832. <a class="btn nav-link p-0" data-toggle="tab" href="#relations" style="font-size: 30px; -left: -1.55px;">
  833.  
  834. <!-- ornament icon -->
  835. <span style="margin-left: -1.55px; color: #4d6633"><i class="fad fa-gingerbread-man"></i></span>
  836.  
  837. </a>
  838. </li>
  839.  
  840. </ul>
  841.  
  842. <!-- AND YOURE DONE CONGRATS YAY. merry christmas happy hanukkah or whatever other holiday you celebrate and stay safe out there 🫶 -->
  843. </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!