API tools faq
paste
Advertisement
rikatoola

F2U ✦ seasalt | CC

rikatoola
Aug 1st, 2023 (edited)
1,329
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 34.33 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--- tips
  2.  
  3. if you'd like rounded corners, adjust the border-radius: 0px; in the style tag, or just remove it alltogether!
  4. if you want custom colors, make sure to remove any text-primary or text-muted tags!
  5. use fontawesome.com for other icons & etc!
  6.  
  7. ctrl + f to quickly find the colors and replace them.
  8.  
  9. color codes:
  10. background border box: #a4815d
  11. main background color: #d5c088
  12. secondary text box color: #fefcec
  13. secondary text box border:  #cb8c44
  14. image box borders: #f2d7b7
  15. progress bar: #efc59a
  16. font color 1: #9f5d4a
  17. font color 2: #b77b69
  18. icons color 1: #b47347
  19. icons color 2: #ce8858
  20. icons color 2: #fdf6ee
  21.  
  22. --->
  23.  
  24. <div class="container m-3 p-1 mx-auto" style="width: 950px;">
  25.    
  26.     <div class="row no-gutters">
  27.         <div class="col-3">
  28.            
  29.             <!--- name/titles --->
  30.             <div class="card m-1 p-1 text-center mb-2" style="border-radius: 0px; background-color: #a4815d;">
  31.                 <div class="card p-1 bg-faded text-center" style="border-radius: 0px; background-color: #d5c088;">
  32.                    
  33.                 <p class="p-0 m-1" style="font-size: 20px; font-weight: 600; letter-spacing: 0.1em; color: #9f5d4a;">
  34.                     CATNAME
  35.                 </p>
  36.                
  37.                 <!--- divider --->
  38.                 <div class="card my-1" style="border-radius: 0px; border-top: 1px solid #cca277; border-bottom: 0px solid; border-right: 0px solid; border-left: 0px solid;"></div>
  39.                
  40.                 <p class="p-0 m-1" style="font-size: 13px; font-weight: 400; color: #b77b69;">
  41.                     PRO / NOUN • CLAN
  42.                 </p>
  43.                
  44.             </div>
  45.             </div>
  46.            
  47.             <!--- image --->
  48.             <div class="card m-1 p-1 text-center mb-2" style="border-radius: 0px; background-color: #a4815d;">
  49.             <div class="card bg-faded text-center" style="border-radius: 0px; border: 1px solid #f2d7b7;
  50.            background-image: url('IMGURL');
  51.            background-size: cover;
  52.            background-position: center;
  53.            height: 196px;">
  54.                
  55.                 <!--- pagedoll . 227x200 | remove this if you dont want it! --->
  56.                 <div class="card text-center border-0" style="border-radius: 0px;
  57.            background-image: url('IMGURL');
  58.            background-color: transparent;
  59.            background-size: cover;
  60.            background-position: center;
  61.            height: 196px;"></div>
  62.                
  63.             </div>
  64.             </div>
  65.            
  66.             <!--- simple information --->
  67.             <div class="card m-1 p-1 text-center mb-2" style="border-radius: 0px; background-color: #a4815d;">
  68.                 <div class="card p-1 bg-faded text-center" style="border-radius: 0px; background-color: #d5c088;">
  69.                    
  70.                     <div class="card p-2 text-center" style="border-radius: 0px; overflow-y: scroll; background-color: #fefcec; border: 1px solid #cb8c44;">
  71.                    
  72.                     <div class="row no-gutters">
  73.                         <div class="col-2">
  74.                             <p class="p-1 m-1" style="font-size: 20px; color: #b47347;">
  75.                                 <i class="fa-duotone fa-raindrops tooltipster" title="namekit > namepaw > warriorname"></i>
  76.                             </p>
  77.                         </div>
  78.                        
  79.                         <div class="col-2">
  80.                             <p class="p-1 m-1" style="font-size: 20px; color: #b47347;">
  81.                                 <i class="fa-duotone fa-moon tooltipster" title="blank moons old"></i>
  82.                             </p>
  83.                         </div>
  84.                        
  85.                         <div class="col-2">
  86.                             <p class="p-1 m-1" style="font-size: 20px; color: #b47347;">
  87.                                 <i class="fa-duotone fa-paw tooltipster" title="rank ; warrior"></i>
  88.                             </p>
  89.                         </div>
  90.                        
  91.                         <div class="col-2">
  92.                             <p class="p-1 m-1" style="font-size: 20px; color: #b47347;">
  93.                                 <i class="fa-duotone fa-heart tooltipster" title="orientation ; mate/crush"></i>
  94.                             </p>
  95.                         </div>
  96.                        
  97.                         <div class="col-2">
  98.                             <p class="p-1 m-1" style="font-size: 20px; color: #b47347;">
  99.                                 <i class="fa-duotone fa-family tooltipster" title="family ; name, name, etc"></i>
  100.                             </p>
  101.                         </div>
  102.                        
  103.                         <div class="col-2">
  104.                             <p class="p-1 m-1" style="font-size: 20px; color: #b47347;">
  105.                                 <i class="fa-duotone fa-swords tooltipster" title="class ; etc"></i>
  106.                             </p>
  107.                         </div>
  108.                     </div>
  109.                 </div>
  110.             </div>
  111.         </div>
  112.         </div>
  113.        
  114.         <div class="col-5">
  115.            
  116.             <!--- character description --->
  117.             <div class="card m-1 p-1 text-center mb-2" style="border-radius: 0px; background-color: #a4815d;">
  118.                 <div class="card p-1 bg-faded text-center" style="border-radius: 0px; background-color: #d5c088;">
  119.                
  120.                 <div class="card p-2 mb-2 text-center" style="border-radius: 0px; overflow-y: scroll; height: 81px; background-color: #fefcec; border: 1px solid #cb8c44;">
  121.                     <p class="p-1 m-0" style="font-size: 11px; color: #b77b69;">
  122.                         <b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit. Cras blandit consectetur imperdiet. Vivamus vel lacus urna. Nam pulvinar vel elit ac malesuada. Cras aliquet faucibus lobortis. Proin posuere ex lacinia dapibus sodales. Quisque ut nibh sed magna egestas scelerisque. Curabitur arcu arcu, vehicula tempor nunc ut, sollicitudin vestibulum.
  123.                     </p>
  124.                    
  125.                     <p class="p-1 m-0" style="font-size: 11px; color: #b77b69;">
  126.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit consectetur imperdiet. Vivamus vel lacus urna. Nam pulvinar vel elit ac malesuada. Cras aliquet faucibus lobortis. Proin posuere ex lacinia dapibus sodales. Quisque ut nibh sed magna egestas scelerisque. Curabitur arcu arcu, vehicula tempor nunc ut, sollicitudin vestibulum.
  127.                     </p>
  128.                 </div>
  129.                
  130.                 <div class="card my-1 m-1 mb-2" style="border-radius: 0px; border-top: 1px solid #cca277; border-bottom: 0px solid; border-right: 0px solid; border-left: 0px solid;"></div>
  131.                
  132.                 <div class="card p-2 mb-2 text-center" style="border-radius: 0px; overflow-y: scroll; height: 35px; background-color: #fefcec; border: 1px solid #cb8c44;">
  133.                     <div class="row no-gutters">
  134.                         <div class="col-lg-1">
  135.                             <p class="text-center" style="font-size: 12px; font-weight: 400; color: #9f5d4a;">
  136.                                 TRAITS
  137.                             </p>
  138.                         </div>
  139.                        
  140.                         <div class="col-lg-1">
  141.                             <p class="text-center" style="font-size: 12px; font-weight: 400; color: #efc59a;">
  142.                                 •
  143.                             </p>
  144.                         </div>
  145.                        
  146.                         <div class="col-lg-10 text-center">
  147.                             <p class="text-center" style="font-size: 12px; font-weight: 400; color: #b77b69;">
  148.                                 trait, trait, trait, trait, trait, trait, this box doesn't scroll
  149.                             </p>
  150.                         </div>
  151.                     </div>
  152.                 </div>
  153.                
  154.             </div>
  155.             </div>
  156.            
  157.             <!--- relationships --->
  158.             <div class="card m-1 p-1 text-center mb-2" style="border-radius: 0px; background-color: #a4815d;">
  159.                
  160.                 <!--- tabbed content begins here --->
  161.                 <div class="container px-0">
  162.                    
  163.                     <ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing: 1px;">
  164.                        
  165.                     <!--- navigation --->
  166.                    
  167.                     <li class="nav-item col mr-1 mb-2"><a class="btn btn-default nav-link active" data-toggle="tab" href="#featured" style="border-radius: 0px; background-color: #d5c088; border: 1px solid #866a4d; color: #9f5d4a;">
  168.                   FEATURED
  169.                   </a></li>
  170.                  
  171.                   <li class="nav-item col mx-1 mb-2"><a class="btn btn-default nav-link" data-toggle="tab" href="#family" style="border-radius: 0px; background-color: #d5c088; border: 1px solid #866a4d; color: #9f5d4a;">
  172.                   FAMILY
  173.                   </i></a></a></li>
  174.                  
  175.                   <li class="nav-item col ml-1 mb-2"><a class="btn btn-default nav-link" data-toggle="tab" href="#friends" style="border-radius: 0px; background-color: #d5c088; border: 1px solid #866a4d; color: #9f5d4a;">
  176.                   FRIENDS
  177.                   </a></a></li>
  178.                   </ul>
  179.  
  180.             <div class="rounded tab-content" style="background-color: #d5c088;">
  181.                
  182.                 <!--- featured relationship tab --->
  183.                 <div class="tab-pane fade in active show" data-toggle="tab" id="featured">
  184.                     <div class="card" style="height: 175px; border-radius: 0px; background-color: #d5c088;">
  185.                         <div class="card m-2 mb-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  186.                             <p class="p-0 m-0" style="font-weight: 600; font-size: 14px; color: #b77b69;">
  187.                                 <a href="https://toyhou.se/18187270.ghostcirrus" style="color: #9f5d4a;">GHOSTCIRRUS</a>
  188.                                
  189.                                 <span style="color: #efc59a;">
  190.                                     •
  191.                                 </span>
  192.                                
  193.                                 LOVE INTEREST
  194.                                
  195.                                 <span style="color: #efc59a;">
  196.                                     •
  197.                                 </span>
  198.                                
  199.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  200.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  201.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  202.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  203.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  204.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  205.                             </p>
  206.                         </div>
  207.                        
  208.                         <div class="row no-gutters">
  209.                             <div class="col-lg-4">
  210.                                     <!--- image --->
  211.                                     <div class="card m-2 text-center" style="border-radius: 0px;
  212.                                    background-color: #eddfba; border: 1px solid #cb8c44;
  213.                                    background-image: url('IMGURL');
  214.                                    background-size: cover;
  215.                                    background-position: center;
  216.                                    height: 109px;"></div>
  217.                             </div>
  218.                            
  219.                             <div class="col-lg-8">
  220.                                 <div class="card m-2 p-2 text-left" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44; overflow-y: scroll; height:108px;">
  221.                                     <p class="p-0 m-0" style="font-size: 11px; color: #b77b69;">
  222.                                         To be expanded on/roleplayed. Plotted love interest. She is the girlboss to his malewife. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit consectetur imperdiet. Vivamus vel lacus urna. Nam pulvinar vel elit ac malesuada. Cras aliquet faucibus lobortis. Proin posuere ex lacinia dapibus sodales. Quisque ut nibh sed magna egestas scelerisque. Curabitur arcu arcu, vehicula tempor nunc ut, sollicitudin vestibulum.
  223.                                     </p>
  224.                                 </div>
  225.                             </div>
  226.                         </div>
  227.                        
  228.                     </div>
  229.                 </div>
  230.                
  231.                 <!--- family relationships tab --->
  232.                 <div class="tab-pane fade" data-toggle="tab" id="family">
  233.                     <div class="card" style="height: 175px; border-radius: 0px; overflow-y: scroll; background-color: #d5c088;">
  234.                        
  235.                     <!--- starts here relationships --->
  236.                     <div class="row no-gutters">
  237.                    
  238.                     <!--- relationship #1 --->
  239.                     <div class="col-4">
  240.                         <!--- image --->
  241.                         <div class="m-2 card bg-faded text-center" style="border-radius: 0px; background-color: #eddfba; border: 1px solid #cb8c44;
  242.                        background-image: url('IMGURL');
  243.                        background-size: cover;
  244.                        background-position: center;
  245.                        height: 100px;"></div>
  246.                        
  247.                         <!--- name & relationship details --->
  248.                         <div class="card m-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  249.                             <p class="p-0 m-0 text-primary" style="font-size: 12px;">
  250.                                 <a href="URL" style="color: #9f5d4a;">CATNAME</a>
  251.                             </p>
  252.                            
  253.                             <p class="p-0 m-0" style="font-size: 11px; letter-spacing: 0.3em; color: #b77b69;">
  254.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  255.                                 <i class="fa fa-heart-half-stroke" style="color: #efc59a;"></i>
  256.                                 <i class="far fa-heart" style="color: #efc59a;"></i>
  257.                                
  258.                                 <span style="color: #efc59a;">
  259.                                     •
  260.                                 </span>
  261.                                
  262.                                 <i class="fa-duotone fa-duck tooltipster" title="relationship"></i>
  263.                             </p>
  264.                         </div>
  265.                     </div>
  266.                     <!--- copy from relationship #1 and paste from here --->
  267.                    
  268.                     <!--- relationship #2 --->
  269.                     <div class="col-4">
  270.                         <!--- image --->
  271.                         <div class="m-2 card bg-faded text-center" style="border-radius: 0px; background-color: #eddfba; border: 1px solid #cb8c44;
  272.                        background-image: url('IMGURL');
  273.                        background-size: cover;
  274.                        background-position: center;
  275.                        height: 100px;"></div>
  276.                        
  277.                         <!--- name & relationship details --->
  278.                         <div class="card m-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  279.                             <p class="p-0 m-0 text-primary" style="font-size: 12px;">
  280.                                 <a href="URL" style="color: #9f5d4a;">CATNAME</a>
  281.                             </p>
  282.                            
  283.                             <p class="p-0 m-0" style="font-size: 11px; letter-spacing: 0.3em; color: #b77b69;">
  284.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  285.                                 <i class="fa fa-heart-half-stroke" style="color: #efc59a;"></i>
  286.                                 <i class="far fa-heart" style="color: #efc59a;"></i>
  287.                                
  288.                                 <span style="color: #efc59a;">
  289.                                     •
  290.                                 </span>
  291.                                
  292.                                 <i class="fa-duotone fa-duck tooltipster" title="relationship"></i>
  293.                             </p>
  294.                         </div>
  295.                     </div>
  296.                     <!--- copy from relationship #2 and paste from here --->
  297.                    
  298.                     <!--- relationship #3 --->
  299.                     <div class="col-4">
  300.                         <!--- image --->
  301.                         <div class="m-2 card bg-faded text-center" style="border-radius: 0px; background-color: #eddfba; border: 1px solid #cb8c44;
  302.                        background-image: url('IMGURL');
  303.                        background-size: cover;
  304.                        background-position: center;
  305.                        height: 100px;"></div>
  306.                        
  307.                         <!--- name & relationship details --->
  308.                         <div class="card m-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  309.                             <p class="p-0 m-0 text-primary" style="font-size: 12px;">
  310.                                 <a href="URL" style="color: #9f5d4a;">CATNAME</a>
  311.                             </p>
  312.                            
  313.                             <p class="p-0 m-0" style="font-size: 11px; letter-spacing: 0.3em; color: #b77b69;">
  314.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  315.                                 <i class="fa fa-heart-half-stroke" style="color: #efc59a;"></i>
  316.                                 <i class="far fa-heart" style="color: #efc59a;"></i>
  317.                                
  318.                                 <span style="color: #efc59a;">
  319.                                     •
  320.                                 </span>
  321.                                
  322.                                 <i class="fa-duotone fa-duck tooltipster" title="relationship"></i>
  323.                             </p>
  324.                         </div>
  325.                     </div>
  326.                     <!--- copy from relationship #3 and paste from here --->
  327.                
  328.             </div>
  329.         </div>
  330.     </div>
  331.                
  332.                 <!--- friendly relationships tab --->
  333.                 <div class="tab-pane fade" data-toggle="tab" id="friends">
  334.                     <div class="card" style="height: 175px; border-radius: 0px; overflow-y: scroll; background-color: #d5c088;">
  335.                        
  336.                     <!--- relationships row #1--->
  337.                     <div class="row no-gutters">
  338.                    
  339.                     <!--- relationship #1 --->
  340.                     <div class="col-4">
  341.                         <!--- image --->
  342.                         <div class="m-2 card bg-faded text-center" style="border-radius: 0px; background-color: #eddfba; border: 1px solid #cb8c44;
  343.                        background-color: #cecbb6;
  344.                        background-image: url('IMGURL');
  345.                        background-size: cover;
  346.                        background-position: center;
  347.                        height: 100px;"></div>
  348.                        
  349.                         <!--- name & relationship details --->
  350.                         <div class="card m-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  351.                             <p class="p-0 m-0 text-primary" style="font-size: 12px;">
  352.                                 <a href="URL" style="color: #9f5d4a;">CATNAME</a>
  353.                             </p>
  354.                            
  355.                             <p class="p-0 m-0" style="font-size: 11px; letter-spacing: 0.3em; color: #b77b69;">
  356.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  357.                                 <i class="fa fa-heart-half-stroke" style="color: #efc59a;"></i>
  358.                                 <i class="far fa-heart" style="color: #efc59a;"></i>
  359.                                
  360.                                 <span style="color: #efc59a;">
  361.                                     •
  362.                                 </span>
  363.                                
  364.                                 <i class="fa-duotone fa-duck tooltipster" title="relationship"></i>
  365.                             </p>
  366.                         </div>
  367.                     </div>
  368.                     <!--- copy from relationship #1 and paste from here --->
  369.                    
  370.                     <!--- relationship #2 --->
  371.                     <div class="col-4">
  372.                         <!--- image --->
  373.                         <div class="m-2 card bg-faded text-center" style="border-radius: 0px; background-color: #eddfba; border: 1px solid #cb8c44;
  374.                        background-image: url('IMGURL');
  375.                        background-size: cover;
  376.                        background-position: center;
  377.                        height: 100px;"></div>
  378.                        
  379.                         <!--- name & relationship details --->
  380.                         <div class="card m-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  381.                             <p class="p-0 m-0 text-primary" style="font-size: 12px;">
  382.                                 <a href="URL" style="color: #9f5d4a;">CATNAME</a>
  383.                             </p>
  384.                            
  385.                             <p class="p-0 m-0" style="font-size: 11px; letter-spacing: 0.3em; color: #b77b69;">
  386.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  387.                                 <i class="fa fa-heart-half-stroke" style="color: #efc59a;"></i>
  388.                                 <i class="far fa-heart" style="color: #efc59a;"></i>
  389.                                
  390.                                 <span style="color: #efc59a;">
  391.                                     •
  392.                                 </span>
  393.                                
  394.                                 <i class="fa-duotone fa-duck tooltipster" title="relationship"></i>
  395.                             </p>
  396.                         </div>
  397.                     </div>
  398.                     <!--- copy from relationship #2 and paste from here --->
  399.                    
  400.                     <!--- relationship #3 --->
  401.                     <div class="col-4">
  402.                         <!--- image --->
  403.                         <div class="m-2 card bg-faded text-center" style="border-radius: 0px; background-color: #eddfba; border: 1px solid #cb8c44;
  404.                        background-image: url('IMGURL');
  405.                        background-size: cover;
  406.                        background-position: center;
  407.                        height: 100px;"></div>
  408.                        
  409.                         <!--- name & relationship details --->
  410.                         <div class="card m-2 p-1 text-center" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  411.                             <p class="p-0 m-0 text-primary" style="font-size: 12px;">
  412.                                 <a href="URL" style="color: #9f5d4a;">CATNAME</a>
  413.                             </p>
  414.                            
  415.                             <p class="p-0 m-0" style="font-size: 11px; letter-spacing: 0.3em; color: #b77b69;">
  416.                                 <i class="fa fa-heart" style="color: #efc59a;"></i>
  417.                                 <i class="fa fa-heart-half-stroke" style="color: #efc59a;"></i>
  418.                                 <i class="far fa-heart" style="color: #efc59a;"></i>
  419.                                
  420.                                 <span style="color: #efc59a;">
  421.                                     •
  422.                                 </span>
  423.                                
  424.                                 <i class="fa-duotone fa-duck tooltipster" title="relationship"></i>
  425.                             </p>
  426.                         </div>
  427.                     </div>
  428.                     <!--- copy from relationship #3 and paste from here --->
  429.                    
  430.                     </div>
  431.                     </div>
  432.                 </div>
  433.             </div>
  434.            
  435.             </div>
  436.             <!--- tabs end here --->
  437.                
  438.             </div>
  439.         </div>
  440.        
  441.         <div class="col-4">
  442.             <div class="card m-1 p-1 text-center mb-2" style="border-radius: 0px; background-color: #a4815d;">
  443.                 <div class="card p-1 text-center" style="border-radius: 0px; background-color: #d5c088;">
  444.            
  445.             <!--- stats --->
  446.             <div class="card m-1 p-1 mb-2 text-left" style="border-radius: 0px; background-color: #fefcec; border: 1px solid #cb8c44;">
  447.                
  448.                 <!--- strength --->
  449.                 <div class="row no-gutters">
  450.                     <div class="col-3">
  451.                         <p class="p-1 m-0" style="font-size: 11px; color: #b77b69; font-weight: 700;">
  452.                             STRENGTH
  453.                         </p>
  454.                     </div>
  455.                    
  456.                     <div class="col-9">
  457.                         <div class="card border-0 p-2" style="background-color: #fefcec;">
  458.                            
  459.                             <div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible; background-color: #efc59a;">
  460.                                 <div class="progress-bar" style="height: 100%;
  461.                                
  462.                                width: 50%;
  463.                                
  464.                                background-color: transparent;"></div>
  465.                                 <div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%; background-color: #cb8c44;"></div>
  466.                             </div>
  467.                            
  468.                         </div>
  469.                     </div>
  470.                 </div>
  471.                 <!--- paste from here --->
  472.                
  473.                 <!--- dexterity --->
  474.                 <div class="row no-gutters">
  475.                     <div class="col-3">
  476.                         <p class="p-1 m-0" style="font-size: 11px; color: #b77b69; font-weight: 700;">
  477.                             DEXTERITY
  478.                         </p>
  479.                     </div>
  480.                    
  481.                     <div class="col-9">
  482.                         <div class="card border-0 p-2" style="background-color: #fefcec;">
  483.                            
  484.                             <div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible; background-color: #efc59a;">
  485.                                 <div class="progress-bar" style="height: 100%;
  486.                                
  487.                                width: 50%;
  488.                                
  489.                                background-color: transparent;"></div>
  490.                                 <div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%; background-color: #cb8c44;"></div>
  491.                             </div>
  492.                            
  493.                         </div>
  494.                     </div>
  495.                 </div>
  496.                 <!--- paste from here --->
  497.                
  498.                 <!--- strength --->
  499.                 <div class="row no-gutters">
  500.                     <div class="col-3">
  501.                         <p class="p-1 m-0" style="font-size: 11px; color: #b77b69; font-weight: 700;">
  502.                             WISDOM
  503.                         </p>
  504.                     </div>
  505.                    
  506.                     <div class="col-9">
  507.                         <div class="card border-0 p-2" style="background-color: #fefcec;">
  508.                            
  509.                             <div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible; background-color: #efc59a;">
  510.                                 <div class="progress-bar" style="height: 100%;
  511.                                
  512.                                width: 50%;
  513.                                
  514.                                background-color: transparent;"></div>
  515.                                 <div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%; background-color: #cb8c44;"></div>
  516.                             </div>
  517.                            
  518.                         </div>
  519.                     </div>
  520.                 </div>
  521.                 <!--- paste from here --->
  522.                
  523.                 <!--- strength --->
  524.                 <div class="row no-gutters">
  525.                     <div class="col-3">
  526.                         <p class="p-1 m-0" style="font-size: 11px; color: #b77b69; font-weight: 700;">
  527.                             INTELLECT
  528.                         </p>
  529.                     </div>
  530.                    
  531.                     <div class="col-9">
  532.                         <div class="card border-0 p-2" style="background-color: #fefcec;">
  533.                            
  534.                             <div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible; background-color: #efc59a;">
  535.                                 <div class="progress-bar" style="height: 100%;
  536.                                
  537.                                width: 50%;
  538.                                
  539.                                background-color: transparent;"></div>
  540.                                 <div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%; background-color: #cb8c44;"></div>
  541.                             </div>
  542.                            
  543.                         </div>
  544.                     </div>
  545.                 </div>
  546.                 <!--- paste from here --->
  547.                
  548.                 <!--- strength --->
  549.                 <div class="row no-gutters">
  550.                     <div class="col-3">
  551.                         <p class="p-1 m-0" style="font-size: 11px; color: #b77b69; font-weight: 700;">
  552.                             CHARISMA
  553.                         </p>
  554.                     </div>
  555.                    
  556.                     <div class="col-9">
  557.                         <div class="card border-0 p-2" style="background-color: #fefcec;">
  558.                            
  559.                             <div class="progress mt-1 mx-2 rounded-0" style="height: 2px; overflow: visible; background-color: #efc59a;">
  560.                                 <div class="progress-bar" style="height: 100%;
  561.                                
  562.                                width: 50%;
  563.                              
  564.                                background-color: transparent;"></div>
  565.                                 <div style="height: 8px; width: 8px; margin: -3px 0 0 -4px; border-radius: 50%; background-color: #cb8c44;"></div>
  566.                             </div>
  567.                            
  568.                         </div>
  569.                     </div>
  570.                 </div>
  571.                 <!--- paste from here --->
  572.                
  573.             </div>
  574.            
  575.             <!--- aesthetic & voice claim/music --->
  576.             <div class="card m-1 text-center" style="border-radius: 0px; background-color: #a4815d;">
  577.                
  578.                 <div class="row no-gutters">
  579.                     <div class="col-6">
  580.                     <div class="card m-1 bg-faded border-0">
  581.                         <!--- image --->
  582.             <div class="card text-center" style="border-radius: 0px;
  583.            border: 1px solid #f2d7b7;
  584.            background-image: url('IMGURL');
  585.            background-size: cover;
  586.            background-position: center;
  587.            height: 129px;"></div>
  588.             </div>
  589.                 </div>
  590.                    
  591.                     <div class="col-6">
  592.                         <!--- music
  593.                        change the YOUTUBEID to the youtube video, should look like this:
  594.                        " Dg0IjOzopYU " --->
  595.                         <div class="card m-1 text-center" style="border-radius: 0px; background-color: #a4815d; border: 1px solid #f2d7b7;">
  596.                         <div class="card border-0" style="position: relative; height: 127px; overflow: hidden; border-radius: 0px;">
  597.                         <iframe width="130" height="335"
  598.                        
  599.                        src="https://www.youtube.com/embed/YOUTUBEID?controls=0"
  600.                        frameborder="0" style="position: absolute; top: -100px; border-radus: 0px;"></iframe>
  601.                         </div>
  602.                         </div>
  603.                     </div>
  604.                 </div>
  605.                
  606.             </div>
  607.            
  608.             <!--- voice claim . credits --->
  609.             <div class="card m-1 text-center" style="border-radius: 0px; background-color: #a4815d;">
  610.                
  611.                 <div class="card m-1 text-center" style="border-radius: 0px;
  612.                border: 1px solid #f2d7b7;
  613.            background-image: url('IMGURL');
  614.            background-size: 110%;
  615.            background-position: center;
  616.            height: 71px;">
  617.                    
  618.                     <p class="p-3 m-1" style="font-size: 20px; letter-spacing: 0.5em; color: #fdf6ee;">
  619.                     <i class="fa fa-microphone tooltipster" title="voice claim ; etc"></i>
  620.                    
  621.                     •
  622.                    
  623.                     <i class="fa fa-mango tooltipster" title="smells like ; etc"></i>
  624.                    
  625.                     •
  626.                    
  627.                     <a href="https://toyhou.se/bumblebree" style="color: #fdf6ee;"><i class="fa-duotone fa-code tooltipster" title="coding credit"></i></a>
  628.                     </p>
  629.                    
  630.                 </div>
  631.  
  632.             </div>
  633.         </div>
  634.     </div>
  635.     </div>
  636.    
  637. </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!