API tools faq
paste
junijwi

sorrel profile

junijwi
Nov 1st, 2025 (edited)
60
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.69 KB | None | 0 0
raw download clone embed print report
  1. <div id="character-slides" class="carousel slide" data-ride="false" data-pause="true">
  2. <div class="carousel-inner">
  3.  
  4. <!-- THEN -->
  5. <div class="carousel-item active">
  6. <!--==========================================
  7.  
  8. [03] VIEW (ext. + accent ver.) by TOGO
  9.  
  10. -- -- -- -- -- -- -- -- -- -- -- -- -- --
  11.  
  12. anything you need to edit should be
  13. tabbed and clearly marked - i've also
  14. added comments for light code edits you
  15. may want to do. feel free to change
  16. any elements to your needs!
  17.  
  18. -- -- -- -- -- -- -- -- -- -- -- -- -- --
  19.  
  20. > do not use with WYSIWYG on, it will
  21. break the code.
  22. > keep my credit in.
  23. > direct any questions to my comments.
  24. thank you!
  25.  
  26. ===========================================-->
  27.  
  28. <!-- COLOUR VARIABLES ========================
  29.  
  30. > This code uses a custom accent colour, set
  31. through a variable. Change the value of
  32. --primary: ; below, and every instance
  33. of the colour will update automatically.
  34.  
  35. ===========================================-->
  36.  
  37. <div class="my-lg-5 mx-auto" style="max-width: 900px;
  38.  
  39. --primary: #cc813e;
  40.  
  41. --fa-secondary-opacity: .15;">
  42.  
  43. <!-- MAIN CONTAINER =======================-->
  44.  
  45. <div class="card p-3 p-lg-4 border-0 rounded-0" style="position: relative;">
  46.  
  47. <div class="card p-3 rounded-0" style="position: absolute; top: 0; left: 0; border-width: 3px 0 0 3px;"></div>
  48. <div class="card p-3 rounded-0" style="position: absolute; top: 0; right: 0; border-width: 3px 3px 0 0;"></div>
  49. <div class="card p-3 rounded-0" style="position: absolute; right: 0; bottom: 0; border-width: 0 3px 3px 0;"></div>
  50. <div class="card p-3 rounded-0" style="position: absolute; bottom: 0; left: 0; border-width: 0 0 3px 3px;"></div>
  51. <!-- corner decor. remove the above 4 lines to hide the border corners. -->
  52.  
  53. <div class="mb-3" style="height: 160px; background-color: var(--primary);
  54.  
  55. background-image: url('https://images.unsplash.com/photo-1555422753-0d30a7e27662');
  56.  
  57. background-blend-mode: luminosity;
  58. /* if you don't want the header to blend with your accent colour, remove the above line. */;
  59.  
  60. filter: contrast(65%);
  61. opacity: .65;
  62. /* if you don't want the header to be faded, remove the above 2 lines. */;
  63.  
  64. background-size: cover; background-position: center;">
  65. <div class="h-100 d-flex justify-content-center align-items-center">
  66. <a class="stretched-link" href="#character-slides" role="button" data-slide="next">
  67. <i class="text-white fa-solid fa-chevrons-right fa-beat fa-2xl" aria-hidden="true"
  68. style="--fa-animation-duration: 3s;"></i>
  69. <span class="sr-only">Next</span>
  70. </a>
  71. </div>
  72. </div>
  73. <div class="row flex-row-reverse flex-lg-row mx-n2 mb-n2">
  74.  
  75. <!-- MAIN CONTENT (LEFT) ==================-->
  76.  
  77. <div class="col-lg-8 px-2">
  78. <div class="flex-column h-100 mb-n3 p-2">
  79.  
  80. <!-- TITLE ================================-->
  81.  
  82. <h3 class="d-flex align-items-center mb-0 text-monospace text-uppercase" style="font-weight: 600; letter-spacing: 2px; color: var(--primary);">
  83. <span class="mr-2 text-muted" style="opacity: .5;">//</span>
  84.  
  85. Sorrel Tennant
  86.  
  87. <i class="fa-solid fa-duotone fa-snake fa-width-auto ml-auto pl-3" style="font-size: 1.25em;"></i>
  88. <!-- update 'fa-feather' to a fontawesome icon of your choice. --->
  89.  
  90. </h3>
  91. <hr class="w-100" style="border-width: 2px 0 0; border-color: var(--primary); opacity: .25;">
  92.  
  93. <!-- TAGS =================================-->
  94.  
  95. <div class="d-flex flex-wrap mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1px;">
  96.  
  97. <div class="d-flex align-items-center mr-3"><i class="fa-solid fa-hashtag fa-2xs mr-1" style="color: var(--primary);"></i>
  98. Then
  99. </div>
  100.  
  101. <div class="d-flex align-items-center mr-3"><i class="fa-solid fa-hashtag fa-2xs mr-1" style="color: var(--primary);"></i>
  102. Townie
  103. </div>
  104.  
  105. <div class="d-flex align-items-center mr-3"><i class="fa-solid fa-hashtag fa-2xs mr-1" style="color: var(--primary);"></i>
  106. GravesFamily
  107. </div>
  108.  
  109.  
  110.  
  111. <!-- more tags above this line. ------------->
  112.  
  113. </div>
  114.  
  115. <!-- end of tags. --------------------------->
  116.  
  117. <!-- ABOUT (TEXT BLOCK) ===================-->
  118.  
  119. <div class="mb-3 pr-2" style="letter-spacing: .5px;">
  120.  
  121. <p>
  122. This early morning fog rolls in over the water and its weight suspends streelights and gravestones in timelessness. Sorrel is the reverant and fearful quiet that sits heavy in the furthest back pew.
  123. </p>
  124.  
  125. <p>
  126. It is distant (dreamy), quiet (thoughtful), and aloof (slow to warm, slow to grow, too slow for the likes of others). Sorrel fiercely protects the strange and misfitting, a shepherd to black sheep.
  127. </p>
  128.  
  129. </div>
  130. <div class="d-flex align-items-center mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1.5px; opacity: .5;">
  131. <hr class="flex-grow-1 my-0 mr-3" style="border-width: 2px 0 0 0;">
  132. <span class="mr-1">(</span>
  133.  
  134. about.
  135.  
  136. <span class="ml-1">)</span>
  137. </div>
  138.  
  139. <!-- end of about. -------------------------->
  140.  
  141. <!-- NOTES (LIST) =========================-->
  142.  
  143. <ul class="fa-ul ml-4 mb-2 pl-2">
  144.  
  145. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  146. From groundskeeper in youth to coroner in adulthood, it got a job through family and took the path of least resistance to fill the niche needed in the small town.
  147. </li>
  148.  
  149. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  150. Sorrel has always been a bit of a wallflower, and tends to be a bit cold towards most peers of its own generation.
  151.  
  152. </li>
  153.  
  154. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  155. It has a softer spot for children, aspiring adults with non-traditional jobs or dreams, and outsiders/newcomers.
  156. </li>
  157.  
  158. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  159. Married to Salem Tennant in the past handful of years. They have 2 children, Lior and Leila/Nyx. Sorrel's maiden name was Sollertia.
  160. </li>
  161.  
  162.  
  163.  
  164. <!-- more notes above this line. ------------>
  165.  
  166. </ul>
  167. <div class="d-flex align-items-center mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1.5px; opacity: .5;">
  168. <hr class="flex-grow-1 my-0 mr-3" style="border-width: 2px 0 0 0;">
  169. <span class="mr-1">(</span>
  170.  
  171. hooks.
  172.  
  173. <span class="ml-1">)</span>
  174. </div>
  175.  
  176. <!-- end of notes. -------------------------->
  177.  
  178. <!-- INVENTORY ============================-->
  179.  
  180. <div class="row justify-content-center ml-n3 mr-n3 mr-lg-n2 mb-2 mb-lg-0 text-lg-center">
  181.  
  182. <!-- item template. copy + paste as many as you need. -->
  183.  
  184. <div class="col-lg-4 mb-2 mb-lg-3 px-2">
  185. <div class="card flex-row flex-lg-column align-items-center h-100 pt-3 pt-lg-4 px-3 pb-3 rounded-0" style="border-width: 2px;">
  186. <p class="mr-3 mr-lg-0 mb-0 mb-lg-4">
  187.  
  188. <i class="fa-light fa-duotone fa-tombstone" style="font-size: 2rem; color: var(--primary);"></i>
  189. <!-- update 'fa-backpack' to a fontawesome icon of your choice. --->
  190.  
  191. </p><div><h5 class="mb-1 text-monospace text-uppercase" style="font-size: 1rem; letter-spacing: .5px;">
  192.  
  193. Graves Family Funeral Home
  194.  
  195. </h5><p class="font-italic text-muted" style="font-size: .8rem; letter-spacing: 1px;">
  196.  
  197. coroner
  198.  
  199. </p></div></div></div>
  200. <!------------------------------------------->
  201.  
  202. <div class="col-lg-4 mb-2 mb-lg-3 px-2">
  203. <div class="card flex-row flex-lg-column align-items-center h-100 pt-3 pt-lg-4 px-3 pb-3 rounded-0" style="border-width: 2px;">
  204. <p class="mr-3 mr-lg-0 mb-0 mb-lg-4">
  205.  
  206. <i class="fa-light fa-duotone fa-apple-whole" style="font-size: 2rem; color: var(--primary);"></i>
  207. <!-- update 'fa-backpack' to a fontawesome icon of your choice. --->
  208.  
  209. </p><div><h5 class="mb-1 text-monospace text-uppercase" style="font-size: 1rem; letter-spacing: .5px;">
  210.  
  211. Endswell School
  212.  
  213. </h5><p class="font-italic text-muted" style="font-size: .8rem; letter-spacing: 1px;">
  214.  
  215. substitute teacher
  216.  
  217. </p></div></div></div>
  218. <!------------------------------------------->
  219.  
  220. <div class="col-lg-4 mb-2 mb-lg-3 px-2">
  221. <div class="card flex-row flex-lg-column align-items-center h-100 pt-3 pt-lg-4 px-3 pb-3 rounded-0" style="border-width: 2px;">
  222. <p class="mr-3 mr-lg-0 mb-0 mb-lg-4">
  223.  
  224. <i class="fa-light fa-duotone fa-cards-blank" style="font-size: 2rem; color: var(--primary);"></i>
  225. <!-- update 'fa-backpack' to a fontawesome icon of your choice. --->
  226.  
  227. </p><div><h5 class="mb-1 text-monospace text-uppercase" style="font-size: 1rem; letter-spacing: .5px;">
  228.  
  229. Divination
  230.  
  231. </h5><p class="font-italic text-muted" style="font-size: .8rem; letter-spacing: 1px;">
  232.  
  233. does readings for fun
  234.  
  235. </p></div></div></div>
  236. <!------------------------------------------->
  237.  
  238.  
  239.  
  240. <!-- more items above this line. ------------>
  241.  
  242. </div>
  243. <div class="d-flex align-items-center mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1.5px; opacity: .5;">
  244. <hr class="flex-grow-1 my-0 mr-3" style="border-width: 2px 0 0 0;">
  245. <span class="mr-1">(</span>
  246.  
  247. relationships.
  248.  
  249. <span class="ml-1">)</span>
  250. </div>
  251.  
  252. <!-- end of hooks. ---------------------->
  253.  
  254. <!-- RELATIONSHIPS (LIST) =================-->
  255.  
  256. <ul class="fa-ul ml-4 mb-2 pl-2 text-monospace">
  257.  
  258. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-hearts fa-2xs text-muted"></i></span>
  259. <a href="#" style="color: var(--primary);">SALEM TENNANT</a>: wife
  260. <span class="text-muted">- eye of my beholder</span>
  261. </li>
  262.  
  263. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart fa-2xs text-muted"></i></span>
  264. <a href="#" style="color: var(--primary);">LIOR TENNANT</a>: son
  265. <span class="text-muted">- growing up too fast</span>
  266. </li>
  267.  
  268. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart fa-2xs text-muted"></i></span>
  269. <a href="#" style="color: var(--primary);">LEILA TENNANT</a>: child
  270. <span class="text-muted">- apples don't fall far</span>
  271. </li>
  272.  
  273. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart fa-2xs text-muted"></i></span>
  274. <a href="#" style="color: var(--primary);">MILLICENT GRAVES</a>: cousin
  275. <span class="text-muted">- my lady of darkness</span>
  276. </li>
  277.  
  278. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart-slash fa-2xs text-muted"></i></span>
  279. <a href="#" style="color: var(--primary);">WALTER GRAVES</a>: uncle
  280. <span class="text-muted">- five of swords</span>
  281. </li>
  282.  
  283.  
  284.  
  285.  
  286. <!-- more relationships above this line. ---->
  287.  
  288. </ul>
  289.  
  290. <!-- end of relationships. ------------------>
  291.  
  292. </div>
  293. </div>
  294. <div class="col-auto px-2">
  295. <div class="card h-100" style="border-width: 0 2px 0 0;"></div>
  296. </div>
  297.  
  298. <!-- SIDEBAR (RIGHT) ======================-->
  299.  
  300. <div class="col-lg px-2">
  301. <div class="flex-column h-100 p-2">
  302.  
  303. <!-- ICON =================================-->
  304.  
  305. <div class="d-none d-lg-block" style="margin-top: -120px;"></div>
  306. <!-- edit margin-top: -120px; (or remove the above line) to adjust how much the icon overlaps with the header. -->
  307.  
  308. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109439719_uFXmxBD32LXacWu.png?1761671503" class="d-block mx-auto mb-3 p-2 border-0 rounded-0" style="width: 250px;"><!--
  309. to use a pagedoll/transparent bg image, remove 'img-thumbnail' from the class="".
  310. to center the image, remove 'mx-lg-n2' from the class="".
  311. edit width: 160px; to set the image size, max. ~250px. -->
  312.  
  313. <div class="mb-3 text-monospace">
  314.  
  315. <!-- FIELDS ===============================-->
  316. <div class="d-flex flex-wrap mb-2">
  317.  
  318. 48 years
  319.  
  320. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  321. <span class="mr-1">(</span>
  322.  
  323. age
  324.  
  325. <span class="ml-1">)</span></span></div>
  326. <!------------------------------------------->
  327.  
  328. <div class="d-flex flex-wrap mb-2">
  329.  
  330. june 6th
  331.  
  332. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  333. <span class="mr-1">(</span>
  334.  
  335. birthday
  336.  
  337. <span class="ml-1">)</span></span></div>
  338. <!------------------------------------------->
  339.  
  340. <div class="d-flex flex-wrap mb-2">
  341.  
  342. 6' | 183 cm
  343.  
  344. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  345. <span class="mr-1">(</span>
  346.  
  347. height
  348.  
  349. <span class="ml-1">)</span></span></div>
  350. <!------------------------------------------->
  351.  
  352. <div class="d-flex flex-wrap mb-2">
  353.  
  354. non-binary
  355.  
  356. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  357. <span class="mr-1">(</span>
  358.  
  359. gender
  360.  
  361. <span class="ml-1">)</span></span></div>
  362. <!------------------------------------------->
  363.  
  364. <div class="d-flex flex-wrap mb-2">
  365.  
  366. it/she
  367.  
  368. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  369. <span class="mr-1">(</span>
  370.  
  371. pronouns
  372.  
  373. <span class="ml-1">)</span></span></div>
  374. <!------------------------------------------->
  375.  
  376. <div class="d-flex flex-wrap mb-2">
  377.  
  378. coroner
  379.  
  380. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  381. <span class="mr-1">(</span>
  382.  
  383. occupation
  384.  
  385. <span class="ml-1">)</span></span></div>
  386. <!------------------------------------------->
  387.  
  388.  
  389.  
  390. <!-- more fields above this line. ----------->
  391.  
  392. </div>
  393. <div class="flex-grow-1"></div>
  394. <div class="mb-3">
  395.  
  396. <!-- LYRICS ===============================-->
  397.  
  398. <p class="mb-3 text-monospace text-center text-lg-right font-italic text-muted" style="font-size: .8rem; letter-spacing: .5px;">
  399.  
  400. There's something
  401. <br>lonesome about you,
  402. <br><br>Something so
  403. <br>wholesome about you,
  404. <br><br>Get closer to me.
  405.  
  406. </p>
  407.  
  408. <!-- MUSIC PLAYER =========================-->
  409.  
  410. <div class="card row no-gutters flex-row align-items-center ml-n2 ml-lg-0 mr-n2 py-2 px-3 rounded-0" style="border-width: 2px;">
  411. <div class="col-auto ml-n3 mr-3 overflow-hidden">
  412.  
  413. <i class="fa-thin fa-duotone fa-compact-disc fa-width-auto fa-spin ml-n4" style="font-size: 3.5rem; color: var(--primary); opacity: .4; animation-duration: 4s;"></i>
  414.  
  415. </div>
  416. <div class="col py-1">
  417. <h5 class="mb-1 text-monospace text-uppercase" style="font-size: 1rem; letter-spacing: .5px;">
  418.  
  419. From Eden
  420.  
  421. </h5>
  422. <p class="font-italic text-muted" style="font-size: .8rem; letter-spacing: 1px;">
  423.  
  424. Hozier
  425.  
  426. </p>
  427. </div>
  428. <a href="#" class="btn btn-outline-primary border-0 rounded-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: grayscale(100%); opacity: .075;">
  429. <span style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
  430. <iframe width="700" height="500"
  431.  
  432. src="https://www.youtube.com/embed/JmWbBUxSNUU?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;"></iframe>
  433. <!-- youtube embed - replace 'eIXLaIn9PAc' with your youtube id, keep ?controls=0 at the end. -->
  434.  
  435. </span>
  436. </a>
  437. </div>
  438. </div>
  439. <div class="mb-n3"></div>
  440. </div>
  441. </div>
  442. </div>
  443. </div>
  444.  
  445. <!-- CREDIT - DO NOT REMOVE ===============-->
  446.  
  447. <p class="mt-3 text-right">
  448. <a href="https://toyhou.se/Togo" class="text-muted">
  449. <i class="fal fa-code"></i>
  450. </a>
  451. </p>
  452. </div>
  453.  
  454. </div> <!-- carousel-item -->
  455.  
  456. <!-- LATER -->
  457. <div class="carousel-item">
  458.  
  459. <!--==========================================
  460.  
  461. [03] VIEW (ext. + accent ver.) by TOGO
  462.  
  463. -- -- -- -- -- -- -- -- -- -- -- -- -- --
  464.  
  465. anything you need to edit should be
  466. tabbed and clearly marked - i've also
  467. added comments for light code edits you
  468. may want to do. feel free to change
  469. any elements to your needs!
  470.  
  471. -- -- -- -- -- -- -- -- -- -- -- -- -- --
  472.  
  473. > do not use with WYSIWYG on, it will
  474. break the code.
  475. > keep my credit in.
  476. > direct any questions to my comments.
  477. thank you!
  478.  
  479. ===========================================-->
  480.  
  481. <!-- COLOUR VARIABLES ========================
  482.  
  483. > This code uses a custom accent colour, set
  484. through a variable. Change the value of
  485. --primary: ; below, and every instance
  486. of the colour will update automatically.
  487.  
  488. ===========================================-->
  489.  
  490. <div class="my-lg-5 mx-auto" style="max-width: 900px;
  491.  
  492. --primary: #666464;
  493.  
  494. --fa-secondary-opacity: .15;">
  495.  
  496. <!-- MAIN CONTAINER =======================-->
  497.  
  498. <div class="card p-3 p-lg-4 border-0 rounded-0" style="position: relative;">
  499.  
  500. <div class="card p-3 rounded-0" style="position: absolute; top: 0; left: 0; border-width: 3px 0 0 3px;"></div>
  501. <div class="card p-3 rounded-0" style="position: absolute; top: 0; right: 0; border-width: 3px 3px 0 0;"></div>
  502. <div class="card p-3 rounded-0" style="position: absolute; right: 0; bottom: 0; border-width: 0 3px 3px 0;"></div>
  503. <div class="card p-3 rounded-0" style="position: absolute; bottom: 0; left: 0; border-width: 0 0 3px 3px;"></div>
  504. <!-- corner decor. remove the above 4 lines to hide the border corners. -->
  505.  
  506. <div class="mb-3" style="height: 160px; background-color: var(--primary);
  507.  
  508. background-image: url('https://images.unsplash.com/photo-1555422753-0d30a7e27662');
  509.  
  510. background-blend-mode: luminosity;
  511. /* if you don't want the header to blend with your accent colour, remove the above line. */;
  512.  
  513. filter: contrast(65%);
  514. opacity: .65;
  515. /* if you don't want the header to be faded, remove the above 2 lines. */;
  516.  
  517. background-size: cover; background-position: center;">
  518. <div class="h-100 d-flex justify-content-center align-items-center">
  519. <a class="stretched-link" href="#character-slides" role="button" data-slide="prev">
  520. <i class="text-white fa-solid fa-chevrons-left fa-beat fa-2xl" aria-hidden="true"
  521. style="--fa-animation-duration: 3s;"></i>
  522. <span class="sr-only">Previous</span>
  523. </a>
  524. </div>
  525. </div>
  526. <div class="row flex-row-reverse flex-lg-row mx-n2 mb-n2">
  527.  
  528. <!-- MAIN CONTENT (LEFT) ==================-->
  529.  
  530. <div class="col-lg-8 px-2">
  531. <div class="flex-column h-100 mb-n3 p-2">
  532.  
  533. <!-- TITLE ================================-->
  534.  
  535. <h3 class="d-flex align-items-center mb-0 text-monospace text-uppercase" style="font-weight: 600; letter-spacing: 2px; color: var(--primary);">
  536. <span class="mr-2 text-muted" style="opacity: .5;">//</span>
  537.  
  538. Sorrel Tennant
  539.  
  540. <i class="fa-solid fa-duotone fa-snake fa-width-auto ml-auto pl-3" style="font-size: 1.25em;"></i>
  541. <!-- update 'fa-feather' to a fontawesome icon of your choice. --->
  542.  
  543. </h3>
  544. <hr class="w-100" style="border-width: 2px 0 0; border-color: var(--primary); opacity: .25;">
  545.  
  546. <!-- TAGS =================================-->
  547.  
  548. <div class="d-flex flex-wrap mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1px;">
  549.  
  550. <div class="d-flex align-items-center mr-3"><i class="fa-solid fa-hashtag fa-2xs mr-1" style="color: var(--primary);"></i>
  551. Later
  552. </div>
  553.  
  554. <div class="d-flex align-items-center mr-3"><i class="fa-solid fa-hashtag fa-2xs mr-1" style="color: var(--primary);"></i>
  555. Townie
  556. </div>
  557.  
  558. <div class="d-flex align-items-center mr-3"><i class="fa-solid fa-hashtag fa-2xs mr-1" style="color: var(--primary);"></i>
  559. GravesFamily
  560. </div>
  561.  
  562.  
  563.  
  564. <!-- more tags above this line. ------------->
  565.  
  566. </div>
  567.  
  568. <!-- end of tags. --------------------------->
  569.  
  570. <!-- ABOUT (TEXT BLOCK) ===================-->
  571.  
  572. <div class="mb-3 pr-2" style="letter-spacing: .5px;">
  573.  
  574. <p>
  575. Sorrel passed away 4 years ago, leaving Salem Tennant to work himself to death, unchecked, 3 years later.
  576. </p>
  577.  
  578. <p>
  579. There is a marker for them in the garden.
  580. </p>
  581.  
  582. </div>
  583. <div class="d-flex align-items-center mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1.5px; opacity: .5;">
  584. <hr class="flex-grow-1 my-0 mr-3" style="border-width: 2px 0 0 0;">
  585. <span class="mr-1">(</span>
  586.  
  587. about.
  588.  
  589. <span class="ml-1">)</span>
  590. </div>
  591.  
  592. <!-- end of about. -------------------------->
  593.  
  594. <!-- NOTES (LIST) =========================-->
  595.  
  596. <ul class="fa-ul ml-4 mb-2 pl-2">
  597.  
  598. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  599. Sorrel retired 13 years ago.
  600. </li>
  601.  
  602. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  603. Sorrel was an active volunteer at the school district and occasional chaperone for events.
  604. </li>
  605.  
  606. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-plus fa-2xs text-muted"></i></span>
  607. The Tennant household hosted large Halloween events that got more elaborate as Nyx grew older.
  608. </li>
  609.  
  610.  
  611.  
  612. <!-- more notes above this line. ------------>
  613.  
  614. </ul>
  615. <div class="d-flex align-items-center mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1.5px; opacity: .5;">
  616. <hr class="flex-grow-1 my-0 mr-3" style="border-width: 2px 0 0 0;">
  617. <span class="mr-1">(</span>
  618.  
  619. hooks.
  620.  
  621. <span class="ml-1">)</span>
  622. </div>
  623.  
  624. <!-- end of notes. -------------------------->
  625.  
  626. <!-- INVENTORY ============================-->
  627.  
  628. <div class="row justify-content-center ml-n3 mr-n3 mr-lg-n2 mb-2 mb-lg-0 text-lg-center">
  629.  
  630. <!-- item template. copy + paste as many as you need. -->
  631.  
  632. <div class="col-lg-4 mb-2 mb-lg-3 px-2">
  633. <div class="card flex-row flex-lg-column align-items-center h-100 pt-3 pt-lg-4 px-3 pb-3 rounded-0" style="border-width: 2px;">
  634. <p class="mr-3 mr-lg-0 mb-0 mb-lg-4">
  635.  
  636. <i class="fa-light fa-duotone fa-skull" style="font-size: 2rem; color: var(--primary);"></i>
  637. <!-- update 'fa-backpack' to a fontawesome icon of your choice. --->
  638.  
  639. </p><div><h5 class="mb-1 text-monospace text-uppercase" style="font-size: 1rem; letter-spacing: .5px;">
  640.  
  641. Till Death
  642.  
  643. </h5><p class="font-italic text-muted" style="font-size: .8rem; letter-spacing: 1px;">
  644.  
  645. Do Us Part
  646.  
  647. </p></div></div></div>
  648. <!------------------------------------------->
  649.  
  650.  
  651.  
  652. <!-- more items above this line. ------------>
  653.  
  654. </div>
  655. <div class="d-flex align-items-center mb-3 text-monospace font-italic text-muted" style="letter-spacing: 1.5px; opacity: .5;">
  656. <hr class="flex-grow-1 my-0 mr-3" style="border-width: 2px 0 0 0;">
  657. <span class="mr-1">(</span>
  658.  
  659. relationships.
  660.  
  661. <span class="ml-1">)</span>
  662. </div>
  663.  
  664. <!-- end of hooks. ---------------------->
  665.  
  666. <!-- RELATIONSHIPS (LIST) =================-->
  667.  
  668. <ul class="fa-ul ml-4 mb-2 pl-2 text-monospace">
  669.  
  670. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-hearts fa-2xs text-muted"></i></span>
  671. <a href="#" style="color: var(--primary);">SALEM TENNANT</a>: wife
  672. <span class="text-muted">- eye of my beholder</span>
  673. </li>
  674.  
  675. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart fa-2xs text-muted"></i></span>
  676. <a href="#" style="color: var(--primary);">LIOR TENNANT</a>: son
  677. <span class="text-muted">- growing up too fast</span>
  678. </li>
  679.  
  680. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart fa-2xs text-muted"></i></span>
  681. <a href="#" style="color: var(--primary);">LEILA TENNANT</a>: child
  682. <span class="text-muted">- apples don't fall far</span>
  683. </li>
  684.  
  685. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart fa-2xs text-muted"></i></span>
  686. <a href="#" style="color: var(--primary);">MILLICENT GRAVES</a>: cousin
  687. <span class="text-muted">- my lady of darkness</span>
  688. </li>
  689.  
  690. <li class="mb-2"><span class="fa-li pr-2"><i class="fa-solid fa-heart-slash fa-2xs text-muted"></i></span>
  691. <a href="#" style="color: var(--primary);">WALTER GRAVES</a>: uncle
  692. <span class="text-muted">- five of swords</span>
  693. </li>
  694.  
  695.  
  696.  
  697. <!-- more relationships above this line. ---->
  698.  
  699. </ul>
  700.  
  701. <!-- end of relationships. ------------------>
  702.  
  703. </div>
  704. </div>
  705. <div class="col-auto px-2">
  706. <div class="card h-100" style="border-width: 0 2px 0 0;"></div>
  707. </div>
  708.  
  709. <!-- SIDEBAR (RIGHT) ======================-->
  710.  
  711. <div class="col-lg px-2">
  712. <div class="flex-column h-100 p-2">
  713.  
  714. <!-- ICON =================================-->
  715.  
  716. <div class="d-none d-lg-block" style="margin-top: -120px;"></div>
  717. <!-- edit margin-top: -120px; (or remove the above line) to adjust how much the icon overlaps with the header. -->
  718.  
  719. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/109439719_uFXmxBD32LXacWu.png?1761671503" class="d-block mx-auto mb-3 p-2 border-0 rounded-0" style="width: 250px;"><!--
  720. to use a pagedoll/transparent bg image, remove 'img-thumbnail' from the class="".
  721. to center the image, remove 'mx-lg-n2' from the class="".
  722. edit width: 160px; to set the image size, max. ~250px. -->
  723.  
  724. <div class="mb-3 text-monospace">
  725.  
  726. <!-- FIELDS ===============================-->
  727. <div class="d-flex flex-wrap mb-2">
  728.  
  729. died at 64 years
  730.  
  731. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  732. <span class="mr-1">(</span>
  733.  
  734. age
  735.  
  736. <span class="ml-1">)</span></span></div>
  737. <!------------------------------------------->
  738.  
  739. <div class="d-flex flex-wrap mb-2">
  740.  
  741. june 6th
  742.  
  743. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  744. <span class="mr-1">(</span>
  745.  
  746. birthday
  747.  
  748. <span class="ml-1">)</span></span></div>
  749. <!------------------------------------------->
  750.  
  751. <div class="d-flex flex-wrap mb-2">
  752.  
  753. 6' | 183 cm
  754.  
  755. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  756. <span class="mr-1">(</span>
  757.  
  758. height
  759.  
  760. <span class="ml-1">)</span></span></div>
  761. <!------------------------------------------->
  762.  
  763. <div class="d-flex flex-wrap mb-2">
  764.  
  765. non-binary
  766.  
  767. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  768. <span class="mr-1">(</span>
  769.  
  770. gender
  771.  
  772. <span class="ml-1">)</span></span></div>
  773. <!------------------------------------------->
  774.  
  775. <div class="d-flex flex-wrap mb-2">
  776.  
  777. it/she
  778.  
  779. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  780. <span class="mr-1">(</span>
  781.  
  782. pronouns
  783.  
  784. <span class="ml-1">)</span></span></div>
  785. <!------------------------------------------->
  786.  
  787. <div class="d-flex flex-wrap mb-2">
  788.  
  789. coroner
  790.  
  791. <span class="d-flex ml-auto pl-2 font-italic text-muted" style="letter-spacing: 1px; opacity: .5;">
  792. <span class="mr-1">(</span>
  793.  
  794. occupation
  795.  
  796. <span class="ml-1">)</span></span></div>
  797. <!------------------------------------------->
  798.  
  799.  
  800.  
  801. <!-- more fields above this line. ----------->
  802.  
  803. </div>
  804. <div class="flex-grow-1"></div>
  805. <div class="mb-3">
  806.  
  807. <!-- LYRICS ===============================-->
  808.  
  809. <p class="mb-3 text-monospace text-center text-lg-right font-italic text-muted" style="font-size: .8rem; letter-spacing: .5px;">
  810.  
  811. "Darling will you be kind?
  812. <br>Will you be a good man and stay behind if I get old?"
  813.  
  814. </p>
  815.  
  816. <!-- MUSIC PLAYER =========================-->
  817.  
  818. <div class="card row no-gutters flex-row align-items-center ml-n2 ml-lg-0 mr-n2 py-2 px-3 rounded-0" style="border-width: 2px;">
  819. <div class="col-auto ml-n3 mr-3 overflow-hidden">
  820.  
  821. <i class="fa-thin fa-duotone fa-compact-disc fa-width-auto fa-spin ml-n4" style="font-size: 3.5rem; color: var(--primary); opacity: .4; animation-duration: 4s;"></i>
  822.  
  823. </div>
  824. <div class="col py-1">
  825. <h5 class="mb-1 text-monospace text-uppercase" style="font-size: 1rem; letter-spacing: .5px;">
  826.  
  827. The Graveyard Near the House
  828.  
  829. </h5>
  830. <p class="font-italic text-muted" style="font-size: .8rem; letter-spacing: 1px;">
  831.  
  832. The Airborne Toxic Event
  833.  
  834. </p>
  835. </div>
  836. <a href="#" class="btn btn-outline-primary border-0 rounded-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: grayscale(100%); opacity: .075;">
  837. <span style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .0001; overflow: hidden;">
  838. <iframe width="700" height="500"
  839.  
  840. src="https://www.youtube.com/embed/PJdZtoZPIhQ?controls=0" frameborder="0" style="position: absolute; top: -100px; left: -300px;"></iframe>
  841. <!-- youtube embed - replace 'eIXLaIn9PAc' with your youtube id, keep ?controls=0 at the end. -->
  842.  
  843. </span>
  844. </a>
  845. </div>
  846. </div>
  847. <div class="mb-n3"></div>
  848. </div>
  849. </div>
  850. </div>
  851. </div>
  852.  
  853. <!-- CREDIT - DO NOT REMOVE ===============-->
  854.  
  855. <p class="mt-3 text-right">
  856. <a href="https://toyhou.se/Togo" class="text-muted">
  857. <i class="fal fa-code"></i>
  858. </a>
  859. </p>
  860. </div>
  861.  
  862. </div> <!-- carousel-item -->
  863.  
  864. </div> <!-- carousel-inner -->
  865. </div>
Advertisement
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!