API tools faq
paste
Advertisement
rikatoola

F2U ✦ green garden | BS

rikatoola
Aug 3rd, 2022 (edited)
2,497
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 30.49 KB | None | 0 0
raw download clone embed print report
  1. <div class="container text-center">
  2.    
  3. <div class="card p-3 bg-faded" style="width:1100px;">
  4.  
  5. <!--- side banners --->
  6. <div class="row no-gutters">
  7. <div class="col-lg">
  8.     <div class="card m-1 mb-2" style="
  9.    background-image: url(https://www.enjpg.com/img/2020/studio-ghibli-8-e1605738899847.jpg);
  10.    background-size: 550%;
  11.    background-position: left;
  12.    height:600px; "></div>
  13.    
  14.     <div class="card m-1" style="
  15.    background-image: url(https://i.pinimg.com/736x/3c/82/fc/3c82fc0e00c324a0f4865098987711ea.jpg);
  16.    background-size: 300%;
  17.    background-position: left;
  18.    height: 366px; "></div>
  19. </div>
  20.  
  21. <div class="col-lg">
  22. <div class="card bg-faded border-0" style="width: 900px;">
  23.    
  24. <!--- basic information --->
  25. <div class="row no-gutters">
  26.     <div class="col-lg-4">
  27.         <div class="card p-3 m-1 bg-dark mb-2">
  28.  
  29. <!--- character name --->
  30. <div class="card p-2 m-1 text-warning" style="font-size: 12px;">
  31.     <div class="row no-gutters">
  32.         <div class="col-lg-8">
  33.         <p style="text-align: left; font-size: 25px;">
  34.         CATNAME
  35.         </p>
  36.         </div>
  37.        
  38. <!--- character aesthetic symbol. look at fontawesome for different symbols! --->
  39.         <div class="col-lg-4">
  40.             <p style="text-align: right; font-size: 25px;">
  41.         <i class="fa fa-sprout"></i>
  42.         </p>
  43.         </div>
  44.     </div>
  45.    
  46. <!--- aesthetic gifs #1 --->
  47.     <div class="row no-gutters">
  48.         <div class="col-lg-4">
  49.             <div class="card m-1" style="
  50.            background-image: url(https://i.pinimg.com/originals/20/59/f2/2059f2bb0406fd8b2a86f586629123f1.gif);
  51.            background-size: 300%;
  52.            height:60px;
  53.            background-position: left;"></div>
  54.         </div>
  55.        
  56.         <div class="col-lg-4">
  57.             <div class="card m-1" style="
  58.            background-image: url(https://i.pinimg.com/originals/20/59/f2/2059f2bb0406fd8b2a86f586629123f1.gif);
  59.            background-size: 300%;
  60.            height:60px;
  61.            background-position: center;"></div>
  62.         </div>
  63.        
  64.         <div class="col-lg-4">
  65.             <div class="card m-1" style="
  66.            background-image: url(https://i.pinimg.com/originals/20/59/f2/2059f2bb0406fd8b2a86f586629123f1.gif);
  67.            background-size: 300%;
  68.            height: 60px;
  69.            background-position: right;"></div>
  70.         </div>
  71.     </div>
  72.    
  73.     <div class="card p-2 m-1 bg-faded">
  74.    
  75. <!--- character information. feel free to replace whatever you want --->
  76.     <div class="row no-gutters">
  77.         <div class="col-lg-">
  78.             <i class="fa fa-paw-claws"></i> CLAN
  79.         </div>
  80.        
  81.         <div class="col-lg">
  82.             <hr class="w-100">
  83.         </div>
  84.        
  85.         <div class="col-lg-">
  86.             blankclan
  87.         </div>
  88.     </div>
  89.    
  90.     <div class="row no-gutters">
  91.         <div class="col-lg-">
  92.             <i class="fa fa-shield"></i> RANK
  93.         </div>
  94.        
  95.         <div class="col-lg">
  96.             <hr class="w-100">
  97.         </div>
  98.        
  99.         <div class="col-lg-">
  100.             warrior
  101.         </div>
  102.     </div>
  103.    
  104.     <div class="row no-gutters">
  105.         <div class="col-lg-">
  106.             <i class="fa fa-cat"></i> APPRENTICE/MENTOR
  107.         </div>
  108.        
  109.         <div class="col-lg">
  110.             <hr class="w-100">
  111.         </div>
  112.        
  113.         <div class="col-lg-">
  114.             name
  115.         </div>
  116.     </div>
  117.    
  118.     <div class="row no-gutters">
  119.         <div class="col-lg-">
  120.             <i class="fa fa-moon"></i> AGE
  121.         </div>
  122.        
  123.         <div class="col-lg">
  124.             <hr class="w-100">
  125.         </div>
  126.        
  127.         <div class="col-lg-">
  128.             blank moons
  129.         </div>
  130.     </div>
  131.    
  132.     <div class="row no-gutters">
  133.         <div class="col-lg-">
  134.             <i class="fa fa-venus-mars"></i> GENDER
  135.         </div>
  136.        
  137.         <div class="col-lg">
  138.             <hr class="w-100">
  139.         </div>
  140.        
  141.         <div class="col-lg-">
  142.             gender (pr/ns)
  143.         </div>
  144.     </div>
  145.    
  146.     <div class="row no-gutters">
  147.         <div class="col-lg-">
  148.             <i class="fa fa-heart"></i> ORIENTATION
  149.         </div>
  150.        
  151.         <div class="col-lg">
  152.             <hr class="w-100">
  153.         </div>
  154.        
  155.         <div class="col-lg-">
  156.             warrior
  157.         </div>
  158.     </div>
  159.    
  160.     <div class="row no-gutters">
  161.         <div class="col-lg-">
  162.             <i class="fa fa-sword"></i> CLASS
  163.         </div>
  164.        
  165.         <div class="col-lg">
  166.             <hr class="w-100">
  167.         </div>
  168.        
  169.         <div class="col-lg-">
  170.             class
  171.         </div>
  172.     </div>
  173.    
  174.     <div class="row no-gutters">
  175.         <div class="col-lg-">
  176.             <i class="fa fa-arrow-up"></i> LEVEL
  177.         </div>
  178.        
  179.         <div class="col-lg">
  180.             <hr class="w-100">
  181.         </div>
  182.        
  183.         <div class="col-lg-">
  184.             warrior
  185.         </div>
  186.     </div>
  187.    
  188.     <div class="row no-gutters">
  189.         <div class="col-lg-">
  190.             <i class="fa fa-claw-marks"></i> ALIGNMENT
  191.         </div>
  192.        
  193.         <div class="col-lg">
  194.             <hr class="w-100">
  195.         </div>
  196.        
  197.         <div class="col-lg-">
  198.             true neutral
  199.         </div>
  200.     </div>
  201.    
  202.     <div class="row no-gutters">
  203.         <div class="col-lg-">
  204.             <i class="fa fa-star"></i> RELIGION
  205.         </div>
  206.        
  207.         <div class="col-lg">
  208.             <hr class="w-100">
  209.         </div>
  210.        
  211.         <div class="col-lg-">
  212.             etc
  213.         </div>
  214.     </div>
  215. </div>
  216.  
  217. </div>
  218.  
  219.         </div>
  220.        
  221. <!--- featured relationship. character avatar will be at the end of the claims section. --->
  222.        <div class="card p-0 m-1 bg-dark">
  223.            <div class="card p-2 m-2 bg-muted text-warning text-right" style="font-size: 12px;">
  224.                
  225. <!--- featured character information --->
  226.                <div class="card p-2 m-1 bg-faded">
  227.                    RANK • CLAN • NAME
  228.                </div>
  229.                
  230. <!--- featured character relationship description --->
  231.                <div class="card p-1 border-0" style="overflow-y: scroll; height: 55px;">
  232.                    Description of their relationship, or how they met, etc. Can go into detail, it scrolls!
  233.                </div>
  234.                
  235.            </div>
  236.        </div>
  237.  
  238.     </div>
  239.    
  240. <!--- moodboard, voice claim, ost/theme/playlist/etc. in order to change titles & text, be sure to find where title="jiji - kiki's delivery service", etc is located. change data-original-title="" as well. --->
  241.     <div class="col-lg-2">
  242.         <div class="card p-3 m-1 bg-dark mb-2">
  243.  
  244. <div class="card p-2 m-1 text-warning text-center" style="font-size: 12px;">
  245.    
  246. <!--- moodboard --->
  247.     <div class="card p-3 m-1 bg-faded" title="aesthetic/moodboard" data-original-title="aesthetic/moodboard">
  248.     <a href="https://www.pinterest.com/spacecattet/th-resources/jiji-kikis-delivery-service/"><i class="fas fa-images text-warning" style="font-size: 20px;"></i></a>
  249.     </div>
  250.    
  251.     <hr class="w-100">
  252.    
  253. <!--- voice claim. in order for the link to work, find:
  254. src="https://www.youtube.com/embed/SbhoPTQO5Ks
  255. and be sure to change the "SbhoPTQO5Ks" with the youtube video ID. you will be able to find the video ID b looking for the string of letters/numbers
  256. example: "https://www.youtube.com/watch?v=V7vtKvV8oXo"
  257. in this case, you would replace it with "V7vtKvV8oXo"
  258. repeat this for the theme song & soudtrack as well! --->
  259.     <div class="card p-3 m-1 bg-faded" title="jiji • kiki's delivery service" data-original-title="jiji • kiki's delivery service">
  260.     <div class="tooltipster" style="text-align:center"><span><iframe class="mt-1 w-100" style="height: 1em; width: 3em; opacity: 0.01; position: absolute; border: none;"
  261.  
  262.    src="https://www.youtube.com/embed/SbhoPTQO5Ks
  263.    
  264.    "></iframe><i class="fas fa-microphone" style="font-size: 20px;"></i></span></div>
  265.     </div>
  266.    
  267.     <hr class="w-100">
  268.    
  269. <!--- theme song --->
  270.     <div class="card p-3 m-1 bg-faded" title="soaring & im gonna fly • sydney forest" data-original-title="soaring & im gonna fly • sydney forest">
  271.     <div class="tooltipster" style="text-align:center"><span><iframe class="mt-1 w-100" style="height: 1em; width: 3em; opacity: 0.01; position: absolute; border: none;"
  272.    
  273.    src="https://www.youtube.com/embed/myXm65STTDA
  274.    
  275.    "></iframe><i class="fas fa-music" style="font-size: 20px;"></i></span></div>
  276.     </div>
  277.  
  278. <!--- character soundtrack --->
  279.     <div class="card p-3 m-1 bg-faded" title="soundtrack • kiki's delivery service OST" data-original-title="soundtrack • kki's delivery service OST">
  280.     <div class="tooltipster" style="text-align:center"><span><iframe class="mt-1 w-100" style="height: 1em; width: 3em; opacity: 0.01; position: absolute; border: none;"
  281.    
  282.    src="https://www.youtube.com/embed/8GA2Z9jXBkY
  283.    
  284.    "></iframe><i class="fas fa-compact-disc" style="font-size: 20px;"></i></span></div>
  285.     </div>
  286.  
  287. <!--- character playlist --->
  288.     <div class="card p-3 m-1 bg-faded" title="playlist • from" data-original-title="playlist • from">
  289.     <a href="#"><i class="fas fa-list-music text-warning" style="font-size: 20px;"></i></a>
  290.     </div>
  291.    
  292.     <hr class="w-100">
  293.    
  294. <!--- aesthetic image --->
  295.     <div class="card p-3 m-1 bg-faded" style="background-image: url(https://i.gifer.com/A6ES.gif); background-size: 401%; background-position: center; height:37px;"></div>
  296.     </div>
  297.  
  298.         </div>
  299.    
  300. <!--- featured relationship image --->
  301.     <div class="card p-1 m-1 bg-dark">
  302.        
  303.         <!--- image here --->
  304.         <div class="card p-3 m-1 bg-faded" style="
  305.        background-image: url(https://66.media.tumblr.com/8836f1d8a4334a139449c9fea5fe3b49/tumblr_pufblpcxvB1v57tj1o1_400.gif);
  306.        background-size: 151%;
  307.        background-position: center;
  308.        height:117px;">
  309.            
  310.             <!--- character's link / as well as symbol representing your character & theirs' relationship. use fontawesome to look for said symbols. replace the # with the character link. replace the titl="mate" & data-original-title="mate" with whatever their relationship is. i.e, friend, mother, crush, etc. --->
  311.             <a href="#" class="text-muted" style="font-size: 30px; transform: rotate(25deg); position: absolute; top: -10px; left: -5px;"><i class="fa fa-rings-wedding fa-fw tooltipster" title="mate" data-original-title="mate"></i></a>
  312.         </div>
  313.     </div>
  314.    
  315. </div>
  316.    
  317. <!--- get to know the character --->
  318.     <div class="col-lg-6">
  319.         <div class="card p-3 m-1 bg-dark">
  320.            
  321.             <div class="card p-2 m-1 text-warning" style="font-size: 12px;">
  322.  
  323. <!--- character image/banner --->
  324.             <div class="row no-gutters">
  325.                 <div class="col-lg-4">
  326.                     <div class="card m-1" style="
  327.                    background-image: url(https://i.pinimg.com/originals/ac/4d/7c/ac4d7c1a874b16ae29189425654e0d6e.gif);
  328.                    background-size: 300%;
  329.                    height:201px;
  330.                    background-position: center;"></div>
  331.                 </div>
  332.                
  333. <!--- character quote, or general quote, etc. try to keep it shortened to two sentences --->
  334.                 <div class="col-lg-8">
  335.                 <div class="row no-gutters">
  336.                 <div class="col-lg-1">
  337.                     <p style="text-align: center;">
  338.                      <i class="fa-solid fa-quote-left" style="text-align: left;"></i>
  339.                     </p>
  340.                 </div>
  341.                
  342.                 <!--- quote goes here --->
  343.                 <div class="col-lg-10">
  344.                     <p style="text-align: center; font-size: 12px;">
  345.                         Character quote goes here. Keep it at least to two sentences long.
  346.                        
  347.                         <br>
  348.                        
  349.                 <!--- whoever the quote is by goes here --->
  350.                         <i>quote by ; name, etc.</i>
  351.                     </p>
  352.                 </div>
  353.                
  354.                 <div class="col-lg-1">
  355.                     <p style="text-align: center;">
  356.                      <i class="fa-solid fa-quote-right" style="text-align: right;"></i>
  357.                     </p>
  358.                 </div>
  359.             </div>
  360.            
  361.             <hr class="w-100">
  362.            
  363. <!--- character traits, keep it all one line short --->
  364.             <p style="text-align: center; font-size: 12px;">
  365.                 KEEP IT ONE LINE • TRAIT • TRAIT • TRAIT
  366.             </p>
  367.            
  368.             <hr class="w-100">
  369.            
  370. <!--- character description --->
  371.             <div class="card p-2 m-2 bg-faded">
  372.             <div class="card p-1 m-1 border-0" style="background-color: transparent; overflow-y: scroll; height: 40px;">
  373.                 A warriors wiki style description of your character. However, you can honestly be as descriptive as you want, because this box does scroll.
  374.             </div>
  375.             </div>
  376.             </div>
  377.            
  378.             </div>
  379.             </div>
  380.  
  381.         </div>
  382.        
  383. <!--- moodboard #2 --->
  384.        
  385.         <div class="row no-gutters">
  386.             <div class="col-lg-4">
  387.                <div class="card p-3 m-1 bg-faded" style="
  388.               background-image: url(https://c.tenor.com/9_skBJIOo1EAAAAC/yellow-anime.gif);
  389.               background-size: 300%;
  390.               background-position: left;
  391.               height:80px;"></div>
  392.             </div>
  393.            
  394.             <div class="col-lg-4">
  395.                <div class="card p-3 m-1 bg-faded" style="
  396.               background-image: url(https://c.tenor.com/9_skBJIOo1EAAAAC/yellow-anime.gif);
  397.               background-size: 300%;
  398.               background-position: center;
  399.               height: 80px;"></div>
  400.             </div>
  401.            
  402.             <div class="col-lg-4">
  403.                <div class="card p-3 m-1 bg-faded" style="
  404.               background-image: url(https://c.tenor.com/9_skBJIOo1EAAAAC/yellow-anime.gif);
  405.               background-size: 300%;
  406.               background-position: right;
  407.               height: 80px;"></div>
  408.             </div>
  409.         </div>
  410.        
  411. <!--- characters naming info --->
  412.          <div class="card p-3 m-1 bg-dark" style="background-image: url(#); background-size: 300%; background-position: right;">
  413.            
  414.             <div class="card p-2 m-1 text-warning" style="font-size: 12px;">
  415.             <div class="row no-gutters">
  416.                 <div class="col-lg-5">
  417.                     <div class="card p-2 m-2 bg-faded text-left">
  418.                         PREFIX
  419.                     </div>
  420.                 </div>
  421.                
  422.                 <!--- change this symbol to whatever you would like it to be! use fontawesome to find symbols --->
  423.                 <div class="col-lg-2">
  424.                     <div class="card p-2 m-2 bg-faded">
  425.                         <i class="fa fa-sun text-center"></i>
  426.                     </div>
  427.                 </div>
  428.                
  429.                 <div class="col-lg-5">
  430.                     <div class="card p-2 m-2 bg-faded text-right">
  431.                         SUFFIX
  432.                     </div>
  433.                 </div>
  434.             </div>
  435.            
  436.             <!--- kit > apprentice > warrior name --->
  437.             <div class="card p-2 m-2 bg-faded text-center">
  438.                 NAMEKIT • NAMEPAW • NAMENAME
  439.             </div>
  440.            
  441.             <hr class="w-100">
  442.            
  443.             <!--- prefix name meaning --->
  444.             <div class="row no-gutters">
  445.                 <div class="col-lg-6">
  446.                 <div class="card p-2 m-2 bg-faded text-left">
  447.                     NAME
  448.                    
  449.                     <div class="card m-1 border-0" style="background-color: transparent; overflow-y: scroll; height: 40px;">
  450.                         The reasoning behind why they were named that, etc.
  451.                 </div>
  452.                 </div>
  453.             </div>
  454.                
  455.                 <!--- suffix name meaning --->
  456.                 <div class="col-lg-6">
  457.                     <div class="card p-2 m-2 bg-faded text-right">
  458.                     NAME
  459.                    
  460.                     <div class="card m-1 border-0" style="background-color: transparent; overflow-y: scroll; height: 40px;">
  461.                         The reasoning behind why they were named that, etc.
  462.                 </div>
  463.                 </div>
  464.                 </div>
  465.             </div>
  466.  
  467.         </div>
  468.        
  469. <!--- end of code --->
  470.    
  471.     </div>
  472. </div>
  473. </div>
  474.  
  475. <!--- other info --->
  476.  
  477.     <div class="card p-3 m-1 bg-dark text-warning" style="height:300px;">
  478.        
  479. <!--- tabbed content begins here --->
  480. <!--- Default custom accent color is #cc828a --->
  481.  
  482. <div class="container px-0">
  483.     <div class="row no-gutters mb-2">
  484.      
  485.         <div class="col-lg-4 col-md-5 pr-md-2 mb-md-0 mb-2">
  486.            
  487.             <div class="card bg-faded" style="background-image: url(https://c.tenor.com/jk7a61UVk-kAAAAC/clouds-sky.gif); background-size: 200%; background-position: right; height:265px;"></div>
  488.            
  489.         </div>
  490.        
  491.         <div class="col-lg-8 col-md-7">
  492.             <ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
  493.  
  494. <!--- navigation --->
  495.  
  496.                 <li class="nav-item col mr-1 mb-2"><a class="btn btn-default nav-link active text-warning" data-toggle="tab" href="#ONE">
  497.                   <i class="fa fa-address-card" style="font-size: 30px;"></i></a></li>
  498.                  
  499.                 <li class="nav-item col mx-1 mb-2"><a class="btn btn-default nav-link text-warning" data-toggle="tab" href="#TWO">
  500.                   <i class="fa fa-book-open" style="font-size: 30px;"></i></a></a></li>
  501.                  
  502.                 <li class="nav-item col ml-1 mb-2"><a class="btn btn-default nav-link text-warning" data-toggle="tab" href="#THREE">
  503.                   <i class="fa fa-heart" style="font-size: 30px;"></i></a></a></li>
  504.             </ul>
  505.  
  506.             <div class="rounded bg-faded tab-content">
  507.                
  508.                 <!--- personality/stats --->
  509.                 <div class="tab-pane fade in active show" data-toggle="tab" id="ONE">
  510.                     <div class="p-1" style="height: 210px; overflow: auto;">
  511.                        
  512.  
  513. <!--- characteristics & skillsets
  514. in order to change the percentate, find the style="width:50%" --->
  515. <div class="row no-gutters">
  516.     <div class="col-lg-6">
  517.         <div class="card p-3 m-2 text-center" style="font-size: 12px;">
  518.             <div class="row no-gutters">
  519.             <div class="col-lg-5">
  520.                 confidence
  521.             </div>
  522.            
  523.             <div class="col-lg-7">
  524.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  525.             </div>
  526.             </div>
  527.            
  528.             <div class="row no-gutters">
  529.             <div class="col-lg-5">
  530.                 friendliness
  531.             </div>
  532.            
  533.             <div class="col-lg-7">
  534.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  535.             </div>
  536.             </div>
  537.            
  538.             <div class="row no-gutters">
  539.             <div class="col-lg-5">
  540.                 paitience
  541.             </div>
  542.            
  543.             <div class="col-lg-7">
  544.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  545.             </div>
  546.             </div>
  547.            
  548.             <div class="row no-gutters">
  549.             <div class="col-lg-5">
  550.                 optimistism
  551.             </div>
  552.            
  553.             <div class="col-lg-7">
  554.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  555.             </div>
  556.             </div>
  557.         </div>
  558.     </div>
  559.    
  560.     <div class="col-lg-6">
  561.         <div class="card p-3 m-2 text-center">
  562.             <div class="row no-gutters">
  563.             <div class="col-lg-8">
  564.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  565.             </div>
  566.            
  567.             <div class="col-lg-4">
  568.                 hunting
  569.             </div>
  570.             </div>
  571.            
  572.             <div class="row no-gutters">
  573.             <div class="col-lg-8">
  574.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  575.             </div>
  576.            
  577.             <div class="col-lg-4">
  578.                 fighting
  579.             </div>
  580.             </div>
  581.            
  582.             <div class="row no-gutters">
  583.             <div class="col-lg-8">
  584.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  585.             </div>
  586.            
  587.             <div class="col-lg-4">
  588.                 healing
  589.             </div>
  590.             </div>
  591.            
  592.             <div class="row no-gutters">
  593.             <div class="col-lg-8">
  594.                 <div class="progress p-1 m-1"><div class="progress-bar" style="width:50%; height:7px;"></div></div>
  595.             </div>
  596.            
  597.             <div class="col-lg-4">
  598.                 diplomacy
  599.             </div>
  600.             </div>
  601.         </div>
  602.     </div>
  603. </div>
  604.  
  605. <!--- likes --->
  606. <div class="card p-3 m-2 text-center">
  607.         <div class="row no-gutters">
  608.     <div class="col-lg-6">
  609.         <div class="card p-3 m-2 text-center">
  610.             <div class="row no-gutters">
  611.                 <div class="col-lg-1">
  612.                     <i class="fa fa-check text-muted"></i>
  613.                 </div>
  614.                
  615.                 <div class="col-lg-11">
  616.                     sleeping, eating, running in the fields, catching birds, and ignoring people.
  617.                 </div>
  618.             </div>
  619.         </div>
  620.     </div>
  621.  
  622. <!--- dislikes --->
  623.     <div class="col-lg-6">
  624.         <div class="card p-3 m-2 text-center">
  625.             <div class="row no-gutters">
  626.                 <div class="col-lg-11">
  627.                     cleaning the elders nests, cattarpillars, getting wet, nightmares, and rudeness
  628.                 </div>
  629.                
  630.                 <div class="col-lg-1">
  631.                    <i class="fa fa-times text-muted"></i>
  632.                 </div>
  633.             </div>
  634.         </div>
  635.     </div>
  636.     </div>
  637.         </div>
  638.  
  639.                        
  640.                     </div>
  641.                 </div>
  642.  
  643. <!--- backstory/history --->
  644.  
  645.                 <div class="tab-pane fade" data-toggle="tab" id="TWO">
  646.                     <div class="px-1 pt-1 pb-1" style="height: 210px; overflow: auto;">
  647.  
  648. <!--- kithood --->    
  649. <p style="text-align: left; font-size: 25px;">
  650.         <i class="fa fa-bookmark"></i> KITHOOD
  651.         </p>
  652. <div class="card p-2 m-1" style="font-size: 12px;">
  653.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc odio, ornare sit amet varius eget, volutpat nec odio. Suspendisse non nulla aliquam, finibus risus at, efficitur sem. Vivamus sit amet porta nunc, eget faucibus risus. Ut eu quam scelerisque, pharetra ipsum id, facilisis arcu. Aliquam ullamcorper malesuada nisi nec sollicitudin. Pellentesque viverra sollicitudin nulla, quis feugiat erat condimentum id. Proin nec enim tortor. Fusce ac ultrices mi. Fusce vitae nisl sed arcu ultricies commodo. Donec eu nulla vel metus vestibulum venenatis.
  654. </div>
  655.  
  656. <hr class="w-100">
  657.  
  658. <!--- apprenticeship --->
  659. <p style="text-align: right; font-size: 25px;">
  660.         APPRENTICESHIP <i class="fa fa-bookmark"></i>
  661.         </p>
  662. <div class="card p-2 m-1" style="text-align: right; font-size: 12px;">
  663.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc odio, ornare sit amet varius eget, volutpat nec odio. Suspendisse non nulla aliquam, finibus risus at, efficitur sem. Vivamus sit amet porta nunc, eget faucibus risus. Ut eu quam scelerisque, pharetra ipsum id, facilisis arcu. Aliquam ullamcorper malesuada nisi nec sollicitudin. Pellentesque viverra sollicitudin nulla, quis feugiat erat condimentum id. Proin nec enim tortor. Fusce ac ultrices mi. Fusce vitae nisl sed arcu ultricies commodo. Donec eu nulla vel metus vestibulum venenatis.
  664. </div>
  665.  
  666. <!--- copy from here to add another section --->
  667. <hr class="w-100">
  668.  
  669. <!--- current events --->    
  670. <p style="text-align: left; font-size: 25px;">
  671.         <i class="fa fa-bookmark"></i> PRESENT DAY
  672.         </p>
  673. <div class="card p-2 m-1" style="font-size: 12px;">
  674.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc odio, ornare sit amet varius eget, volutpat nec odio. Suspendisse non nulla aliquam, finibus risus at, efficitur sem. Vivamus sit amet porta nunc, eget faucibus risus. Ut eu quam scelerisque, pharetra ipsum id, facilisis arcu. Aliquam ullamcorper malesuada nisi nec sollicitudin. Pellentesque viverra sollicitudin nulla, quis feugiat erat condimentum id. Proin nec enim tortor. Fusce ac ultrices mi. Fusce vitae nisl sed arcu ultricies commodo. Donec eu nulla vel metus vestibulum venenatis.
  675. </div>
  676.  
  677. <!--- paste from here to add another section --->
  678.  
  679.  
  680.                        
  681.                 </div>
  682.                 </div>
  683.  
  684. <!--- relationships --->
  685.  
  686.                 <div class="tab-pane fade" data-toggle="tab" id="THREE">
  687.                     <div class="px-1 pt-1 pb-1" style="height: 210px; overflow: auto;">
  688.                        
  689. <!--- relationship #1 --->
  690.  
  691. <div class="row no-gutters">
  692.     <div class="col-lg-4">
  693.     <div class="card m-2 bg-faded" style="
  694.    background-image: url(https://68.media.tumblr.com/fbf40491d6f01f7124ba9b1c7cc0585c/tumblr_oq01k5uuMO1wodxrno1_500.gif);
  695.    background-size: 300%;
  696.    background-position: center;
  697.    height:140px;"></div>
  698.    
  699.     <div class="card p-2 m-2" style="font-size: 12px; text-left: center;">
  700.         <div class="row no-gutters">
  701.             <div class="col-lg-11">
  702.                CATNAME
  703.             </div>
  704.        
  705.         <div class="col-lg-1">
  706.                <i class="fa fa-heart"></i>
  707.         </div>
  708.     </div>
  709.     </div>
  710.     </div>
  711.    
  712.     <div class="col-lg-8">
  713.     <div class="card p-2 m-2 text-left" style="font-size: 12px;">
  714.         RANK • CLAN • RELATIONSHIP
  715.     </div>
  716.        
  717.     <div class="card p-2 m-2" style="font-size: 12px; overflow-y: scroll; height: 140px;">
  718.         Description of how they met or what their thoughts are on this character, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc odio, ornare sit amet varius eget, volutpat nec odio. Suspendisse non nulla aliquam, finibus risus at, efficitur sem. Vivamus sit amet porta nunc, eget faucibus risus. Ut eu quam scelerisque, pharetra ipsum id, facilisis arcu. Aliquam ullamcorper malesuada nisi nec sollicitudin. Pellentesque viverra sollicitudin nulla, quis feugiat erat condimentum id. Proin nec enim tortor. Fusce ac ultrices mi. Fusce vitae nisl sed arcu ultricies commodo. Donec eu nulla vel metus vestibulum venenatis.
  719.     </div>
  720.     </div>
  721. </div>
  722.  
  723. <hr class="w-100">
  724.  
  725. <!--- relationship #2 --->
  726.  
  727. <div class="row no-gutters">
  728.     <div class="col-lg-8">
  729.         <div class="card p-2 m-2 text-right" style="font-size: 12px;">
  730.         RELATIONSHIP • CLAN • RANK
  731.     </div>
  732.        
  733.     <div class="card p-2 m-2 text-right" style="font-size: 12px; overflow-y: scroll; height: 140px;">
  734.         Description of how they met or what their thoughts are on this character, etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc odio, ornare sit amet varius eget, volutpat nec odio. Suspendisse non nulla aliquam, finibus risus at, efficitur sem. Vivamus sit amet porta nunc, eget faucibus risus. Ut eu quam scelerisque, pharetra ipsum id, facilisis arcu. Aliquam ullamcorper malesuada nisi nec sollicitudin. Pellentesque viverra sollicitudin nulla, quis feugiat erat condimentum id. Proin nec enim tortor. Fusce ac ultrices mi. Fusce vitae nisl sed arcu ultricies commodo. Donec eu nulla vel metus vestibulum venenatis.
  735.     </div>
  736.     </div>
  737.    
  738.     <div class="col-lg-4">
  739.     <div class="card m-2 bg-faded" style="
  740.    background-image: url(https://64.media.tumblr.com/3300359916168f4547863fa0dccca7b4/e0aff3d0002b9ab8-48/s500x750/647024bdfb67daf5447bb6ed9134b6868abbc3ab.gifv);
  741.    background-size: 200%;
  742.    background-position: center;
  743.    height:140px;"></div>
  744.    
  745.     <div class="card p-2 m-2 text-right" style="font-size: 12px; text-left: center;">
  746.        
  747.         <div class="row no-gutters">
  748.             <div class="col-lg-1">
  749.                <i class="fa fa-heart"></i>
  750.             </div>
  751.        
  752.         <div class="col-lg-11">
  753.                CATNAME
  754.         </div>
  755.     </div>
  756.     </div>
  757.     </div>
  758. </div>
  759.  
  760. <!--- if you want to add more, paste under this line!
  761. and also, remember to add a <hr class="w-100"> to add
  762. a divider between the relationships! --->
  763.  
  764. <!--- end of relationships --->
  765.                        
  766.                     </div>
  767.                 </div>
  768.             </div>
  769.         </div>
  770.     </div>
  771. </div>
  772.    
  773. <!--- tabs end here --->
  774.    
  775.     </div>
  776.    
  777. <!--- end of all of the code woooo -->
  778.  
  779. </div>
  780. </div>
  781.  
  782. <!--- second aesthetic banners near the bottom --->
  783. <div class="col-lg">
  784.     <div class="card m-1 mb-2" style="
  785.    background-image: url(https://www.enjpg.com/img/2020/studio-ghibli-8-e1605738899847.jpg);
  786.    background-size: 550%;
  787.    background-position: right;
  788.    height:600px; "></div>
  789.    
  790.     <div class="card m-1" style="
  791.    background-image: url(https://i.pinimg.com/736x/3c/82/fc/3c82fc0e00c324a0f4865098987711ea.jpg);
  792.    background-size: 300%;
  793.    background-position: right;
  794.    height: 365px; "></div>
  795. </div>
  796.    
  797. </div>
  798.  
  799. <div class="card p-1 m-1 bg-dark text-center">
  800.    
  801.     <div class="row">
  802.         <div class="col-lg-11">
  803.            
  804.         </div>
  805.        
  806.         <!--- DO NOT REMOVE, these are my credit tags! --->
  807.        
  808.         <div class="col-lg-1">
  809.             <a href="https://toyhou.se/Pinky" class="text-warning" style="font-size: 20px; opacity: 0.1;"><i class="fa fa-warning fa-fw tooltipster" title="tabs by pinky" data-original-title="tabs by pinky"></i></a>
  810.            
  811.             <a href="https://toyhou.se/bumblebree/characters" class="text-warning" style="font-size: 20px; opacity: 0.1;"><i class="fa fa-code fa-fw tooltipster" title="code by honeybree" data-original-title="code by honeybree"></i></a>
  812.         </div>
  813.     </div>
  814.    
  815. </div>
  816.  
  817. </div>
  818. </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!