API tools faq
paste
Advertisement
grogs

CP Character TH 1.0

grogs
Jun 21st, 2021
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.30 KB | None | 0 0
raw download clone embed print report
  1. <!-- contains everything -->
  2. <div class="container mt-5 p-0" style="color:#f1f1f1;font-family:Montserrat, Calibri, 'Trebuchet MS', sans-serif;font-size:.9em;">
  3.  
  4. <!-- BACKGROUND IMAGE -->
  5. <div class="card border-0 p-3 h-100 bg-faded rounded-1" style="background-image:url('https://i.imgur.com/n697ZDz.jpg');background-size:cover;background-blend-mode:normal;background-color:#444;box-shadow:5px 5px 8px 2px rgba(0,0,0,0.3);">
  6.  
  7. <div class="row h-100 no-gutters">
  8.  
  9.  
  10. <!--LEFT COLUMN-->
  11. <div class="col-md-3 mb-2 mb-md-0 clearfix">
  12. <div class="card h-100 py-3 px-4 mx-auto border-0 rounded-0" style="height:650px;background-color:#1F2221;">
  13. <div class="border-0 text-center h-100 mx-auto flex-column my-auto justify-content-center">
  14.  
  15. <!-- ID -->
  16. <h1 class="mb-0 mt-2 display-3" style="font-variant:small-caps;color:#3876AE;letter-spacing:2px;font-family:Cinzel, serif;">
  17.  
  18. #---
  19.  
  20. </h1>
  21. <a href="https://sites.google.com/view/cafe-phantasia/home"><i class="fal fa-leaf mb-4" style="font-size:1.5em;"></i></a>
  22.  
  23. <!-- avatar, must be square and will size it correctly, but it would stretch any square below 215px x 215px -->
  24. <img class="rounded text-center mx-auto" src="https://cdn.discordapp.com/attachments/844744619174264852/853026893111754772/TH_ID_-_Mark_Hamill.png" style="max-width:215px;min-width:215px;" alt="character avatar">
  25.  
  26.  
  27. <h1 class="mb-0 mt-2 display-3" style="font-variant:small-caps;color:#3876AE;letter-spacing:2px;font-family:Cinzel, serif;">
  28.  
  29. Mark
  30.  
  31. </h1>
  32.  
  33.  
  34. <!-- Char full name, gender, pronouns, and age. change link under pronouns to your characters.-->
  35.  
  36. <div class="row mt-2 mb-1 justify-content-between text-left" style="font-size:16px;letter-spacing:1px;font-variant:small-caps;line-height:34px;">
  37. <!-- Char info -->
  38. <div class="col-sm-12 px-md-3 px-2">
  39.  
  40. <span style="font-size:17px;font-weight:600;color:#61B8DB;">Name</span>
  41. <span class="pull-right">Mark R. Hamill</span>
  42.  
  43. </div>
  44. <div class="col-sm-12 px-md-3 px-2">
  45.  
  46. <span style="font-size:17px;font-weight:600;color:#61B8DB;">Gender</span>
  47. <span class="pull-right">INFO</span>
  48.  
  49. </div>
  50. <div class="col-sm-12 px-md-3 px-2">
  51.  
  52. <span style="font-size:17px;font-weight:600;color:#61B8DB;">Pronouns</span>
  53. <span class="pull-right">pro/<a href="https://pronouny.xyz/">noun</a></span>
  54.  
  55. </div>
  56.  
  57. <div class="col-sm-12 px-md-3 px-2">
  58.  
  59. <span style="font-size:17px;font-weight:600;color:#61B8DB;">Age</span>
  60. <span class="pull-right">INFO</span>
  61.  
  62. </div>
  63. </div>
  64.  
  65. <!--Info, change links to your characters residential papers and DTV profile -->
  66. <div class="mb-0 mt-3" style="font-size:26px;margin-bottom:0px;">
  67.  
  68.  
  69. <span class="mx-3" data-placement="bottom" data-toggle="tooltip" title="Residential Papers">
  70.  
  71. <a href="https://toyhou.se/11149564.test-page/11500175.fart">
  72.  
  73. <i class="fas fa-info-circle fa-fw"></i></a></span>
  74. <span class="mx-2" data-placement="bottom" data-toggle="tooltip" title="DTV Profile">
  75.  
  76. <a href="https://toyhou.se/11149564.test-page/11500175.fart">
  77.  
  78. <i class="fas fa-dice-d20 fa-fw"></i></a></span>
  79.  
  80. </div>
  81.  
  82. </div>
  83. </div>
  84. </div>
  85.  
  86.  
  87. <!-- RIGHT COLUMN, this contains all the tabs -->
  88. <div class="col-md-9 pl-md-2">
  89. <div class="card rounded-0 border-0 mt-0 px-2 py-3" style="height:650px;overflow-y:scroll;scrollbar-width:none;background-color:rgba(31,34,33,0.88);">
  90.  
  91. <!-- NAVIGATION, DNI -->
  92. <div class="center">
  93. <ul class="nav nav-pills nav-fill card-header-tabs row ml-1 mr-1 mt-1 mb-3 py-2">
  94. <li class="nav-item pl-1 pr-1">
  95. <a class="nav-link text-white" style="background-color:#61B8DB;" data-toggle="pill" href="#overview">
  96.  
  97. <i class="far fa-user"></i>
  98.  
  99. </a></li>
  100.  
  101. <li class="nav-item pl-1 pr-1">
  102. <a class="nav-link text-white" style="background-color:#61B8DB;" data-toggle="pill" href="#about">
  103.  
  104. <i class="far fa-bookmark"></i>
  105.  
  106. </a></li>
  107.  
  108. <li class="nav-item pl-1 pr-1">
  109. <a class="nav-link text-white" style="background-color:#61B8DB;" data-toggle="pill" href="#personality">
  110.  
  111. <i class="far fa-balance-scale"></i>
  112.  
  113. </a></li>
  114.  
  115. <li class="nav-item pl-1 pr-1">
  116. <a class="nav-link text-white" style="background-color:#61B8DB;" data-toggle="pill" href="#story">
  117.  
  118. <i class="far fa-book"></i>
  119.  
  120. </a></li>
  121. </ul>
  122. </div>
  123.  
  124. <!-- beginning of tabs -->
  125. <div class="tab-content">
  126.  
  127.  
  128. <!-- [ TAB 1. OVERVIEW ] -->
  129. <!-- contains: an about, quote, physical description in paragraph form and bullet points -->
  130. <div class="tab-pane fade show active" id="overview">
  131.  
  132. <!-- about -->
  133. <div class="row no-gutters">
  134. <div class="col-md-12 px-5 pb-1 pt-1 border-0 rounded-0" style="background-color:transparent;">
  135.  
  136. <h1 class="ml-n1 mt-0 display-4" style="color:#3876AE;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;">About <i class="fal fa-star pull-right fa-sm mt-1" style="color:#61B8DB;"></i></h1>
  137.  
  138. <p class="text-muted text-center" style="margin-top: 10px">
  139. <i class="fas fa-quote-left pull-left"></i>
  140. <i>
  141.  
  142. insert amazing quote here...
  143.  
  144. </i>
  145. <i class="fas fa-quote-right pull-right"></i>
  146. </p>
  147. <div class="text-justify pt-1" style="letter-spacing:1.5px;">
  148.  
  149. <p>
  150.  
  151. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat.
  152. Phasellus sit amet nibh sapien. Pellentesque mattis varius risus, et facilisis nunc commodo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare orci tempor tortor
  153. sollicitudin finibus.
  154.  
  155. </p>
  156.  
  157. </div>
  158.  
  159. </div>
  160. </div>
  161.  
  162.  
  163. <!-- Aesthetic, images should be sized 300px wide and 150px tall -->
  164. <div class="row no-gutters mb-4 mt-3 justify-content-center mx-2">
  165.  
  166. <div class="col-3 text-center px-2"><img class="rounded" src="https://i.imgur.com/3xNZ3yi.jpg?1" alt="aesthetic"></div>
  167. <div class="col-3 text-center px-2"><img class="rounded" src="https://i.imgur.com/ZEXXZKj.jpg?1" alt="aesthetic 1"></div>
  168. <div class="col-3 text-center px-2"><img class="rounded" src="https://i.imgur.com/4Nr61gz.jpg?1" alt="aesthetic 2"></div>
  169. <div class="col-3 text-center px-2"><img class="rounded" src="https://i.imgur.com/NsO87AO.jpg?1" alt="aestheric 3"></div>
  170.  
  171. </div>
  172.  
  173. <!-- Physical Description paragraph and bullet points -->
  174. <div class="row no-gutters">
  175.  
  176. <div class="col-md-8 mt-2 mt-md-0 pr-md-3">
  177. <div class="card px-3 pb-3 pt-1 border-0 rounded-0" style="background-color:transparent;">
  178. <h1 class="ml-n1 mt-0 display-4" style="color:#3876AE;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;">Physical Description <i class="fal fa-star pull-right fa-sm mt-1" style="color:#61B8DB;"></i></h1>
  179.  
  180. <div class="text-justify pt-1" style="letter-spacing:1.5px;">
  181. <p>
  182. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien. Pellentesque mattis varius risus, et facilisis nunc commodo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare orci tempor tortor sollicitudin finibus.
  183. </p>
  184. <p>
  185. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis.
  186. </p>
  187. </div>
  188.  
  189. </div>
  190. </div>
  191.  
  192. <!-- Bullet Points -->
  193. <div class="col-md-4 pr-0 pr-md-3 mt-2 mt-md-0">
  194. <div class="card pt-1 pb-2 h-100 border-0 rounded-0" style="background-color:transparent;">
  195. <h1 class="mb-2 mt-0 display-4 ml-n1" style="color:#3876AE;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;">Info <i class="fal fa-chart-bar pull-right fa-sm mt-1" style="color:#61B8DB;"></i></h1>
  196.  
  197. <div class="row no-gutters mt-2" style="font-size:15px;letter-spacing:1px;font-variant:small-caps;">
  198.  
  199. <div class="col-md-12 pb-2">
  200. <div class="d-flex justify-content-between">
  201.  
  202. <span style="font-weight:600;color:#61B8DB;">Height</span>
  203. <span class="pull-right">5'7"</span>
  204.  
  205. </div>
  206. </div>
  207.  
  208. <div class="col-md-12 pb-2">
  209. <div class="d-flex justify-content-between">
  210.  
  211. <span style="font-weight:600;color:#61B8DB;">Weight</span>
  212. <span class="pull-right">134 lbs.</span>
  213.  
  214. </div>
  215. </div>
  216.  
  217. <div class="col-md-12 pb-2">
  218. <div class="d-flex justify-content-between">
  219.  
  220. <span style="font-weight:600;color:#61B8DB;">Eye Color</span>
  221. <span class="pull-right">Hazel</span>
  222.  
  223. </div>
  224. </div>
  225.  
  226. <div class="col-md-12 pb-2">
  227. <div class="d-flex justify-content-between">
  228.  
  229. <span style="font-weight:600;color:#61B8DB;">Hair Color</span>
  230. <span class="pull-right">Yellow [dyed]</span>
  231.  
  232. </div>
  233. </div>
  234.  
  235. <div class="col-md-12 pb-2">
  236. <div class="d-flex justify-content-between">
  237.  
  238. <span style="font-weight:600;color:#61B8DB;">Face Shape</span>
  239. <span class="pull-right">Heart</span>
  240.  
  241. </div>
  242. </div>
  243.  
  244. <div class="col-md-12 pb-2">
  245. <div class="d-flex justify-content-between">
  246.  
  247. <span style="font-weight:600;color:#61B8DB;">Body Shape</span>
  248. <span class="pull-right">Pear</span>
  249.  
  250. </div>
  251. </div>
  252.  
  253. <div class="col-md-12 pb-2">
  254. <div class="d-flex justify-content-between">
  255.  
  256. <span style="font-weight:600;color:#61B8DB;">idk</span>
  257. <span class="pull-right">what</span>
  258.  
  259. </div>
  260. </div>
  261.  
  262. </div>
  263. </div>
  264. </div>
  265.  
  266. </div>
  267. </div>
  268.  
  269.  
  270.  
  271.  
  272. <!-- [ TAB 2. LIFE AND DETAILS ] -->
  273. <!-- contains: Wish, Birthday, Zodiac, Alignment, Orientation, Hobbies, Occupation & Trivia.-->
  274. <div class="tab-pane fade" id="about">
  275. <div class="row no-gutters">
  276. <div class="col-md-12 px-4 border-0 rounded-0" style="background-color:transparent;">
  277.  
  278. <!-- wish, change the TITLE under SPAN to enter the basic wish or undecided, there is a paragraph below to explain it in depth -->
  279. <div class="d-flex justify-content-center rounded bg-light my-2 mx-5" style=" ont-variant:small-caps;">
  280. <a class="btn pt-2 pb-2 w-100" data-toggle="collapse" href="#wish" style="font-size:22px;">Wish</a>
  281.  
  282. <span class="mx-2 my-2" data-placement="bottom" data-toggle="tooltip" title="BE A FROG"><a href="#" style="font-size:20px;"><i class="fas fa-magic"></i></a></span>
  283.  
  284. </div>
  285. <div class="collapse clearfix" id="wish">
  286. <span class="mt-3" style="color:8c8c8c;"><i class="fas fa-quote-left pull-left"></i></span>
  287. <div class="card card-body mt-3 bg-transparent text-center" style="margin-left:75px;margin-right:75px;color:8d8d8d;">
  288. <i>
  289.  
  290. my wish is simple, I only want to be .... a frog.
  291.  
  292. </i>
  293. </div>
  294. <span style="color:8c8c8c;"><i class="fas fa-quote-right pull-right"></i></span>
  295. </div>
  296.  
  297.  
  298. <div class="row">
  299.  
  300. <!--Birthday-->
  301. <div class="col-sm-6 clearfix mt-4 w-50" style="border-right:2px solid #3876AE;border-bottom:1px solid #3876AE;">
  302.  
  303. <div class="pb-2">
  304. <span class="pull-left" style="font-variant:small-caps;font-size:22px;color:#61B8DB;">Birthday</span>
  305. </div>
  306.  
  307. <span class="pull-right">dd.mm.yy</span>
  308.  
  309. </div>
  310.  
  311. <!--Zodiac / starsign -->
  312. <div class="col-sm-6 clearfix mt-4 w-50" style="border-bottom:1px solid #3876AE;">
  313.  
  314. <div class="pb-2">
  315. <span class="pull-left" style="font-variant:small-caps;font-size:22px;color:#61B8DB;">Zodiac</span>
  316. </div>
  317.  
  318. <span class="pull-right">Aries</span>
  319.  
  320. </div>
  321. </div>
  322.  
  323. <div class="row pb-4" style="border-bottom:2px solid #3876AE;">
  324.  
  325. <!-- Alignment -->
  326. <div class="col-sm-6 clearfix mt-0 w-50" style="border-right:2px solid #3876AE;border-top:1px solid #3876AE">
  327.  
  328. <div class="pb-2">
  329. <span class="pull-left" style="font-variant:small-caps;font-size:22px;color:#61B8DB;">Alignment</span>
  330. </div>
  331.  
  332. <span class="pull-right">Chaotic Good</span>
  333.  
  334. </div>
  335.  
  336. <!-- Orientation -->
  337. <div class="col-sm-6 clearfix mt-0 w-50" style="border-top:1px solid #3876AE">
  338.  
  339. <div class="pb-2">
  340. <span class="pull-left" style="font-variant:small-caps;font-size:22px;color:#61B8DB;">Orientation</span>
  341. </div>
  342.  
  343. <span class="pull-right">Gay</span>
  344.  
  345. </div>
  346. </div>
  347.  
  348.  
  349. <!-- row contains Hobbies, Occupation, Trivia -->
  350. <div class="row">
  351. <div class="col-sm-12">
  352.  
  353. <h1 class="pl-2 pt-2 display-4" style="font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;color:#3876AE;">Hobbies <i class="fal fa-star pull-right fa-sm" style="color:#61B8DB;"></i></h1>
  354.  
  355. <!-- Hobbies-->
  356. <div class="col-sm-12 pr-1">
  357. <ul class="p-1 m-0" style="font-size:15px;color:#3876AE;">
  358.  
  359. <!-- to add another hobby, copy here.... -->
  360. <li style="border-bottom:1px solid #32434a">
  361. <div class="w-100 mt-2 clearfix">
  362.  
  363. <span class="pull-left" style="font-variant:small-caps;font-size:18px;color:#61B8DB;">Hobby</span>
  364.  
  365. <div class="ml-5 pl-5">
  366. <span class="pull-right" style="font-size:13px;text-align:right;color:#ccc;">
  367.  
  368. Hobby 1 Description
  369.  
  370. </span>
  371. </div>
  372. </div>
  373. </li>
  374. <!-- to here, and paste it between the <ul></ul> tags -->
  375.  
  376. <li style="border-bottom:1px solid #32434a">
  377. <div class="w-100 mt-2 clearfix">
  378.  
  379. <span class="pull-left" style="font-variant:small-caps;font-size:18px;color:#61B8DB;">Hobby 2</span>
  380.  
  381. <div class="ml-5 pl-5">
  382. <span class="pull-right" style="font-size:13px;text-align:right;color:#ccc;">
  383.  
  384. Hobby 2 Description
  385.  
  386. </span>
  387. </div>
  388. </div>
  389. </li>
  390.  
  391. <li style="border-bottom:1px solid #32434a">
  392. <div class="w-100 mt-2 clearfix">
  393.  
  394. <span class="pull-left" style="font-variant:small-caps;font-size:18px;color:#61B8DB;">Hobby 3</span>
  395.  
  396. <div class="ml-5 pl-5">
  397. <span class="pull-right" style="font-size:13px;text-align:right;color:#ccc;">
  398.  
  399. Hobby 3 Description
  400.  
  401. </span>
  402. </div>
  403. </div>
  404. </li>
  405.  
  406. </ul>
  407. </div>
  408.  
  409. <div class="row">
  410. <div class="col-md-12 px-0 py-0">
  411. <hr class="mx-0 my-1 pr-1" style="background-color:#3876AE;height:2px;border:none;">
  412. </div>
  413. </div>
  414.  
  415. <h1 class="pl-1 pt-2 display-4" style="font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;color:#3876AE;">Occupation <i class="fal fa-star pull-right fa-sm" style="color:#61B8DB;"></i></h1>
  416.  
  417. <!-- Occupation 1 -->
  418. <div class="row">
  419. <div class="col-sm-12">
  420. <div class="w-100 clearfix pl-2" style="color:#61B8D8;">
  421. <span class="pull-left" style="font-variant:small-caps;font-size:22px;">
  422.  
  423. movie theater
  424.  
  425. </span>
  426. <div class="ml-5 pl-5">
  427. <span class="pull-right" style="font-size:15px;text-align:right;">
  428.  
  429. [ part-time ]
  430.  
  431. </span>
  432. </div>
  433. </div>
  434. </div>
  435. <div class="col-sm-12">
  436. <div class="w-100 m*-0 pl-2">
  437. <span class="text-justify" style="color:#999;letter-spacing:1.5px;">
  438.  
  439. optional description
  440.  
  441. </span>
  442. </div>
  443. </div>
  444. </div>
  445.  
  446. <!-- Occupation 2 -->
  447. <!-- add " style="display:none;" to the div below to hide this, or copy from here...-->
  448. <div class="row">
  449. <div class="col-sm-12">
  450. <div class="w-100 clearfix pl-2" style="color:#61B8D8;">
  451. <span class="pull-left" style="font-variant:small-caps;font-size:22px;">
  452.  
  453. practical joke shop
  454.  
  455. </span>
  456. <div class="ml-5 pl-5">
  457. <span class="pull-right" style="font-size:15px;text-align:right;">
  458.  
  459. [ part-time ]
  460.  
  461. </span>
  462. </div>
  463. </div>
  464. </div>
  465. <div class="col-sm-12">
  466. <div class="w-100 m*-0 pl-2">
  467. <span class="text-justify" style="color:#999;letter-spacing:1.5px;">
  468.  
  469. optional description
  470.  
  471. </span>
  472. </div>
  473. </div>
  474. </div>
  475. <!-- to here and paste directly below for another one -->
  476.  
  477. <div class="row">
  478. <div class="col-md-12 px-0 py-0 pr-1 mt-2">
  479. <hr class="mx-0 my-1" style="background-color:#3876AE;height:2px;border:none;">
  480. </div>
  481. </div>
  482. </div>
  483.  
  484. <!-- TRIVIA -->
  485. <div class="col-sm-12 mt-2">
  486. <h1 class="pl-2 mb-3 display-4" style="font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;color:#3876AE;margin:auto;">Trivia <i class="fal fa-star pull-right fa-sm" style="color:#61B8DB;"></i></h1>
  487.  
  488. <div class="row">
  489. <ul style="color:#3876AE;font-size:15px;">
  490.  
  491. <li class="mb-1 text-justify"><span style="color:#fefefe;">Fact One</span></li>
  492. <li class="mb-1 text-justify"><span style="color:#fefefe;">Fact Two</span></li>
  493. <li class="mb-1 text-justify"><span style="color:#fefefe;">Fact Three</span></li>
  494.  
  495. </ul>
  496. </div>
  497. </div>
  498.  
  499. </div>
  500.  
  501. <!-- entire tab closing tags -->
  502. </div>
  503. </div>
  504. </div>
  505.  
  506.  
  507.  
  508.  
  509.  
  510.  
  511. <!-- [ Tab 3. PERSONALITY ] -->
  512. <!-- contains: Personality Traits, an optional Paragraph area for personality, and likes/dislikes -->
  513. <div class="tab-pane fade" id="personality">
  514. <div class="row no-gutters">
  515. <div class="col-md-12 px-3 pb-1 pt-1 border-0 rounded-0" style="background-color:transparent;">
  516.  
  517. <h1 class="mt-4 mb-0 display-4" style="font-size:35px;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;color:#3876AE;">Personality Traits <i class="fal fa-star pull-right fa-sm" style="color:#61B8DB;"></i></h1>
  518.  
  519. <!-- Personality Traits -->
  520. <div class="card-deck mt-3">
  521. <div class="card p-1 rounded-0 mx-0 mb-1" style="background-color:rgba(31,34,33,0.88);">
  522. <div class="card-body">
  523. <h4 class="card-title text-center" style="color:#3876AE;font-variant:small-caps;font-size:20px;">Positive</h5>
  524.  
  525. <!-- positive -->
  526. <p class="card-text">
  527. <ul style="font-size:15px;color:#3876AE;line-height:2;">
  528.  
  529. <li><span style="color:#61B8DB;">Trait</span></li>
  530. <li><span style="color:#61B8DB;">Trait</span></li>
  531. <li><span style="color:#61B8DB;">Trait</span></li>
  532.  
  533. </ul>
  534. </p>
  535.  
  536. </div>
  537. </div>
  538. <div class="card p-1 mb-1 rounded-0" style="background-color:rgba(31,34,33,0.88);">
  539. <div class="card-body">
  540. <h4 class="card-title text-center" style="color:#3876AE;font-variant:small-caps;font-size:20px;">Neutral</h5>
  541.  
  542. <!-- neutral -->
  543. <p class="card-text">
  544. <ul style="font-size:15px;color:#3876AE;line-height:2;">
  545.  
  546. <li><span style="color:#61B8DB;">Trait</span></li>
  547. <li><span style="color:#61B8DB;">Trait</span></li>
  548. <li><span style="color:#61B8DB;">Trait</span></li>
  549.  
  550. </ul>
  551. </p>
  552. </div>
  553. </div>
  554. <div class="card p-1 rounded-0 mx-0 mb-1" style="background-color:rgba(31,34,33,0.88);">
  555. <div class="card-body">
  556. <h4 class="card-title text-center" style="color:#3876AE;font-variant:small-caps;font-size:20px;">Negative</h5>
  557.  
  558. <!--negative -->
  559. <p class="card-text">
  560. <ul style="font-size:15px;color:#3876AE;line-height:2;">
  561.  
  562. <li><span style="color:#61B8DB;">Trait</span></li>
  563. <li><span style="color:#61B8DB;">Trait</span></li>
  564. <li><span style="color:#61B8DB;">Trait</span></li>
  565.  
  566. </ul>
  567. </p>
  568. </div>
  569. </div>
  570. </div>
  571.  
  572. <div class="row no-gutters justify-content-md-center">
  573.  
  574. <!-- Personality Description... Change style="display:inline-block;" to style="display:none;" to hide -->
  575. <div class="col-sm-8" style="display:inline-block;">
  576. <h1 class="mt-4 mb-0 pr-4 display-4" style="font-size:35px;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;color:#3876AE;">About <i class="fal fa-star pull-right fa-sm" style="color:#61B8DB;"></i></h1>
  577. <p class="mt-2 pr-4 text-justify" style="letter-spacing:1.5px;">
  578.  
  579. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien. Pellentesque mattis varius risus, et facilisis nunc commodo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare orci tempor tortor sollicitudin finibus.
  580. </p>
  581. </div>
  582.  
  583. <!-- Likes / Dislikes -->
  584. <div class="col">
  585. <h1 class="mt-4 mb-0 display-4" style="font-size:35px;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;color:#3876AE;text-align:center;"><i class="fas fa-heart fa-sm"></i> <i class="fas fa-plus fa-sm"></i> <i class="far fa-heart fa-sm"></i></h1>
  586.  
  587. <div class="mt-3 p-3 rounded" style="background-image:url('https://i.imgur.com/MpPeHSd.png');border:1px solid black;max-width:300px;margin:auto;">
  588. <div class="card py-1 mx-0 pl-0 mb-3 w-100" style="background-color:rgba(230,230,230,0.83);border:1px solid #fcfcfc;">
  589. <div class="card-body">
  590. <h4 class="card-title text-center" style="color:#3876AE;font-variant:small-caps;font-size:20px;">Likes</h5>
  591.  
  592. <!-- likes -->
  593. <p class="card-text">
  594. <ul class="pr-0 mx-0" style="font-size:15px;color:#3876AE;line-height:2;">
  595.  
  596. <li><span style="color:#333;">like</span></li>
  597. <li><span style="color:#333;">like</span></li>
  598. <li><span style="color:#333;">like</span></li>
  599.  
  600. </ul>
  601. </p>
  602. </div>
  603. </div>
  604.  
  605. <div class="card py-1 mx-0 w-100" style="background-color:rgba(230,230,230,0.83);border:1px solid #fcfcfc;">
  606. <div class="card-body">
  607. <h4 class="card-title text-center" style="color:#3876AE;font-variant:small-caps;font-size:20px;">Dislikes</h5>
  608.  
  609. <!-- dislikes -->
  610. <p class="card-text">
  611. <ul class="pr-0 mx-0" style="font-size:15px;color:#3876AE;line-height:2;">
  612.  
  613. <li class="pr-0 mx-0"><span style="color:#333;">dislike</span></li>
  614. <li class="pr-0 mx-0"><span style="color:#333;">dislike</span></li>
  615. <li class="pr-0 mx-0"><span style="color:#333;">dislike</span></li>
  616.  
  617. </ul>
  618. </p>
  619. </div>
  620. </div>
  621. </div>
  622. </div>
  623. </div>
  624.  
  625. </div>
  626. </div>
  627. </div>
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634. <!-- [ TAB 4. STORY ] -->
  635. <!-- contains: Origin / home planet and Backstory-->
  636. <div class="tab-pane fade" id="story">
  637. <div class="row no-gutters">
  638. <div class="col-md-12 px-3 pb-1 pt-1 border-0 rounded-0" style="background-color:transparent;">
  639.  
  640. <div class="row">
  641. <div class="col"></div>
  642. <div class="col-sm-10">
  643. <h1 class="mt-2 display-4 mb-3" style="color:#3876AE;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;">Origin <i class="fal fa-star pull-right fa-sm mt-1" style="color:#61B8DB;"></i></h1>
  644. </div>
  645. <div class="col"></div>
  646. </div>
  647.  
  648. <div class="row">
  649. <div class="col"></div>
  650. <div class="col-sm-10">
  651. <div class="w-100 p-2 rounded-top" style="border:1px solid #ccc;background-color:rgba(31,34,33,0.88);">
  652.  
  653. <!-- World Name (in h1 below) -->
  654. <h1 class="mt-0" style="color:#ccc;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;margin:auto;">World Name <i class="fal fa-star pull-right fa-sm" style="color:#61B8DB;"></i></h1>
  655.  
  656. </div>
  657. <div class="row">
  658. <div class="col-sm-12">
  659. <div style="height:6px; background:linear-gradient(to right, #cccccc,#61B8DB)"></div>
  660. </div>
  661. </div>
  662. </div>
  663. <div class="col"></div>
  664. </div>
  665.  
  666. <div class="row">
  667. <div class="col"></div>
  668. <div class="col-sm-10">
  669.  
  670. <!-- World short Description OR your chars relationship w/ it-->
  671. <p class="p-2 py-4 w-100 text-center" style="border:1px solid #ccc;letter-spacing:1.5px;">
  672.  
  673. hallo, WELCOME TO MY CLUB WELCOME TO MY CLUB WELCOME SQUIDWARD WELCOME SQUIDWARD
  674.  
  675. </p>
  676. </div>
  677. <div class="col"></div>
  678. </div>
  679.  
  680. <div class="row">
  681. <div class="col"></div>
  682. <div class="col-sm-10">
  683.  
  684. <!-- link to world page -->
  685. <p class="py-2 text-right rounded-bottom" style="border:1px solid #ccc;background-color:rgba(31,34,33,0.88);color:#ccc;font-variant:small-caps;letter-spacing:1.5px;font-size:15px;">
  686. Link:
  687. <span class="my-3 mr-2" data-placement="bottom" data-toggle="tooltip" title="World Info">
  688.  
  689. <a href="https://toyhou.se/11149564.test-page/11500175.fart"><i class="fas fa-globe ml-1"></i></a>
  690.  
  691. </span>
  692. </p>
  693. </div>
  694. <div class="col"></div>
  695. </div>
  696.  
  697. <div class="row">
  698. <div class="col-sm-12">
  699. <h1 class="mt-3 mb-1" style="color:#3876AE;font-variant:small-caps;letter-spacing:1.5px;font-family:Cinzel, serif;font-weight:600;font-size:26px;">Backstory</h1>
  700.  
  701. <!-- BACKSTORY -->
  702. <div class="p-3 mx-2 text-justify" style="letter-spacing:1.5px;border-top:1px solid #32434a">
  703.  
  704. <h5 style="color:61B8DB;">It begins....</h5>
  705.  
  706. <p>
  707. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien. Pellentesque mattis varius risus, et facilisis nunc commodo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare orci tempor tortor sollicitudin finibus.
  708. </p>
  709. <br>
  710.  
  711. <h5 style="color:61B8DB;">There came a knock at the door</h5>
  712.  
  713. <p>
  714. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet rhoncus egestas. Morbi malesuada gravida dictum. Duis pretium arcu vel pretium venenatis. Aliquam erat volutpat. Phasellus sit amet nibh sapien. Pellentesque mattis varius risus, et facilisis nunc commodo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare orci tempor tortor sollicitudin finibus.
  715. <br><br>
  716. Phasellus sit amet nibh sapien. Pellentesque mattis varius risus, et facilisis nunc commodo nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ornare orci tempor tortor sollicitudin finibus.
  717. </p>
  718.  
  719. </div>
  720. </div>
  721. </div>
  722.  
  723. </div>
  724. </div>
  725. </div>
  726.  
  727. <!--tab content-->
  728.  
  729. </div>
  730.  
  731. <!-- contain Right Column -->
  732. </div>
  733. </div>
  734.  
  735. <!-- contain all-->
  736. </div>
  737. </div>
  738. </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!