API tools faq
paste
Advertisement
Jelah_animates

need help :(

Jelah_animates
Jun 13th, 2025
502
0
179 days
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 18.34 KB | None | 0 0
raw download clone embed print report
  1. <!----- a
  2. cw messy code
  3. HEading color:  #0096ff
  4. background color: #000000
  5. Text color : #ffffff
  6. edge color: warning
  7. relationship line color: #5e58ab
  8. Yes the font for the relaitonship tab is different.. you can change that
  9.  
  10. Test new colors : #0096ff
  11.  
  12. add a line break = <br> OR <p></p>
  13.  
  14. Go to Font awesome for the silly icons :3
  15. font: georgia
  16.  
  17. <i class="fa-light fa-paw pull-right" />
  18. <i class="fa-light fa-cat pull-left" />
  19. Theres so much yapping in this code holy shit
  20. --->
  21. <!---
  22.  
  23. Note format
  24.  
  25. --->
  26. <div class="row no-gutters">
  27.     <div class="row justify-content-center">
  28.         <div class="card col-md-10 card-outline-warning p-1" Style="Font-family:georgia">
  29.             <!-- NAV BUTTONS -->
  30.             <ul class="nav nav-tabs card-header-tabs row mb-1">
  31.                 <li class="nav-item flex-fill"><a class="btn bg-faded btn-block btn-outline-warning " data-toggle="tab" class="nav-link active" href="#one">About</a></li>
  32.                 <li class="nav-item flex-fill"><a class="btn bg-faded btn-block btn-outline-warning" data-toggle="tab" class="nav-link" href="#two">Personality</a></li>
  33.                 <li class="nav-item flex-fill"><a class="btn bg-faded btn-block btn-outline-warning" data-toggle="tab" class="nav-link" href="#three">Relationships</a></li>
  34.                 </li>
  35.                 <li class="nav-item flex-fill"><a class="btn bg-faded btn-block btn-outline-warning" data-toggle="tab" class="nav-link" href="#four">other</a></li>
  36.             </ul>
  37.             <!----------- content container -- sets border color ------------------------->
  38.             <!---------- Image on left -- will scale with screen -- focus of crop can be changed by editing the Object-position ------------------------------------>
  39.             <div class="row no-gutters">
  40.                 <div class="card col-md-3" style="height: 500px ; overflow: auto; Font-family:georgia; background-color:#000000">
  41.                     <img class="d-block p-3 " style=" object-fit: cover;
  42.  
  43.  height: 230px; object-position: 0px 20%;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/52389546_cjOIxDgymJkJ3rQ.png ">
  44.                     <div class="col-md-12">
  45.                         <span class="text-uppercase" style="filter:opacity(100%);"> Name</span>
  46.                         <span class="pull-right"> Name</span>
  47.                         <hr class="my-2" style="border-color: #e1e8ed;">
  48.                         <span class="text-uppercase" style="filter:opacity(100%);"> Age</span>
  49.                         <span class="pull-right"> age</span>
  50.                         <hr class="my-2" style="border-color: #e1e8ed;">
  51.                         <span class="text-uppercase" style="filter:opacity(100%);"> Gender</span>
  52.                         <span class="pull-right"> gender pronouns</span>
  53.                         <hr class="my-2" style="border-color: #e1e8ed;">
  54.                         <span class="text-uppercase" style="filter:opacity(100%);"> Height</span>
  55.                         <span class="pull-right"> height</span>
  56.                         <hr class="my-2" style="border-color: #e1e8ed;">
  57.                         <span class="text-uppercase" style="filter:opacity(100%);"> Species/race</span>
  58.                         <span class="pull-right"> --</span>
  59.                         <hr class="my-2" style="border-color: #e1e8ed;">
  60.                         <span class="text-uppercase" style="filter:opacity(100%);"> MBTI</span>
  61.                         <span class="pull-right"> Meyer briggs </span>
  62.                         <hr class="my-2" style="border-color: #e1e8ed;">
  63.                         <span class="text-uppercase" style="filter:opacity(100%);"> Demeanor</span>
  64.                         <span class="pull-right"> Outward vibe</span>
  65.                         <hr class="my-2" style="border-color: #e1e8ed;">
  66.                     </div>
  67.                 </div>
  68.                 <!-- NAV CONTENT -->
  69.                 <div class="card col-md-9" style=" color: #ffffff; Font-family:georgia">
  70.                     <div class="tab-content" style="height: 500px ; overflow: auto; Font-family:georgia; background-color:#000000">
  71.                         <!-- ONE/Basics -->
  72.                         <div class="tab-pane fade show active p-2" id="one">
  73.                             <h2 style="color: #0096ff; letter-spacing:1px; text-align:center" class="display-4 text-up`percase mb-3">
  74.                                 <i class="fa-light fa-paw pull-right" /><i class="fa-light fa-cat pull-left" /> Basics/About
  75.                             </h2>
  76.                             <!-- SUBTITLE (DELETABLE)-->
  77.                             <h1>
  78.                                 <div class="text-muted font-italic" style="z-index:1;text-align:center; font-size:100%; letter-spacing:2px"> Quote here.
  79.                             </h1>
  80.                         </div>
  81.                         <div class="col-lg">
  82.                             <div class="row px-1">
  83.                                 <div class="col-lg-4">
  84.                                     <!---
  85.  
  86. Part one
  87.  
  88. ---> P1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  89.                                 </div>
  90.                                 <!---
  91.  
  92. Part two
  93.  
  94. --->
  95.                                 <div class=" col-lg-4"> P2 <br>I usually expand on the demeanor(body movement/expressivness,emotional state, posture) part here, a description of their voice (accent, verbal tics,launguages, articulation) How they act w friends , with lovers, when alone. Why do they like what they like and dislike what they dislike etc! maybe a silly quote at the top. </div>
  96.                                 <!---
  97.  
  98. Likes/dislikes
  99.  
  100. --->
  101.                                 <div class="col-lg-4">
  102.                                     <div class="col-sm-6 mb-2">
  103.                                         <p class="text-uppercase" style="filter:opacity(100%);">
  104.                                             <i class="fal fa-heart fa-fw" /> Likes
  105.                                         </p>
  106.                                         <ul class="mb-0">
  107.                                             <li class="mb-2">coding</li>
  108.                                             <li class="mb-2">talking alot</li>
  109.                                             <li class="mb-2">blank</li>
  110.                                         </ul>
  111.                                     </div>
  112.                                     <div class="col-sm-6 mb-2">
  113.                                         <p class="text-uppercase" style="filter:opacity(100%);">
  114.                                             <i class="fal fa-times fa-fw" /> Dislikes
  115.                                         </p>
  116.                                         <ul class="mb-0">
  117.                                             <li class="mb-2">Adding coding notes</li>
  118.                                             <li class="mb-2">writing</li>
  119.                                             <li class="mb-2">Coding</li>
  120.                                         </ul>
  121.                                     </div>
  122.                                 </div>
  123.                             </div>
  124.                             <!---
  125.  
  126. Note format
  127.  
  128. --->
  129.                             <hr class="my-2" style="border-color: #e1e8ed;">
  130.                             <span style="font-family:serif">
  131.                                 <font size="4">Lyrics</font>
  132.                             </span>
  133.                         </div>
  134.                         <font size="1">
  135.                             <p style="text-align: center;"> Songwriter
  136.                         </font>
  137.                         </p>
  138.                     </div>
  139.                     <!-- TWO/personality -->
  140.                     <div class="tab-pane fade p-2" id="two">
  141.                         <h2 style="color: #0096ff;; letter-spacing:3px; text-align:center" class="display-4 text-uppercase mb-3">
  142.                             <i class="fa-light fa-paw pull-right" /><i class="fa-light fa-cat pull-left" /> Personality
  143.                         </h2>
  144.                         <!---- the "width % is how much of the bar is filled.0% is empty 100% is full-->
  145.                         <div class="col-lg">
  146.                             <div class="row px-1">
  147.                                 <div class="col-lg-4">
  148.                                     <div class="p-2">
  149.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);"> Shy / outgoing</p>
  150.                                         <div class="progress mt-1">
  151.                                             <div class="progress-bar" style="background: #0096ff; width:89%; height:5px;"></div>
  152.                                         </div>
  153.                                     </div>
  154.                                     <div class="p-2">
  155.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);"> Humble / arrogant</p>
  156.                                         <div class="progress mt-1">
  157.                                             <div class="progress-bar" style="background: #0096ff; width:50%; height:5px;"></div>
  158.                                         </div>
  159.                                     </div>
  160.                                     <div class="p-2">
  161.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);">Meek/confident</p>
  162.                                         <div class="progress mt-1">
  163.                                             <div class="progress-bar" style="background: #0096ff; width:20%; height:5px;"></div>
  164.                                         </div>
  165.                                     </div>
  166.                                     <div class="p-2">
  167.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);"> Cautious / reckless</p>
  168.                                         <div class="progress mt-1">
  169.                                             <div class="progress-bar" style="background: #0096ff; width:34%; height:5px;"></div>
  170.                                         </div>
  171.                                     </div>
  172.                                     <div class="p-2">
  173.                                     </div>
  174.                                 </div><!---
  175.  
  176. 2nd col
  177.  
  178. --->
  179.                                 <div class="col-lg-4">
  180.                                     <div class="p-2">
  181.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);"> Lazy / hardworking</p>
  182.                                         <div class="progress mt-1">
  183.                                             <div class="progress-bar" style="background: #0096ff; width:89%; height:5px;"></div>
  184.                                         </div>
  185.                                     </div>
  186.                                     <div class="p-2">
  187.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);"> Selfish / altruistic </p>
  188.                                         <div class="progress mt-1">
  189.                                             <div class="progress-bar" style="background: #0096ff; width:50%; height:5px;"></div>
  190.                                         </div>
  191.                                     </div>
  192.                                     <div class="p-2">
  193.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);"> Patient/irratable</p>
  194.                                         <div class="progress mt-1">
  195.                                             <div class="progress-bar" style="background: #0096ff; width:20%; height:5px;"></div>
  196.                                         </div>
  197.                                     </div>
  198.                                     <div class="p-2">
  199.                                         <p class="text-uppercase mb-0" style="filter:opacity(100%);">Cruel / kind</p>
  200.                                         <div class="progress mt-1">
  201.                                             <div class="progress-bar" style="background: #0096ff; width:20%; height:5px;"></div>
  202.                                         </div>
  203.                                     </div>
  204.                                 </div>
  205.                                 <!---
  206.  
  207. Third col
  208.  
  209. --->
  210.                                 <div class="col-lg-4"> Expand! Mental illnesses, Family trauma, you name it!! throw it ere loser!!</div>
  211.                             </div>
  212.                             <hr class="my-2" style="border-color: #e1e8ed;"> writers notes!! maybe describe how the character got here
  213.                         </div>
  214.                     </div>
  215.                     <!-- Three/relationships -->
  216.                     <div class="tab-pane fade p-2" id="three">
  217.                         <h2 style="color: #0096ff;; letter-spacing:3px; text-align:center" class="display-4 text-uppercase mb-3">
  218.                             <i class="fa-light fa-paw pull-right" /><i class="fa-light fa-cat pull-left" /> Relationships
  219.                         </h2>
  220.                         <div class="row no-gutters">
  221.                             <!---copy here --->
  222.                             <div class="col-md-6 p-1">
  223.                                 <!------------ IMAGE ------------>
  224.                                 <img class="d-block p-3 " style=" object-fit: cover;
  225.  
  226.  height: 230px; object-position: 5px 0%;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/83617000_yFAr6Pf0K1VSZgu.png ">
  227.                                 <!------------------------>
  228.                                 <div class="col-md-6 p-1">
  229.                                     <!------------ NAME/LINK ------------>
  230.                                     <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #5e58ab; font-family: georgia; font-weight: bold; line-height: 10px;">
  231.                                         <a href="https://toyhou.se/21850679.bea" style="color: #0096ff">Name </a>
  232.                                     </div>
  233.                                     <!------------------------>
  234.                                     <div class="mb-2" style="color: #0096ff; font-weight: bold"> Relationship</div>
  235.                                 </div>
  236.                                 <!------------------------>
  237.                                 <div style="height: 100px; overflow-y:scroll;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </div>
  238.                             </div>
  239.                             <!---end copy-->
  240.                             <!---copy here--->
  241.                             <div class="col-md-6 p-1">
  242.                                 <!------------ IMAGE ------------>
  243.                                 <img class="d-block p-3 " style=" object-fit: cover;
  244.  
  245.  height: 230px; object-position: 5px 0%;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/83617000_yFAr6Pf0K1VSZgu.png ">
  246.                                 <!------------------------>
  247.                                 <div class="col-md-6 p-1">
  248.                                     <!------------ NAME/LINK ------------>
  249.                                     <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #5e58ab; font-family: georgia; font-weight: bold; line-height: 10px;">
  250.                                         <a href="https://toyhou.se/21850679.bea" style="color: #0096ff">Name </a>
  251.                                     </div>
  252.                                     <!------------------------>
  253.                                     <div class="mb-2" style="color: #0096ff; font-weight: bold"> Relationship</div>
  254.                                 </div>
  255.                                 <!------------------------>
  256.                                 <div style="height: 100px; overflow-y:scroll;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </div>
  257.                             </div>
  258.                             <!---end copy-->
  259.                             <!---copy here--->
  260.                             <div class="col-md-6 p-1">
  261.                                 <!------------ IMAGE ------------>
  262.                                 <img class="d-block p-3 " style=" object-fit: cover;
  263.  
  264.  height: 230px; object-position: 5px 0%;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/83617000_yFAr6Pf0K1VSZgu.png ">
  265.                                 <!------------------------>
  266.                                 <div class="col-md-6 p-1">
  267.                                     <!------------ NAME/LINK ------------>
  268.                                     <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #5e58ab; font-family: georgia; font-weight: bold; line-height: 10px;">
  269.                                         <a href="https://toyhou.se/21850679.bea" style="color: #0096ff">Name </a>
  270.                                     </div>
  271.                                     <!------------------------>
  272.                                     <div class="mb-2" style="color: #0096ff; font-weight: bold"> Relationship</div>
  273.                                 </div>
  274.                                 <!------------------------>
  275.                                 <div style="height: 100px; overflow-y:scroll;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </div>
  276.                             </div>
  277.                             <!---end copy-->
  278.                             <!---copy here--->
  279.                             <div class="col-md-6 p-1">
  280.                                 <!------------ IMAGE ------------>
  281.                                 <img class="d-block p-3 " style=" object-fit: cover;
  282.  
  283.  height: 230px; object-position: 5px 0%;" src="https://f2.toyhou.se/file/f2-toyhou-se/images/83617000_yFAr6Pf0K1VSZgu.png ">
  284.                                 <!------------------------>
  285.                                 <div class="col-md-6 p-1">
  286.                                     <!------------ NAME/LINK ------------>
  287.                                     <div class="text-uppercase mb-2 mt-2" style="font-size: 30px; background: #5e58ab; font-family: georgia; font-weight: bold; line-height: 10px;">
  288.                                         <a href="https://toyhou.se/21850679.bea" style="color: #0096ff">Name </a>
  289.                                     </div>
  290.                                     <!------------------------>
  291.                                     <div class="mb-2" style="color: #0096ff; font-weight: bold"> Relationship</div>
  292.                                 </div>
  293.                                 <!------------------------>
  294.                                 <div style="height: 100px; overflow-y:scroll;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. </div>
  295.                             </div>
  296.                             <!---end copy-->
  297.                         </div>
  298.                     </div>
  299.                    
  300.                         <!---------- Four/ Other  ------------------------------------>
  301.                     <div class="tab-pane fade p-2" id="four">
  302.                         <h2 style="color: #0096ff; letter-spacing:1px; text-align:center" class="display-4 text-up`percase mb-3">
  303.                             <i class="fa-light fa-paw pull-right" /><i class="fa-light fa-cat pull-left" /> Other
  304.                         </h2>
  305.                         <!-- SUBTITLE (DELETABLE)-->
  306.                         <h1>
  307.                             <div class="text-muted font-italic col-md-8" style="z-index:1;text-align:center; font-size:120%; letter-spacing:2px"> Design details
  308.                         </h1>
  309.                     </div>
  310.                     <div class="col-lg">
  311.                         <div class="row px-1">
  312.                             <div class="col-lg-4">
  313.                                 <!---
  314.  
  315. Part one
  316.  
  317. --->
  318.                                 <p class="text-uppercase" style="filter:opacity(100%);">One </p>
  319.                                 <ul>
  320.                                     <li> Scars? </li>
  321.                                     <li> Scars? </li>
  322.                                 </ul>
  323.                             </div>
  324.                             <!---
  325.  
  326. Part two
  327.  
  328. --->
  329.                             <div class=" col-lg-4">
  330.                                 <p class="text-uppercase" style="filter:opacity(100%);"> two</p>
  331.                                 <ul>
  332.                                     <li> I am so idealess</li>
  333.                                 </ul>
  334.                             </div>
  335.                             <!---
  336.  
  337. Likes/dislikes
  338.  
  339. --->
  340.                             <div class="col-lg-4"> THIS BREAKS IF YOU DONT HAVE ATLEAST ONE SENTENCE. I DONT KNOW WHY Ideas?? Lifestyle (Diet, exercise, sleep, hygienec,, addictions) Combat (Type [mage, tank ,idfk], tactics, weapons idfk)Mental/physical strengths , mental physical weakneses, flaws, habits, pet peeves, wishes, prejudices, secrets :), ethics, triggers, phobias, defense mechanism, flight/fight/freeze/fawn, cognitive distrotion (Jumping to conclusion / catastrophizing / black-and-white thinking / emotional reasoning / externalization of self-worth / labeling / magnification / overgeneralization / perfectionism / "should" statements / etc.) Learning style, how they express / recieve love, short term/long term goals/ urrent concern,routine
  341.                             </div>
  342.                         </div>
  343.                         <hr class="my-2" style="border-color: #e1e8ed;">
  344.                         <div class="text-muted font-italic" style="z-index:1;text-align:center; font-size:150%; letter-spacing:2px"> Story </div>
  345.                         <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  346.                             <i class="fal fa-bookmark fa-fw" /> Present
  347.                         <p>Write about their background/story here. 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. In feugiat posuere nulla, eget lobortis ante.</p>
  348.                         <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  349.                             <i class="fal fa-bookmark fa-fw" /> Past
  350.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit. Mauris massa odio, suscipit id rutrum at, rutrum dignissim lacus. Quisque pulvinar, ipsum vitae rutrum molestie, lectus neque pulvinar lorem, nec commodo leo velit nec ligula.</p>
  351.                         <p class="text-uppercase mb-0" style="filter:opacity(70%);">
  352.                             <i class="fal fa-bookmark fa-fw" /> Childhood
  353.                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus erat, malesuada vel scelerisque eu, convallis at sem. Phasellus ut ipsum at lorem viverra tincidunt vel et tellus. Ut sit amet diam ac tortor congue cursus. Aliquam vulputate lacinia felis sit amet suscipit.</p>
  354.                         </h1>
  355.                     </div>
  356.                 </div>
  357.                 </div></div></div></div>
  358.                 <div class="col-10 text-right small py-2" style="letter-spacing:4px">
  359.         <a href="https://toyhou.se/18680229.personal-use-user-codes/29179211.custom-twooooo" class="tooltipster" title="code by jelah animates :>" style="text-decoration:none !important">
  360.             <i class="far fa-code"></i> </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!