API tools faq
paste
Advertisement
Guest User

flowering code f2u

a guest
Oct 26th, 2022
496
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.09 KB | None | 0 0
raw download clone embed print report diff
  1. <!-- primary color is #30BF9B -->
  2.  
  3. <div class="justify-content-around">
  4.   <div class="col-2">
  5.       <ul class="nav nav-tabs card-header-tabs row mb-1">
  6.         <li class="col-6 mb-1 px-1"><a class="btn btn-block border-0 btn-outline-secondary active " style="background: #30BF9B; text-white; border-radius: 15px;" data-toggle="tab" href="#ONE"><i class="fad fa-info fa-lg"></i></a></li>
  7.        
  8.         <li class="col-6 mb-1 px-1"><a class="btn btn-block border-0 btn-outline-secondary" style="background: #30BF9B; text-white; border-radius: 15px;" data-toggle="tab" href="#TWO"><i class="fad fa-file-alt fa-lg"></i></a></li>
  9.        
  10.       </ul>
  11.    </div>
  12.   </div>
  13.  
  14. <!-- background image -->
  15. <div class="justify-content-around">
  16.     <div class="col-12 py-0 px-5 justify-content-around" style="max-width:615px; background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-top-right-radius:0px; border-top-left-radius:25px; border-bottom-right-radius:25px; border-bottom-left-radius:0px; border:1px solid #000000; box-shadow: 5px 5px 10px rgba(32,13,38,0.5);">
  17.        
  18.        
  19.         <div class="col-2 p-2">
  20.             <i class="fa fa-flower fa-4x" style="color:#FFFFFF"></i>
  21.             <i class="fad fa-grip-lines fa-4x" style="color:#FFFFFF"></i>
  22.             <i class="fal fa-grip-lines fa-4x" style="color:#FFFFFF"></i>
  23.             <i class="fad fa-grip-lines fa-4x" style="color:#FFFFFF"></i>
  24.             <i class="fa fa-flower-tulip fa-4x fa-rotate-90" style="color:#FFFFFF"></i>
  25.         </div>
  26.        
  27.         <div class="col-10 p-2" style="background: #FFFFFF; box-shadow: -10px 0px 10px rgba(32,13,38,0.3);">
  28.         <div class="tab-content">
  29.  
  30. <!-- TAB ONE -->
  31. <div class="tab-pane fade active show" id="ONE">
  32.             <div class="row no-gutters">
  33.                 <div class="col-9 p-0">
  34. <!-- full name -->
  35.                     <div class="col-12 text-right pr-2" style="font-family:terminal">
  36.                         <span style="font-weight:900; font-size:30px; color:#30BF9B">✿ Name Surname</span></div>
  37.                         <div class="col-12">
  38.                             <div class="row no-gutters">
  39. <!-- name -->
  40.                       <div class="col-1 text-right pr-1 mb-2"><i class="fa-solid fa-signature" style="color:#30BF9B"></i></div>
  41.                       <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>
  42. <!-- height -->
  43.                       <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-ruler" style="color:#30BF9B"></i></div>
  44.                       <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>
  45. <!-- age -->
  46.                       <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-stopwatch" style="color:#30BF9B"></i></div>
  47.                       <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>
  48. <!-- species -->
  49.                       <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-dna" style="color:#30BF9B"></i></div>
  50.                       <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>
  51. <!-- gender or pronouns -->
  52.                       <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-venus-mars" style="color:#30BF9B"></i></div>
  53.                       <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>
  54. <!-- status -->
  55.                       <div class="col-1 text-right pr-1 mb-2" style="color:#30BF9B"><i class="fa-solid fa-heart-pulse" style="color:#30BF9B"></i></div>
  56.                       <div class="col-5 pl-1 mb-1" style="color:#000000">info</div>
  57.                      
  58.                                
  59.                             </div>
  60.                            
  61.                         </div>
  62.                 </div>
  63.                 <div class="col-3">
  64. <!-- character image -->
  65.                 <div style="background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-radius:10px; border:4px solid #FFFFFF; height: 150px; width: 150px;"></div></div>
  66.                
  67.                 </div>
  68.                 <div class="row no-gutters">
  69. <!-- extra image -->
  70.                 <div class="col-3">
  71.                 <div style="background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-radius:10px; border:1px solid #000000; height: 150px; width: 150px;"></div></div>
  72. <!-- character blurb -->
  73.               <div class="col-9 p-2 mt-1 table-responsive text-justify" style="height:140px; color:#000000; background: rgba(255,255,255,0.8); border-radius:10px; box-shadow: 5px 5px 10px rgba(32,13,38,0.3); font-size:12px">
  74.                  
  75.                   <p>Write about your character here! This box scrolls</p>
  76.  
  77.                   <p>- -</p>
  78.                  
  79.                   <p>- -</p>
  80.  
  81.                 </div>
  82.  
  83.             </div>
  84.             </div>
  85. <!-- END TAB ONE -->
  86.  
  87. <!-- TAB TWO -->
  88. <div class="tab-pane fade" id="TWO">
  89.             <div class="row no-gutters">
  90.                 <div class="col-4">
  91. <!-- extra image -->
  92.                  <div style="background-image:url(IMG_URL);background-position:center center no-repeat; background-size:cover; border-radius:10px; border:1px solid #000000; height: 150px; width: 150px;"></div>
  93.                  </div>
  94.                 <div class="col-8">
  95. <!-- traits (you can make them whatever you want) -->
  96.                     <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>
  97.                     <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>
  98.                    
  99.                     <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>
  100.                     <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>
  101.                    
  102.                     <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>
  103.                     <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>
  104.                    
  105.                     <div class="text-right mb-0" style="color:#30BF9B; font-size:18px; font-family:terminal; letter-spacing:2px">trait</div>
  106.                     <div class="progress rounded-1" style="background:#30BF9B;"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100" style="width:50% ;height:8px;"></div></div>
  107.                 </div>
  108.                </div>
  109.             <div class="row no-gutters">
  110.              <div class="col-12 justify-content-between">
  111.                 <div class="col-5 p-1" style="font-family:terminal">
  112.                         <span style="font-weight:900; font-size:18px; color:#30BF9B; letter-spacing:3px">✿ Trivia</span></div>
  113.                 <div class="col-7 py-1 px-0 text-right" style="font-family:terminal">
  114.                         <span style="font-weight:900; font-size:18px; color:#30BF9B; letter-spacing:3px">Likes/Dislikes ✿</span></div>
  115.             </div>
  116.            
  117.             <div class="col-12 justify-content-between">
  118. <!-- trivia -->
  119.               <div class="col-7 pr-1 p-0">
  120.               <div class="col-12 p-2  table-responsive text-justify" style="height:115px; color:#000000; background: rgba(255,255,255,0.8); border-radius:10px; box-shadow: 5px 5px 10px rgba(32,13,38,0.3); font-size:12px;">
  121.                  
  122.                   <ul class="fa-ul ml-3 mb-0 my-auto">
  123.  
  124.                         <li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>
  125.  
  126.                         <li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>
  127.  
  128.                         <li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>
  129.  
  130.                         <li class="pl-0 pb-1"><span class="fa-li"><i class="fa fa-hand-point-right" style="color:#30BF9B"></i></span>info</li>
  131.  
  132.                       </ul>
  133.  
  134.                 </div>
  135.                 </div>
  136.                
  137. <!-- likes/dislikes -->
  138.               <div class="col-5 p-2 table-responsive" style="height:115px; color:#000000; background: rgba(255,255,255,0.8); border-radius:10px; box-shadow: 5px 5px 10px rgba(32,13,38,0.3); font-size:12px;">
  139.                  
  140. <!-- likes -->
  141.                   <div class="row no-gutters">
  142.  
  143.                         <div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>
  144.                         <div class="col-11 pl-1">info</div>
  145.  
  146.                         <div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>
  147.                         <div class="col-11 pl-1">info</div>
  148.  
  149.                         <div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>
  150.                         <div class="col-11 pl-1">info</div>
  151.  
  152.                         <div class="col-1"><i class="fa fa-heart" style="color:#30BF9B"></i></div>
  153.                         <div class="col-11 pl-1">info</div>
  154.  
  155.                       </div>
  156.  
  157. <!-- dislikes -->
  158.                   <div class="row no-gutters">
  159.  
  160.                         <div class="col-11 pr-1 text-right">info</div>
  161.                         <div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>
  162.  
  163.                         <div class="col-11 pr-1 text-right">info</div>
  164.                         <div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>
  165.  
  166.                         <div class="col-11 pr-1 text-right">info</div>
  167.                         <div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>
  168.  
  169.                         <div class="col-11 pr-1 text-right">info</div>
  170.                         <div class="col-1"><i class="fa fa-circle-xmark" style="color:#30BF9B"></i></div>
  171.  
  172.                      
  173.             </div>
  174.             </div>
  175.            
  176. </div>
  177. </div>
  178. </div>
  179. <!-- END TAB TWO -->
  180.  
  181.                 </div>
  182.             </div>
  183.             <div class="col-2 p-3">
  184.             <i class="fa fa-flower-tulip fa-4x fa-rotate-270" style="color:#FFFFFF"></i>
  185.             <i class="fal fa-grip-lines fa-4x" style="color:#FFFFFF"></i>
  186.             <i class="fad fa-grip-lines fa-4x" style="color:#FFFFFF"></i>
  187.             <i class="fal fa-grip-lines fa-4x" style="color:#FFFFFF"></i>
  188.             <i class="fa fa-flower fa-4x" style="color:#FFFFFF"></i>
  189.             </div>
  190. </div>
  191. </div>
  192.  
  193. <!-- credit -->
  194. <!-- DO NOT REMOVE. -->
  195. <div class="justify-content-around">
  196. <div class="col-12 text-right p-1" style="max-width:615px">
  197.             <a class="tooltipster" href="https://toyhou.se/DENTALHYGIENE" style="color:#30BF9B;" title="code by DENTALHYGIENE"><i class="fa fa-tooth fa-lg"></i></a></div>
  198.             </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!