API tools faq
paste
Advertisement
rikatoola

F2U ✦ seasalt | BS

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