Guest User

Warrior Cats Shroomish Toyhouse Theme

a guest
Jul 8th, 2021
274
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.77 KB | None | 0 0
  1. <!---
  2. -feel free to frankenstein my code with others, so long as the other code maker is okay with this as well. if you use significant portions of my code, please include credit for the pieces you used.
  3. -please dont ask me for help with the theme unless you know me personally
  4. -make sure you have "wysiwyg" turned off in your settings
  5. -dont remove my credit from the bottom right
  6. --->
  7.  
  8.  
  9. <div class="pt-3 px-0 mx-0 mb-0 card border-0" style="margin-top:-55px">
  10. <div class="container mx-auto" style="letter-spacing: .45px;">
  11. <div class="m-0 p-0 d-block" style="border-radius: 1em; overflow:auto;">
  12.  
  13. <!----- top image ---->
  14. <div style="background: url(
  15. https://c4.wallpaperflare.com/wallpaper/967/475/614/green-forest-4k-threes-wallpaper-thumb.jpg
  16. ); height:80px; background-size:cover;" class="mb-2 hidden-sm-down"></div>
  17.  
  18. <!---------------------- inside the container spacing/layout stuff -------------------------->
  19. <div class="row no-gutters">
  20. <!---------------- left side ---------------->
  21. <div class="col-md-3 col-sm-4 bg-faded p-2 rounded">
  22.  
  23. <!--- avatar image --- try to use a square image / one with the same height/width --->
  24. <img src="
  25. https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/22075777_ltv.png
  26. " style="max-height: 225px;" class="d-block mx-auto rounded-circle p-4 card border-0 mt-3">
  27.  
  28. <!-------------- sidebar information ---------->
  29. <div class="card d-block border-0 mx-2 mt-3 mb-2 p-3 rounded">
  30. <div class="justify-content-between">
  31. <div class="px-1 text-muted" style="letter-spacing: 1px;"><b>NAME</b></div>
  32. <div class="pr-1">
  33. Name
  34. </div>
  35. </div>
  36. <hr class="my-3">
  37. <div class="justify-content-between">
  38. <div class="px-1 text-muted" style="letter-spacing: 1px;"><b>AGE</b></div>
  39. <div class="pr-1">
  40. Age
  41. </div>
  42. </div>
  43. <hr class="my-3">
  44. <div class="justify-content-between">
  45. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>GENDER</b></div>
  46. <div>
  47. Gender
  48. </div>
  49. </div>
  50. <hr class="my-3">
  51. <div class="justify-content-between">
  52. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>PRONOUNS</b></div>
  53. <div>
  54. Pronouns
  55. </div>
  56. </div>
  57. <hr class="my-3">
  58. <div class="justify-content-between">
  59. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>CLAN</b></div>
  60. <div>
  61. Clan
  62. </div>
  63. </div>
  64. <hr class="my-3">
  65. <div class="justify-content-between">
  66. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>RANK</b></div>
  67. <div>
  68. Rank
  69. </div>
  70. </div>
  71. </div><!--- end of sidebar text info --->
  72. </div><!--- end of left side --->
  73.  
  74.  
  75. <!----------- right ----------->
  76. <div class="col-md-9 col-sm-6 mr-0 pr-0">
  77.  
  78. <!---------------------------------------- NAVIGATION -------------------------------------------->
  79. <!------------ tabs -------------->
  80. <nav>
  81. <div class="nav nav-pills nav-fill hidden-sm-down border-0 d-flex mx-auto" id="nav-tab" role="tablist">
  82. <a class="nav-item nav-link active mx-2" id="nav-one-tab" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true">
  83. <i class="fad fa-cat fa-3x" />
  84. </a>
  85. <a class="nav-item nav-link py-2 mx-2" id="nav-two-tab" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false">
  86. <i class="fad fa-claw-marks fa-3x" />
  87. </a>
  88. <a class="nav-item nav-link py-2 mx-2" id="nav-three-tab" data-toggle="tab" href="#nav-three" role="tab" aria-controls="nav-three" aria-selected="false">
  89. <i class="fad fa-moon-cloud fa-3x" />
  90. </a>
  91. <a class="nav-item nav-link py-2 mx-2" id="nav-four-tab" data-toggle="tab" href="#nav-four" role="tab" aria-controls="nav-four" aria-selected="false">
  92. <i class="fas fa-paw-claws fa-3x" />
  93. </a>
  94. <a class="nav-item nav-link py-2 mx-2" id="nav-five-tab" data-toggle="tab" href="#nav-five" role="tab" aria-controls="nav-five" aria-selected="false">
  95. <i class="fad fa-squirrel fa-3x" />
  96. </a>
  97. </div>
  98. </nav>
  99. <!---- end of tabs ---->
  100.  
  101. <!--- Mobile Navigation --->
  102.  
  103. <ul class="nav flex-column hidden-md-up nav-pills">
  104. <li class="nav-item">
  105. <a class="nav-item nav-link active" id="nav-one-tab" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="true">Summary</a>
  106. </li>
  107. <li class="nav-item">
  108. <a class="nav-item nav-link" id="nav-two-tab" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false">Personality</a>
  109. </li>
  110. <li class="nav-item">
  111. <a class="nav-item nav-link" id="nav-three-tab" data-toggle="tab" href="#nav-three" role="tab" aria-controls="nav-three" aria-selected="false">History</a>
  112. </li>
  113. <li class="nav-item">
  114. <a class="nav-item nav-link" id="nav-four-tab" data-toggle="tab" href="#nav-four" role="tab" aria-controls="nav-four" aria-selected="false">Relationships</a>
  115. </li>
  116. <li class="nav-item">
  117. <a class="nav-item nav-link" id="nav-five-tab" data-toggle="tab" href="#nav-five" role="tab" aria-controls="nav-five" aria-selected="false">Misc.</a>
  118. </li>
  119. </ul>
  120. <!--------------------------------------------------------- end of navigation ------------------------------------------>
  121.  
  122. <div class="card d-block border-0 ml-2 mr-0 p-3 mt-2 bg-faded rounded">
  123. <div class="w-100 my-auto text-justify">
  124. <div class="card d-block border-0 p-3 px-4 rounded" style="overflow:auto; height:510px;">
  125. <div class="tab-content" id="nav-tabContent">
  126.  
  127.  
  128. <!--------------------------------------------------- TAB ONE: SUMMARY ------------------------------------------------->
  129. <div class="tab-pane fade show active" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab">
  130.  
  131. <h2 class="text-center my-3"><i class="text-muted">
  132. "This is a quote. Song lyrics might look nice here."
  133. </i></h2>
  134. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  135.  
  136. <p class="text-center text-muted mb-4">
  137. Allegiances description - keep it short and sweet, like you'd see in the books.
  138. </p>
  139.  
  140. <!--- summary blurb -->
  141. <div class="w-100 my-auto text-justify px-3">
  142. <p>Use this box to summarize your character. It should only include information a stranger would need to know before interacting with the character, like a cliffnotes version. This box will scroll if you fill it up!</p>
  143.  
  144. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  145.  
  146. </div>
  147.  
  148. </div><!--end tab 1-->
  149.  
  150. <!--------------------------------------------------- TAB TWO: PHYSICALITY AND PERSONALITY ------------------------------------------------->
  151.  
  152. <div class="tab-pane fade" id="nav-two" role="tabpanel" aria-labelledby="nav-two-tab">
  153.  
  154. <h1 style="text-align:center;">
  155. Personality + Physicality
  156. </h1>
  157. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  158.  
  159.  
  160. <!------------------- PHYSICAL & MENTAL ATTRIBUTES ---------------------------------------->
  161. <div class="row no-gutters mt-3">
  162. <div class="col-md-6 mb-1 pr-md-1">
  163. <div class="card card-block p-0 d-block h-100">
  164. <p class="text-uppercase text-center py-2" style="letter-spacing:1px;"><b><i class="fas fa-pencil-ruler" aria-hidden="true"></i> Measurements</b></p>
  165. <hr class="my-0">
  166. <table class="table table-striped border-0 mb-0 pb-0">
  167. <tbody>
  168. <tr>
  169. <td class="font-weight-bold text-muted">
  170. Size
  171. </td>
  172. <td class="float-right">
  173. or height
  174. </td>
  175. </tr>
  176. <tr>
  177. <td class="font-weight-bold text-muted">
  178. Build
  179. </td>
  180. <td class="float-right">
  181. or weight
  182. </td>
  183. </tr>
  184. <tr>
  185. <td class="font-weight-bold text-muted">
  186. Breed
  187. </td>
  188. <td class="float-right">
  189. or color
  190. </td>
  191. </tr>
  192. <tr>
  193. <td class="font-weight-bold text-muted">
  194. Demeanor
  195. </td>
  196. <td class="float-right">
  197. demeanor
  198. </td>
  199. </tr>
  200. <tr>
  201. <td class="font-weight-bold text-muted">
  202. Voice
  203. </td>
  204. <td class="float-right">
  205. <a href="#link" target="_BLANK"><i class="fas fa-microphone-stand text-muted" /></a>
  206. </td>
  207. </tr>
  208. </tbody>
  209. </table>
  210. </div>
  211. </div><!--- end measurements --->
  212.  
  213. <div class="col-md-6 mb-1 pl-md-1">
  214. <div class="card card-block p-0 d-block h-100">
  215. <p class="text-uppercase text-center py-2" style="letter-spacing:1px;"><b><i class="fas fa-comment" aria-hidden="true"></i>
  216. Mental Attributes</b></p>
  217. <hr class="my-0">
  218. <table class="table table-striped border-0 mb-0 pb-0">
  219. <tbody>
  220. <tr>
  221. <td class="font-weight-bold text-muted">
  222. Horoscope
  223. </td>
  224. <td class="float-right">
  225. horoscope
  226. </td>
  227. </tr>
  228. <tr>
  229. <td class="font-weight-bold text-muted">
  230. MBTI
  231. </td>
  232. <td class="float-right">
  233. mbti
  234. </td>
  235. </tr>
  236. <tr>
  237. <td class="font-weight-bold text-muted">
  238. Enneagram
  239. </td>
  240. <td class="float-right">
  241. enneagram
  242. </td>
  243. </tr>
  244. <tr>
  245. <td class="font-weight-bold text-muted">
  246. Temperament
  247. </td>
  248. <td class="float-right">
  249. temperament
  250. </td>
  251. </tr>
  252. <tr>
  253. <td class="font-weight-bold text-muted">
  254. Alignment
  255. </td>
  256. <td class="float-right">
  257. alignment
  258. </td>
  259. </tr>
  260. </tbody>
  261. </table>
  262. </div>
  263. </div><!--- end mental attributes --->
  264. </div><!--- end row ---->
  265. <!---- end phys and ment attributes --------->
  266.  
  267. <!------------------- POSI/NEUT/NEGI TRAITS ---------------------------------------->
  268. <div class="row no-gutters mt-1">
  269. <div class="col-md-4 mb-2">
  270. <div class="card card-block mr-1 pb-1 d-block bg-faded h-100" style="padding-top:8px;">
  271. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-plus-circle" aria-hidden="true"></i> Positive</b></p>
  272. <hr class="mt-0 mb-1">
  273. <p class="text-center">
  274. posi trait<br>
  275. posi trait<br>
  276. posi trait</p>
  277. </div>
  278. </div>
  279.  
  280. <div class="col-md-4 pl-md-1 mb-2">
  281. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  282. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-pause-circle" aria-hidden="true"></i> Neutral</b></p>
  283. <hr class="mt-0 mb-1">
  284. <p class="text-center">
  285. neut trait<br>
  286. neut trait<br>
  287. neut trait</p>
  288. </div>
  289. </div>
  290.  
  291. <div class="col-md-4 pl-md-1 mb-2">
  292. <div class="card card-block pb-1 ml-1 d-block bg-faded h-100" style="padding-top:8px;">
  293. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-minus-circle" aria-hidden="true"></i> Negative</b></p>
  294. <hr class="mt-0 mb-1">
  295. <p class="text-center">
  296. nega trait<br>
  297. nega trait<br>
  298. nega trait</p>
  299. </div>
  300. </div>
  301. </div>
  302. <!---end of traits--->
  303. <!--- personality blurb--->
  304. <div class="mt-2 px-3">
  305. <p>Personality stuff will be here. If you add more lines to one of the above boxes, it'll look best if you do the same with the others.</p>
  306. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  307. </div><!--- end personality blurb--->
  308.  
  309. <h2 class="float-right mr-3 mt-3">Physical Description</h2>
  310. <hr class="mt-0 ">
  311.  
  312. <!--- fullbody image --->
  313. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/22021632_KIeOe0BE5V04hJ6.png" class="d-block mx-auto my-auto mx-4 hidden-sm-down">
  314.  
  315. <p class="mx-3">
  316. This section is for describing your character's physical appearance in depth.
  317. <br><br>
  318. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.
  319. </p>
  320.  
  321. <h2 class="float-left ml-3 mt-3">Scars / Injuries</h2>
  322. <hr class="mt-0 ">
  323. <p><ul class="mb-0 px-3 list-unstyled pl-2">
  324. <li class="mb-2"><i class="fas fa-tint fa-fw text-muted" /> info.</li>
  325. <li class="mb-2"><i class="fas fa-tint fa-fw text-muted" /> info.</li>
  326. <li class="mb-2"><i class="fas fa-tint fa-fw text-muted" /> info.</li>
  327. </ul></p>
  328.  
  329. </div><!--------------- end of tab two --------------------->
  330.  
  331.  
  332. <!------- TAB THREE: BACKSTORY / HISTORY ---------->
  333. <div class="tab-pane fade" id="nav-three" role="tabpanel" aria-labelledby="nav-three-tab">
  334.  
  335. <h1 style="text-align:center;">
  336. Backstory
  337. </h1>
  338. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  339.  
  340. <h2 class="text-center my-3"><i class="text-muted">
  341. [-kit] • [-paw] • [-star]
  342. </i></h2>
  343.  
  344. <h2 class="mt-3">Early Life</h2>
  345. <hr class="mt-0 ">
  346. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  347.  
  348. <h2 class="mt-3">Adolescence</h2>
  349. <hr class="mt-0 ">
  350. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  351.  
  352. <h2 class="mt-3">Adulthood</h2>
  353. <hr class="mt-0 ">
  354. <p class="pb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet. Maecenas nec volutpat leo, ac cursus dui. Sed malesuada ipsum sit amet odio tincidunt, vel congue enim sagittis. Cras venenatis ut tellus nec consectetur. Pellentesque pretium ex sit amet magna ultrices commodo.</p>
  355.  
  356. </div><!--- end of tab 3--->
  357.  
  358. <!------- TAB FOUR: RELATIONSHIPS ---------->
  359. <div class="tab-pane fade" id="nav-four" role="tabpanel" aria-labelledby="nav-four-tab">
  360.  
  361. <h1 style="text-align:center;">
  362. Relationships
  363. </h1>
  364. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  365.  
  366.  
  367. <!--------------------- standing/rank card ------ delete if its not necessary -------------->
  368. <div class="card rounded bg-faded mx-3 mb-4 p-3">
  369. <div class="row no-gutters align-items-center">
  370. <div class="col-4">
  371. <!-------- clan image ----------->
  372. <img src="https://i.pinimg.com/originals/b2/25/9f/b2259f12ee459a55df2cfe7f6520164c.png" class="hidden-sm-down d-block rounded mb-1 mx-auto" style="height: 150px;">
  373. <!--- rank etc box --->
  374. <div class="card border-0 mt-3 mx-2">
  375. <div class="mx-auto p-3">
  376. <p class="mb-1" style="text-align:center;"><b>STANDING</b></p>
  377. <p style="text-align:center;" class="my-0">
  378. <i class="fas fa-star"></i>
  379. <i class="fas fa-star"></i>
  380. <i class="fas fa-star"></i>
  381. <i class="fas fa-star"></i>
  382. <i class="far fa-star"></i>
  383. </p>
  384. </div>
  385. </div><!--- end of rank box--->
  386. </div><!-- end of left side -->
  387. <div class="col-8 pl-2 pr-3">
  388. <h2 class="mt-2 mb-0 text-center">Clan / Faction Name</h2>
  389. <hr class="mb-3 mt-1">
  390. <p>Use this box to explain your character's relationship to/with their own clan as a whole. Do they agree with clan life? Do they feel accepted by their clanmates? Do they have a poor reputation among their peers? etc. This box does not scroll!</p>
  391. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris non nibh quis magna placerat porttitor. Morbi ac enim at eros scelerisque pretium. Nam elit enim, fermentum et nunc ut, laoreet sollicitudin nibh. Nunc at sodales turpis. Quisque vulputate vel nisi eu condimentum. Sed ultrices velit a ante tristique aliquet.</p>
  392. </div>
  393. </div><!-- end of row--->
  394. </div><!--- end of standing/faction card ---->
  395.  
  396.  
  397. <!-------------------- CHARACTER --------------------->
  398. <div class="card d-block p-3 px-4 bg-faded mb-4 mx-3">
  399. <div class="float-left mr-3 mb-2 mt-0">
  400. <!-------- avatar image ----------->
  401. <img src="
  402.  
  403. https://f2.toyhou.se/file/f2-toyhou-se/characters/6891969?1589345168
  404.  
  405. " class="hidden-sm-down d-block mb-2 mx-auto img-thumbnail" style="height:150px;">
  406. <center>
  407. <div class="text-muted" style="letter-spacing: 1px; mb-1">
  408.  
  409. [ <i>relationship</i> ]
  410.  
  411. </div>
  412. </center>
  413. </div><!--------- end of left side ------------>
  414.  
  415. <!--- right side--->
  416.  
  417. <!--- character name --->
  418. <center><h2><a href="#LINK">
  419. Name
  420. </a></h2></center>
  421.  
  422. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  423. <div class="mx-auto mb-2">
  424. <center>
  425. <!--- rating --->
  426. <!--- positive --->
  427. <i class="fal fa-rings-wedding fa-fw" />
  428. <i class="fal fa-heart fa-fw" />
  429. <i class="fal fa-heart fa-fw" />
  430. <i class="fal fa-heart fa-fw" />
  431. <i class="fal fa-heart fa-fw" />
  432. <i class="fas fa-heart fa-fw" /> |
  433. <!--- neutral --->
  434. <i class="fas fa-heart-rate fa-fw" /> |
  435. <!--- negative --->
  436. <i class="fas fa-heart-broken fa-fw" />
  437. <i class="fas fa-heart-broken fa-fw" />
  438. <i class="fas fa-heart-broken fa-fw" />
  439. <i class="fal fa-heart-broken fa-fw" />
  440. <i class="fal fa-heart-broken fa-fw" />
  441. <i class="fal fa-knife-kitchen fa-fw" />
  442. </center>
  443. </div><!--- end of relationship strength --->
  444. <!------------ relationship blurb ----------->
  445.  
  446. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  447.  
  448. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  449.  
  450. </div><!----------------------end of character --------------------->
  451.  
  452. <!-------------------- CHARACTER --------------------->
  453. <div class="card d-block p-3 px-4 bg-faded mb-4 mx-3">
  454. <div class="float-left mr-3 mb-2 mt-0">
  455. <!-------- avatar image ----------->
  456. <img src="
  457.  
  458. https://file.toyhou.se/characters/3144059?1544077526
  459.  
  460. " class="hidden-sm-down d-block mb-2 mx-auto img-thumbnail" style="height:150px;">
  461. <center>
  462. <div class="text-muted" style="letter-spacing: 1px; mb-1">
  463.  
  464. [ <i>relationship</i> ]
  465.  
  466. </div>
  467. </center>
  468. </div><!--------- end of left side ------------>
  469.  
  470. <!--- right side--->
  471.  
  472. <!--- character name --->
  473. <center><h2><a href="#LINK">
  474. Name
  475. </a></h2></center>
  476.  
  477. <!------- RELATIONSHIP STRENGTH -- FAS FOR FULL AND FAL FOR EMPTY -->
  478. <div class="mx-auto mb-2">
  479. <center>
  480. <!--- rating --->
  481. <!--- positive --->
  482. <i class="fal fa-rings-wedding fa-fw" />
  483. <i class="fal fa-heart fa-fw" />
  484. <i class="fal fa-heart fa-fw" />
  485. <i class="fal fa-heart fa-fw" />
  486. <i class="fal fa-heart fa-fw" />
  487. <i class="fas fa-heart fa-fw" /> |
  488. <!--- neutral --->
  489. <i class="fas fa-heart-rate fa-fw" /> |
  490. <!--- negative --->
  491. <i class="fas fa-heart-broken fa-fw" />
  492. <i class="fas fa-heart-broken fa-fw" />
  493. <i class="fas fa-heart-broken fa-fw" />
  494. <i class="fal fa-heart-broken fa-fw" />
  495. <i class="fal fa-heart-broken fa-fw" />
  496. <i class="fal fa-knife-kitchen fa-fw" />
  497. </center>
  498. </div><!--- end of relationship strength --->
  499. <!------------ relationship blurb ----------->
  500.  
  501. <p class="mt-3">Write about your character's relationships here! Try to keep it somewhat brief, or it might look a little awkward.</p>
  502.  
  503. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin.</p>
  504.  
  505. </div><!----------------------end of character --------------------->
  506.  
  507.  
  508. <!---------------------------- misc. relationships list ----------------->
  509. <div class="card card-block mx-3 mb-4 bg-faded p-0 d-block h-100">
  510. <ul class="nav">
  511. <li class="nav-item mx-auto"><a id="nav-family-tab" class="nav-link" role="tab" href="#nav-family" data-toggle="collapse" aria-controls="nav-family" aria-selected="false" aria-expanded="false">
  512. <p class="text-uppercase text-center py-2" style="letter-spacing:1px;"><b><i class="fas fa-user-circle" aria-hidden="true"></i>
  513. Misc. Family
  514. </b></p></a></li></ul>
  515. <div id="nav-family" class="tab-pane collapse" role="tabpanel" aria-labelledby="nav-family-tab">
  516. <hr class="my-0">
  517. <table class="table table-striped border-0 mb-0 pb-0">
  518. <thead>
  519. <tr>
  520. <th scope="col">Name</th>
  521. <th scope="col">Relation</th>
  522. <th scope="col" style="text-align:center;">Clan</th>
  523. <th scope="col" style="text-align:center;">Opinion</th>
  524. </tr>
  525. </thead>
  526. <tbody>
  527. <tr>
  528. <td>
  529. Name 1
  530. </td>
  531. <td>
  532. Relation 1
  533. </td>
  534. <td style="text-align:center;">
  535. Thunderclan
  536. </td>
  537. <td class="float-right">
  538. <i class="fal fa-heart fa-fw" />
  539. <i class="fal fa-heart fa-fw" />
  540. <i class="fal fa-heart fa-fw" />
  541. <i class="fal fa-heart fa-fw" />
  542. <i class="fas fa-heart fa-fw" /> |
  543. <!--- neutral --->
  544. <i class="fas fa-heart-rate fa-fw" /> |
  545. <!--- negative --->
  546. <i class="fas fa-heart-broken fa-fw" />
  547. <i class="fas fa-heart-broken fa-fw" />
  548. <i class="fas fa-heart-broken fa-fw" />
  549. <i class="fal fa-heart-broken fa-fw" />
  550. <i class="fal fa-heart-broken fa-fw" />
  551. </td>
  552. </tr>
  553. <tr>
  554. <td>
  555. Name 2
  556. </td>
  557. <td>
  558. Relation 2
  559. </td>
  560. <td style="text-align:center;">
  561. Riverclan
  562. </td>
  563. <td class="float-right">
  564. <i class="fal fa-heart fa-fw" />
  565. <i class="fal fa-heart fa-fw" />
  566. <i class="fal fa-heart fa-fw" />
  567. <i class="fal fa-heart fa-fw" />
  568. <i class="fas fa-heart fa-fw" /> |
  569. <!--- neutral --->
  570. <i class="fas fa-heart-rate fa-fw" /> |
  571. <!--- negative --->
  572. <i class="fas fa-heart-broken fa-fw" />
  573. <i class="fas fa-heart-broken fa-fw" />
  574. <i class="fas fa-heart-broken fa-fw" />
  575. <i class="fal fa-heart-broken fa-fw" />
  576. <i class="fal fa-heart-broken fa-fw" />
  577. </td>
  578. </tr>
  579. <!--- start copy here for more rows --->
  580. <tr>
  581. <td>
  582. Name 3
  583. </td>
  584. <td>
  585. Relation 3
  586. </td>
  587. <td style="text-align:center;">
  588. Shadowclan
  589. </td>
  590. <td class="float-right">
  591. <i class="fal fa-heart fa-fw" />
  592. <i class="fal fa-heart fa-fw" />
  593. <i class="fal fa-heart fa-fw" />
  594. <i class="fal fa-heart fa-fw" />
  595. <i class="fas fa-heart fa-fw" /> |
  596. <!--- neutral --->
  597. <i class="fas fa-heart-rate fa-fw" /> |
  598. <!--- negative --->
  599. <i class="fas fa-heart-broken fa-fw" />
  600. <i class="fas fa-heart-broken fa-fw" />
  601. <i class="fas fa-heart-broken fa-fw" />
  602. <i class="fal fa-heart-broken fa-fw" />
  603. <i class="fal fa-heart-broken fa-fw" />
  604. </td>
  605. </tr>
  606. <!--- end copy here --->
  607. </tbody>
  608. </table>
  609. </div>
  610. </div><!------------------------ end of relationships list ----------------->
  611.  
  612. <!---------------------------- misc. relationships list ----------------->
  613. <div class="col-md-6 float-left m-0">
  614. <div class="card card-block bg-faded p-0 d-block h-100">
  615. <ul class="nav">
  616. <li class="nav-item mx-auto"><a id="nav-friends-tab" class="nav-link" role="tab" href="#nav-friends" data-toggle="collapse" aria-controls="nav-friends" aria-selected="false" aria-expanded="false">
  617. <p class="text-uppercase text-center py-2" style="letter-spacing:1px;"><b><i class="fas fa-user-circle" aria-hidden="true"></i>
  618. Misc. Friends
  619. </b></p></a></li></ul>
  620. <div id="nav-friends" class="tab-pane collapse" role="tabpanel" aria-labelledby="nav-friends-tab">
  621. <hr class="my-0">
  622. <table class="table table-striped border-0 mb-0 pb-0">
  623. <thead>
  624. <tr>
  625. <th scope="col">Name</th>
  626. <th scope="col" style="text-align:center;">Clan</th>
  627. <th scope="col" style="text-align:center;">Opinion</th>
  628. </tr>
  629. </thead>
  630. <tbody>
  631. <tr>
  632. <td>
  633. Name 1
  634. </td>
  635. <td style="text-align:center;">
  636. Thunderclan
  637. </td>
  638. <td class="float-right">
  639. <i class="fas fa-heart fa-fw" />
  640. <i class="fas fa-heart fa-fw" />
  641. <i class="fas fa-heart fa-fw" />
  642. <i class="fas fa-heart fa-fw" />
  643. <i class="fal fa-heart fa-fw" />
  644. </td>
  645. </tr>
  646. <tr>
  647. <td>
  648. Name 2
  649. </td>
  650. <td style="text-align:center;">
  651. Riverclan
  652. </td>
  653. <td class="float-right">
  654. <i class="fas fa-heart fa-fw" />
  655. <i class="fas fa-heart fa-fw" />
  656. <i class="fas fa-heart fa-fw" />
  657. <i class="fas fa-heart fa-fw" />
  658. <i class="fal fa-heart fa-fw" />
  659. </td>
  660. </tr>
  661. <!--- start copy here for more rows --->
  662. <tr>
  663. <td>
  664. Name 3
  665. </td>
  666. <td style="text-align:center;">
  667. Shadowclan
  668. </td>
  669. <td class="float-right">
  670. <i class="fas fa-heart fa-fw" />
  671. <i class="fas fa-heart fa-fw" />
  672. <i class="fas fa-heart fa-fw" />
  673. <i class="fas fa-heart fa-fw" />
  674. <i class="fal fa-heart fa-fw" />
  675. </td>
  676. </tr>
  677. <!--- end copy here --->
  678. </tbody>
  679. </table>
  680. </div>
  681. </div>
  682. </div><!------------------------ end of relationships list ----------------->
  683.  
  684. <!---------------------------- misc. relationships list ----------------->
  685. <div class="col-6 float-right m-0">
  686. <div class="card card-block bg-faded p-0 d-block h-100 mb-3">
  687. <ul class="nav">
  688. <li class="nav-item mx-auto"><a id="nav-enemies-tab" class="nav-link" role="tab" href="#nav-enemies" data-toggle="collapse" aria-controls="nav-enemies" aria-selected="false" aria-expanded="false">
  689. <p class="text-uppercase text-center py-2" style="letter-spacing:1px;"><b><i class="fas fa-user-circle" aria-hidden="true"></i>
  690. Misc. Enemies
  691. </b></p></a></li></ul>
  692. <div id="nav-enemies" class="tab-pane collapse" role="tabpanel" aria-labelledby="nav-enemies-tab">
  693. <hr class="my-0">
  694. <table class="table table-striped border-0 mb-0 pb-0">
  695. <thead>
  696. <tr>
  697. <th scope="col">Name</th>
  698. <th scope="col" style="text-align:center;">Clan</th>
  699. <th scope="col" style="text-align:center;">Opinion</th>
  700. </tr>
  701. </thead>
  702. <tbody>
  703. <tr>
  704. <td>
  705. Name 1
  706. </td>
  707. <td style="text-align:center;">
  708. Thunderclan
  709. </td>
  710. <td class="float-right">
  711. <i class="fas fa-heart-broken fa-fw" />
  712. <i class="fas fa-heart-broken fa-fw" />
  713. <i class="fas fa-heart-broken fa-fw" />
  714. <i class="fas fa-heart-broken fa-fw" />
  715. <i class="fal fa-heart-broken fa-fw" />
  716. </td>
  717. </tr>
  718. <tr>
  719. <td>
  720. Name 2
  721. </td>
  722. <td style="text-align:center;">
  723. Riverclan
  724. </td>
  725. <td class="float-right">
  726. <i class="fas fa-heart-broken fa-fw" />
  727. <i class="fas fa-heart-broken fa-fw" />
  728. <i class="fas fa-heart-broken fa-fw" />
  729. <i class="fas fa-heart-broken fa-fw" />
  730. <i class="fal fa-heart-broken fa-fw" />
  731. </td>
  732. </tr>
  733. <!--- start copy here for more rows --->
  734. <tr>
  735. <td>
  736. Name 3
  737. </td>
  738. <td style="text-align:center;">
  739. Shadowclan
  740. </td>
  741. <td class="float-right">
  742. <i class="fas fa-heart-broken fa-fw" />
  743. <i class="fas fa-heart-broken fa-fw" />
  744. <i class="fas fa-heart-broken fa-fw" />
  745. <i class="fas fa-heart-broken fa-fw" />
  746. <i class="fal fa-heart-broken fa-fw" />
  747. </td>
  748. </tr>
  749. <!--- end copy here --->
  750. </tbody>
  751. </table>
  752. </div>
  753. </div>
  754. </div><!------------------------ end of relationships list ----------------->
  755.  
  756. </div><!--- end of tab 4--->
  757.  
  758. <!------- TAB FIVE: MISCELLANEOUS / TRIVIA ---------->
  759. <div class="tab-pane fade" id="nav-five" role="tabpanel" aria-labelledby="nav-five-tab">
  760.  
  761. <h1 style="text-align:center;">
  762. Miscellaneous
  763. </h1>
  764. <hr class="mb-3 mt-0 mx-auto" width="85%" align="center">
  765.  
  766. <!--- start copy here for new row of boxes--->
  767. <div class="row no-gutters mx-3">
  768. <!------------------- LIKES & DISLIKES ---------------------------------------->
  769. <div class="col-md-6 pr-md-1 mb-2 hidden-sm-down">
  770. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  771. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-check-circle" aria-hidden="true"></i> Favorite</b></p>
  772. <hr class="mt-0 mb-2">
  773. <div class="justify-content-between">
  774. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Prey</b></div>
  775. <div>info</div>
  776. </div>
  777. <div class="justify-content-between">
  778. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Scent</b></div>
  779. <div>info</div>
  780. </div>
  781. <div class="justify-content-between">
  782. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Activity</b></div>
  783. <div>info</div>
  784. </div>
  785. <div class="justify-content-between">
  786. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Color</b></div>
  787. <div>info</div>
  788. </div>
  789. </div>
  790. </div>
  791.  
  792. <div class="col-md-6 pl-md-1 mb-2 hidden-sm-down">
  793. <div class="card card-block pb-1 d-block h-100" style="padding-top:8px;">
  794. <p class="text-uppercase text-center mb-1" style="letter-spacing:1px;"><b><i class="fa fa-times-circle" aria-hidden="true"></i> Disliked</b></p>
  795. <hr class="mt-0 mb-2">
  796. <div class="justify-content-between">
  797. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Prey</b></div>
  798. <div>info</div>
  799. </div>
  800. <div class="justify-content-between">
  801. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Scent</b></div>
  802. <div>info</div>
  803. </div>
  804. <div class="justify-content-between">
  805. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Activity</b></div>
  806. <div>info</div>
  807. </div>
  808. <div class="justify-content-between">
  809. <div class="pr-1 text-muted" style="letter-spacing: 1px;"><b>Color</b></div>
  810. <div>info</div>
  811. </div>
  812. </div>
  813. </div>
  814. </div>
  815. <!--- end copy here for new row of boxes--->
  816.  
  817. <!---- stat bars -- the higher the percent, the closer to the right personality value the character is -- credit to @eggy for the stat bar idea/style --->
  818. <div class="col-7 my-3 mx-auto">
  819. <div class="justify-content-between">
  820. <div class="pr-3"><b>EXTROVERT</b></div>
  821. <div class="pr-1"><b>INTROVERT</b></div></div>
  822. <div class="progress">
  823. <div class="progress-bar card-primary" style="background:none; border-right-width:8px; border-right-style:solid;
  824. width:50%">
  825. </div>
  826. </div>
  827. </div>
  828.  
  829. <div class="col-7 my-3 mx-auto">
  830. <div class="justify-content-between">
  831. <div class="pr-3"><b>HONORABLE</b></div>
  832. <div class="pr-1"><b>UNDERHANDED</b></div></div>
  833. <div class="progress">
  834. <div class="progress-bar card-primary" style="background:none; border-right-width:8px; border-right-style:solid;
  835. width:50%">
  836. </div>
  837. </div>
  838. </div>
  839.  
  840. <div class="col-7 my-3 mx-auto">
  841. <div class="justify-content-between">
  842. <div class="pr-3"><b>STRATEGIC</b></div>
  843. <div class="pr-1"><b>IMPULSIVE</b></div></div>
  844. <div class="progress">
  845. <div class="progress-bar card-primary" style="background:none; border-right-width:8px; border-right-style:solid;
  846. width:50%">
  847. </div>
  848. </div>
  849. </div>
  850.  
  851. <div class="col-7 my-3 mx-auto">
  852. <div class="justify-content-between">
  853. <div class="pr-3"><b>ACTIVE</b></div>
  854. <div class="pr-1"><b>PASSIVE</b></div></div>
  855. <div class="progress">
  856. <div class="progress-bar card-primary" style="background:none; border-right-width:8px; border-right-style:solid;
  857. width:50%">
  858. </div>
  859. </div>
  860. </div>
  861.  
  862. <div class="col-7 my-3 mx-auto">
  863. <div class="justify-content-between">
  864. <div class="pr-3"><b>LOGICAL</b></div>
  865. <div class="pr-1"><b>EMPATHETIC</b></div></div>
  866. <div class="progress">
  867. <div class="progress-bar card-primary" style="background:none; border-right-width:8px; border-right-style:solid;
  868. width:50%">
  869. </div>
  870. </div>
  871. </div>
  872. <!--- end of stat bars --->
  873.  
  874. <h1 class="mt-3">Trivia</h1>
  875. <hr class="mt-0 ">
  876. <p><ul class="mb-0 px-3 list-unstyled pl-2">
  877. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> might be a good place for 9 lives, if the cat is a leader.</li>
  878. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  879. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  880. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  881. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  882. <li class="mb-2"><i class="fas fa-asterisk fa-fw text-muted" /> info.</li>
  883. </ul></p>
  884.  
  885.  
  886. <h1 class="mt-3">Alternate WCRP Verses</h1>
  887. <hr class="mt-0 ">
  888.  
  889. <!------------------- ALTERNATE WC VERSE -- CHANGE "AU1" TO "AU2"/etc FOR MORE ------------------------------------->
  890. <div class="card card-block p-0 mx-3 mb-3 d-block h-100">
  891. <ul class="nav">
  892. <li class="nav-item mx-auto"><a id="nav-au1-tab" class="nav-link" role="tab" href="#nav-au1" data-toggle="collapse" aria-controls="nav-au1" aria-selected="false" aria-expanded="false">
  893. <p class="text-uppercase text-center py-2" style="letter-spacing:1px;"><b>
  894. 🌇 Eventide
  895. </b></p></a></li></ul>
  896. <div id="nav-au1" class="tab-pane collapse" role="tabpanel" aria-labelledby="nav-au1-tab">
  897. <hr class="my-0">
  898. <table class="table table-striped border-0 mb-0 pb-0">
  899. <tbody>
  900. <tr>
  901. <td class="font-weight-bold text-muted">
  902. NAME
  903. </td>
  904. <td class="float-right">
  905. "Ghost" / Riverpaw
  906. </td>
  907. </tr>
  908. <tr>
  909. <td class="font-weight-bold text-muted">
  910. AGE
  911. </td>
  912. <td class="float-right">
  913. 7 Moons
  914. </td>
  915. </tr>
  916. <tr>
  917. <td class="font-weight-bold text-muted">
  918. CLAN / RANK
  919. </td>
  920. <td class="float-right">
  921. Gloamclan Warrior Apprentice
  922. </td>
  923. </tr>
  924. </tbody>
  925. </table>
  926.  
  927. <p class="mt-3"> <center><b>| NB Molly (He/they) | 7 moons | WLW | Apprentice | Gloamclan |</b><br>
  928. - <i>"Ugh, do I have to?"</i><br><br>
  929.  
  930. - Voice Claim: Grace Rolek<br>
  931. https://open.spotify.com/track/1kF9FK8ZuhbTlC7HZtekzD?si=QqncgKO5TMmBtwMJ9mLNtQ<br><br>
  932.  
  933. <b>| APPEARANCE |</b><br>
  934. <i>[A small, short-furred blue tabby with green eyes.]</i><br><br>
  935.  
  936. Riverpaw was a small tabby molly with large, pointed ears and a triangular face. He had a tear in one ear, but no other notable scars. Riverpaw's fur was short and thick, with dark, swirling stripes. He had bright green eyes and an often unblinking stare. He usually had a haunted expression or a glower on his face.<br><br>
  937.  
  938. Curse:<br>
  939. <i>- Medium; haunted by ghosts and can't block it out or turn it off. <br>
  940. - Ghosts seem to get "stuck" or tethered to him until he helps them pass on by fulfilling their final wish.</i><br><br>
  941.  
  942. <b>| PERSONALITY |</b><br>
  943. <b>+</b> Caring, Dutiful, Quick-witted<br>
  944. <b>-</b> Secretive, Standoffish, Grumpy<br><br>
  945.  
  946. Riverpaw was a quiet, observant molly. He rarely spoke, and when he did it was usually a defensive retort or an unsettling statement. He was mistrustful of others due to bullying at the paws of older apprentices and spent much of his time staring into empty space. He was jumpy and paranoid and tended to speak about things he shouldn't have known, such as events that happened before he was born. <br><br>
  947.  
  948. Aside from this, Riverpaw was reluctant to do apprentice duties and grumbled about them when ordered. They spent most of their time alone.<br><br>
  949.  
  950. <b>| BACKGROUND |</b><br>
  951. Riverkit was born to a warrior mother. His father was unknown, but speculated by others to have been a passing loner. They were a quiet, but cheerful, kit; much of their time was spent hiding behind their mother, though they weren't unsociable by any means. Riverkit's mother died of greencough shortly before they were apprenticed, leaving them to be raised by the other queens for the remainder of their time in the nursery. They were apprenticed a little early in hopes of taking their mind off their mother's passing.<br><br>
  952.  
  953. After his mother's death, Riverpaw changed. Though he had always been quiet, he became jumpy and paranoid, staring at nothing, isolating himself, and snapping at any that got too close. His self isolation worsened when other apprentices took to calling him "Ghost," thanks to his unsettling stare and silent demeanor.<br><br>
  954.  
  955. He, along with several other apprentices, was sent on a Starclan-ordained journey by Silkstar and never returned.<br><br>
  956.  
  957. <b>| RELATIONSHIPS |</b><br>
  958. Parents - <s>Dawnspring</s>, Unknown father<br>
  959. Siblings - unknown<br><br>
  960.  
  961. Mentor - Dovepurr<br><br>
  962.  
  963.  
  964. <b>| STATS |</b><br>
  965. STR: 5<br>
  966. CON: 6<br>
  967. DEX: 7<br>
  968. INT: 8<br>
  969. WIS: 8<br>
  970. CHA: 5</center></p>
  971.  
  972. </div>
  973. </div>
  974. <!---- end alternate wc verse --------->
  975.  
  976. </div><!--- end of tab 5--->
  977. </div><!--- end tab formatting stuff --->
  978. </div><!--- end of tab content --->
  979. </div><!--- end of text spacing stuff --->
  980. </div><!--- end of middle card --->
  981. </div><!--- end of middle --->
  982. </div><!--- end of faded bg / border / sizing stuff --->
  983. <!----- bottom image ---->
  984. <div style="background: url(
  985. https://c4.wallpaperflare.com/wallpaper/126/455/813/forest-trees-backgrounds-fog-download-3840x2400-forest-wallpaper-preview.jpg
  986. ); height:80px; background-size:cover;" class="mt-2 hidden-sm-down"></div>
  987. </div><!--- end of container --->
  988. <p class="mt-0 mr-3 small text-right">template by @shroomish</p>
  989. </div><!--- end of card -->
Add Comment
Please, Sign In to add comment