API tools faq
paste
Advertisement
LeafJelly

Customizable Color Galactic Chara TH Code with Trivia Box

LeafJelly
Sep 21st, 2022 (edited)
1,672
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 19.00 KB | Source Code | 0 0
raw download clone embed print report
  1. <!----------------------------------------------
  2.  
  3.    FREE TO USE CODE BY LeafJelly
  4. This version has as Trivia box
  5.  
  6. If you want to change the colors use ctrl+F or cmd+F on these hex codes and replace them with the color you want.
  7.     You can also replace the font-awesome symbol with a different one by ctrl+F or cmd+F the FA symbol name on the right. Replace the text after fa- with the new symbol name you want.
  8.  
  9.        DECORATIONS COLORS
  10.   HEX COLOR           Symbol Names
  11. Clouds: #4d2477 #722477         fa-cloud fa-clouds
  12. Stars: #f8ff00  #fe5177         fa-star fa-stars fa-sparkles
  13. Moon: #f8ff00                   fa-moon
  14. Planet: #ffc22f                 fa-planet-ringed
  15. Comet: #fe5177                  fa-comet
  16.  
  17.        BOX AND STUFF IN IT COLORS
  18.   HEX COLOR
  19. Accent: #ffc22f
  20. Text: #ffefa3
  21. Background: #0c0c2d
  22. Container BG: #4e227a
  23.  
  24. ---------------------------------------------->
  25.  
  26.  
  27. <div class="col-12 col-md-9 col-lg-9 row no-gutter py-4 px-0" style="margin:auto;">
  28.  
  29.     <!-------------      PAGEDOLL         ------------->
  30.     <!---- It scales with the page.
  31.    If you want to adjust where it goes, try playing with the size and position. Keep in mind that the pagedoll decorations do NOT move with the pagedoll!
  32.    ---->
  33.     <div class="col-12 col-md-9 col-lg-4 p-1 bg-transparent">  
  34.     <!----             Page doll SKY decorations               ---->
  35.      <i class="fa-duotone fa-moon" style="position:absolute;margin:0px 45px;font-size:80px;transform: rotate(-15deg); color:#f8ff00;"></i>
  36.      <i class="fa-solid fa-cloud" style="position:absolute;margin:24px 0px;font-size:70px;color:#000040;"></i>
  37.      <i class="fa-solid fa-star" style="position:absolute;margin:60px 10px;font-size:22px;transform: rotate(30deg);color:#f8ff00;"></i>
  38.      <i class="fa-solid fa-star" style="position:absolute;margin:10px 120px;font-size:15px;transform: rotate(100deg);color:#fe5177;"></i>
  39.      <i class="fa-solid fa-stars" style="position:absolute;margin:-15px 180px;font-size:20px;transform: rotate(0deg);color:#f8ff00;"></i>
  40.      <i class="fa-solid fa-sparkles" style="position:absolute;margin:40px 220px;font-size:30px;transform: rotate(20deg);color:#fe5177;"></i>
  41.      <i class="fa-solid fa-star" style="position:absolute;margin:130px 130px;font-size:15px;transform: rotate(20deg);color:#fe5177;"></i>
  42.      <i class="fa-solid fa-stars" style="position:absolute;margin:10px 320px;font-size:40px;transform: rotate(190deg);color:#f8ff00;"></i>
  43.      <i class="fa-solid fa-cloud fa-flip-horizontal" style="position:absolute;margin:200px 0px;font-size:120px;color:#722477;"></i>
  44.      
  45. <!--------------       Page doll IMG replace the URL      ---------------->
  46.     <div class="col-12 mt-4" style="background-position:bottom;background-size:contain;background-repeat:no-repeat;min-height:450px;
  47.    background-image:url(
  48.    
  49.    https://f2.toyhou.se/file/f2-toyhou-se/images/49608360_en7B2sVvZX5eDO5.png?1656478839
  50.    
  51.    )">
  52.      <i class="fa-solid fa-cloud" style="position:absolute;margin:294px 200px;font-size:170px;color:#0c0c2d;"></i>
  53.      <i class="fa-solid fa-cloud " style="position:absolute;margin:332px 130px;font-size:130px;color:#4d2477;"></i>
  54.      <i class="fa-solid fa-star " style="position:absolute;margin:353px 80px; transform: rotate(-30deg);font-size:35px;color:#f8ff00;"></i>
  55.      <i class="fa-solid fa-star " style="position:absolute;margin:410px 50px; transform: rotate(-40deg);font-size:20px;color:#f8ff00"></i>
  56.      <i class="fa-solid fa-star " style="position:absolute;margin:250px 70px; transform;font-size:25px;color:#fe5177;"></i>
  57.     </div>
  58.    
  59.     </div>
  60.    
  61.     <div class="col-12 col-lg-8 row no-gutter">
  62.     <!------------- Name Decorations ------------->
  63.     <div class="border-0 bg-transparent">
  64.      <i class="fa-solid fa-star" style="position:absolute;margin:-25px 450px; transform: rotate(45deg); font-size:25px;color:#f8ff00;"></i>
  65.      <i class="fa-solid fa-star" style="position:absolute;margin:-10px 330px; transform: rotate(10deg); font-size:10px; color:#fe5177;"></i>
  66.      <i class="fa-solid fa-star" style="position:absolute;margin:40px 210px; transform: rotate(-20deg); font-size:15px; color:#fe5177;"></i>
  67.     </div>    
  68. <!-------------  CHARACTER NAME It...doesn't work well with long names on mobile :( ------------->  
  69.         <div class="col-0 col-md-11 col-lg-12 pb-3">
  70.         <p class="display-2 text-right" style="font-variant:small-caps;margin:0px 70px -30px 0px ;color:#ffc22f;">Character Name</p>    
  71.         </div>
  72.     <!------------- Name Decorations ------------->
  73.     <div class="border-0 bg-transparent">
  74.      <i class="fa-solid fa-cloud" style="position:absolute;margin:0px -100px;font-size:80px;color:#0c0c2d;"></i>
  75.      <i class="fa-solid fa-sparkles" style="position:absolute;margin:-10px -40px;font-size:25px;color:#fe5177;"></i>
  76.      
  77.     </div>
  78.    
  79. <!-------------  Info Box ------------->
  80.     <div class="col-12 col-md- col-lg-12 px-2 pt-2 m-0 row no-gutter" style="border-radius:10px; background:#0c0c2d;">
  81.        
  82.         <!------------- Description Box This box scrolls!------------>    
  83.        <div class="col-12 col-md-12 col-lg-7 p-1 border-0" style="word-break:break-word;min-height:360px;">
  84.              <div class="card col-0 p-3 ml-1 " style="background:#4e227a;margin:auto; overflow:auto; max-height:20px; min-height:180px;color:#ffefa3;">
  85.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  86.                 <br>
  87.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  88.             </div>
  89.             <!-------------  LIKES SECTION (this scrolls as you add more looks it better if u keep it short)------------->
  90.             <div class="row" style="margin:auto;">
  91.             <div class="col-12 col-lg-6 p-1">
  92.                 <div class="card p-1 pr-2" style="background:#4e227a;word-break:break-word;margin:auto;overflow-x:hidden;overflow-y:auto;max-height:170px;min-height:170px;">
  93.                    
  94.                 <h3 class="text-center" style="font-weight:400;font-variant:small-caps; color:#ffc22f">Likes</h3>
  95.                 <div style="position:absolute;margin:-5px 10px; font-size:20px;color:#ffc22f;"><i class="fa-solid fa-sun"></i></div>
  96.                 <div style="position:absolute; margin:0px; font-size:15px; color:#ffc22f;"><i class="fa-solid fa-clouds"></i></div>            
  97.                     <ul style="margin:0px -30px; list-style-type:none; padding-right:19px; color:#ffefa3;">
  98.                         <li> <i class="fa-regular fa-star fa-xs pr-1"></i>one</li>
  99.                         <li> <i class="fa-regular fa-star fa-xs pr-1"></i>two</li>
  100.                         <li> <i class="fa-regular fa-star fa-xs pr-1"></i>three</li>
  101.                         <li> <i class="fa-regular fa-star fa-xs pr-1"></i>four</li>
  102.                         <li> <i class="fa-regular fa-star fa-xs pr-1"></i>five</li>
  103.                         <li> <i class="fa-regular fa-star fa-xs pr-1"></i>six</li>
  104.                     </ul>
  105.                 </div>
  106.             </div>    
  107.             <!-------------  DISLIKES SECTION (this scrolls as you add more it better if u keep it short)------------->
  108.             <div class="col-12 col-lg-6 p-1">
  109.                 <div class="card p-1 pr-2" style="background:#4e227a; word-break:break-word; margin:auto; overflow-x:hidden; overflow-y:auto;max-height:170px;min-height:170px;">
  110.                 <h3 class="text-center" style="font-weight:400;font-variant:small-caps; color:#ffc22f">Dislikes</h3>
  111.                 <div style="position:absolute;margin:-5px 10px; font-size:20px; color:#ffc22f;"><i class="fa-solid fa-moon"></i></div>
  112.                 <div style="position:absolute;margin:0px; font-size:15px; color:#ffc22f;"><i class="fa-solid fa-clouds"></i></div>
  113.                
  114.                     <ul style="margin:0px -30px;list-style-type:none; padding-right:19px; color:#ffefa3;">
  115.                         <li> <i class="fa-regular fa-moon fa-xs pr-1"></i>one</li>
  116.                         <li> <i class="fa-regular fa-moon fa-xs pr-1"></i>two</li>
  117.                         <li> <i class="fa-regular fa-moon fa-xs pr-1"></i>three</li>
  118.                         <li> <i class="fa-regular fa-moon fa-xs pr-1"></i>four</li>
  119.                         <li> <i class="fa-regular fa-moon fa-xs pr-1"></i>five</li>
  120.                         <li> <i class="fa-regular fa-moon fa-xs pr-1"></i>six</li>
  121.                     </ul>
  122.                 </div>
  123.             </div>
  124.            
  125.             </div>
  126.  
  127.          </div>    
  128.        
  129.     <!-------------   Chara Info   ------------->
  130.     <!----- You can add more rows by copy and pasting them,
  131.    ------->
  132.         <div class="col-12 col-md-12 col-lg-5 px-1 " style="min-height:200px;">
  133.            <div class="card col-12 my-1 row align-items-center p-0" style="background:#4e227a;margin:auto;word-break:break-word;overflow:auto; color:#ffefa3;">
  134.                
  135.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  136.                 <span class="col text-left" style="font-variant:small-caps; ">
  137.                     Pronouns </span>
  138.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-sun"></i></div>    
  139.                 <span class="col text-right" style="font-variant:small-caps;  ">
  140.                      Content </span>
  141.             </div>  
  142.            
  143.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  144.                 <span class="col text-left" style="font-variant:small-caps; ">
  145.                     Gender </span>
  146.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-planet-ringed"></i></div>    
  147.                 <span class="col text-right" style="font-variant:small-caps;  ">
  148.                      Content </span>
  149.             </div>
  150.            
  151.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  152.                 <span class="col text-left" style="font-variant:small-caps; ">
  153.                     Age </span>
  154.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-comet"></i></div>    
  155.                 <span class="col text-right" style="font-variant:small-caps;  ">
  156.                      Content </span>
  157.             </div>
  158.            
  159.            
  160.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  161.                 <span class="col text-left" style="font-variant:small-caps; ">
  162.                     Race/Species </span>
  163.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-moon"></i></div>    
  164.                 <span class="col text-right" style="font-variant:small-caps;  ">
  165.                      Content </span>
  166.             </div>
  167.            
  168.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  169.                 <span class="col text-left" style="font-variant:small-caps; ">
  170.                     Occupation </span>
  171.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-comet"></i></div>    
  172.                 <span class="col text-right" style="font-variant:small-caps;  ">
  173.                      Content </span>
  174.             </div>
  175.            
  176.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  177.                 <span class="col text-left" style="font-variant:small-caps; ">
  178.                     Height </span>
  179.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-planet-ringed"></i></div>    
  180.                 <span class="col text-right" style="font-variant:small-caps;  ">
  181.                      Content </span>
  182.             </div>
  183.            
  184.             <div class="col-12 row no-gutter border-0 p-0 mb-1 align-items-center">        
  185.                 <span class="col text-left" style="font-variant:small-caps; ">
  186.                     worth </span>
  187.                         <div class="col-0" style="color:#ffc22f"><i class="fa-regular fa-stars"></i></div>    
  188.                 <span class="col text-right" style="font-variant:small-caps;  ">
  189.                      $00 </span>
  190.             </div>
  191.            
  192.             </div>
  193.            
  194.            
  195.            <!-------------  TRIVIA SECTION (this scrolls as you add more)------------->
  196.                 <div class="card col-12 p-1" style="background:#4e227a; word-break:break-word; margin:auto; overflow-x:hidden; overflow-y:auto; max-height:170px; min-height:170px;">
  197.                 <h3 class="text-center" style="font-weight:400;font-variant:small-caps; color:#ffc22f">Trivia</h3>
  198.                 <div style="position:absolute;margin:-5px 10px; font-size:20px;color:#ffc22f;"><i class="fa-solid fa-solar-system"></i></div>
  199.                 <div style="position:absolute;margin:0px; font-size:15px; color:#ffc22f;"><i class="fa-solid fa-clouds"></i></div>
  200.                
  201.                     <ul style="margin:0px -30px;list-style-type:none; padding-right:19px;color:#ffefa3;">
  202.                         <li> <i class="fa-regular fa-planet-ringed fa-xs pr-1"></i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  203.                         <li> <i class="fa-regular fa-planet-ringed fa-xs pr-1"></i>Aliquam tincidunt mauris eu.</li>
  204.                         <li> <i class="fa-regular fa-planet-ringed fa-xs pr-1"></i>Vestibulum auctor dapibus.</li>
  205.                         <li> <i class="fa-regular fa-planet-ringed fa-xs pr-1"></i>Nunc dignissim risus id metus.</li>
  206.                         <li> <i class="fa-regular fa-planet-ringed fa-xs pr-1"></i>Cras ornare tristique elit.</li>
  207.                         <li> <i class="fa-regular fa-planet-ringed fa-xs pr-1"></i>Vivamus vestibulum ntulla nec ante.</li>
  208.                     </ul>
  209.                 </div>
  210.            
  211.          </div>
  212.          
  213.     <!-------------   Youtube Playlist Music Player  ------------->
  214.     <!---------------------------------------------
  215.  
  216.           Playlist 3 by Bakuqou
  217.  
  218.       how to use this code:
  219.        https://toyhou.se/8682081.all-music-players-wip/8682087.tutorial
  220.  
  221.        ---------------------------------------------->
  222.         <div class="card col-12 p-0" style="background:#4e227a; max-height:40px;">
  223.         <div class="row no-gutters">
  224.               <div class="col-4 col-md-3 col-lg-2 p-1">
  225.              
  226.         <i class="fa-solid fa-list-music fa-xl p-1 pr-3" style="color:#ffc22f"></i>  
  227.           <a class="p-0 mt-2 btn btn-outline-dark melody-embed" style="border:0;position:relative;height:1.5rem;width:1.5rem;z-index:2;color:#ffefa3;">
  228.          
  229.         <!---- playlist ID ----->
  230.              <iframe style="opacity:.01;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100"
  231.              src="
  232.              
  233.              https://www.youtube-nocookie.com/embed/videoseries?controls=0&list=PL_ID_HERE
  234.              
  235.              " frameborder="0"></iframe>
  236.               <i class="fas fa-play fa-fw fa-2x" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i>
  237.               </a></div>
  238.              
  239.               <!--- line --->
  240.               <div class=" col-2 col-md-3 col-lg-5 p-1" style="border-bottom:1px solid #ffc22f;max-height:22px"></div>
  241.              
  242.               <!--- SONG INFO --->
  243.               <div class="col-5 py-1 text-center mt-1">
  244.              
  245.               <!--- PLAYLIST CAROUSEL it doesn't sync with the song length but it slides thru showing ur song names--->
  246.              
  247.               <div id="carousel1" class="carousel slide mx-auto px-1" data-ride="carousel" style="color:#ffefa3;">
  248.           <div class="carousel-inner">
  249.             <!---- SONG 1 ---->
  250.             <div class="carousel-item active text-truncate">
  251.               SONG 1- ARTIST
  252.             </div>
  253.             <!---- SONG 2 ---->
  254.             <div class="carousel-item text-truncate">
  255.               SONG 2- ARTIST2
  256.             </div>
  257.             <!---- SONG 3 ---->
  258.             <div class="carousel-item text-truncate">
  259.               SONG 3- ARTIST3
  260.             </div>
  261.          
  262.             <!--- put more songs before this line --->
  263.           </div>
  264.         </div>
  265.      
  266.         </div>
  267.         </div>
  268.         <!--- end music player --->    
  269.         </div>
  270.         <!------------- Top Decorations ------------->
  271.     <div class="border-0 bg-transparent">
  272.      <i class="fa-solid fa-comet" style="position:absolute;margin:0px -23px; transform: rotate(190deg); font-size:80px;color:#fe5177 ;"></i>
  273.     </div>
  274.          </div>
  275.          
  276. </div>
  277.  
  278. <!------------- Side Decorations ------------->
  279.     <div class="border-0 bg-transparent">
  280.      <i class="fa-solid fa-planet-ringed" style="position:absolute;margin:25px -45px; transform: rotate(70deg); font-size:50px;color:#ffc22f;"></i>
  281.      <i class="fa-solid fa-star" style="position:absolute;margin:80px 10px; transform: rotate(20deg); font-size:30px;color:#fe5177 ;"></i>
  282.      <i class="fa-solid fa-star" style="position:absolute;margin:130px 60px; transform: rotate(-30deg); font-size:60px;color:#f8ff00;"></i>
  283.      <i class="fa-solid fa-star" style="position:absolute;margin:180px -20px; transform: rotate(-30deg); font-size:15px;color:#fe5177 ;"></i>
  284.      <i class="fa-solid fa-star" style="position:absolute;margin:300px 10px; transform: rotate(-30deg); font-size:18px;color:#f8ff00;"></i>
  285.      <i class="fa-solid fa-star" style="position:absolute;margin:400px -25px; transform: rotate(-50deg); font-size:10px;color:#fe5177;"></i>
  286.      <i class="fa-solid fa-star" style="position:absolute;margin:360px 30px; transform: rotate(20deg); font-size:13px;color:#fe5177 ;"></i>
  287.     </div>  
  288.  
  289. <!---------------------- CREDITS DO NOT REMOVE ------------------------------------------>
  290. <div class="col-10 col-lg-11 text-right text-muted">
  291.      <!--------- ADD PAGEDOLL ARTIST CREDIT HERE! replace the # with the URL and write in the name after the Art by--------->
  292.     <a href="#" title="Art by "><i class="fa-solid fa-image text-muted"></i></a>
  293.     <i class="fa-solid fa-plus fa-xs"></i>
  294.     <a href="https://toyhou.se/BakuCodes" title="Music Player Code by BakuCodes"><i class="fa-solid fa-list-music text-muted"></i></a>
  295.     <i class="fa-solid fa-plus fa-xs"></i>
  296.     <a href="https://toyhou.se/LeafJelly" title="HTML by LeafJelly"><i class="fa-solid fa-code text-muted"></i></a>
  297. </div>
  298. </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!