API tools faq
paste
vladimirpinarum

F2U Connected

vladimirpinarum
Apr 21st, 2022 (edited)
442
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.65 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------
  2. CONNECTED - Character
  3. Profile by HTMLobster (noll)
  4.  
  5.  
  6. TOS:
  7. Do not remove my credit. It may be edited or moved, but must be accessible on the page.
  8. You may edit code/frankenstein with others as long as their TOS/Rules allows.
  9. Turn off WYSIWYG and turn on Code Editor in settings. WYSIWYG will break the code. DO NOT USE IT AT ALL.
  10. Do not redistribute (reupload, reshare, etc.). Do not redistribute edits.
  11. By using this code you agree to these rules.
  12. ------------------------------------------------------------------>
  13.  
  14. <div class="container">
  15. <!-- heading background -->
  16. <div style="height:200px; background:url(https://i.imgur.com/5eC3lCN.png);"></div>
  17. <div class="row no-gutters">
  18. <div class="col-lg-4 mr-lg-3">
  19. <div class="bg-faded p-3 mt-3">
  20. <!-- icon -->
  21. <div class="mx-auto card rounded-circle mb-3 p-3 border-0" style="height:225px; width:225px; margin-top:-135px;">
  22. <!-- image -->
  23. <div class="h-100 w-100 rounded-circle" style="background:url(ICON_URL); background-size:cover;"></div>
  24. </div>
  25. <div class="row no-gutters">
  26. <div class="col-auto ml-3">
  27. <div class="bg-secondary h-100" style="width:1px;"></div>
  28. </div>
  29. <!-- basics -->
  30. <div class="col ml-n3">
  31. <div class="row no-gutters">
  32. <div class="col-auto">
  33. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  34. <!-- symbol -->
  35. <i class="fa-light fa-user fa-fw" style="font-size:1.2em;"></i>
  36. </div>
  37. </div>
  38. <div class="col ml-3">
  39. <!-- content -->
  40. <div class="card border-0 rounded-0 px-2 py-1">
  41. name
  42. </div>
  43. </div>
  44. </div>
  45. <div class="row no-gutters mt-2">
  46. <div class="col-auto">
  47. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  48. <!-- symbol -->
  49. <i class="fa-light fa-pen fa-fw" style="font-size:1.2em;"></i>
  50. </div>
  51. </div>
  52. <div class="col ml-3">
  53. <!-- content -->
  54. <div class="card border-0 rounded-0 px-2 py-1">
  55. nicknames
  56. </div>
  57. </div>
  58. </div>
  59. <div class="row no-gutters mt-2">
  60. <div class="col-auto">
  61. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  62. <!-- symbol -->
  63. <i class="fa-light fa-birthday-cake fa-fw" style="font-size:1.2em;"></i>
  64. </div>
  65. </div>
  66. <div class="col ml-3">
  67. <!-- content -->
  68. <div class="card border-0 rounded-0 px-2 py-1">
  69. age
  70. </div>
  71. </div>
  72. </div>
  73. <div class="row no-gutters mt-2">
  74. <div class="col-auto">
  75. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  76. <!-- symbol -->
  77. <i class="fa-light fa-calendar-days fa-fw" style="font-size:1.2em;"></i>
  78. </div>
  79. </div>
  80. <div class="col ml-3">
  81. <!-- content -->
  82. <div class="card border-0 rounded-0 px-2 py-1">
  83. birthday
  84. </div>
  85. </div>
  86. </div>
  87. <div class="row no-gutters mt-2">
  88. <div class="col-auto">
  89. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  90. <!-- symbol -->
  91. <i class="fa-light fa-transgender fa-fw" style="font-size:1.2em;"></i>
  92. </div>
  93. </div>
  94. <div class="col ml-3">
  95. <!-- content -->
  96. <div class="card border-0 rounded-0 px-2 py-1">
  97. gender
  98. </div>
  99. </div>
  100. </div>
  101. <div class="row no-gutters mt-2">
  102. <div class="col-auto">
  103. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  104. <!-- symbol -->
  105. <i class="fa-light fa-genderless fa-fw" style="font-size:1.2em;"></i>
  106. </div>
  107. </div>
  108. <div class="col ml-3">
  109. <!-- content -->
  110. <div class="card border-0 rounded-0 px-2 py-1">
  111. pronouns
  112. </div>
  113. </div>
  114. </div>
  115. <div class="row no-gutters mt-2">
  116. <div class="col-auto">
  117. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  118. <!-- symbol -->
  119. <i class="fa-light fa-paw fa-fw" style="font-size:1.2em;"></i>
  120. </div>
  121. </div>
  122. <div class="col ml-3">
  123. <!-- content -->
  124. <div class="card border-0 rounded-0 px-2 py-1">
  125. species
  126. </div>
  127. </div>
  128. </div>
  129. <div class="row no-gutters mt-2">
  130. <div class="col-auto">
  131. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  132. <!-- symbol -->
  133. <i class="fa-light fa-ruler-vertical fa-fw" style="font-size:1.2em;"></i>
  134. </div>
  135. </div>
  136. <div class="col ml-3">
  137. <!-- content -->
  138. <div class="card border-0 rounded-0 px-2 py-1">
  139. height
  140. </div>
  141. </div>
  142. </div>
  143. <div class="row no-gutters mt-2">
  144. <div class="col-auto">
  145. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  146. <!-- symbol -->
  147. <i class="fa-light fa-person fa-fw" style="font-size:1.2em;"></i>
  148. </div>
  149. </div>
  150. <div class="col ml-3">
  151. <!-- content -->
  152. <div class="card border-0 rounded-0 px-2 py-1">
  153. build
  154. </div>
  155. </div>
  156. </div>
  157. <div class="row no-gutters mt-2">
  158. <div class="col-auto">
  159. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  160. <!-- symbol -->
  161. <i class="fa-light fa-location-dot fa-fw" style="font-size:1.2em;"></i>
  162. </div>
  163. </div>
  164. <div class="col ml-3">
  165. <!-- content -->
  166. <div class="card border-0 rounded-0 px-2 py-1">
  167. location
  168. </div>
  169. </div>
  170. </div>
  171. <div class="row no-gutters mt-2">
  172. <div class="col-auto">
  173. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  174. <!-- symbol -->
  175. <i class="fa-light fa-briefcase fa-fw" style="font-size:1.2em;"></i>
  176. </div>
  177. </div>
  178. <div class="col ml-3">
  179. <!-- content -->
  180. <div class="card border-0 rounded-0 px-2 py-1">
  181. occupation
  182. </div>
  183. </div>
  184. </div>
  185. <div class="row no-gutters mt-2">
  186. <div class="col-auto">
  187. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  188. <!-- symbol -->
  189. <i class="fa-light fa-tombstone fa-fw" style="font-size:1.2em;"></i>
  190. </div>
  191. </div>
  192. <div class="col ml-3">
  193. <!-- content -->
  194. <div class="card border-0 rounded-0 px-2 py-1">
  195. status
  196. </div>
  197. </div>
  198. </div>
  199. <!-- credit - DO NOT REMOVE -->
  200. <div class="row no-gutters mt-2">
  201. <div class="col-auto">
  202. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  203. <i class="fa-light fa-code fa-fw" style="font-size:1.2em;"></i>
  204. </div>
  205. </div>
  206. <div class="col ml-3">
  207. <div class="card border-0 rounded-0 px-2 py-1">
  208. @htmlobster
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <div class="col-lg mt-3">
  217. <div class="bg-faded p-3 h-100">
  218. <div class="row no-gutters">
  219. <div class="col-auto ml-sm-3 ml-2">
  220. <div class="bg-secondary h-100" style="width:1px;"></div>
  221. </div>
  222. <!-- content -->
  223. <div class="col ml-n3">
  224. <!-- story -->
  225. <div class="row no-gutters">
  226. <div class="col-auto">
  227. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  228. <!-- symbol -->
  229. <i class="fa-light fa-books fa-fw" style="font-size:1.2em;"></i>
  230. </div>
  231. </div>
  232. <div class="col ml-3">
  233. <!-- description -->
  234. <div class="card border-0 rounded-0 px-2 py-1">
  235. <p>
  236. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget est quis lorem tincidunt tempor. Aliquam a nulla ligula. Curabitur mi sapien, ultrices a interdum ac, lobortis at diam. Aenean scelerisque maximus felis, ac rhoncus massa luctus sit amet. Quisque quis commodo tortor.
  237. </p>
  238. <p>
  239. Sed dictum diam sed elit luctus sodales. Nunc ac magna tortor. Aenean interdum tortor eu metus blandit, at fermentum leo auctor. Aliquam erat volutpat. Aenean feugiat facilisis enim suscipit eleifend. Sed sodales malesuada dictum. Aenean dapibus dui risus, sit amet consequat lacus placerat a. Nunc dictum risus rutrum justo condimentum, eu tincidunt purus euismod. Sed massa turpis, vestibulum vel sem vel, condimentum faucibus enim.
  240. </p>
  241. </div>
  242. </div>
  243. </div>
  244. <!-- personality -->
  245. <div class="row no-gutters mt-2">
  246. <div class="col-auto">
  247. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  248. <!-- symbol -->
  249. <i class="fa-light fa-masks-theater fa-fw" style="font-size:1.2em;"></i>
  250. </div>
  251. </div>
  252. <div class="col ml-3">
  253. <!-- description -->
  254. <div class="card border-0 rounded-0 px-2 py-1">
  255. <p>
  256. Nulla sodales tristique velit eu consectetur. Ut magna elit, tempor sit amet erat id, eleifend malesuada turpis. Vestibulum ex ligula, iaculis ac metus id, suscipit commodo ex. Pellentesque posuere purus ut urna ultrices porttitor. Phasellus condimentum sem eros, a imperdiet ipsum interdum sed. Praesent dapibus sodales odio, at rhoncus ex mattis in. Aliquam vitae auctor urna. Nunc aliquet libero leo, lobortis mollis erat malesuada eu. Curabitur varius commodo semper. Morbi venenatis est at urna auctor interdum nec et massa. Phasellus viverra tincidunt arcu, in tristique turpis aliquam id. Praesent vehicula pellentesque porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Suspendisse luctus commodo congue. Nam eu augue est.
  257. </p>
  258. </div>
  259. </div>
  260. </div>
  261. <!-- links/relationships -->
  262. <div class="row no-gutters mt-2">
  263. <div class="col-auto">
  264. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  265. <i class="fa-light fa-link fa-fw" style="font-size:1.2em;"></i>
  266. </div>
  267. </div>
  268. <div class="col ml-3">
  269. <!-- relationship -->
  270. <div class="card border-0 rounded-0 px-2 py-1">
  271. <div>
  272. <a href="CHAR_URL">
  273. Name
  274. </a>
  275. Duis tempor elementum nulla ac mollis. Etiam sed volutpat ex, quis lobortis tellus. In lobortis odio mi, a euismod neque blandit sit amet. Curabitur mi orci, posuere vitae venenatis at, pellentesque quis urna. In rutrum justo et metus finibus lacinia.
  276. </div>
  277. </div>
  278. <!-- relationship -->
  279. <div class="card border-0 rounded-0 px-2 py-1 mt-2">
  280. <div>
  281. <a href="CHAR_URL">
  282. Name
  283. </a>
  284. Duis tempor elementum nulla ac mollis. Etiam sed volutpat ex, quis lobortis tellus. In lobortis odio mi, a euismod neque blandit sit amet. Curabitur mi orci, posuere vitae venenatis at, pellentesque quis urna. In rutrum justo et metus finibus lacinia.
  285. </div>
  286. </div>
  287. <!-- relationship -->
  288. <div class="card border-0 rounded-0 px-2 py-1 mt-2">
  289. <div>
  290. <a href="CHAR_URL">
  291. Name
  292. </a>
  293. Duis tempor elementum nulla ac mollis. Etiam sed volutpat ex, quis lobortis tellus. In lobortis odio mi, a euismod neque blandit sit amet. Curabitur mi orci, posuere vitae venenatis at, pellentesque quis urna. In rutrum justo et metus finibus lacinia.
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <!-- design -->
  299. <div class="row no-gutters mt-2">
  300. <div class="col-auto">
  301. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  302. <!-- symbol -->
  303. <i class="fa-light fa-palette fa-fw" style="font-size:1.2em;"></i>
  304. </div>
  305. </div>
  306. <div class="col ml-3">
  307. <div class="card border-0 rounded-0 px-2 py-1">
  308. <div>
  309. <!-- description -->
  310. <p>
  311. Donec feugiat, metus ornare faucibus dapibus, orci sem malesuada lorem, sed volutpat lorem magna in ligula. Duis sed ex in ligula elementum venenatis ac eu lectus. Sed enim lectus, condimentum id facilisis et, porta nec sem. Ut eu massa dui. Sed iaculis sapien ac eros tincidunt, et congue libero commodo. Suspendisse tincidunt rutrum facilisis. Vestibulum sit amet est purus. Curabitur ac sem ultrices, feugiat tortor quis, laoreet ligula.
  312. </p>
  313. <!-- colors - change background and text - do text-white for dark colors a& text-dark for light -->
  314. <div class="text-center" style="font-size:1rem;">
  315. <span class="badge text-white" style="background:#000;">
  316. #000000
  317. </span>
  318. <span class="badge text-white" style="background:#444;">
  319. #444444
  320. </span>
  321. <span class="badge text-white" style="background:#808080;">
  322. #808080
  323. </span>
  324. <span class="badge text-dark" style="background:#ccc;">
  325. #cccccc
  326. </span>
  327. <span class="badge text-dark" style="background:#fff;">
  328. #ffffff
  329. </span>
  330. </div>
  331. </div>
  332. </div>
  333. </div>
  334. </div>
  335. <!-- likes -->
  336. <div class="row no-gutters mt-2">
  337. <div class="col-auto">
  338. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  339. <!-- symbol -->
  340. <i class="fa-light fa-heart fa-fw" style="font-size:1.2em;"></i>
  341. </div>
  342. </div>
  343. <div class="col ml-3">
  344. <div class="card border-0 rounded-0 px-2 py-1">
  345. <!-- content -->
  346. <p>
  347. Likes. Item, item, item, item.
  348. </p>
  349. </div>
  350. </div>
  351. </div>
  352. <div class="row no-gutters mt-2">
  353. <div class="col-auto">
  354. <div class="bg-primary rounded-circle text-white d-flex align-items-center justify-content-center" style="height:2rem; width:2rem;">
  355. <!-- symbol -->
  356. <i class="fa-light fa-times fa-fw" style="font-size:1.2em;"></i>
  357. </div>
  358. </div>
  359. <div class="col ml-3">
  360. <div class="card border-0 rounded-0 px-2 py-1">
  361. <!-- content -->
  362. <p>
  363. Dislikes. Item, item, item, item.
  364. </p>
  365. </div>
  366. </div>
  367. </div>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. </div>
  373. </div>
  374.  
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!