API tools faq
paste
LeafJelly

Bootstrap Galactic Chara TH Code

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