API tools faq
paste
t3ch13-c0l0rs

geeks in love

t3ch13-c0l0rs
Feb 14th, 2023
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.74 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. person 1: #ff442b
  4. person 2: #2b6bff
  5. cmd/ctrl + f for easy changing :3
  6.  
  7. -->
  8.  
  9. <div class="col-md-8 col-sm-12 mx-auto">
  10. <div class="row no-gutters flex-row-reverse mb-2">
  11.  
  12. <!-- put oc name here -->
  13. <div class="col h-100 my-auto bg-faded px-2" style="padding: 2.5em; text-transform: capitalize; border: .25rem solid #ff442b; border-left: none">
  14. <p class="font-italic px-1" style="font-size: 20px">Name Surname</p>
  15. </div>
  16.  
  17. <!-- put oc profile picture here -->
  18. <div class="col-auto mx-auto my-auto" style="height: 120px; width: 120px; background-image: url(IMGURLHERE); background-size: cover; background-position: center; border: .25rem solid #ff442b">
  19.  
  20. <!-- put link to oc's main profile here -->
  21. <a class="stretched-link" href="/link_here" target=_blank></a>
  22. </div>
  23.  
  24. </div>
  25.  
  26. <!-- end of that top bar -->
  27.  
  28. <div class="col-12 px-0">
  29. <blockquote class="bg-faded font-italic text-right" style="border-color: #ff442b; color: #ff442b; border-right: .25rem solid; border-left: none;">
  30. an awesome freaking quote!!
  31.  
  32. <!-- y can change this icon by going to fontawesome.com -->
  33. <i class="fal fa-star"></i>
  34. </blockquote>
  35. </div>
  36.  
  37. <!-- middle part -->
  38.  
  39. <div class="row no-gutters">
  40.  
  41. <div class="col-md-3 col-sm-12 px-0">
  42.  
  43. <!-- trivia section -->
  44. <div class="col-12 bg-faded p-2 mb-2">
  45. <div class="text-center font-italic mb-1" style="font-size: 18px">TRIVIA</div>
  46. <div class="overflow-auto" style="max-height: 130px">
  47. <ul class="mx-0 mb-1 pl-3">
  48. <li>lorem</li>
  49. <li>ipsum</li>
  50. <li>dolor</li>
  51. <li>sit</li>
  52. <li>amet</li>
  53. <li>consectetur</li>
  54. <li>adipiscing</li>
  55. <li>elit</li>
  56. <li>sed</li>
  57. <li>do</li>
  58. <li>eiusmod</li>
  59. </ul>
  60. </div>
  61. </div>
  62.  
  63. <!-- song 1 -->
  64.  
  65. <div class="col-auto mx-auto my-auto bg-faded p-2" style="height: 150px;">
  66.  
  67. <!-- replace YTURLHERE with the last part of the youtube link!! https://www.youtube.com/watch?v=[TMJ2b9By0xE] the part in brackets is whatcha need -->
  68. <div class="p-2 h-100 align-items-center justify-content-center" style="border: 2px solid">
  69. <iframe class="flex-fill h-100 w-100 tooltipster" style="opacity:.00001;position:absolute;margin-top:6px;z-index:1;"
  70.  
  71. src="https://www.youtube.com/embed/YTURLHERE?controls=0"
  72.  
  73. frameborder="0" title="SONG TITLE HERE"></iframe>
  74.  
  75. <!-- oh the painful irony of the thinnest fa icons being fat fa -->
  76. <i class="fat fa-play-circle" style="font-size: 95px"></i>
  77. </div>
  78. </div>
  79. </div>
  80.  
  81. <!-- middle of the middle part aka column 2, section inspired by sealkitty's all about us ^_^ https://toyhou.se/9632987.-f2u-all-about-us check it out! -->
  82.  
  83. <div class="col-md-6 col-sm-12 px-md-2 px-sm-0 d-block d-md-flex flex-column">
  84. <div class="d-block bg-faded p-2" style="flex: 1 1 200px; min-height: 200px; overflow-y: auto;">
  85.  
  86. <!-- stat 1, big spoon / little spoon -->
  87. <div class="col-12 px-0 mb-2">
  88. <div class="justify-content-between">
  89. <p class="mb-2">Big Spoon</p>
  90. <p class="text-right mb-2">Little Spoon</p>
  91. </div>
  92.  
  93. <!-- ok lemme explain how this works real quick. if the color is listed as rgba(0,0,0,0.2), that means its an un-colored circle. HOWEVER, #2b6bff signifies the circle is colored. SO, to move the circle you'll need to replace one of the rgba(0,0,0,0.2) with #2b6bff and then replace the former spot with the #2b6bff with the rgba(0,0,0,0.2) hope that made sense now baii -->
  94. <div class="row no-gutters" style="font-size: 13px">
  95.  
  96. <!-- blue guy -->
  97. <p class="text-center mx-auto my-0">
  98. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  99. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  100. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  101. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  102. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  103. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  104. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  105. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  106. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  107. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  108. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  109. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  110. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  111. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  112. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  113. </p>
  114.  
  115. <!-- red guy -->
  116. <p class="text-center mx-auto my-0">
  117. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  118. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  119. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  120. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  121. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  122. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  123. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  124. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  125. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  126. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  127. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  128. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  129. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  130. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  131. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  132. </p>
  133.  
  134. </div>
  135. </div>
  136.  
  137. <!-- stat 2, lends clothes / borrows clothes -->
  138. <div class="col-12 px-0 mb-2">
  139. <div class="justify-content-between">
  140. <p class="mb-2">Lends Clothes</p>
  141. <p class="text-right mb-2">Borrows Clothes</p>
  142. </div>
  143. <div class="row no-gutters" style="font-size: 13px">
  144.  
  145. <!-- blue guy -->
  146. <p class="text-center mx-auto my-0">
  147. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  148. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  149. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  150. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  151. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  152. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  153. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  154. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  155. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  156. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  157. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  158. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  159. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  160. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  161. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  162. </p>
  163.  
  164. <!-- red guy -->
  165. <p class="text-center mx-auto my-0">
  166. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  167. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  168. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  169. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  170. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  171. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  172. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  173. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  174. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  175. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  176. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  177. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  178. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  179. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  180. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  181. </p>
  182.  
  183. </div>
  184. </div>
  185.  
  186. <!-- stat 3, doesn't use pet names / uses pet names -->
  187. <div class="col-12 px-0 mb-2">
  188. <div class="justify-content-between">
  189. <p class="mb-2">Doesn't Use Pet Names</p>
  190. <p class="text-right mb-2">Uses Pet Names</p>
  191. </div>
  192. <div class="row no-gutters" style="font-size: 13px">
  193.  
  194. <!-- blue guy -->
  195. <p class="text-center mx-auto my-0">
  196. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  197. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  198. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  199. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  200. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  201. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  202. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  203. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  204. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  205. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  206. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  207. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  208. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  209. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  210. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  211. </p>
  212.  
  213. <!-- red guy -->
  214. <p class="text-center mx-auto my-0">
  215. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  216. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  217. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  218. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  219. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  220. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  221. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  222. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  223. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  224. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  225. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  226. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  227. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  228. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  229. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  230. </p>
  231.  
  232. </div>
  233. </div>
  234.  
  235. <!-- stat 4, introvert / extrovert -->
  236. <div class="col-12 px-0 mb-2">
  237. <div class="justify-content-between">
  238. <p class="mb-2">Introvert</p>
  239. <p class="text-right mb-2">Extrovert</p>
  240. </div>
  241. <div class="row no-gutters" style="font-size: 13px">
  242.  
  243. <!-- blue guy -->
  244. <p class="text-center mx-auto my-0">
  245. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  246. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  247. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  248. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  249. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  250. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  251. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  252. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  253. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  254. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  255. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  256. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  257. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  258. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  259. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  260. </p>
  261.  
  262. <!-- red guy -->
  263. <p class="text-center mx-auto my-0">
  264. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  265. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  266. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  267. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  268. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  269. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  270. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  271. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  272. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  273. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  274. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  275. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  276. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  277. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  278. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  279. </p>
  280.  
  281. </div>
  282. </div>
  283.  
  284. <!-- stat 5, love through words / love through actions -->
  285. <div class="col-12 px-0 mb-2">
  286. <div class="justify-content-between">
  287. <p class="mb-2">Love Thru Words</p>
  288. <p class="text-right mb-2">Love Thru Actions</p>
  289. </div>
  290. <div class="row no-gutters" style="font-size: 13px">
  291.  
  292. <!-- blue guy -->
  293. <p class="text-center mx-auto my-0">
  294. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  295. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  296. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  297. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  298. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  299. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  300. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  301. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  302. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  303. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  304. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  305. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  306. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  307. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  308. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  309. </p>
  310.  
  311. <!-- red guy -->
  312. <p class="text-center mx-auto my-0">
  313. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  314. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  315. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  316. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  317. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  318. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  319. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  320. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  321. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  322. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  323. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  324. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  325. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  326. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  327. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  328. </p>
  329.  
  330. </div>
  331. </div>
  332.  
  333. <!-- stat 6, confesses first / waits for confession -->
  334. <div class="col-12 px-0 mb-2">
  335. <div class="justify-content-between">
  336. <p class="mb-2">Confesses First</p>
  337. <p class="text-right mb-2">Waits For Confession</p>
  338. </div>
  339. <div class="row no-gutters" style="font-size: 13px">
  340.  
  341. <!-- blue guy -->
  342. <p class="text-center mx-auto my-0">
  343. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  344. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  345. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  346. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  347. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  348. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  349. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  350. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  351. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  352. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  353. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  354. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  355. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  356. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  357. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  358. </p>
  359.  
  360. <!-- red guy -->
  361. <p class="text-center mx-auto my-0">
  362. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  363. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  364. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  365. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  366. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  367. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  368. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  369. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  370. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  371. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  372. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  373. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  374. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  375. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  376. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  377. </p>
  378.  
  379. </div>
  380. </div>
  381.  
  382. <!-- stat 7, screams about bugs / squashes bugs -->
  383. <div class="col-12 px-0 mb-2">
  384. <div class="justify-content-between">
  385. <p class="mb-2">Screams About Bugs</p>
  386. <p class="text-right mb-2">Squashes Bugs</p>
  387. </div>
  388. <div class="row no-gutters" style="font-size: 13px">
  389.  
  390. <!-- blue guy -->
  391. <p class="text-center mx-auto my-0">
  392. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  393. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  394. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  395. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  396. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  397. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  398. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  399. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  400. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  401. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  402. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  403. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  404. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  405. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  406. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  407. </p>
  408.  
  409. <!-- red guy -->
  410. <p class="text-center mx-auto my-0">
  411. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  412. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  413. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  414. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  415. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  416. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  417. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  418. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  419. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  420. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  421. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  422. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  423. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  424. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  425. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  426. </p>
  427.  
  428. </div>
  429. </div>
  430.  
  431. <!-- stat 8, drives / can't drive -->
  432. <div class="col-12 px-0 mb-2">
  433. <div class="justify-content-between">
  434. <p class="mb-2">Drives</p>
  435. <p class="text-right mb-2">Can't Drive</p>
  436. </div>
  437. <div class="row no-gutters" style="font-size: 13px">
  438.  
  439. <!-- blue guy -->
  440. <p class="text-center mx-auto my-0">
  441. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  442. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  443. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  444. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  445. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  446. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  447. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  448. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  449. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  450. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  451. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  452. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  453. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  454. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  455. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  456. </p>
  457.  
  458. <!-- red guy -->
  459. <p class="text-center mx-auto my-0">
  460. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  461. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  462. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  463. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  464. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  465. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  466. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  467. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  468. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  469. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  470. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  471. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  472. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  473. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  474. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  475. </p>
  476.  
  477. </div>
  478. </div>
  479.  
  480. <!-- stat 9, cooks / can't cook -->
  481. <div class="col-12 px-0 mb-2">
  482. <div class="justify-content-between">
  483. <p class="mb-2">Cooks</p>
  484. <p class="text-right mb-2">Can't Cook</p>
  485. </div>
  486. <div class="row no-gutters" style="font-size: 13px">
  487.  
  488. <!-- blue guy -->
  489. <p class="text-center mx-auto my-0">
  490. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  491. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  492. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  493. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  494. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  495. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  496. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  497. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  498. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  499. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  500. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  501. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  502. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  503. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  504. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  505. </p>
  506.  
  507. <!-- red guy -->
  508. <p class="text-center mx-auto my-0">
  509. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  510. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  511. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  512. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  513. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  514. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  515. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  516. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  517. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  518. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  519. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  520. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  521. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  522. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  523. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  524. </p>
  525.  
  526. </div>
  527. </div>
  528.  
  529. <!-- stat 10, loves pda / hates pda -->
  530. <div class="col-12 px-0 mb-2">
  531. <div class="justify-content-between">
  532. <p class="mb-2">Loves PDA</p>
  533. <p class="text-right mb-2">Hates PDA</p>
  534. </div>
  535. <div class="row no-gutters" style="font-size: 13px">
  536.  
  537. <!-- blue guy -->
  538. <p class="text-center mx-auto my-0">
  539. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  540. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  541. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  542. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  543. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  544. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  545. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  546. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  547. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  548. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  549. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  550. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  551. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  552. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  553. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  554. </p>
  555.  
  556. <!-- red guy -->
  557. <p class="text-center mx-auto my-0">
  558. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  559. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  560. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  561. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  562. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  563. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  564. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  565. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  566. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  567. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  568. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  569. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  570. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  571. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  572. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  573. </p>
  574.  
  575. </div>
  576. </div>
  577.  
  578. <!-- stat 11, overprotective / chill -->
  579. <div class="col-12 px-0 mb-2">
  580. <div class="justify-content-between">
  581. <p class="mb-2">Overprotective</p>
  582. <p class="text-right mb-2">Chill</p>
  583. </div>
  584. <div class="row no-gutters" style="font-size: 13px">
  585.  
  586. <!-- blue guy -->
  587. <p class="text-center mx-auto my-0">
  588. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  589. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  590. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  591. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  592. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  593. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  594. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  595. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  596. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  597. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  598. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  599. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  600. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  601. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  602. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  603. </p>
  604.  
  605. <!-- red guy -->
  606. <p class="text-center mx-auto my-0">
  607. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  608. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  609. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  610. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  611. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  612. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  613. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  614. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  615. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  616. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  617. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  618. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  619. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  620. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  621. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  622. </p>
  623.  
  624. </div>
  625. </div>
  626.  
  627. <!-- stat 12, has relationship experience / no relationship experience -->
  628. <div class="col-12 px-0 mb-2">
  629. <div class="justify-content-between">
  630. <p class="mb-2">Has Relationship Experience</p>
  631. <p class="text-right mb-2">No Relationship Experience</p>
  632. </div>
  633. <div class="row no-gutters" style="font-size: 13px">
  634.  
  635. <!-- blue guy -->
  636. <p class="text-center mx-auto my-0">
  637. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  638. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  639. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  640. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  641. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  642. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  643. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  644. <i class="fas fa-circle fa-fw" style="color: #2b6bff"></i>
  645. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  646. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  647. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  648. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  649. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  650. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  651. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  652. </p>
  653.  
  654. <!-- red guy -->
  655. <p class="text-center mx-auto my-0">
  656. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  657. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  658. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  659. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  660. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  661. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  662. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  663. <i class="fas fa-circle fa-fw" style="color: #ff442b"></i>
  664. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  665. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  666. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  667. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  668. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  669. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  670. <i class="fas fa-circle fa-fw" style="color: rgba(0,0,0,0.2)"></i>
  671. </p>
  672.  
  673. </div>
  674. </div>
  675. </div>
  676. </div>
  677.  
  678. <!-- third column -->
  679.  
  680. <div class="col-md-3 col-sm-12">
  681.  
  682. <!-- song 2 -->
  683. <div class="col-auto mx-auto bg-faded p-2 mb-2" style="height: 150px;">
  684. <div class="p-2 h-100 align-items-center justify-content-center" style="border: 2px solid">
  685. <iframe class="flex-fill h-100 w-100 tooltipster" style="opacity:.00001;position:absolute;margin-top:6px;z-index:1;"
  686.  
  687. src="https://www.youtube.com/embed/SONGURLHERE?controls=0"
  688.  
  689. frameborder="0" title="SONG TITLE HERE"></iframe>
  690. <i class="fat fa-play-circle" style="font-size: 95px"></i>
  691. </div>
  692. </div>
  693.  
  694. <!-- history -->
  695. <div class="col-12 bg-faded p-2">
  696. <div class="text-center font-italic mb-1" style="font-size: 18px">HISTORY</div>
  697. <div class="overflow-auto" style="max-height: 130px">
  698. <p>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>
  699. </div>
  700. </div>
  701.  
  702.  
  703. </div>
  704.  
  705. </div>
  706.  
  707. <!-- bottom part -->
  708.  
  709. <div class="col-12 px-0">
  710. <blockquote class="bg-faded font-italic mb-2" style="border-color: #2b6bff; color: #2b6bff; margin-top: 1rem;">
  711.  
  712. <!-- change star by going to fontawesome.com -->
  713. <i class="fal fa-star"></i>
  714. an awesome freaking quote!!
  715. </blockquote>
  716. </div>
  717.  
  718. <div class="row no-gutters">
  719.  
  720. <!-- put oc name here -->
  721. <div class="col h-100 my-auto bg-faded px-2 text-right" style="padding: 2.5em; text-transform: capitalize; border: .25rem solid #2b6bff; border-right: none">
  722. <p class="font-italic px-1" style="font-size: 20px">Name Surname</p>
  723. </div>
  724.  
  725. <!-- put oc profile picture where it says IMGURLHERE -->
  726. <div class="col-auto mx-auto my-auto" style="height: 120px; width: 120px; background-image: url(IMGURLHERE); background-size: cover; background-position: center; border: .25rem solid #2b6bff">
  727. <!-- put oc profile link here -->
  728. <a class="stretched-link" href="/link_here" target=_blank></a>
  729. </div>
  730.  
  731. </div>
  732.  
  733. <!-- code credit dont remove thx. -->
  734.  
  735. <div class="col-12 justify-content-center mt-2 px-0">
  736. <a href="/micro-wave" data-toggle="tooltip" title="code by micro-wave">
  737. <i class="fas fa-microwave"></i>
  738. </a>
  739. </div>
  740.  
  741. </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!