API tools faq
paste
Possibbly

Feisty

Possibbly
Dec 21st, 2021 (edited)
192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.50 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. Crown & Treasure Chest use custom colors!
  4. They're set as #E6B532 .
  5.  
  6. The fires behind the stat icons can be changed.
  7. The fires are set as #E69A4F .
  8.  
  9. Please comment if you use, thank you!
  10.  
  11. -->
  12.  
  13.  
  14.  
  15.  
  16.            <!------------------------------------------------------------------------ Quote on Large Screens ---->
  17.    <div class="container rounded col-lg-8 col-md-12 col-sm-12 bg-dark text-light pt-4 hidden-md-down" style="height:100px;">
  18.       <p class="text-uppercase" style="font-weight:100;font-size:44px;">
  19.          <i class="fad fa-crown mr-3 ml-2" style="color:#E6B532;"></i>
  20.          Put a quote here.
  21.       </p>
  22.    </div>
  23.            <!------------------------------------------------------------------------ Quote on Small Screens ---->
  24.    <div class="container rounded col-lg-8 col-md-12 col-sm-12 bg-dark text-light pt-4 hidden-md-up" style="height:100px;">
  25.       <p class="text-uppercase" style="font-weight:100;font-size:24px;">
  26.          <i class="fad fa-crown mr-3 ml-2" style="color:#E6B532;"></i>
  27.         Put a quote here.
  28.       </p>
  29.    </div>
  30.    
  31.    
  32.    <div class="card bg-faded mx-auto col-lg-8 col-md-12 col-sm-12 mt-3 border-0 py-3">
  33.            <!------------------------------------------------------------------------ Treasure Chest Icon; THIS DOES NOT SHOW ON SMALL SCREENS ---->
  34.       <div class="hidden-md-down" style="position:absolute; top:350px; left:1000px; z-index:2;">
  35.          <i class="fad fa-treasure-chest" style="font-size:66px; color:#E6B532;"></i>
  36.       </div>
  37.          <!------------------------------------------------------------------------ Treasure Chest Icon End ---->
  38.       <div class="row no-gutters">
  39.          <!----------------------- Image with Quote ---->
  40.          <div class="col-lg-3 col-md-8 col-sm-12 mt-3 rounded" style="
  41.            background-image:url('IMG_URL');
  42.            background-size:cover; background-position: center; repeat:no-repeat;height:320px;">
  43.             <p class="ml-1 text-uppercase text-center px-2 text-white" style="font-weight:600; font-size:16px;">"Put a quote here, or put an image of your OC here instead.” </p>
  44.             <!-- If the image is dark, you canreplace "text-white" with "text-light"  in the class. If it's light, replace with "text-dark" or "text-black" . Or you can use any other bootstraps. Just a recommendation-->
  45.          </div>
  46.          
  47.          
  48.          
  49.          <div class="container col-lg-8 col-md-12 col-sm-12 border-0 ml-4 mt-3"> <!-- Content Begin -->
  50.              
  51.             <div class="row no-gutters">
  52.                
  53.                <div class="container bg-faded col-lg-6 col-md-sm-12">
  54.                   <div>
  55.                      <span class="text-uppercase" style="opacity: .6;">
  56.                      <span class="fa-stack fa">
  57.                      <i class="fad fa-fire fa-stack-2x" style="color:#E69A4F;"></i>
  58.                      <i class="fas fa-user fa-stack-1x"></i>
  59.                      </span>
  60.                      name</span>
  61.                      <span class="pull-right mr-2">Content</span>
  62.                      <hr class="my-2" style="border-color: #fffff;">
  63.                   </div>
  64.                   <div>
  65.                      <span class="text-uppercase" style="opacity: .6;">
  66.                      <span class="fa-stack fa">
  67.                      <i class="fad fa-fire fa-stack-2x" style="color:#E69A4F;"></i>
  68.                      <i class="far fa-calendar-alt fa-stack-1x"></i>
  69.                      </span>
  70.                      age</span>
  71.                      <span class="pull-right mr-2">Content</span>
  72.                      <hr class="my-2" style="border-color: #fffff;">
  73.                   </div>
  74.                   <div>
  75.                      <span class="text-uppercase" style="opacity: .6;">
  76.                      <span class="fa-stack fa">
  77.                      <i class="fad fa-fire fa-stack-2x" style="color:#E69A4F;"></i>
  78.                      <i class="fas fa-venus-mars fa-stack-1x"></i>
  79.                      </span>
  80.                      gender</span>
  81.                      <span class="pull-right mr-2">Content</span>
  82.                      <hr class="my-2" style="border-color: #fffff;">
  83.                   </div>
  84.                   <div>
  85.                      <span class="text-uppercase" style="opacity: .6;">
  86.                      <span class="fa-stack fa">
  87.                      <i class="fad fa-fire fa-stack-2x" style="color:#E69A4F;"></i>
  88.                      <i class="fal fa-dna fa-stack-1x"></i>
  89.                      </span>
  90.                      race</span>
  91.                      <span class="pull-right mr-2">Content</span>
  92.                      <hr class="my-2" style="border-color: #fffff;">
  93.                   </div>
  94.                </div>
  95.                
  96.                
  97.                <div class="container bg-faded col-lg-6 col-md-sm-12 pl-4">
  98.                         <div>
  99.                            <div class="justify-content-between mt-2">
  100.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Charisma</div>
  101.                              
  102.                               <div>
  103.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  104.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  105.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  106.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  107.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  108.                               </div>
  109.                            </div>
  110.                            <div class="justify-content-between">
  111.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Kindess</div>
  112.                               <div>
  113.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  114.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  115.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  116.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  117.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  118.                               </div>
  119.                            </div>
  120.                            <div class="justify-content-between">
  121.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Honesty</div>
  122.                               <div>
  123.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  124.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  125.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  126.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  127.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  128.                               </div>
  129.                            </div>
  130.                            <div class="justify-content-between">
  131.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Intellect</div>
  132.                               <div>
  133.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  134.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  135.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  136.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  137.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  138.                               </div>
  139.                            </div>
  140.                            <div class="justify-content-between">
  141.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Courage</div>
  142.                               <div>
  143.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  144.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  145.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  146.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  147.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  148.                               </div>
  149.                            </div>
  150.                            <div class="justify-content-between">
  151.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Humor</div>
  152.                               <div>
  153.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  154.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  155.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  156.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  157.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  158.                               </div>
  159.                            </div>
  160.                            <div class="justify-content-between">
  161.                               <div class="pr-1 mr-2 text-uppercase" style="letter-spacing: 1px;opacity:.6;">Luck</div>
  162.                               <div>
  163.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  164.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  165.                                  <i class="fas fa-square fa-fw" style="font-size: .8em"/>
  166.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  167.                                  <i class="fal fa-square fa-fw" style="font-size: .8em"/>
  168.                               </div>
  169.                            </div>
  170.                            
  171.                </div>
  172.             </div>
  173.             </div>
  174.             <div class="card border-0 col-md-sm-12 lg-px-3 py-1 mt-3" style="max-height:150px;overflow:auto;scrollbar-width:thin;">
  175.                
  176.                <p class="text-justify px-4">This box scrolls! It's super cool! Vivamus fermentum aliquam accumsan. Duis nisl sem, fermentum eu ex nec, fermentum pellentesque ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel ante in erat lobortis facilisis. Suspendisse et dictum lectus. Nulla facilisi. Praesent tincidunt varius egestas. Morbi accumsan rhoncus purus, et feugiat mi. Praesent semper id metus a scelerisque.Aenean in ultricies nisi. Nunc finibus rutrum mi, porta malesuada arcu pharetra a. Pellentesque accumsan nec ipsum vitae aliquet. Suspendisse scelerisque id metus vitae dignissim. Maecenas egestas, enim id egestas rutrum, felis enim consequat eros, congue finibus mi dui a odio. Maecenas posuere gravida sapien. Quisque fringilla luctus diam, eget lacinia neque placerat eu. Etiam in efficitur metus, vitae congue orci.  </p>
  177.                
  178.             </div>
  179.            
  180.            
  181.            
  182.          </div> <!-- Content End -->
  183.          
  184.       </div><!-- Image-Content Row End-->
  185.    </div><!-- BG Card / Big Box -->
  186.  
  187.  
  188.    <p class="col-2 mx-auto pull-center mt-3 ml-5" style="font-size:9.5px;">
  189.        <a href="https://toyhou.se/Strixxus" class="text-info"><b>HTML by Strixxus <i class="fas fa-sparkles"></i></b></a></p>
  190.  
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!