API tools faq
paste
junijwi

Equinox

junijwi
Jun 4th, 2023 (edited)
1,540
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 21.59 KB | None | 0 0
raw download clone embed print report
  1. <!--------------------------------------------------------------------------------
  2.  
  3. EQUINOX profile by JUNI
  4.  
  5. Please edit the code with WYSIWYG turned off and Code Editor turned on.
  6. I personally recommend editing the code in a code editor like Visual Studio Code
  7. OR using the very handy live-preview website:
  8. https://th.circlejourney.net/
  9. You may alter/relocate/restyle coding credit, but please do not remove it.
  10.  
  11. You can CTRL+Replace these
  12. Dark Grey Color: #343434
  13. Gold Color: #B18B4D
  14. Red Color: #820000
  15.  
  16. -------------------------------------------------------------------------------->
  17.  
  18. <div class="container mx-auto p-0" style="font-family: Palatino Linotype; color: black; margin-top: 40px; max-width: 600px;">
  19.     <!-- Header -->
  20.     <div class="card rounded-0 p-md-4 p-2" style="background-color: #343434; background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38795138_znzseRagyqvrokZ.png?1629450779'); background-blend-mode: overlay; border-color: rgba(0,0,0,.2); border-top-left-radius: 15px; border-top-right-radius: 15px;">
  21.         <!-- Link buttons, you can remove this whole section if you don't want them -->
  22.         <div class="d-md-flex d-none" style="position: absolute; right: 10px; top: -20px;">
  23. <!-- link name -->
  24.             <span data-toggle="tooltip" title="LINK_NAME_1">
  25. <!-- link url -->
  26.                 <a class="btn btn-default mx-2 border-0 justify-content-center" href="LINK_URL_1" style="border-radius: 50px; background-color: #B18B4D; color: white; height: 50px; width: 50px; overflow: hidden;">
  27.                 <i class="fas fa-plus fa-2x m-auto"></i>
  28.                 </a></span>
  29. <!-- link name -->
  30.             <span data-toggle="tooltip" title="LINK_NAME_2">
  31. <!-- link url -->
  32.                 <a class="btn btn-default mx-2 border-0 justify-content-center" href="LINK_URL_2" style="border-radius: 50px; background-color: #B18B4D; color: white; height: 50px; width: 50px; overflow: hidden;">
  33.                     <i class="fas fa-users fa-2x m-auto"></i>
  34.                 </a></span>
  35. <!-- link name -->
  36.             <span data-toggle="tooltip" title="LINK_NAME_3">
  37. <!-- link url -->
  38.                 <a class="btn btn-default mx-2 border-0 justify-content-center" href="LINK_URL_3" style="border-radius: 50px; background-color: #B18B4D; color: white; height: 50px; width: 50px; overflow: hidden;">
  39.                     <i class="fas fa-paint-brush fa-2x m-auto"></i>
  40.                 </a></span>
  41.         </div>
  42.         <!-- end of Link buttons, if you're removing them, remove above this line -->
  43.         <div class="text-white text-md-left text-center" style="letter-spacing: 1px;">
  44. <!-- name -->
  45.             <p class="font-weight-bold mb-0" style="font-size: 1.8rem;">name SURNAME</p>
  46.             <p>
  47. <!-- misc info -->
  48.                 species | true neutral | zodiac
  49.             </p>
  50.         </div>
  51.     </div>
  52.     <div class="card rounded-0 m-0 p-md-4 p-2" style="background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38827311_jS3w5QxxLnRxtBO.png?1629522396'); border: 1px solid rgba(0,0,0,.2);">
  53.         <div class="card rounded-0 p-md-4 p-2" style="background-color: white; border-color: rgba(0,0,0,.2);">
  54.             <div class="row">
  55.                 <div class="col-md col-6 order-0">
  56.                     <div class="row">
  57.                         <div class="col-md-auto col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  58.                             Pronouns
  59.                         </div>
  60.                         <div class="col-md col-12 text-md-right text-center">
  61. <!-- pronouns -->
  62.                             -/-
  63.                         </div>
  64.                     </div>
  65.                     <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  66.                     <div class="row">
  67.                         <div class="col-md-auto col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  68.                             Age
  69.                         </div>
  70.                         <div class="col-md col-12 text-md-right text-center">
  71. <!-- age -->
  72.                             00 yrs
  73.                         </div>
  74.                     </div>
  75.                     <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  76.                     <div class="row">
  77.                         <div class="col-md-auto col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  78.                             Height
  79.                         </div>
  80.                         <div class="col-md col-12 text-md-right text-center">
  81. <!-- height -->
  82.                             0'00" | 000.00 cm
  83.                         </div>
  84.                     </div>
  85.                     <div class="text-center mt-3 d-md-flex d-none" style="color: #8B8B8B;">
  86. <!-- quote -->
  87.                         <p>"A quote from the character goes here."</p>
  88.                     </div>
  89.                 </div>
  90.                 <div class="col-md col-6 order-md-2 order-1 mb-md-0 mb-3">
  91. <!-- character image
  92. around 400x600 px -->
  93.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/38810282_RVLkjdxEU8fXsiu.png" style="position: absolute; bottom: -25px; right: 0px;">
  94.                 </div>
  95.             </div>
  96.         </div>
  97.         <div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true">
  98.             <div>
  99.                 <a class="btn btn-default rounded-0 mt-2 px-md-4 px-2 py-2 text-md-left text-center font-weight-bold text-uppercase text-white w-100 text-wrap" role="tab" id="heading1" data-toggle="collapse" data-parent="#accordion" href="#accordion1" aria-expanded="false" aria-controls="accordion1" style="background-color: #820000; background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38795138_znzseRagyqvrokZ.png?1629450779'); background-blend-mode: overlay; border-color: rgba(0,0,0,.2); font-size: 1.8rem; letter-spacing: 1px;">
  100.                     Personality
  101.                 </a>
  102.             </div>
  103.             <div id="accordion1" class="collapse" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
  104.                 <div class="card rounded-0 p-md-4 p-2 my-2" style="background-color: white; border-color: rgba(0,0,0,.2);">
  105.                     <div class="row mb-2">
  106.                         <div class="col-md col-12 pr-md-0">
  107.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  108.                         </div>
  109. <!-- personality traits -->
  110.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Trait - Trait - Trait - Trait</div>
  111.                         <div class="col-md col-12 pl-md-0">
  112.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  113.                         </div>
  114.                     </div>
  115.                     <div class="text-justify p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  116. <!-- personality text -->
  117.                         <p>
  118.                             Some things you can write about in this section include their intelligence, strengths, weaknesses, adaptability, habits, temperament, morality, attitude, opinions, optimism, work ethic, values and beliefs, desires, coping mechanisms, or fears. You can also address how they treat strangers vs friends vs family, or what they prioritize in life, as well as their alignments (lawful / neutral / chaotic and good / neutral / evil).
  119.                         </p>
  120. <!-- end of personality text -->
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.             <div>
  125.                 <a class="btn btn-default rounded-0 mt-2 px-md-4 px-2 py-2 text-md-left text-center font-weight-bold text-uppercase text-white w-100 text-wrap" role="tab" id="heading2" data-toggle="collapse" data-parent="#accordion" href="#accordion2" aria-expanded="false" aria-controls="accordion2" style="background-color: #820000; background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38795138_znzseRagyqvrokZ.png?1629450779'); background-blend-mode: overlay; border-color: rgba(0,0,0,.2); font-size: 1.8rem; letter-spacing: 1px;">
  126.                     Background
  127.                 </a>
  128.             </div>
  129.             <div id="accordion2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
  130.                 <div class="card rounded-0 p-md-4 p-2 my-2" style="background-color: white; border-color: rgba(0,0,0,.2);">
  131.                     <div class="row mb-2">
  132.                         <div class="col-md col-12 pr-md-0">
  133.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  134.                         </div>
  135. <!-- background section title -->
  136.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Childhood</div>
  137.                         <div class="col-md col-12 pl-md-0">
  138.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  139.                         </div>
  140.                     </div>
  141.                     <div class="text-justify mb-3 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  142. <!-- background section text -->
  143.                         <p>
  144.                             What circumstances were they born in? Who were their parents? Was their childhood comfortable or a struggle?
  145.                         </p>
  146. <!-- end of background text -->
  147.                     </div>
  148.                     <div class="row mb-2">
  149.                         <div class="col-md col-12 pr-md-0">
  150.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  151.                         </div>
  152. <!-- background section title -->
  153.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Turning Point</div>
  154.                         <div class="col-md col-12 pl-md-0">
  155.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  156.                         </div>
  157.                     </div>
  158.                     <div class="text-justify mb-3 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  159. <!-- background section text -->
  160.                         <p>
  161.                             At what moment did your character enter their moment of agency in the story? This event should give them drive/motivation.
  162.                         </p>
  163. <!-- end of background text -->
  164.                     </div>
  165.                     <div class="row mb-2">
  166.                         <div class="col-md col-12 pr-md-0">
  167.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  168.                         </div>
  169. <!-- background section title -->
  170.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Presently</div>
  171.                         <div class="col-md col-12 pl-md-0">
  172.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  173.                         </div>
  174.                     </div>
  175.                     <div class="text-justify p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  176. <!-- background section text -->
  177.                         <p>
  178.                             What is your character's current job? What are their goals? What sort of places do they roam?
  179.                         </p>
  180. <!-- end of background text -->
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.             <div>
  185.                 <a class="btn btn-default rounded-0 mt-2 px-md-4 px-2 py-2 text-md-left text-center font-weight-bold text-uppercase text-white w-100 text-wrap" role="tab" id="heading3" data-toggle="collapse" data-parent="#accordion" href="#accordion3" aria-expanded="false" aria-controls="accordion3" style="background-color: #820000; background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38795138_znzseRagyqvrokZ.png?1629450779'); background-blend-mode: overlay; border-color: rgba(0,0,0,.2); font-size: 1.8rem; letter-spacing: 1px;">
  186.                     Abilities
  187.                 </a>
  188.             </div>
  189.             <div id="accordion3" class="collapse" role="tabpanel" aria-labelledby="heading3" data-parent="#accordion">
  190.                 <div class="card rounded-0 p-md-4 p-2 mt-2" style="background-color: white; border-color: rgba(0,0,0,.2);">
  191.                     <!-- weapon section, feel free to remove -->
  192.                     <div class="row mb-2">
  193.                         <div class="col-md col-12 pr-md-0">
  194.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  195.                         </div>
  196.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Weapon</div>
  197.                         <div class="col-md col-12 pl-md-0">
  198.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  199.                         </div>
  200.                     </div>
  201. <!-- weapon image
  202. around 400x250 px -->
  203.                     <img class="mx-auto my-4" src="https://f2.toyhou.se/file/f2-toyhou-se/images/38822932_NljTFPVuM597JBl.png">
  204.                     <div class="text-justify mb-3 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  205. <!-- weapon text -->
  206.                         <p>
  207.                             Describe your character's weapon in this paragraph here. You can include what alternatives they use, where they got it, how important (or unimportant) it is, and how they take care of it.
  208.                         </p>
  209. <!-- end of weapon text -->
  210.                     </div>
  211.                     <!-- end of weapon section -->
  212.  
  213.                     <!-- magic section -->
  214.                     <div class="row mb-2">
  215.                         <div class="col-md col-12 pr-md-0">
  216.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  217.                         </div>
  218.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Magic</div>
  219.                         <div class="col-md col-12 pl-md-0">
  220.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  221.                         </div>
  222.                     </div>
  223.                     <div class="row">
  224.                         <div class="col-6 pr-md-2 pr-1 text-center">
  225.                             <div class="p-2 font-weight-bold text-uppercase" style="border-radius: 15px; background-color: rgba(0,0,0,.1); color: #B18B4D;">
  226. <!-- LEFT element -->
  227.                                 Element
  228.                             </div>
  229.                         </div>
  230.                         <div class="col-6 pl-md-2 pl-1 text-center">
  231.                             <div class="p-2 font-weight-bold text-uppercase" style="border-radius: 15px; background-color: rgba(0,0,0,.1); color: #B18B4D;">
  232. <!-- RIGHT element -->
  233.                                 Element
  234.                             </div>
  235.                         </div>
  236.                     </div>
  237. <!-- magic image, familiar, whatever! -->
  238.                     <img class="mx-auto my-4" src="https://f2.toyhou.se/file/f2-toyhou-se/images/44448586_XhIcZM3bbTjtVla.png">
  239.                     <div class="text-justify mb-3 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  240. <!-- magic text -->
  241.                         <p>
  242.                             Describe your character's magic. Where they got it from, how they use it, the limitations, power, and cost.
  243.                         </p>
  244. <!-- end of magic text -->
  245.                     </div>
  246.                     <!-- end of magic section -->
  247.                    
  248.                     <!-- abilities section -->
  249.                     <div class="row mb-2">
  250.                         <div class="col-md col-12 pr-md-0">
  251.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  252.                         </div>
  253.                         <div class="col-md-auto col-12 px-2 text-uppercase text-center">Abilities</div>
  254.                         <div class="col-md col-12 pl-md-0">
  255.                             <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  256.                         </div>
  257.                     </div>
  258.                     <div class="row">
  259.                         <div class="col-md-6 col-12 pr-md-2">
  260.                             <div class="text-justify mb-md-3 mb-2 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  261.                                 <div class="row">
  262.                                     <div class="col-md col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  263. <!-- TOP LEFT move name -->
  264.                                         Move
  265.                                     </div>
  266.                                     <div class="col-md col-12 text-md-right text-center">
  267.                                         <!-- Points -->
  268.                                         <i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
  269.                                     </div>
  270.                                 </div>
  271.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  272. <!-- TOP LEFT move text -->
  273.                                 <p>Describe how the move is used during a fight.</p>
  274. <!-- end of move text-->
  275.                             </div>
  276.                         </div>
  277.                         <div class="col-md-6 col-12 pl-md-2">
  278.                             <div class="text-justify mb-md-3 mb-2 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  279.                                 <div class="row">
  280.                                     <div class="col-md col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  281. <!-- TOP RIGHT move name -->
  282.                                         Move
  283.                                     </div>
  284.                                     <div class="col-md col-12 text-md-right text-center">
  285.                                         <!-- Points -->
  286.                                         <i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
  287.                                     </div>
  288.                                 </div>
  289.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  290. <!-- TOP RIGHT move text -->
  291.                                 <p>Describe how the move is used during a fight.</p>
  292. <!-- end of move text-->
  293.                             </div>
  294.                         </div>
  295.                         <div class="col-md-6 col-12 pr-md-2">
  296.                             <div class="text-justify mb-md-3 mb-2 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  297.                                 <div class="row">
  298.                                     <div class="col-md col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  299. <!-- BOTTOM LEFT move name -->
  300.                                         Move
  301.                                     </div>
  302.                                     <div class="col-md col-12 text-md-right text-center">
  303.                                         <!-- Points -->
  304.                                         <i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
  305.                                     </div>
  306.                                 </div>
  307.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  308. <!-- BOTTOM LEFT move text -->
  309.                                 <p>Describe how the move is used during a fight.</p>
  310. <!-- end of move text -->
  311.                             </div>
  312.                         </div>
  313.                         <div class="col-md-6 col-12 pl-md-2">
  314.                             <div class="text-justify mb-md-3 mb-2 p-3" style="border-radius: 15px; background-color: rgba(0,0,0,.1);">
  315.                                 <div class="row">
  316.                                     <div class="col-md col-12 font-weight-bold text-uppercase text-md-left text-center" style="color: #B18B4D;">
  317. <!-- BOTTOM RIGHT move name -->
  318.                                         Move
  319.                                     </div>
  320.                                     <div class="col-md col-12 text-md-right text-center">
  321.                                         <!-- Points -->
  322.                                         <i class="fas fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i>
  323.                                     </div>
  324.                                 </div>
  325.                                 <hr class="my-2" style="background-color: rgba(0,0,0,.2);">
  326. <!-- BOTTOM RIGHT move text -->
  327.                                 <p>Describe how the move is used during a fight.</p>
  328. <!-- end of move text-->
  329.                             </div>
  330.                         </div>
  331.                     </div>
  332.                 </div>
  333.             </div>
  334.         </div>
  335.     </div>
  336.     <!-- Footer -->
  337.     <div style="min-height: 170px;">
  338.         <div class="card rounded-0" style="background-color: #D2B98C; background-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/38795138_znzseRagyqvrokZ.png?1629450779'); background-blend-mode: overlay; border-color: rgba(0,0,0,.2); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; height: 50px;">
  339.             <div class="m-auto" style="position: relative; top: 10px;">
  340.                 <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/38817940_HXoRMIKmuktqy29.png">
  341.             </div>
  342.         </div>
  343.         <div style="position: absolute; right: 10px;">
  344.             <a class="text-muted" href="https://toyhou.se/12418343.f2u-equinox" data-toggle="tooltip" data-placement="bottom" title="Code"><i class="fa-solid fa-code"></i></a>
  345.         </div>
  346.     </div>
  347. </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!