API tools faq
paste
Advertisement
CanineKing

[F2U] 3 Relationships

CanineKing
Mar 13th, 2020
914
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.13 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. F2U Code 3 Relationships
  3.  
  4. Free to use & free to edit
  5. Ripping and "Frankenstein-ing" code is allowed
  6. Credit not necessary but appreciated
  7. Feel free to message me for any help/ questions
  8.  
  9. Made by CanineKing
  10.  
  11. -->
  12. <div class="container-fluid">
  13. <div class="row justify-content-center">
  14. <!--
  15. CHARACTER A
  16. -->
  17. <div class="col-lg-4 p-1">
  18. <!-- IMAGE
  19. (note, portrait images work best, all images have to be at the same size for proper alignment
  20. -->
  21. <div class="card border-0 rounded-0" style="height:800px; background-image:url('IMG URL'); background-size:cover;"></div>
  22. <!-- COLLAPSE BUTTON -->
  23. <a class="btn btn-secondary btn-block rounded-0" data-toggle="collapse" href="#charA">
  24. <span class="text-uppercase" style="font-size:20px"><b>Character Name</b></span>
  25. </a>
  26. <div class="collapse" id="charA">
  27. <!-- COLLAPSED CONTENT, this section will scroll -->
  28. <div class="card card-body p-3" style="height:300px; overflow:auto;">
  29. <h3 class="text-muted text-uppercase"><i class="far fa-bookmark mr-2"></i>Header</h3>
  30. <p>Write anything about the character here (ex. about/ summary, personality, backstory, etc). This box will scroll. </p>
  31. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque massa velit, vel dictum odio dapibus vitae. Quisque in suscipit nunc, ac fringilla risus.</p>
  32. <h3 class="text-muted text-uppercase mt-1"><i class="far fa-bookmark mr-2"></i>Header</h3>
  33. <p>Donec viverra metus id neque fringilla, eget iaculis tortor luctus. Integer faucibus velit id facilisis facilisis. Pellentesque consectetur venenatis tellus, eget gravida augue. Nulla facilisi. </p>
  34. <!-- add the following code to add another header and paragraph ABOVE this line
  35.  
  36. <h3 class="text-muted text-uppercase mt-1"><i class="far fa-bookmark mr-2"></i>Header</h3>
  37. <p>Donec viverra metus id neque fringilla, eget iaculis tortor luctus. Integer faucibus velit id facilisis facilisis. Pellentesque consectetur venenatis tellus, eget gravida augue. Nulla facilisi. </p>
  38.  
  39. -->
  40. </div>
  41. <!-- COLLAPSED CONTENT END -->
  42. </div>
  43. <!-- LIST ITEMS -->
  44. <div class="card mt-2 p-1">
  45. <div class="container-fluid">
  46. <div class="row">
  47. <div class="col-lg-6 p-1">
  48. <ul class="list-group list-group-flush">
  49. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Nickname</span>
  50. <span class="text-right w-50">Null</span></li>
  51. </ul>
  52. </div>
  53. <div class="col-lg-6 p-1">
  54. <ul class="list-group list-group-flush">
  55. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Age</span>
  56. <span class="text-right w-50">00</span></li>
  57. </ul>
  58. </div>
  59. <div class="col-lg-6 p-1">
  60. <ul class="list-group list-group-flush">
  61. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Gender</span>
  62. <span class="text-right w-50">Null</span></li>
  63. </ul>
  64. </div>
  65. <div class="col-lg-6 p-1">
  66. <ul class="list-group list-group-flush">
  67. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Pronouns</span>
  68. <span class="text-right w-50">Null/ Null</span></li>
  69. </ul>
  70. </div>
  71. <div class="col-lg-6 p-1">
  72. <ul class="list-group list-group-flush">
  73. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Birthday</span>
  74. <span class="text-right w-50">Month, Day</span></li>
  75. </ul>
  76. </div>
  77. <div class="col-lg-6 p-1">
  78. <ul class="list-group list-group-flush">
  79. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">MTBI</span>
  80. <span class="text-right w-50">NULL</span></li>
  81. </ul>
  82. </div>
  83. <!-- copy and paste the following code and add it ABOVE this line
  84.  
  85. <div class="col-lg-6 p-1">
  86. <ul class="list-group list-group-flush">
  87. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Null</span>
  88. <span class="text-right w-50">Lorem ipsum</span></li>
  89. </ul>
  90. </div>
  91.  
  92. -->
  93. </div>
  94. </div>
  95. </div>
  96. <!-- LIKES/ DISLIKES, this section will scroll -->
  97. <div class="card mt-2" style="height:150px; overflow:auto">
  98. <div class="container-fluid">
  99. <div class="row">
  100. <div class="col-lg-6 p-2">
  101. <h3 class="text-center text-uppercase text-muted"><i class="far fa-heart mr-2"></i>Likes</h3>
  102. <ul>
  103. <!-- LIKES LIST -->
  104. <li>This section scrolls</li>
  105. <li>Lorem ipsum</li>
  106. <li>dolor sit amet</li>
  107. <li>consectetur </li>
  108. <!-- add the following code ABOVE this line
  109.  
  110. <li>Lorem ipsum<li>
  111.  
  112. -->
  113. </ul>
  114. </div>
  115.  
  116. <div class="col-lg-6 p-2">
  117. <h3 class="text-center text-uppercase text-muted"><i class="fas fa-heart-broken mr-2"></i>Dislikes</h3>
  118. <ul>
  119. <!-- DISLIKES LIST -->
  120. <li>Lorem ipsum</li>
  121. <li>dolor sit amet</li>
  122. <li>consectetur </li>
  123. <!-- add the following code ABOVE this line
  124.  
  125. <li>Lorem ipsum<li>
  126.  
  127. -->
  128. </ul>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. <!--- LIKES/ DISLIKES END -->
  134. </div>
  135. <!-- CHARA A END -->
  136. <!--
  137. CHARACTER B
  138. -->
  139. <div class="col-lg-4 p-1">
  140. <!-- IMAGE
  141. (note, portrait images work best, all images have to be at the same size for proper alignment
  142. -->
  143. <div class="card border-0 rounded-0" style="height:800px; background-image:url('IMG URL'); background-size:cover;"></div>
  144. <!-- COLLAPSE BUTTON -->
  145. <a class="btn btn-secondary btn-block rounded-0" data-toggle="collapse" href="#charB">
  146. <span class="text-uppercase" style="font-size:20px"><b>Character Name</b></span>
  147. </a>
  148. <div class="collapse" id="charB">
  149. <!-- COLLAPSED CONTENT, this section will scroll -->
  150. <div class="card card-body p-3" style="height:300px; overflow:auto;">
  151. <h3 class="text-muted text-uppercase"><i class="far fa-bookmark mr-2"></i>Header</h3>
  152. <p>Write anything about the character here (ex. about/ summary, personality, backstory, etc). This box will scroll. </p>
  153. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque massa velit, vel dictum odio dapibus vitae. Quisque in suscipit nunc, ac fringilla risus.</p>
  154. <h3 class="text-muted text-uppercase mt-1"><i class="far fa-bookmark mr-2"></i>Header</h3>
  155. <p>Donec viverra metus id neque fringilla, eget iaculis tortor luctus. Integer faucibus velit id facilisis facilisis. Pellentesque consectetur venenatis tellus, eget gravida augue. Nulla facilisi. </p>
  156. <!-- add the following code to add another header and paragraph ABOVE this line
  157.  
  158. <h3 class="text-muted text-uppercase mt-1"><i class="far fa-bookmark mr-2"></i>Header</h3>
  159. <p>Donec viverra metus id neque fringilla, eget iaculis tortor luctus. Integer faucibus velit id facilisis facilisis. Pellentesque consectetur venenatis tellus, eget gravida augue. Nulla facilisi. </p>
  160.  
  161. -->
  162. </div>
  163. <!-- COLLAPSED CONTENT END -->
  164. </div>
  165. <!-- LIST ITEMS -->
  166. <div class="card mt-2 p-1">
  167. <div class="container-fluid">
  168. <div class="row">
  169. <div class="col-lg-6 p-1">
  170. <ul class="list-group list-group-flush">
  171. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Nickname</span>
  172. <span class="text-right w-50">Null</span></li>
  173. </ul>
  174. </div>
  175. <div class="col-lg-6 p-1">
  176. <ul class="list-group list-group-flush">
  177. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Age</span>
  178. <span class="text-right w-50">00</span></li>
  179. </ul>
  180. </div>
  181. <div class="col-lg-6 p-1">
  182. <ul class="list-group list-group-flush">
  183. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Gender</span>
  184. <span class="text-right w-50">Null</span></li>
  185. </ul>
  186. </div>
  187. <div class="col-lg-6 p-1">
  188. <ul class="list-group list-group-flush">
  189. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Pronouns</span>
  190. <span class="text-right w-50">Null/ Null</span></li>
  191. </ul>
  192. </div>
  193. <div class="col-lg-6 p-1">
  194. <ul class="list-group list-group-flush">
  195. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Birthday</span>
  196. <span class="text-right w-50">Month, Day</span></li>
  197. </ul>
  198. </div>
  199. <div class="col-lg-6 p-1">
  200. <ul class="list-group list-group-flush">
  201. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">MTBI</span>
  202. <span class="text-right w-50">NULL</span></li>
  203. </ul>
  204. </div>
  205. <!-- copy and paste the following code and add it ABOVE this line
  206.  
  207. <div class="col-lg-6 p-1">
  208. <ul class="list-group list-group-flush">
  209. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Null</span>
  210. <span class="text-right w-50">Lorem ipsum</span></li>
  211. </ul>
  212. </div>
  213.  
  214. -->
  215. </div>
  216. </div>
  217. </div>
  218. <!-- LIKES/ DISLIKES, this section will scroll -->
  219. <div class="card mt-2" style="height:150px; overflow:auto">
  220. <div class="container-fluid">
  221. <div class="row">
  222. <div class="col-lg-6 p-2">
  223. <h3 class="text-center text-uppercase text-muted"><i class="far fa-heart mr-2"></i>Likes</h3>
  224. <ul>
  225. <!-- LIKES LIST -->
  226. <li>This section scrolls</li>
  227. <li>Lorem ipsum</li>
  228. <li>dolor sit amet</li>
  229. <li>consectetur </li>
  230. <!-- add the following code ABOVE this line
  231.  
  232. <li>Lorem ipsum<li>
  233.  
  234. -->
  235. </ul>
  236. </div>
  237.  
  238. <div class="col-lg-6 p-2">
  239. <h3 class="text-center text-uppercase text-muted"><i class="fas fa-heart-broken mr-2"></i>Dislikes</h3>
  240. <ul>
  241. <!-- DISLIKES LIST -->
  242. <li>Lorem ipsum</li>
  243. <li>dolor sit amet</li>
  244. <li>consectetur </li>
  245. <!-- add the following code ABOVE this line
  246.  
  247. <li>Lorem ipsum<li>
  248.  
  249. -->
  250. </ul>
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. <!--- LIKES/ DISLIKES END -->
  256. </div>
  257. <!-- CHARA B END -->
  258. <!--
  259. CHARACTER C
  260. -->
  261. <div class="col-lg-4 p-1">
  262. <!-- IMAGE
  263. (note, portrait images work best, all images have to be at the same size for proper alignment
  264. -->
  265. <div class="card border-0 rounded-0" style="height:800px; background-image:url('IMG URL'); background-size:cover;"></div>
  266. <!-- COLLAPSE BUTTON -->
  267. <a class="btn btn-secondary btn-block rounded-0" data-toggle="collapse" href="#charC">
  268. <span class="text-uppercase" style="font-size:20px"><b>Character Name</b></span>
  269. </a>
  270. <div class="collapse" id="charC">
  271. <!-- COLLAPSED CONTENT, this section will scroll -->
  272. <div class="card card-body p-3" style="height:300px; overflow:auto;">
  273. <h3 class="text-muted text-uppercase"><i class="far fa-bookmark mr-2"></i>Header</h3>
  274. <p>Write anything about the character here (ex. about/ summary, personality, backstory, etc). This box will scroll. </p>
  275. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque massa velit, vel dictum odio dapibus vitae. Quisque in suscipit nunc, ac fringilla risus.</p>
  276. <h3 class="text-muted text-uppercase mt-1"><i class="far fa-bookmark mr-2"></i>Header</h3>
  277. <p>Donec viverra metus id neque fringilla, eget iaculis tortor luctus. Integer faucibus velit id facilisis facilisis. Pellentesque consectetur venenatis tellus, eget gravida augue. Nulla facilisi. </p>
  278. <!-- add the following code to add another header and paragraph ABOVE this line
  279.  
  280. <h3 class="text-muted text-uppercase mt-1"><i class="far fa-bookmark mr-2"></i>Header</h3>
  281. <p>Donec viverra metus id neque fringilla, eget iaculis tortor luctus. Integer faucibus velit id facilisis facilisis. Pellentesque consectetur venenatis tellus, eget gravida augue. Nulla facilisi. </p>
  282.  
  283. -->
  284. </div>
  285. <!-- COLLAPSED CONTENT END -->
  286. </div>
  287. <!-- LIST ITEMS -->
  288. <div class="card mt-2 p-1">
  289. <div class="container-fluid">
  290. <div class="row">
  291. <div class="col-lg-6 p-1">
  292. <ul class="list-group list-group-flush">
  293. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Nickname</span>
  294. <span class="text-right w-50">Null</span></li>
  295. </ul>
  296. </div>
  297. <div class="col-lg-6 p-1">
  298. <ul class="list-group list-group-flush">
  299. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Age</span>
  300. <span class="text-right w-50">00</span></li>
  301. </ul>
  302. </div>
  303. <div class="col-lg-6 p-1">
  304. <ul class="list-group list-group-flush">
  305. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Gender</span>
  306. <span class="text-right w-50">Null</span></li>
  307. </ul>
  308. </div>
  309. <div class="col-lg-6 p-1">
  310. <ul class="list-group list-group-flush">
  311. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Pronouns</span>
  312. <span class="text-right w-50">Null/ Null</span></li>
  313. </ul>
  314. </div>
  315. <div class="col-lg-6 p-1">
  316. <ul class="list-group list-group-flush">
  317. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Birthday</span>
  318. <span class="text-right w-50">Month, Day</span></li>
  319. </ul>
  320. </div>
  321. <div class="col-lg-6 p-1">
  322. <ul class="list-group list-group-flush">
  323. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">MTBI</span>
  324. <span class="text-right w-50">NULL</span></li>
  325. </ul>
  326. </div>
  327. <!-- copy and paste the following code and add it ABOVE this line
  328.  
  329. <div class="col-lg-6 p-1">
  330. <ul class="list-group list-group-flush">
  331. <li class="list-group-item p-0"><span class="text-muted text-uppercase text-truncate w-50">Null</span>
  332. <span class="text-right w-50">Lorem ipsum</span></li>
  333. </ul>
  334. </div>
  335.  
  336. -->
  337. </div>
  338. </div>
  339. </div>
  340. <!-- LIKES/ DISLIKES, this section will scroll -->
  341. <div class="card mt-2" style="height:150px; overflow:auto">
  342. <div class="container-fluid">
  343. <div class="row">
  344. <div class="col-lg-6 p-2">
  345. <h3 class="text-center text-uppercase text-muted"><i class="far fa-heart mr-2"></i>Likes</h3>
  346. <ul>
  347. <!-- LIKES LIST -->
  348. <li>This section scrolls</li>
  349. <li>Lorem ipsum</li>
  350. <li>dolor sit amet</li>
  351. <li>consectetur </li>
  352. <!-- add the following code ABOVE this line
  353.  
  354. <li>Lorem ipsum<li>
  355.  
  356. -->
  357. </ul>
  358. </div>
  359.  
  360. <div class="col-lg-6 p-2">
  361. <h3 class="text-center text-uppercase text-muted"><i class="fas fa-heart-broken mr-2"></i>Dislikes</h3>
  362. <ul>
  363. <!-- DISLIKES LIST -->
  364. <li>Lorem ipsum</li>
  365. <li>dolor sit amet</li>
  366. <li>consectetur </li>
  367. <!-- add the following code ABOVE this line
  368.  
  369. <li>Lorem ipsum<li>
  370.  
  371. -->
  372. </ul>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. <!--- LIKES/ DISLIKES END -->
  378. </div>
  379. <!-- CHARA C END -->
  380.  
  381. </div>
  382.  
  383. <!-- credit -->
  384. <p class="small text-right"><a href="https://toyhou.se/6277458.-f2u-code-3-relationships" target="_BLANK" class="text-muted"><i class="fa fa-paw mr-1"></i><i class="fas fa-crown mr-1"></i></a></p>
  385. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!