API tools faq
paste
Advertisement
rikatoola

F2U ✦ secret growth | BS

rikatoola
Aug 6th, 2022 (edited)
1,982
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.80 KB | None | 0 0
raw download clone embed print report
  1. <div class="container m-5 mx-auto" style="width: 800px;">
  2.  
  3. <div class="card bg-faded text-warning p-2 mb-2">
  4.  
  5. <div class="row no-gutters">
  6.    
  7.     <!--- long banner 1 --->
  8.    
  9.     <div class="col-lg-2">
  10.         <div class="card m-1 bg-dark text-warning">
  11.         <div class="bg-faded w-100 h-100" style="min-height:550px; background-image:
  12.        
  13.        url(#);
  14.        
  15.        background-size: cover; background-position: left center; background-repeat: no-repeat;"></div>
  16.         </div>
  17.     </div>
  18.    
  19.    
  20.     <!--- main info/content box --->
  21.    
  22.     <div class="col-lg-8">
  23.        
  24.     <div class="row no-gutters">
  25.         <div class="col-lg-4">
  26.            
  27.             <!--- icon --->
  28.            
  29.             <div class="card p-2 m-1 bg-dark text-warning">
  30.         <div class="card p-2 text-warning">
  31.             <div class="bg-faded w-100 h-100" style="min-height:120px; background-image:
  32.            
  33.            url(https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png);
  34.            
  35.            background-size: 300%; background-position: center; background-repeat: no-repeat;"></div>
  36.         </div>
  37.         </div>
  38.         </div>
  39.        
  40.         <!--- info --->
  41.        
  42.         <div class="col-lg-8">
  43.            
  44.             <!--- user info --->
  45.            
  46.             <div class="row no-gutters">
  47.                 <div class="col-l">
  48.                     <p class="m-1" style="text-align: left; font-size: 16px;">
  49.                         <i class="fa fa-at" style="opacity: 0.2; font-weight: 400;"></i> USERNAME
  50.                     </p>
  51.                 </div>
  52.                
  53.                 <div class="col-lg">
  54.                     <p class="m-1" style="text-align: center; font-size: 16px;">
  55.                         <hr class="w-100">
  56.                     </p>
  57.                 </div>
  58.                
  59.                 <div class="col-l">
  60.                     <p class="m-1" style="text-align: right; font-size: 16px;">
  61.                        
  62.                         <!--- social media links, rearrange however you see fit! --->
  63.                        
  64.                         <a href="#" class="text-warning"><i class="fa fa-user fa-fw tooltipster" title="about me" data-original-title="about me"></i></a>
  65.                        
  66.                         <a href="#" class="text-warning"><i class="fa-brands fa-twitter fa-fw tooltipster" title="twitter" data-original-title="twitter"></i></a>
  67.                        
  68.                         <a href="#" class="text-warning"><i class="fa-brands fa-deviantart fa-fw tooltipster" title="deviantart" data-original-title="deviantart"></i></a>
  69.                        
  70.                         <a href="#" class="text-warning"><i class="fa-brands fa-instagram fa-fw tooltipster" title="instagram" data-original-title="instagram"></i></a>
  71.                        
  72.                         <i class="fa-brands fa-discord fa-fw tooltipster" title="user#0000" data-original-title="user#0000"></i>
  73.                     </p>
  74.                 </div>
  75.             </div>
  76.            
  77.             <!--- short bio --->
  78.            
  79.             <div class="card p-2 m-1 bg-dark text-warning">
  80.         <div class="card p-2 text-warning">
  81.            
  82.             <div class="row no-gutters">
  83.             <div class="col-lg-4">
  84.             <p class="m-1" style="text-align: left; font-size: 14px;">
  85.                 HELLO !
  86.             </p>
  87.             </div>
  88.            
  89.             <div class="col-lg-8">
  90.             <p class="m-1" style="text-align: right; font-size: 14px;">
  91.                 pro / nouns • age
  92.             </p>
  93.             </div>
  94.             </div>
  95.            
  96.             <div class="card p-1 bg-faded text-warning">
  97.                 <div class="card p-1 bg-faded text-warning border-0" style="height: 47px; overflow-y: scroll; font-size: 12px;">
  98.                     This box scrolls! But, you can also just keep it short and remove the scroll option. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit accumsan lorem a ultrices. Curabitur egestas felis quis dui vulputate.
  99.                 </div>
  100.             </div>
  101.         </div>
  102.         </div>
  103.         </div>
  104.     </div>
  105.    
  106.         <!--- art status, interests, and dni --->
  107.        
  108.         <div class="card p-2 m-1 mb-2 bg-dark text-warning">
  109.         <div class="card p-2 text-warning">
  110.            
  111.             <!--- art status --->
  112.             <div class="row no-gutters">
  113.                 <div class="col-lg-4">
  114.                 <div class="card p-1 m-2 bg-faded text-warning" style="font-size: 12px;">
  115.                    
  116.                     <div class="row no-gutters">
  117.                         <div class="col-lg-1">
  118.                         <p style="text-align: left; font-size: 12px;">
  119.                        
  120.                         <a href="#" class="text-warning"><i class="fa fa-pen fa-fw tooltipster" title="COMMISSIONS" data-original-title="COMMISSIONS"></i></a>
  121.                        
  122.                         </p>
  123.                         </div>
  124.                        
  125.                         <div class="col-lg-7">
  126.                             <p style="text-align: left; font-size: 12px; opacity: 0.3;">
  127.                             ........................
  128.                             </p>
  129.                         </div>
  130.                        
  131.                         <div class="col-lg-2">
  132.                         <p style="text-align: right; font-size: 12px;">
  133.                        
  134.                         closed.
  135.                        
  136.                         </p>
  137.                         </div>
  138.                     </div>
  139.                    
  140.                     <div class="row no-gutters">
  141.                         <div class="col-lg-1">
  142.                         <p style="text-align: left; font-size: 12px;">
  143.                        
  144.                         <i class="fa fa-arrow-right-arrow-left fa-fw tooltipster" title="ART TRADES" data-original-title="ART TRADES"></i>
  145.                        
  146.                         </p>
  147.                         </div>
  148.                        
  149.                         <div class="col-lg-7">
  150.                             <p style="text-align: left; font-size: 12px; opacity: 0.3;">
  151.                             ........................
  152.                             </p>
  153.                         </div>
  154.                        
  155.                         <div class="col-lg-1">
  156.                         <p style="text-align: right; font-size: 12px;">
  157.                        
  158.                         closed.
  159.                        
  160.                         </p>
  161.                         </div>
  162.                     </div>
  163.                    
  164.                     <div class="row no-gutters">
  165.                         <div class="col-lg-1">
  166.                         <p style="text-align: left; font-size: 12px;">
  167.                        
  168.                         <i class="fa fa-gift fa-fw tooltipster" title="REQUESTS" data-original-title="REQUESTS"></i>
  169.                        
  170.                         </p>
  171.                         </div>
  172.                        
  173.                         <div class="col-lg-7">
  174.                             <p style="text-align: left; font-size: 12px; opacity: 0.3;">
  175.                             ........................
  176.                             </p>
  177.                         </div>
  178.                        
  179.                         <div class="col-lg-2">
  180.                         <p style="text-align: right; font-size: 12px;">
  181.                        
  182.                         closed.
  183.                        
  184.                         </p>
  185.                         </div>
  186.                     </div>
  187.                 </div>
  188.                 </div>
  189.                
  190.                 <!--- interests --->
  191.                
  192.                 <div class="col-lg-8">
  193.                
  194.                 <div class="card p-1 m-2 bg-faded text-warning" style="font-size: 12px;">
  195.                     <div class="card p-2 bg-faded border-0">
  196.                         <p style="text-align: center; font-size: 12px;">
  197.                             <i class="fa fa-heart fa-fw tooltipster" title="interests" data-original-title="interests"></i>
  198.                            
  199.                             interest, interest, interest, interest, interest, interest, interest, interest, interest, keep it short
  200.                         </p>
  201.                     </div>
  202.                 </div>
  203.                
  204.                 </div>
  205.             </div>
  206.            
  207.             <!--- DNI --->
  208.            
  209.             <div class="card p-1 m-2 bg-faded text-warning" style="font-size: 12px;">
  210.                 <div class="card p-2 bg-faded border-0">
  211.                     <p style="text-align: center; font-size: 12px;">
  212.                         <i class="fa fa-warning fa-fw tooltipster" title="DO NOT INTERACT IF YOU ARE" data-original-title="DO NOT INTERACT IF YOU ARE"></i>
  213.                        
  214.                         etc
  215.                     </p>
  216.                 </div>
  217.             </div>
  218.            
  219.             </div>
  220.         </div>
  221.        
  222.         <!--- aesthetic/moodboard etc --->
  223.        
  224.         <div class="card p-1 m-1 bg-dark text-warning">
  225.         <div class="row no-gutters">
  226.         <div class="col-lg-4">
  227.             <div class="card m-1" style="background-image:
  228.            
  229.            url(#);
  230.            
  231.            background-size: 400%; background-position: center left; height: 60px;"></div>
  232.         </div>
  233.        
  234.         <div class="col-lg-4">
  235.             <div class="card m-1" style="background-image:
  236.            
  237.            url(#);
  238.            
  239.            background-size: 400%; background-position: center; height: 60px;"></div>
  240.         </div>
  241.        
  242.         <div class="col-lg-4">
  243.             <div class="card m-1" style="background-image:
  244.            
  245.            url(#);
  246.            
  247.            background-size: 400%; background-position: center right; height: 60px;"></div>
  248.         </div>
  249.     </div>
  250.     </div>
  251.    
  252.     <!--- featured characters --->
  253.    
  254.     <div class="row no-gutters">
  255.         <div class="col-lg-3">
  256.             <div class="card p-1 m-1 bg-dark text-warning">
  257.                 <div class="card p-2 text-warning">
  258.                 <div class="card" style="background-image: url(https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png); background-size: 300%; background-position: center; height: 90px;">
  259.                    
  260.                     <a href="#" class="text-warning" style="font-size: 20px; transform: rotate(-15deg); position: absolute; top: -10px; left: -5px;"><i class="fa fa-certificate fa-fade fa-fw tooltipster" title="name • main" data-original-title="main • featured"></i></a>
  261.                    
  262.                 </div>
  263.                 </div>
  264.             </div>
  265.         </div>
  266.        
  267.         <div class="col-lg-3">
  268.             <div class="card p-1 m-1 bg-dark text-warning">
  269.                 <div class="card p-2 text-warning">
  270.                 <div class="card" style="background-image: url(https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png); background-size: 300%; background-position: center; height: 90px;">
  271.                    
  272.                     <a href="#" class="text-warning" style="font-size: 20px; transform: rotate(-15deg); position: absolute; top: -10px; left: -5px;"><i class="fa fa-star fa-fw tooltipster" title="name • loved" data-original-title="name • loved"></i></a>
  273.                    
  274.                 </div>
  275.                 </div>
  276.             </div>
  277.         </div>
  278.        
  279.         <div class="col-lg-3">
  280.             <div class="card p-1 m-1 bg-dark text-warning">
  281.                 <div class="card p-2 text-warning">
  282.                 <div class="card" style="background-image: url(https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png); background-size: 300%; background-position: center; height: 90px;">
  283.                    
  284.                     <a href="#" class="text-warning" style="font-size: 20px; transform: rotate(-15deg); position: absolute; top: -10px; left: -5px;"><i class="fa fa-star fa-fw tooltipster" title="name • featured" data-original-title="name • featured"></i></a>
  285.                    
  286.                 </div>
  287.                 </div>
  288.             </div>
  289.         </div>
  290.        
  291.         <div class="col-lg-3">
  292.             <div class="card p-1 m-1 bg-dark text-warning">
  293.                 <div class="card p-2 text-warning">
  294.                 <div class="card" style="background-image: url(https://storage.googleapis.com/proudcity/mebanenc/uploads/2021/03/placeholder-image.png); background-size: 300%; background-position: center; height: 90px;">
  295.                    
  296.                     <a href="#" class="text-warning" style="font-size: 20px; transform: rotate(-15deg); position: absolute; top: -10px; left: -5px;"><i class="fa fa-star fa-fw tooltipster" title="name • featured" data-original-title="name • featured"></i></a>
  297.                    
  298.                 </div>
  299.                 </div>
  300.             </div>
  301.         </div>
  302.     </div>
  303.    
  304.     </div>
  305.    
  306.    
  307.     <!--- long banner 2 --->
  308.    
  309.     <div class="col-lg-2">
  310.         <div class="card m-1 bg-dark text-warning">
  311.         <div class="bg-faded w-100 h-100" style="min-height:550px; background-image:
  312.        
  313.        url(#);
  314.        
  315.        background-size: cover; background-position: right center; background-repeat: no-repeat;"></div>
  316.         </div>
  317.     </div>
  318. </div>
  319.  
  320. </div>
  321.  
  322. <!--- DO NOT REMOVE. it make look annoying, but it helps people find the codes your using!! --->
  323.  
  324. <div class="card p-1 bg-faded">
  325.     <a href="https://toyhou.se/bumblebree/characters" class="text-warning text-right"><i class="fa fa-code" style="opacity: 0.1;"></i></a>
  326. </div>
  327.  
  328. </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!