API tools faq
paste
Advertisement
spacialfries

Jammyx Code 2.0

spacialfries
May 5th, 2025
337
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.62 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Replace the following hexcodes for rarity.
  4. Hexcodes are ordered from darkest to lightest - text, cell border, main body.
  5.  
  6. Standard: #34608A | #9BB7BE | #D4DFE0
  7. Unusual: #1C8389 | #9ACEBE | #DCF1E8
  8. Rare: #931A17 | #BC8296 | #D2BAC4
  9. Extraordinary: #9F25AD | #C39DDF | #E2D6F0
  10. Crossbreed: #D45737 | #FFB672 | #FFE8A1
  11.  
  12. -->
  13.  
  14. <!-- Main Tab -->
  15.  
  16. <div class="accordion container card card-block border09 p-4 col-xs-12 col-xl-6" style="background:#9BB7BE; border-radius:75px; font-weight:bold;" id="ACCORDION">
  17.      
  18.      <!-- Background Particles -->
  19.      <i class="fas fa-virus fa-xl" style="color:#34608A; position:absolute; left:10px; top:60%; opacity:0.25;"></i>
  20.      <i class="fas fa-virus fa-xl" style="color:#34608A; position:absolute; right:10px; bottom:60%; opacity:0.25;"></i>
  21.      <i class="fas fa-viruses fa-xl" style="color:#34608A; position:absolute; left:25%; top:20px; opacity:0.25;"></i>
  22.      <i class="fas fa-viruses fa-xl" style="color:#34608A; position:absolute; right:25%; bottom:20px; opacity:0.25;"></i>
  23.      <i class="fas fa-virus fa-xl" style="color:#34608A; position:absolute; left:60%; top:20px; opacity:0.25;"></i>
  24.      <i class="fas fa-virus fa-xl" style="color:#34608A; position:absolute; right:60%; bottom:20px; opacity:0.25;"></i>
  25.      
  26.      <div class="row text-center justify-content-center mb-4">
  27.          
  28.          <a class="col-auto p-2 mx-2" style="background:#34608A; color:#9BB7BE; z-index:1; width:3em; border-radius:100px;" data-toggle="collapse" href="#MainTab"><i class="fas fa-star fa-xl"></i></a>
  29.          <a class="col-auto p-2 mx-2" style="background:#34608A; color:#9BB7BE; z-index:1; width:3em; border-radius:100px;" data-toggle="collapse" href="#AboutTab"><i class="fas fa-list-ul fa-xl"></i></a>
  30.          <a class="col-auto p-2 mx-2" style="background:#34608A; color:#9BB7BE; z-index:1; width:3em; border-radius:100px;" data-toggle="collapse" href="#RelationsTab"><i class="fas fa-heart fa-xl"></i></a>
  31.          <a class="col-auto p-2 mx-2" style="background:#34608A; color:#9BB7BE; z-index:1; width:3em; border-radius:100px;" data-toggle="collapse" href="#TraitsTab"><i class="fas fa-plus-minus fa-xl"></i></a>
  32.          <a class="col-auto p-2 mx-2" style="background:#34608A; color:#9BB7BE; z-index:1; width:3em; border-radius:100px;" href="https://toyhou.se/32852487.jammyx-profile-code/32966574.tabbed-expanded"><i class="fas fa-code fa-xl"></i></a>
  33.          
  34.      </div>
  35.      
  36.      <div class="container card card-block border-0" style="background:#D4DFE0; color:#34608A; border-radius:50px;">
  37.          
  38.          <div class="collapse show" data-parent="#ACCORDION" id="MainTab">
  39.              <p class="mx-4 mb-0">
  40.                  <span class="h1" style="float:left; font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;">
  41.                      <i class="fas fa-splotch"></i> Name -
  42.                      <a href="JAMMYX PROFILE LINK HERE" style="color:#34608A; opacity:0.5">#000<small> <i class="fas fa-link fa-xs"></i></small></a>
  43.                  </span>
  44.                  <span style="float:right; font-style:italic; text-shadow:0px 2px 2px #9BB7BE;">
  45.                      pronouns • trait
  46.                  </span>
  47.              </p>
  48.              <!-- Divider --><hr class="mt-0" style="border-top:5px dotted #9BB7BE; width:100%;">
  49.              
  50.              <div class="row">
  51.                  
  52.                  <div class="container col-sm-12 col-xl-auto text-center">
  53.                      <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:200px;">
  54.                  </div>
  55.                  
  56.                  <!-- Column Divider --><div style="width:0px; border-right:5px dotted #9BB7BE;" class="d-none d-sm-block"></div>
  57.                  
  58.                  <div class="container col-sm-12 col-xl">
  59.                      <h4 style="display:flex; justify-content:center; font-style:italic;"> more • traits • can • go • here</h4>
  60.                      <p style="max-height:173px; overflow:auto;">
  61.                          <!-- Short Character Intro -->
  62.                          Text longer than 200 pixels will add a scrollbar. Try to keep this part shorter - for longer, more detailed content, use the "About" section instead. <span style="color:#9BB7BE">This text is here to help you visualize how many lines of text takes up 200 pixels.<br><br>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.</span>
  63.                      </p>
  64.                  </div>
  65.                  
  66.              </div>
  67.          </div>
  68.          
  69.          <div class="collapse" data-parent="#ACCORDION" id="AboutTab">
  70.              
  71.              <div class="row">
  72.                  
  73.                  <div class="container col-sm-12 col-xl-auto">
  74.                      <h3 class="text-center" style="font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;">Traits</h3>
  75.                      <!-- To avoid cut-off text, this column will get wider to fit the name of the traits inside it, and the other column will get tighter.-->
  76.                      <hr class="mt-0" style="border-top:5px dotted #9BB7BE; width:100%;">
  77.                      <ul class="mb-0" style="list-style:none; padding-left:0px;">
  78.                          
  79.                          <!-- Trait List -->
  80.                          <li><big>x Rarity</big></li>
  81.                          <li><big>x Subtype</big></li>
  82.                          <li>[x] x Antennae</li>
  83.                          <li>[x] x Core</li>
  84.                          <li>[x] x Symbiont</li>
  85.                          <li>[x] x Tail</li>
  86.                          <li>[x] x Cytoplasm</li>
  87.                          <li>[x] x Liquid*</li>
  88.                          <li>[M] x Mutation</li>
  89.                          <li>[M] x Mutation</li>
  90.                          <li>[M] x Mutation</li>
  91.                          
  92.                      </ul>
  93.                  </div>
  94.                  
  95.                  <!-- Column Divider --><div style="width:0px; border-right:5px dotted #9BB7BE;"></div>
  96.                  
  97.                  <div class="container col-sm-12 col-xl">
  98.                      <h3 class="text-center" style="font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;">About</h3>
  99.                      <hr class="mt-0" style="border-top:5px dotted #9BB7BE; width:100%;">
  100.                      <p style="max-height:395px; overflow:auto;">
  101.                          
  102.                          <!--More Detailed Info-->
  103.                          The text here can be as long as you want! Anything longer than about 400 pixels will get a scroll bar. This box is better for detailed history, personality, etc. <span style="color:#9BB7BE">This text is here to help you visualize how the code will look with lots of text.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus molestie tellus ac erat luctus ornare. Vestibulum congue enim eu tristique maximus. Duis odio risus, auctor ut erat ut, varius vestibulum sapien. Pellentesque blandit pretium ullamcorper. Aenean facilisis id erat eu vehicula. Aenean sed lobortis massa.<br><br>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam condimentum massa eget metus fringilla vulputate. Sed quis elit ut turpis pulvinar malesuada sit amet sed massa.  Suspendisse quis sem id erat hendrerit convallis porta sit amet dui.<br><br>Aliquam lobortis molestie urna, in cursus ligula sagittis sit amet. Quisque sed mauris vel risus cursus consequat. Fusce in gravida magna. Suspendisse dapibus, ex eu tristique cursus, risus nulla gravida leo, eget maximus justo urna quis ante. Quisque venenatis, nibh at eleifend ullamcorper, purus justo euismod justo, tristique lacinia erat felis sed enim. Praesent elementum metus est, tempor pretium augue finibus in.</span>
  104.                          
  105.                      </p>
  106.                  </div>
  107.                  
  108.              </div>
  109.          </div>
  110.          
  111.          <div class="collapse" data-parent="#ACCORDION" id="RelationsTab">
  112.              <h1 class="h1 text-center" style="font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;"><i class="fas fa-heart"></i> Relationships <i class="fas fa-heart-half-stroke"></i></h1>
  113.              <hr class="mt-0" style="border-top:5px dotted #9BB7BE; width:100%;">
  114.              
  115.              <div class="justify-content-center">
  116.                  <div class="row mx-auto text-center">
  117.                      
  118.                      <!--
  119.                     Replace the "fa-play" in each relationship with your desired relationship icon.
  120.                    
  121.                     Partners: fa-heart
  122.                     Friends: fa-handshake-simple
  123.                     Family: fa-house
  124.                    
  125.                     -->
  126.                      
  127.                      <!-- Relationship A -->
  128.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  129.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  130.                          <i class="fas fa-play"></i> Name
  131.                      </div></a>
  132.                      
  133.                      <!-- Relationship A -->
  134.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  135.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  136.                          <i class="fas fa-play"></i> Name
  137.                      </div></a>
  138.                      
  139.                      <!-- Relationship A -->
  140.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  141.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  142.                          <i class="fas fa-play"></i> Name
  143.                      </div></a>
  144.                      
  145.                      <!-- Relationship A -->
  146.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  147.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  148.                          <i class="fas fa-play"></i> Name
  149.                      </div></a>
  150.                      
  151.                      <!-- Relationship A -->
  152.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  153.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  154.                          <i class="fas fa-play"></i> Name
  155.                      </div></a>
  156.                      
  157.                      <!-- Relationship A -->
  158.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  159.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  160.                          <i class="fas fa-play"></i> Name
  161.                      </div></a>
  162.                      
  163.                      <!-- Relationship A -->
  164.                      <a href="CHARACTER LINK" style="color:#34608A;"><div class="col container p-0 m-1">
  165.                          <img src="https://jammyx.net/images/data/items/T897CoO4uo1-image.png" style="border-radius:25px; background:#9BB7BE; max-width:100px;"><br>
  166.                          <i class="fas fa-play"></i> Name
  167.                      </div></a>
  168.                      
  169.                  </div>
  170.              </div>
  171.          </div>
  172.          
  173.          <div class="collapse" data-parent="#ACCORDION" id="TraitsTab">
  174.              
  175.              <div class="row"><div class="container col-sm-12 col-xl">
  176.                      <h3 class="text-center" style="font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;">Likes</h3>
  177.                      <hr class="mt-0" style="border-top:5px dotted #9BB7BE; width:100%;">
  178.                      <ul class="text-center mb-0" style="list-style:none; padding-left:0px;">
  179.                          
  180.                          <!-- Likes -->
  181.                          <li>item</li>
  182.                          <li>item</li>
  183.                          <li>item</li>
  184.                          <li>item</li>
  185.                          <li>item</li>
  186.                          
  187.                      </ul>
  188.                  </div>
  189.                  
  190.                  <!-- Column Divider --><div style="width:0px; border-right:5px dotted #9BB7BE;"></div>
  191.                  
  192.                  <div class="container col-sm-12 col-xl">
  193.                      <h3 class="text-center" style="font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;">Dislikes</h3>
  194.                      <hr class="mt-0" style="border-top:5px dotted #9BB7BE; width:100%;">
  195.                      <ul class="text-center mb-0" style="list-style:none; padding-left:0px;">
  196.                          
  197.                          <!-- Disikes -->
  198.                          <li>item</li>
  199.                          <li>item</li>
  200.                          <li>item</li>
  201.                          <li>item</li>
  202.                          <li>item</li>
  203.                          
  204.                      </ul>
  205.                  </div>
  206.                  
  207.              </div>
  208.              
  209.              <hr style="border-top:5px dotted #9BB7BE; width:100%;">
  210.              <h3 class="text-center" style="font-family:Tahoma, sans-serif; font-weight:bold; text-shadow: 3px 2px 5px #9BB7BE;">Trivia</h3>
  211.              
  212.              <ul class="mb-0" style="padding-left:2em">
  213.                          
  214.                          <!-- Trivia -->
  215.                          <li>
  216.                              Fun fact here.
  217.                          </li>
  218.                          
  219.                          <li>
  220.                              Fun fact here.
  221.                          </li>
  222.                          
  223.                          <li>
  224.                              Fun fact here.
  225.                          </li>
  226.                          
  227.                      </ul>
  228.              
  229.              
  230.          </div>
  231.          
  232.      </div>
  233.      
  234. </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!