API tools faq
paste
Advertisement
elltaker

simple beginnings

elltaker
Nov 24th, 2024 (edited)
130
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.96 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-- background image
  2.  
  3. if the background image gets too blurry, feel free to remove the "background-attachment:fixed;" section -->
  4. <div class="container col-md-6 p-2 " style="background-image:url(LINK);background-attachment:fixed;">
  5.  
  6. <div class="row no-gutters">
  7.  
  8. <!-- first container , nav -->
  9.  
  10. <div class="card p-3 mx-auto rounded col-md-3">
  11.  
  12. <div class="row">
  13. <div class="col">
  14.  
  15. <!-- image / pagedoll -->
  16. <div class="card" style="background-image: url(https://place-hold.it/200x200);background-size:cover;background-position:center;height:225px"></div>
  17.  
  18. <div class="mb-3"></div>
  19.  
  20. <!-- music player, replace the URL after embed/ with the letters and numbers string of your youtube video after "watch?v=" done by rctface on th!
  21.  
  22. if the text of the title / artist gets long and extends the first container, find the "height:300px;" under each tab to make the second container larger (by editing the px size) -->
  23.  
  24. <p align="center"><iframe frameborder="0" style="height:1rem;width:8rem;opacity:.001;position:absolute;"
  25.  
  26. src="https://www.youtube.com/embed/URL"></iframe>
  27.  
  28. <i class="fa-solid fa-record-vinyl fa-beat-fade"></i> song title - artist</p>
  29.  
  30. <!-- navigation -->
  31.  
  32. <div class="mb-3"></div>
  33.  
  34. <ul class="mb-1 nav nav-fill card-header-tabs row no-gutters">
  35.  
  36. <li class="mb-1 col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" href="#basic"><i class="fa-regular fa-heart fa-xs"></i></a></li>
  37. <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#design"><i class="fa-regular fa-paintbrush fa-xs"></i></a></li>
  38. <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#lore"><i class="fa-regular fa-book fa-xs"></i></a></li>
  39. <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" href="#links"><i class="fa-regular fa-users fa-xs"></i></a></li>
  40.  
  41. </ul>
  42.  
  43. </div>
  44. </div>
  45. </div>
  46.  
  47.  
  48.  
  49. <!-- second container, info -->
  50.  
  51. <div class="card p-2 mx-auto rounded col-md-9">
  52.  
  53. <div class="container">
  54.  
  55. <!-- title / name -->
  56. <p style="font-size:24px;font-family:calibri;font-variant:small-caps;">
  57.  
  58. <u>name</u>
  59.  
  60. <span style="font-size:17px;font-family:arial black"><i>!!</i></span>
  61.  
  62. <span style="font-size:15px;"><i>(info here. can be removed)</i></span>
  63.  
  64. </p>
  65.  
  66. </div>
  67.  
  68. <div class="tab-content">
  69.  
  70. <!-- basic -->
  71. <div class="tab-pane fade active show" id="basic">
  72. <div class="container p-3" style="height:300px;overflow-y:auto;scrollbar-width:thin;">
  73.  
  74. <div>
  75.  
  76. <p style="font-size:16px;font-family:calibri;">
  77.  
  78. Write about the character's basic personality here. every container scrolls so go ham! Lorem ipsum odor amet, consectetuer adipiscing elit. Sociosqu laoreet fusce congue imperdiet, facilisis sed senectus auctor. Mi mollis lobortis a libero commodo.<br><br>Lorem ipsum odor amet, consectetuer adipiscing elit. Per habitant quisque felis, ut orci dictumst. Inceptos nec fringilla quisque varius sollicitudin urna libero.
  79.  
  80. <br><br>
  81.  
  82. <!-- important info. to edit the size of the columns, edit the numbers after 'col-' , make sure the two numbers add up to twelve ^^-->
  83.  
  84. <!-- nickname, age -->
  85. <div class="d-flex-row mb-2 text-center">
  86. <div class="d-flex">
  87.  
  88. <div class="card bg-faded col-8 p-1 mr-1" style="border:0px"> nickname </div>
  89. <div class="card bg-faded col-4 p-1 ml-1" style="border:0px"> age </div>
  90.  
  91. </div>
  92. </div>
  93.  
  94. <!-- species, dob -->
  95. <div class="d-flex-row mb-2 text-center">
  96. <div class="d-flex">
  97.  
  98. <div class="card bg-faded col-5 p-1 mr-1" style="border:0px"> species / race </div>
  99. <div class="card bg-faded col-7 p-1 ml-1" style="border:0px"> date of birth </div>
  100.  
  101. </div>
  102. </div>
  103.  
  104. <!-- pronouns, gender -->
  105. <div class="d-flex-row mb-2 text-center">
  106. <div class="d-flex">
  107.  
  108. <div class="card bg-faded col-7 p-1 mr-1" style="border:0px"> pronouns </div>
  109. <div class="card bg-faded col-5 p-1 ml-1" style="border:0px"> gender </div>
  110.  
  111. </div>
  112. </div>
  113.  
  114. <!-- pronouns, gender -->
  115. <div class="d-flex-row mb-4 text-center">
  116. <div class="d-flex">
  117.  
  118. <div class="card bg-faded col-6 p-1 mr-1" style="border:0px"> alignment </div>
  119. <div class="card bg-faded col-6 p-1 ml-1" style="border:0px"> etc </div>
  120.  
  121. </div>
  122. </div>
  123.  
  124. <!-- feel free to add more above -->
  125.  
  126. <!-- stats. change the width (50) to fit the stats , as well as change the stats if needed -->
  127.  
  128. <!-- first row-->
  129.  
  130. <div class="d-flex-row">
  131. <div class="d-flex">
  132.  
  133. <!-- stat 1 -->
  134. <div class="container col-6">
  135. <div class="progress my-2 rounded-1">
  136. <div class="progress-bar bg-primary" role="progressbar" style="
  137.  
  138. width:50%;
  139.  
  140. height:16px">
  141.  
  142. </div>
  143. </div>
  144.  
  145. <p style="font-size:16px;font-family:calibri;text-align:center;">Charisma</p>
  146.  
  147. </div>
  148.  
  149. <!-- stat 2 -->
  150. <div class="container col-6">
  151. <div class="progress my-2 rounded-1">
  152. <div class="progress-bar bg-primary" role="progressbar" style="
  153.  
  154. width:50%;
  155.  
  156. height:16px">
  157.  
  158. </div>
  159. </div>
  160.  
  161. <p style="font-size:16px;font-family:calibri;text-align:center;">Strength</p>
  162.  
  163. </div>
  164. </div>
  165. </div>
  166.  
  167. <!-- second row-->
  168.  
  169. <div class="d-flex-row">
  170. <div class="d-flex">
  171.  
  172. <!-- stat 1 -->
  173. <div class="container col-6">
  174. <div class="progress my-2 rounded-1">
  175. <div class="progress-bar bg-primary" role="progressbar" style="
  176.  
  177. width:50%;
  178.  
  179. height:16px">
  180.  
  181. </div>
  182. </div>
  183.  
  184. <p style="font-size:16px;font-family:calibri;text-align:center;">Dexterity</p>
  185.  
  186. </div>
  187.  
  188. <!-- stat 2 -->
  189. <div class="container col-6">
  190. <div class="progress my-2 rounded-1">
  191. <div class="progress-bar bg-primary" role="progressbar" style="
  192.  
  193. width:50%;
  194.  
  195. height:16px">
  196.  
  197. </div>
  198. </div>
  199.  
  200. <p style="font-size:16px;font-family:calibri;text-align:center;">Constitution</p>
  201.  
  202. </div>
  203. </div>
  204. </div>
  205.  
  206. <!-- third row -->
  207.  
  208. <div class="d-flex-row">
  209. <div class="d-flex">
  210.  
  211. <!-- stat 1 -->
  212. <div class="container col-6">
  213. <div class="progress my-2 rounded-1">
  214. <div class="progress-bar bg-primary" role="progressbar" style="
  215.  
  216. width:50%;
  217.  
  218. height:16px">
  219.  
  220. </div>
  221. </div>
  222.  
  223. <p style="font-size:16px;font-family:calibri;text-align:center;">Intelligence</p>
  224.  
  225. </div>
  226.  
  227. <!-- stat 2 -->
  228. <div class="container col-6">
  229. <div class="progress my-2 rounded-1">
  230. <div class="progress-bar bg-primary" role="progressbar" style="
  231.  
  232. width:50%;
  233.  
  234. height:16px">
  235.  
  236. </div>
  237. </div>
  238.  
  239. <p style="font-size:16px;font-family:calibri;text-align:center;">Wisdom</p>
  240.  
  241. </div>
  242. </div>
  243. </div>
  244.  
  245. <!-- paste more rows above -->
  246.  
  247. <div class="mb-3"></div>
  248.  
  249. <!-- quote -->
  250. <div class="faded">
  251. <blockquote><i style="font-size:19px;font-family:calibri;">
  252.  
  253. insert a quote or song lyric here!!
  254.  
  255. <i class="fa-regular fa-quote-right"></i>
  256.  
  257. </i></blockquote>
  258. </div>
  259.  
  260. </div>
  261. </div>
  262. </div>
  263.  
  264. <!-- design -->
  265. <div class="tab-pane fade" id="design">
  266. <div class="container p-3" style="height:300px;overflow-y:auto;scrollbar-width:thin;">
  267. <div>
  268.  
  269. <div class="d-flex-row row">
  270. <div class="d-flex">
  271. <div class="container col-md-6 col-12">
  272.  
  273. <!-- photo reference -->
  274. <div class="card" style="background-image: url(https://place-hold.it/200x200);background-size:cover;background-position:center;height:265px">
  275.  
  276. <div class="row no-gutters" style="height:10px;">
  277.  
  278. <!-- colour palette , if you add more / remove some, edit the number after 'col-' to change the sizes of each colour -->
  279. <div class="card col-2 rounded-0" style="background-color: #fff"></div>
  280. <div class="card col-2 rounded-0" style="background-color: #e4e4e4"></div>
  281. <div class="card col-2 rounded-0" style="background-color: #979797"></div>
  282. <div class="card col-2 rounded-0" style="background-color: #797979"></div>
  283. <div class="card col-2 rounded-0" style="background-color: #4e4e4e"></div>
  284. <div class="card col-2 rounded-0" style="background-color: #333333"></div>
  285.  
  286.  
  287. <!-- add more above this -->
  288.  
  289. </div>
  290.  
  291. </div>
  292. </div>
  293.  
  294. <div class="container col-md-6 col-12" style="height:265px;overflow-y:auto;scrollbar-width:thin;">
  295.  
  296. <!-- design notes -->
  297. <ul style="font-size:16px;font-family:calibri;">
  298.  
  299. <li>list some design info here!</li>
  300. <li>the text should scroll so YA!!!</li>
  301. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  302. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
  303. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  304.  
  305. </ul>
  306.  
  307. </div>
  308.  
  309. </div>
  310. </div>
  311.  
  312.  
  313. </div>
  314. </div>
  315. </div>
  316.  
  317. <!-- lore -->
  318. <div class="tab-pane fade" id="lore">
  319. <div class="container p-3" style="height:300px;overflow-y:auto;scrollbar-width: thin;">
  320. <div>
  321.  
  322. <!--- story one --->
  323.  
  324. <!-- header 1 -->
  325. <p style="font-size:21px;font-family:calibri;"> <i style="font-size:16px;" class="fa-regular fa-feather"></i>
  326.  
  327. HEADER 1
  328.  
  329. </p>
  330.  
  331. <!-- tldr / CW 1 -->
  332. <div class="faded">
  333. <blockquote style="font-size:13px;font-family:calibri;"><i>
  334.  
  335. TLDR; You can also change this into a content warning if you wish. or do both, who cares. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.
  336.  
  337. </i></blockquote>
  338. </div>
  339.  
  340. <!-- text 1 -->
  341. <p style="font-size:16px;font-family:calibri;">
  342.  
  343. Write about your character's story here! This scrolls as per usual :P. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  344.  
  345. </p>
  346.  
  347. <!--- story one end --->
  348.  
  349. <!--- story two --->
  350.  
  351. <!-- header 1 -->
  352. <p style="font-size:21px;font-family:calibri;"> <i style="font-size:16px;" class="fa-regular fa-feather"></i>
  353.  
  354. HEADER 2
  355.  
  356. </p>
  357.  
  358. <!-- tldr / CW 1 -->
  359. <div class="faded">
  360. <blockquote style="font-size:13px;font-family:calibri;"><i>
  361.  
  362. TLDR; You can also change this into a content warning if you wish. or do both, who cares. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.
  363.  
  364. </i></blockquote>
  365. </div>
  366.  
  367. <!-- text 1 -->
  368. <p style="font-size:16px;font-family:calibri;">
  369.  
  370. Write about your character's story here! This scrolls as per usual :P. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  371.  
  372. </p>
  373.  
  374. <!--- story two end --->
  375.  
  376. <!-- add more story sections above -->
  377.  
  378. </div>
  379. </div>
  380. </div>
  381.  
  382. <!-- links -->
  383. <div class="tab-pane fade" id="links">
  384. <div class="container p-3" style="height:300px;overflow-y:auto;scrollbar-width: thin;">
  385. <div>
  386.  
  387. <!-- relationship one -->
  388. <div class="d-flex-row row mb-3">
  389. <div class="d-flex">
  390. <div class="container col-md-3">
  391.  
  392. <!-- character icon -->
  393. <div class="card" style="background-image: url(https://place-hold.it/150x150);background-size:cover;background-position:center;height:150px"></div>
  394.  
  395. </div>
  396.  
  397. <div class="container col-md-9">
  398.  
  399. <!-- name / status --> <!-- link to character profile -->
  400.  
  401. <p class="d-flex justify-content-between" style="font-size:20px;font-family:calibri;"><a href="LINK">
  402.  
  403. NAME LASTNAME
  404.  
  405. </a><span style="text-align:right"><i>(
  406.  
  407. lover / friend / enemy / etc
  408.  
  409. )</i></span>
  410.  
  411. </p>
  412.  
  413. <!-- relationship info -->
  414. <p style="font-size:16px;font-family:calibri;height:105px;overflow-y:auto;scrollbar-width:thin;">
  415.  
  416. talk about their relationship here. this scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  417.  
  418. </p>
  419.  
  420. </div>
  421.  
  422. </div>
  423. </div>
  424. <!-- relationship one end -->
  425.  
  426. <!-- relationship two -->
  427. <div class="d-flex-row row mb-3">
  428. <div class="d-flex">
  429.  
  430. <div class="container col-md-9">
  431.  
  432. <!-- name / status --> <!-- link to character profile -->
  433. <p class="d-flex justify-content-between" style="font-size:20px;font-family:calibri;"><a href="LINK">
  434.  
  435. NAME LASTNAME
  436.  
  437. </a><span style="text-align:right"><i>(
  438.  
  439. lover / friend / enemy / etc
  440.  
  441. )</i></span>
  442.  
  443. </p>
  444.  
  445. <!-- relationship info -->
  446. <p style="font-size:16px;font-family:calibri;height:105px;overflow-y:auto;scrollbar-width:thin;">
  447.  
  448. talk about their relationship here. this scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  449.  
  450. </p>
  451.  
  452. </div>
  453.  
  454. <div class="container col-md-3">
  455.  
  456. <!-- character icon -->
  457. <div class="card" style="background-image: url(https://place-hold.it/150x150);background-size:cover;background-position:center;height:150px"></div>
  458.  
  459. </div>
  460.  
  461. </div>
  462. </div>
  463. <!-- relationship two end -->
  464.  
  465. <!-- relationship three -->
  466. <div class="d-flex-row row mb-3">
  467. <div class="d-flex">
  468. <div class="container col-md-3">
  469.  
  470. <!-- character icon -->
  471. <div class="card" style="background-image: url(https://place-hold.it/150x150);background-size:cover;background-position:center;height:150px"></div>
  472.  
  473. </div>
  474.  
  475. <div class="container col-md-9">
  476.  
  477. <!-- name / status --> <!-- link to character profile -->
  478.  
  479. <p class="d-flex justify-content-between" style="font-size:20px;font-family:calibri;"><a href="LINK">
  480.  
  481. NAME LASTNAME
  482.  
  483. </a><span style="text-align:right"><i>(
  484.  
  485. lover / friend / enemy / etc
  486.  
  487. )</i></span>
  488.  
  489. </p>
  490.  
  491. <!-- relationship info -->
  492. <p style="font-size:16px;font-family:calibri;height:105px;overflow-y:auto;scrollbar-width:thin;">
  493.  
  494. talk about their relationship here. this scrolls. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  495.  
  496. </p>
  497.  
  498. </div>
  499.  
  500. </div>
  501. </div>
  502. <!-- relationship three end -->
  503.  
  504. <!-- place more relationship blocks above -->
  505.  
  506.  
  507. </div>
  508. </div>
  509. </div>
  510.  
  511. </div>
  512.  
  513. </div>
  514.  
  515. </div>
  516.  
  517. <!-- credit -->
  518. <div class="mb-2"></div>
  519.  
  520. <div class="card p-2 rounded" style="border-top-right-radius:5 px;border-top-left-radius:10px;border-bottom-left-radius:15px; border-bottom-right-radius:20px;">
  521.  
  522. <!-- art credit -->
  523. <p align="right"><span class="text-primary tooltipster" title="art by BLANK" data-toggle="tooltip" data-placement="bottom"><a href="LINK"><i class="fa-regular fa-image"></i></a></span> •
  524.  
  525. <!-- code credit -->
  526. <span class="text-primary tooltipster" title="code by elltaker" data-toggle="tooltip" data-placement="bottom"><a href="https://toyhou.se/elltaker"><i class="fa-regular fa-code"></i></a></span></p>
  527.  
  528. </div>
  529.  
  530. </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!