API tools faq
paste
MCDogWarrior

Full Character [Custom]

MCDogWarrior
Mar 27th, 2022 (edited)
811
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.47 KB | None | 0 0
raw download clone embed print report
  1. <div class="container text-white my-1 mt-4" style="width:1000px; font-family: terminal, monaco">
  2. <!------ Main background image ------>
  3. <div class="card p-2 rounded-0 border-0" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; background-attachment: fixed; border-radius:50px;">
  4. <!--- Top divider --->
  5. <div class="mx-auto mb-2" style="border-top:5px solid #221b30; width:800px;">
  6. </div>
  7. <!----- Top box ----->
  8. <div class="card bg-faded rounded-0" style="background-color:rgba(0,0,0,0.8); border-radius:45px; border:5px solid #221b30">
  9.  
  10. <div class="row no-gutters">
  11. <div class="col-3 p-1">
  12. <!---- Character icon ---->
  13. <div class="card rounded-circle ml-3" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:200px; width:200px; margin-top:-50px; border:5px solid #221b30">
  14. <!--- Gradient over icon --->
  15. <div class="card bg-faded rounded-circle border-0 p-1" style="background:linear-gradient(to top,rgba(255,255,255,0.5),rgba(255,255,255,0)); height:200px">
  16. </div>
  17. </div>
  18. </div>
  19. <div class="col-9 p-1">
  20. <!--- Character name & quote --->
  21. <p style="font-size:65px">CHARACTER NAME</p>
  22. <p class="mr-2" style="font-size:27px; opacity:0.5; margin-top:-30px; text-align:right"> <i class="fa-duotone fa-quote-left" style="font-size:23px"></i> quote here (goes 2 lines) <i class="fa-duotone fa-quote-right" style="font-size:23px"></i></p>
  23. </div>
  24. </div>
  25. </div>
  26. <!--- Divider --->
  27. <div class="mx-auto my-2" style="border-top:5px solid #221b30; width:700px;">
  28. </div>
  29. <!---- First side pagedoll ---->
  30. <div class="row no-gutters mb-2">
  31. <div class="col-4 p-1">
  32. <img class="m-auto" style="max-height:350px;" src=" IMGHERE ">
  33. </div>
  34.  
  35. <div class="col-8 p-1">
  36. <!----- First tab box ----->
  37. <div class="card bg-faded rounded-0" style="background-color:rgba(0,0,0,0.8); border-radius:45px; border:5px solid #221b30; height:350px">
  38. <div class="tab-content">
  39. <!---- First tab - basic information ---->
  40. <div class="tab-pane fade active show p-1" id="tab1">
  41. <!--- Corner icon --->
  42. <a style="position:absolute; top:0px; right:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(5deg)"><i class="fa-solid fa-id-card"></i></a>
  43. <!--- Header & divider --->
  44. <p class="ml-5" style="font-size:40px">BASICS</p>
  45. <div class="ml-5" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  46. </div>
  47. <!---- Header & divider ---->
  48. <div class="row no-gutters ml-5 mt-2">
  49. <!--- Age --->
  50. <div class="col-6">
  51. <div class="p-1">
  52. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  53. <span style="color:#c4415d">Age</span>
  54. content</p>
  55. </div>
  56. </div>
  57. <!--- Gender --->
  58. <div class="col-6">
  59. <div class="p-1">
  60. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  61. <span style="color:#c4415d">Gender</span>
  62. content</p>
  63. </div>
  64. </div>
  65. <!--- Sexual orientation --->
  66. <div class="col-6">
  67. <div class="p-1">
  68. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  69. <span style="color:#c4415d">Orientation</span>
  70. content</p>
  71. </div>
  72. </div>
  73. <!--- Status (alive/undead/dead) --->
  74. <div class="col-6">
  75. <div class="p-1">
  76. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  77. <span style="color:#c4415d">Status</span>
  78. content</p>
  79. </div>
  80. </div>
  81. <!--- Occupation (job/main hobby) --->
  82. <div class="col-6">
  83. <div class="p-1">
  84. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  85. <span style="color:#c4415d">Occupation</span>
  86. content</p>
  87. </div>
  88. </div>
  89. <!--- Role (main/secondary/tertiary/standalone) --->
  90. <div class="col-6">
  91. <div class="p-1">
  92. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  93. <span style="color:#c4415d">Role</span>
  94. content</p>
  95. </div>
  96. </div>
  97. <!--- Nationality (country of birth) --->
  98. <div class="col-6">
  99. <div class="p-1">
  100. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  101. <span style="color:#c4415d">Nationality</span>
  102. content</p>
  103. </div>
  104. </div>
  105. <!--- Association (team/group or story name) --->
  106. <div class="col-6">
  107. <div class="p-1">
  108. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  109. <span style="color:#c4415d">Association</span>
  110. content</p>
  111. </div>
  112. </div>
  113. <!--- Birthday --->
  114. <div class="col-6">
  115. <div class="p-1">
  116. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  117. <span style="color:#c4415d">Birthday</span>
  118. content</p>
  119. </div>
  120. </div>
  121. <!--- Residence (current home) --->
  122. <div class="col-6">
  123. <div class="p-1">
  124. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  125. <span style="color:#c4415d">Residence</span>
  126. content</p>
  127. </div>
  128. </div>
  129. <!--- Alignment (https://content.spiceworksstatic.com/service.community/p/post_images/attached_image/8d6ab410-7df4-42d2-9388-8e7c9a731f45-IT_Alignment_Chart_with_origin.jpg) --->
  130. <div class="col-6">
  131. <div class="p-1">
  132. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  133. <span style="color:#c4415d">Alignment</span>
  134. content</p>
  135. </div>
  136. </div>
  137. <!--- MBTI (https://blog.trginternational.com/hs-fs/hubfs/images/MyersBriggsTypes.png?width=711&name=MyersBriggsTypes.png) --->
  138. <div class="col-6">
  139. <div class="p-1">
  140. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  141. <span style="color:#c4415d">MBTI</span>
  142. content</p>
  143. </div>
  144. </div>
  145. </div>
  146. <!--- MP3 imitation box --->
  147. <div class="card bg-faded rounded-0 border-0 mt-2 ml-5 mr-4" style="background-color:rgba(196,65,93,0.5); border-radius:45px; height:30px">
  148. <!--- Play button, song name/artist --->
  149. <p style="font-size:25px"><i class="fa-solid fa-circle-play" style="font-size:30px"></i> song name - artist name</p>
  150. <!--- Video embed over play button (change "VIDEOID" to the last jumble of characters at the end of at YT link, for example: dQw4w9WgXcQ) --->
  151. <iframe src="https://www.youtube-nocookie.com/embed/VIDEOID?modestbranding=0" class="border-0" style="position: absolute; top:0px; left:0px; height: 30px; width: 30px; z-index: 9; opacity: 0;"></iframe>
  152. </div>
  153. </div>
  154. <!---- Second tab - personality ---->
  155. <div class="tab-pane fade p-1" id="tab2">
  156. <!--- Corner icon --->
  157. <a style="position:absolute; top:0px; right:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(5deg)"><i class="fa-solid fa-user"></i> </a>
  158. <!--- Header & divider --->
  159. <p class="ml-5" style="font-size:40px">PERSONALITY</p>
  160. <div class="ml-5" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  161. </div>
  162. <div class="row no-gutters mt-1 ml-5">
  163. <!--- Intelligence level --->
  164. <div class="col-6 p-1 pl-2" style="margin-top:10px;">
  165. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  166. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  167. <span>Dimwitted</span>
  168. Intelligent</p>
  169. <!-- Percent bar -->
  170. <div class="progress bg-dark rounded">
  171. <div class="progress-bar"
  172. style="width: 50%;
  173. height: 12px; background-color: #c4415d">
  174. </div>
  175. </div>
  176. </div>
  177. <!-- Ratio -->
  178. <p style="text-align:center; margin-top:-30px; font-size:12px; opacity:0.5;">50/50</p>
  179. </div>
  180. <!--- Charisma level --->
  181. <div class="col-6 p-1 pl-2" style="margin-top:10px;">
  182. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  183. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  184. <span>Unalluring</span>
  185. Charismatic</p>
  186. <!-- Percent bar -->
  187. <div class="progress bg-dark rounded">
  188. <div class="progress-bar"
  189. style="width: 50%;
  190. height: 12px; background-color: #c4415d">
  191. </div>
  192. </div>
  193. </div>
  194. <!-- Ratio -->
  195. <p style="text-align:center; margin-top:-30px; font-size:12px; opacity:0.5;">50/50</p>
  196. </div>
  197. <!--- Generosity level --->
  198. <div class="col-6 p-1 pl-2" style="margin-top:10px;">
  199. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  200. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  201. <span>Greedy</span>
  202. Generous</p>
  203. <!-- Percent bar -->
  204. <div class="progress bg-dark rounded">
  205. <div class="progress-bar"
  206. style="width: 50%;
  207. height: 12px; background-color: #c4415d">
  208. </div>
  209. </div>
  210. </div>
  211. <!-- Ratio -->
  212. <p style="text-align:center; margin-top:-30px; font-size:12px; opacity:0.5;">50/50</p>
  213. </div>
  214. <!--- Consideration level --->
  215. <div class="col-6 p-1 pl-2" style="margin-top:10px;">
  216. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  217. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  218. <span>Indifferent</span>
  219. Considerate</p>
  220. <!-- Percent bar -->
  221. <div class="progress bg-dark rounded">
  222. <div class="progress-bar"
  223. style="width: 50%;
  224. height: 12px; background-color: #c4415d">
  225. </div>
  226. </div>
  227. </div>
  228. <!-- Ratio -->
  229. <p style="text-align:center; margin-top:-30px; font-size:12px; opacity:0.5;">50/50</p>
  230. </div>
  231. <!--- Empathy level --->
  232. <div class="col-6 p-1 pl-2" style="margin-top:10px;">
  233. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  234. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  235. <span>Cold</span>
  236. Empathetic</p>
  237. <!-- Percent bar -->
  238. <div class="progress bg-dark rounded">
  239. <div class="progress-bar"
  240. style="width: 50%;
  241. height: 12px; background-color: #c4415d">
  242. </div>
  243. </div>
  244. </div>
  245. <!-- Ratio -->
  246. <p style="text-align:center; margin-top:-30px; font-size:12px; opacity:0.5;">50/50</p>
  247. </div>
  248. <!--- Temper level --->
  249. <div class="col-6 p-1 pl-2" style="margin-top:10px;">
  250. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  251. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  252. <span>Ill tempered</span>
  253. Controlled</p>
  254. <!-- Percent bar -->
  255. <div class="progress bg-dark rounded">
  256. <div class="progress-bar"
  257. style="width: 50%;
  258. height: 12px; background-color: #c4415d">
  259. </div>
  260. </div>
  261. </div>
  262. <!-- You fell off + Ratio -->
  263. <p style="text-align:center; margin-top:-30px; font-size:12px; opacity:0.5;">50/50</p>
  264. </div>
  265. </div>
  266. <!--- Text box --->
  267. <div class="card bg-faded border-0 ml-5 p-1" style="background-color:rgba(0,0,0,0); height:115px; margin-top:30px; border-bottom-right-radius:45px; overflow-y:auto">
  268. <p style="font-size: 15px; text-align:justify">Small lil description of the character's personality. </p>
  269. </div>
  270. </div>
  271. <!----- Tab 3 - design information ----->
  272. <div class="tab-pane fade p-1" id="tab3">
  273. <!--- Corner icon --->
  274. <a style="position:absolute; top:0px; right:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(5deg)"><i class="fa-solid fa-file-pen"></i> </a>
  275. <!--- Header & divider --->
  276. <p class="ml-5" style="font-size:40px">DESIGN</p>
  277. <div class="ml-5" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  278. </div>
  279. <div class="row no-gutters ml-5 mt-2">
  280. <div class="col-5">
  281. <!--- Character reference (reccomend anthro characters/wide references for this, otherwise it'll be REALLY small --->
  282. <img class="m-auto" style="max-height:210px;" src=" IMGHERE ">
  283. <!-- Full reference gallery link -->
  284. <p style="margin-top:-30px"><a href=" LINKHERE " style="color:#fff"><i class="fa-solid fa-circle-arrow-up-right tooltipster" style="font-size:20px; opacity:0.5" title="full reference"></i></a></p>
  285. <!--- Color palette (colors can be added/removed) --->
  286. <div class="row no-gutters mt-1">
  287. <!-- Color 1 -->
  288. <div class="col">
  289. <div class="card rounded-0 border-0 p-3 bg-faded my-1" style="
  290. background-color:#fff;
  291. max-height:100px;">
  292. </div>
  293. </div>
  294. <!-- Color 2 -->
  295. <div class="col">
  296. <div class="card rounded-0 border-0 p-3 bg-faded my-1" style="
  297. background-color:#ccc;
  298. max-height:100px;">
  299. </div>
  300. </div>
  301. <!-- Color 3 -->
  302. <div class="col">
  303. <div class="card rounded-0 border-0 p-3 bg-faded my-1" style="
  304. background-color:#aaa;
  305. max-height:100px;">
  306. </div>
  307. </div>
  308. <!-- Color 4 -->
  309. <div class="col">
  310. <div class="card rounded-0 border-0 p-3 bg-faded my-1" style="
  311. background-color:#444;
  312. max-height:100px;">
  313. </div>
  314. </div>
  315. <!-- Color 5 -->
  316. <div class="col">
  317. <div class="card rounded-0 border-0 p-3 bg-faded my-1" style="
  318. background-color:#222;
  319. max-height:100px;">
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. <!--- Further details --->
  325. <div class="col-7">
  326. <div class="row no-gutters mt-2">
  327. <!-- Height (or length) -->
  328. <div class="col-12">
  329. <p class="col-12 justify-content-between" style="text-align: center; font-size: 16px;">
  330. <span style="color:#c4415d">Height</span>
  331. feet (cm)</p>
  332. </div>
  333. <!-- Weight -->
  334. <div class="col-12">
  335. <p class="col-12 justify-content-between" style="text-align: center; font-size: 16px;">
  336. <span style="color:#c4415d">Weight</span>
  337. pounds (kg)</p>
  338. </div>
  339. <!-- Species -->
  340. <div class="col-12">
  341. <p class="col-12 justify-content-between" style="text-align: center; font-size: 16px;">
  342. <span style="color:#c4415d">Species</span>
  343. content</p>
  344. </div>
  345. <!-- Designer (you can replace the link with an @, but it won't be colored) -->
  346. <div class="col-12">
  347. <p class="col-12 justify-content-between" style="text-align: center; font-size: 16px;">
  348. <span style="color:#c4415d">Designer</span>
  349. <a href=" LINKHERE " style="color:#fff">linked content</a></p>
  350. </div>
  351. </div>
  352. <!--- Design notes --->
  353. <p class="ml-1 mt-2" style="font-size:20px">Notes:</p>
  354. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:125px; border-bottom-right-radius:45px; overflow-y:auto">
  355. <ul style="font-size: 15px;">
  356. <li>this box is pretty much the same as the last one</li>
  357. <li>you write details in here</li>
  358. <li>and it scrolls when full</li>
  359. <li>but it scrolls real weird</li>
  360. </ul>
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365.  
  366. <!---- Fourth tab - physique ---->
  367. <div class="tab-pane fade p-1" id="tab4">
  368. <!--- Corner icon --->
  369. <a style="position:absolute; top:0px; right:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(5deg)"><i class="fa-solid fa-dumbbell"></i> </a>
  370. <!--- Header & divider --->
  371. <p class="ml-5" style="font-size:40px">BUILD</p>
  372. <div class="ml-5" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  373. </div>
  374. <div class="row no-gutters mt-1 ml-5">
  375. <!--- Strength level (general physical strength) --->
  376. <div class="col-6 p-1 pl-2">
  377. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  378. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  379. Strength
  380. <!-- Percent bar & percentage -->
  381. <span style="opacity:0.5;">50%</span></p>
  382. <div class="progress bg-dark rounded">
  383. <div class="progress-bar" style="
  384. width: 50%;
  385. height: 12px; background-color: #c4415d">
  386. </div>
  387. </div>
  388. </div>
  389. </div>
  390. <!--- Agility level (flexibility and speed) --->
  391. <div class="col-6 p-1 pl-2">
  392. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  393. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  394. Agility
  395. <!-- Percent bar & percentage -->
  396. <span style="opacity:0.5;">50%</span></p>
  397. <div class="progress bg-dark rounded">
  398. <div class="progress-bar" style="
  399. width: 50%;
  400. height: 12px; background-color: #c4415d">
  401. </div>
  402. </div>
  403. </div>
  404. </div>
  405. <!--- Endurance level (toughness and energy) --->
  406. <div class="col-6 p-1 pl-2">
  407. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  408. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  409. Endurance
  410. <!-- Percent bar & percentage -->
  411. <span style="opacity:0.5;">50%</span></p>
  412. <div class="progress bg-dark rounded">
  413. <div class="progress-bar" style="
  414. width: 50%;
  415. height: 12px; background-color: #c4415d">
  416. </div>
  417. </div>
  418. </div>
  419. </div>
  420. <!--- Defense level --->
  421. <div class="col-6 p-1 pl-2">
  422. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  423. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  424. Defense
  425. <!-- Percent bar & percentage -->
  426. <span style="opacity:0.5;">50%</span></p>
  427. <div class="progress bg-dark rounded">
  428. <div class="progress-bar" style="
  429. width: 50%;
  430. height: 12px; background-color: #c4415d">
  431. </div>
  432. </div>
  433. </div>
  434. </div>
  435. <!--- Magic level --->
  436. <div class="col-6 p-1 pl-2">
  437. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  438. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  439. Magic
  440. <!-- Percent bar & percentage -->
  441. <span style="opacity:0.5;">50%</span></p>
  442. <div class="progress bg-dark rounded">
  443. <div class="progress-bar" style="
  444. width: 50%;
  445. height: 12px; background-color: #c4415d">
  446. </div>
  447. </div>
  448. </div>
  449. </div>
  450. <!--- Wit level (quick-thinkingness, innovation) --->
  451. <div class="col-6 p-1 pl-2">
  452. <div class="card bg-faded border-0" style="background-color:rgba(0,0,0,0);">
  453. <p class="col-12 justify-content-between" style="text-align: center; font-size: 15px;">
  454. Wit
  455. <!-- Percent bar & percentage -->
  456. <span style="opacity:0.5;">50%</span></p>
  457. <div class="progress bg-dark rounded">
  458. <div class="progress-bar" style="
  459. width: 50%;
  460. height: 12px; background-color: #c4415d">
  461. </div>
  462. </div>
  463. </div>
  464. </div>
  465. </div>
  466. <div class="row no-gutters mt-2">
  467. <!--- Strengths --->
  468. <div class="col-6">
  469. <p class="ml-5" style="font-size:20px">Strengths:</p>
  470. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; overflow-y:auto">
  471. <ul class="ml-2" style="font-size: 15px;">
  472. <li>basically what</li>
  473. <li>makes your character</li>
  474. <li>so immensely powerful</li>
  475. </ul>
  476. </div>
  477. </div>
  478. <!--- Weaknesses --->
  479. <div class="col-6">
  480. <p class="ml-5" style="font-size:20px">Weaknesses:</p>
  481. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; border-bottom-right-radius:45px; overflow-y:auto">
  482. <ul class="ml-2" style="font-size: 15px;">
  483. <li>what makes your</li>
  484. <li>character a</li>
  485. <li>weak lil idiot</li>
  486. </ul>
  487. </div>
  488. </div>
  489. </div>
  490. </div>
  491. </div>
  492. </div>
  493.  
  494. <!----- First tab buttons ----->
  495. <ul class="nav nav-tabs card-header-tabs row no-gutters" style="margin-top:-350px; margin-left:-30px">
  496. <li class="col-12"><a class="btn bg-danger btn-block rounded-circle text-white active" data-toggle="tab" href="#tab1" style="height:75px; width:75px"><i class="fa-solid fa-circle-quarter mt-2 mx-auto" style="font-size:38px"></i></a></li>
  497. <li class="col-12 mt-3"><a class="btn bg-danger btn-block rounded-circle text-white" data-toggle="tab" href="#tab2" style="height:75px; width:75px"><i class="fa-solid fa-circle-half mt-2 mx-auto" style="font-size:38px"></i></a></li>
  498. <li class="col-12 mt-3"><a class="btn bg-danger btn-block rounded-circle text-white" data-toggle="tab" href="#tab3" style="height:75px; width:75px"><i class="fa-solid fa-circle-three-quarters mt-2 mx-auto" style="font-size:38px"></i></a></li>
  499. <li class="col-12 mt-3"><a class="btn bg-danger btn-block rounded-circle text-white" data-toggle="tab" href="#tab4" style="height:75px; width:75px"><i class="fa-solid fa-circle mt-2 mx-auto" style="font-size:38px"></i></a></li>
  500. </ul>
  501. </div>
  502. </div>
  503.  
  504. <!--- Divider --->
  505. <div class="my-2" style="border-top:5px solid #221b30; width:700px; margin-left:200px">
  506. </div>
  507.  
  508. <!----- Row of aesthetic images ----->
  509. <div class="row no-gutters">
  510. <!--- Image one --->
  511. <div class="col-4">
  512. <div class="card ml-3 rounded-0" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:100px; border:5px solid #221b30; border-bottom-left-radius:45px; border-top-left-radius:45px;">
  513. </div>
  514. </div>
  515. <!--- Image two --->
  516. <div class="col-4">
  517. <div class="card rounded-0" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:100px; border:5px solid #221b30;">
  518. </div>
  519. </div>
  520. <!--- Image three --->
  521. <div class="col-4">
  522. <div class="card mr-3 rounded-0" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:100px; border:5px solid #221b30; border-bottom-right-radius:45px; border-top-right-radius:45px;">
  523. </div>
  524. </div>
  525. </div>
  526.  
  527. <!--- Divider --->
  528. <div class="mx-auto my-2" style="border-top:5px solid #221b30; width:700px;">
  529. </div>
  530.  
  531. <!----- Second tab block ----->
  532. <div class="row no-gutters">
  533. <div class="col-8 p-1">
  534. <div class="card bg-faded rounded-0" style="background-color:rgba(0,0,0,0.8); border-radius:45px; border:5px solid #221b30; height:350px">
  535. <div class="tab-content">
  536. <!---- First tab - story ---->
  537. <div class="tab-pane fade active show p-1" id="tab5">
  538. <!--- Corner icon --->
  539. <a style="position:absolute; top:0px; left:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(-5deg)"><i class="fa-solid fa-book-open-cover"></i> </a>
  540. <!--- Header & divider --->
  541. <p class="mr-5" style="font-size:40px; text-align:right">STORY</p>
  542. <div class="mr-5 pull-right" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  543. </div>
  544. <!--- Text box --->
  545. <div class="card bg-faded border-0 mr-5 mt-2 p-1" style="background-color:rgba(0,0,0,0); height:260px; border-bottom-left-radius:45px; overflow-y:auto">
  546. <!-- First section -->
  547. <p class="mr-5 mb-0" style="font-size:20px; color:#c4415d">header 1</p>
  548. <p style="font-size: 15px; text-align:justify">first line<br>
  549. second line</p>
  550. <!-- Second section -->
  551. <p class="mr-5 mb-0" style="font-size:20px; color:#c4415d">header 2</p>
  552. <p style="font-size: 15px; text-align:justify">words</p>
  553. </div>
  554. </div>
  555. <!---- Second tab - interests & hobbies ---->
  556. <div class="tab-pane fade p-1" id="tab6">
  557. <!--- Corner icon --->
  558. <a style="position:absolute; top:0px; left:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(-5deg)"><i class="fa-solid fa-thumbs-up"></i> </a>
  559. <!--- Header & divider --->
  560. <p class="mr-5" style="font-size:40px; text-align:right">INTERESTS</p>
  561. <div class="mr-5 pull-right" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  562. </div>
  563. <div class="row no-gutters mt-2 mr-5">
  564. <!--- Likes --->
  565. <div class="col-6">
  566. <p style="font-size:20px">Likes:</p>
  567. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; overflow-y:auto">
  568. <ul class="ml-1" style="font-size: 15px;">
  569. <li>stuff that</li>
  570. <li>your character</li>
  571. <li>enjoys doing</li>
  572. </ul>
  573. </div>
  574. </div>
  575. <!--- Dislikes --->
  576. <div class="col-6">
  577. <p style="font-size:20px">Dislikes:</p>
  578. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; border-bottom-right-radius:45px; overflow-y:auto">
  579. <ul class="ml-1" style="font-size: 15px;">
  580. <li>stuff that</li>
  581. <li>your character</li>
  582. <li>does not like doing</li>
  583. </ul>
  584. </div>
  585. </div>
  586. <!--- Hobbies --->
  587. <div class="col-12">
  588. <p style="font-size:20px">Hobbies:</p>
  589. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; border-bottom-right-radius:45px; overflow-y:auto">
  590. <ul class="ml-1" style="font-size: 15px;">
  591. <li>some more specific activities that your character</li>
  592. <li>chooses to often partake in as a pastime</li>
  593. <li>or idk for some other purpose that you can think of</li>
  594. </ul>
  595. </div>
  596. </div>
  597. </div>
  598. </div>
  599.  
  600. <!---- Third tab - trivia ---->
  601. <div class="tab-pane fade p-1" id="tab7">
  602. <!--- Corner icon --->
  603. <a style="position:absolute; top:0px; left:20px; font-size:120px; opacity:0.1; color:#fff; transform:rotate(-5deg)"><i class="fa-solid fa-seal-question"></i> </a>
  604. <!--- Header & divider --->
  605. <p class="mr-5" style="font-size:40px; text-align:right">TRIVIA</p>
  606. <div class="mr-5 pull-right" style="border-top:1px solid #fff; opacity:0.5; width:400px;">
  607. </div>
  608. <!--- Favorite food --->
  609. <div class="row no-gutters mt-2 mr-5">
  610. <div class="col-6">
  611. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  612. <span style="color:#c4415d">Fav food</span>
  613. content</p>
  614. </div>
  615. <!--- Favorite animal --->
  616. <div class="col-6">
  617. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  618. <span style="color:#c4415d">Fav animal</span>
  619. content</p>
  620. </div>
  621. <!--- Favorite plant --->
  622. <div class="col-6">
  623. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  624. <span style="color:#c4415d">Fav plant</span>
  625. content</p>
  626. </div>
  627. <!--- Favorite season --->
  628. <div class="col-6">
  629. <p class="col-12 justify-content-between" style="text-align: center; font-size: 18px;">
  630. <span style="color:#c4415d">Fav season</span>
  631. content</p>
  632. </div>
  633. </div>
  634. <!--- Extra details list --->
  635. <div class="card bg-faded border-0 p-1 mt-3 mr-5" style="background-color:rgba(0,0,0,0); height:190px; overflow-y:auto; border-bottom-left-radius:45px;">
  636. <ul class="ml-2" style="font-size: 15px;">
  637. <li>some other small details on your character that don't fit elsewhere</li>
  638. <li>like maybe what your character was inspired by</li>
  639. <li>or maybe some old history lessons on how your character evolved over time</li>
  640. <li>write as much as you like cus, again, box scroll</li>
  641. </ul>
  642. </div>
  643. </div>
  644. </div>
  645. </div>
  646. </div>
  647.  
  648. <!---- Second side pagedoll (flipped) ---->
  649. <div class="col-4 p-1">
  650. <img class="m-auto fa-flip-horizontal" style="max-height:350px;" src=" IMGHERE ">
  651. </div>
  652.  
  653. <!----- Second tab buttons ----->
  654. <ul class="nav nav-tabs card-header-tabs row no-gutters pull-right" style="margin-top:-340px; margin-left:580px">
  655. <li class="col-12 mt-3"><a class="btn bg-danger btn-block rounded-circle text-white active" data-toggle="tab" href="#tab5" style="height:75px; width:75px"><i class="fa-solid fa-circle-up-right mt-2 mx-auto" style="font-size:38px"></i></a></li>
  656. <li class="col-12 mt-3"><a class="btn bg-danger btn-block rounded-circle text-white" data-toggle="tab" href="#tab6" style="height:75px; width:75px"><i class="fa-solid fa-circle-down mt-2 mx-auto" style="font-size:38px"></i></a></li>
  657. <li class="col-12 my-3"><a class="btn bg-danger btn-block rounded-circle text-white" data-toggle="tab" href="#tab7" style="height:75px; width:75px"><i class="fa-solid fa-circle-up-left mt-2 mx-auto" style="font-size:38px"></i></a></li>
  658. </ul>
  659. </div>
  660.  
  661. <!--- Divider --->
  662. <div class="my-2" style="border-top:5px solid #221b30; width:700px; margin-left:50px">
  663. </div>
  664.  
  665. <!----- Extended aesthetic image ----->
  666. <div class="card mx-3 rounded-0" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:100px; border:5px solid #221b30; border-radius:45px;">
  667. </div>
  668.  
  669. <!--- Divider --->
  670. <div class="mx-auto my-2" style="border-top:5px solid #221b30; width:700px;">
  671. </div>
  672.  
  673. <!----- Relationships ----->
  674. <div class="row no-gutters">
  675. <!---- Left box - relationship one ---->
  676. <div class="col-6 p-1 mt-3">
  677. <div class="card bg-faded rounded-0" style="background-color:rgba(0,0,0,0.8); border-radius:45px; border:5px solid #221b30; height:250px">
  678. <div class="row no-gutters">
  679. <div class="col-4 p-1">
  680. <!--- Icon image --->
  681. <div class="card rounded-circle ml-3" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:150px; width:150px; margin-top:-25px; border:5px solid #221b30">
  682. <!--- Gradient over image --->
  683. <div class="card bg-faded rounded-circle border-0 p-1" style="background:linear-gradient(to top,rgba(255,255,255,0.5),rgba(255,255,255,0)); height:200px">
  684. </div>
  685. </div>
  686. </div>
  687. <div class="col-8 p-1">
  688. <!--- Character name + link and relation --->
  689. <p class="col-12 justify-content-between mt-2" style="text-align: center; font-size: 30px;">
  690. <a href=" link " style="color:#c4415d">NAME</a>
  691. <span style="font-size:20px">relation</span></p>
  692. <!--- Star rating (fa-regular for empty, fa-solid for filled) --->
  693. <p style="text-align:center; font-size:30px">
  694. <i class="fa-solid fa-star"></i>
  695. <i class="fa-solid fa-star"></i>
  696. <i class="fa-regular fa-star"></i>
  697. <i class="fa-regular fa-star"></i>
  698. <i class="fa-regular fa-star"></i>
  699. </p>
  700. </div>
  701. </div>
  702. <!--- Small description --->
  703. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; border-bottom-right-radius:45px; border-bottom-left-radius:45px; overflow-y:auto">
  704. <p class="mb-3" style="font-size: 15px; text-align:justify">Small description of the character's relationship with this other person.</p>
  705. </div>
  706. </div>
  707. </div>
  708. <!---- Right box - relationship two ---->
  709. <div class="col-6 p-1">
  710. <div class="card bg-faded rounded-0" style="background-color:rgba(0,0,0,0.8); border-radius:45px; border:5px solid #221b30; height:250px">
  711. <!--- Small description --->
  712. <div class="card bg-faded border-0 p-1" style="background-color:rgba(0,0,0,0); height:100px; border-top-right-radius:45px; border-top-left-radius:45px; overflow-y:auto">
  713. <p class="mt-3" style="font-size: 15px; text-align:justify">description</p>
  714. </div>
  715. <div class="row no-gutters">
  716. <div class="col-8 p-1 mt-3">
  717. <!--- Star rating --->
  718. <p style="text-align:center; font-size:30px">
  719. <i class="fa-regular fa-star"></i>
  720. <i class="fa-regular fa-star"></i>
  721. <i class="fa-solid fa-star"></i>
  722. <i class="fa-solid fa-star"></i>
  723. <i class="fa-solid fa-star"></i>
  724. </p>
  725. <!--- Character name + link and relation --->
  726. <p class="col-12 justify-content-between mt-2" style="text-align: center; font-size: 30px;">
  727. <span style="font-size:20px">relation</span>
  728. <a href=" link " style="color:#c4415d">NAME</a></p>
  729. </div>
  730. <div class="col-4 p-1">
  731. <!--- Icon image --->
  732. <div class="card rounded-circle" style="background-image:url( IMGHERE ); background-size:cover; background-position: center; height:150px; width:150px; margin-bottom:-25px; margin-left:-20px; border:5px solid #221b30">
  733. <!--- Gradient over image --->
  734. <div class="card bg-faded rounded-circle border-0 p-1" style="background:linear-gradient(to top,rgba(255,255,255,0.5),rgba(255,255,255,0)); height:200px">
  735. </div>
  736. </div>
  737. </div>
  738. </div>
  739. </div>
  740. </div>
  741. </div>
  742. <!--- Divider --->
  743. <div class="mx-auto mb-2" style="border-top:5px solid #221b30; width:700px; margin-top:-8px;">
  744. </div>
  745. <!--code credit (do not remove/alter)-->
  746. <span style="text-align:center"><a style="font-size:13px; color:#c4415d" href="https://toyhou.se/MCDogResource"><i class="fas fa-bullseye"></i> Code by maniCARNY</a>
  747. </div>
  748. </div>
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!