API tools faq
paste
Advertisement
vermilly

profile 10 (8.17.24 xl)

vermilly
Feb 5th, 2024 (edited)
984
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.82 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2.    
  3.    【F2U】 53.Live [ Dark. ]
  4.    
  5.      // Code by Leporidebug
  6.  
  7.      //// COLORS ////
  8.      
  9.      main accent → 75410f
  10.      text color → d4d4d4
  11.      button → d42242
  12.      blacks → 000000
  13.      whites → ffffff
  14.      
  15.      
  16. ------>
  17. <br>
  18. <div class="card mx-auto mt-4 p-1" style="max-width:700px;border-radius:0.5rem;background-color:#000000;font-family:'avenir';">
  19.  
  20.   <!--------------------------------
  21.  
  22.      | MAIN BACKGROUND
  23.  
  24.  ---------------------------------->
  25.   <div class="row no-gutters rounded modal-open" style="background-size:cover;background-position:center;
  26.    
  27.    /*----- main background ; autoscale center, replace IMG_URL with image address -----*/;
  28.    background-image:url(https://i.pinimg.com/564x/60/c2/bc/60c2bcfd3cf68f97421af6a3b82ff9ad.jpg);
  29.  
  30.  ">
  31.    
  32.     <!--------------------------------
  33.  
  34.      | LEFT BOX
  35.      
  36.        - name and music player
  37.  
  38.    ---------------------------------->
  39.     <div class="col-lg col-12 flex-column">
  40.       <div class="card border-0 p-1" style="height:330px;background-color:transparent;">
  41.         <!----- name box ----->
  42.         <div class="card border-0 p-2" style="background-color:rgba(0,0,0,0.8);max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3)">
  43.           <div class="row no-gutters">
  44.            
  45.             <!----- avatar image ----->
  46.             <div class="col-auto my-auto">
  47.               <div class="card rounded-circle" style="width:65px;height:65px;background-color:transparent;border-color:#ffffff;border-width:2px;background-size:cover;background-position:center;
  48.                
  49.                /*----- user avatar ; replace IMG_URL with image address -----*/;
  50.                background-image:url(https://i.pinimg.com/564x/c6/c0/40/c6c0401278a3088d8bc3cb97e85d21e5.jpg);
  51.                
  52.              "></div>
  53.             </div>
  54.            
  55.             <!----- name ----->
  56.             <div class="col pl-3 my-auto">
  57.               <h1 class="text-uppercase font-weight-bold mb-0" style="letter-spacing:1px;color:#b08d6b;">
  58.                
  59.                 XUXU ✧･ﾟ
  60.                
  61.               </h1>
  62.               <p class="small" style="color:#d4d4d4;">
  63.                
  64.                 @ xuxu |  <!----- carrd ----->
  65.           <a href="https://xuxu-time.carrd.co/" title="carrd" class="tooltipster" data-placement="bottom" style="text-decoration:none;color:#b08d6b;">
  66.             <i class="fas fa-id-card fa-sm fa-fw"></i> carrd
  67.           </a>  
  68.          
  69.                
  70.               </p>
  71.             </div>
  72.           </div>
  73.         </div>
  74.         <!----- name box ----->
  75.        
  76.         <!----- filler box to push music player to bottom, no need to edit ----->
  77.         <div class="card border-0 d-flex flex-fill" style="background:transparent;"></div>
  78.        
  79.         <!----- music player ----->
  80.         <div class="container">
  81.           <div class="row no-gutters">
  82.             <!----- play button ----->
  83.             <div class="col-auto my-auto">
  84.              
  85.               <!----- replace OgCj6OpPbAw with the part of URL after [https://www.youtube.com/watch?v=] ----->
  86.               <a href="" style="text-decoration:none;color:#ffffff;text-shadow:0 0 3px rgba(0,0,0,0.5);">
  87.                 <iframe frameborder="0" style="height:1rem;width:1rem;position:absolute;opacity:0.002"
  88.            
  89.                  src="https://www.youtube.com/embed/LV9wXtjI6Cs"
  90.  
  91.                ></iframe>
  92.                
  93.                 <!----- fontawesome icon here ----->
  94.                 <i class="fas fa-play fa-fw"></i>
  95.                
  96.               </a>
  97.             </div>
  98.            
  99.             <!----- artist info ----->
  100.             <div class="col my-auto px-1">
  101.               <p class="small text-uppercase" style="color:#ffffff;text-shadow:0 0 3px rgba(0,0,0,0.5);">
  102.                
  103. I'VE HELD PROMISES UNBROKEN  
  104.               </p>
  105.             </div>
  106.           </div>
  107.         </div>
  108.         <!----- music player end ----->
  109.        
  110.       </div>
  111.     </div>
  112.     <!----- LEFT BOX END ----->
  113.    
  114.    
  115.     <!----- filler box between two boxes, no need to edit ----->
  116.     <div class="col-lg-auto col-12 flex-column">
  117.       <div class="card border-0 rounded-0 p-1 d-flex flex-fill" style="background-color:#000000;"></div>
  118.     </div>
  119.    
  120.    
  121.     <!--------------------------------
  122.  
  123.      | RIGHT BOX
  124.      
  125.        - main profile
  126.  
  127.    ---------------------------------->
  128.     <div class="col-lg-4 col-12 flex-column">
  129.      
  130.       <!-----------------------------------
  131.      
  132.        scrollable "chat"-styled profile
  133.      
  134.      ------------------------------------->
  135.       <div class="card border-0 d-flex flex-fill rounded-0 p-3" style="background-color:rgba(0, 0, 0, 0.5);min-height:100px;max-height:300px;overflow:auto;">
  136.          
  137.          
  138.         <!----- basics ---->
  139.         <div class="card border-0 p-3 small mb-2" style="background-color:rgba(0,0,0,0.9);max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#d4d4d4;">
  140.          
  141.           <p>18+ . they/them . pst
  142.           <br>
  143.           <a href="https://toyhou.se/~forums/11.general-off-topic/484389.resources-for-palestine?page=1">support palestine 🍉</a>
  144.      
  145.         </div>
  146.         <!----- basics end ---->
  147.        
  148.        
  149.         <!----- intro box ---->
  150.         <div class="card border-0 p-3 small mb-2" style="background-color:#75410f;max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#ffffff;">
  151.          
  152.           <!----- header ---->
  153.           <div class="row no-gutters">
  154.             <!----- greeting ---->
  155.             <div class="col my-auto">
  156.               <h4 class="mb-0 font-weight-bold text-uppercase">
  157.                
  158.                 WHAT'S UP,
  159.              
  160.               </h4>
  161.             </div>
  162.            
  163.             <!----- avatar image (again) ---->
  164.             <div class="col-auto">
  165.               <div class="card rounded-circle mb-1" style="width:30px;height:30px;background-color:transparent;border-color:#ffffff;border-width:2px;background-size:cover;background-position:center;
  166.              
  167.                /*----- user avatar ; replace IMG_URL with image address -----*/;
  168.                background-image:url(https://64.media.tumblr.com/dcdd9120f1d178daf3059887c86475d2/37f37deabac96f53-6d/s500x750/1ca716493fb319865501a7976a083d5c1d3582e8.jpg);
  169.                
  170.              "></div>
  171.             </div>
  172.            
  173.           </div>
  174.           <!----- header end ---->
  175.          
  176.           <!----- intro content ---->
  177.           <p>
  178.             ...babes, bros, and nonbinary crows~! I'm Xuxu, a digital artist & undergrad psychology student with very low energy. I love TGCF and Twisted Wonderland.
  179.          </p>
  180.        </div>
  181.        <!----- intro box end ---->
  182.        
  183.        
  184.        <!----- art status ---->
  185.        <div class="card border-0 p-3 small mb-2" style="background-color:rgba(0,0,0,0.9);max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#d4d4d4;">
  186.          
  187.           <p>"But who prays for Satan? Who, in eighteen centuries, has had the common humanity to pray for the one sinner that needed it most?"</p>
  188.        
  189.         </div>
  190.  
  191.      <div class="card border-0 p-3 small mb-2" style="background-color:#75410f;max-width:250px;box-shadow:0 0 8px rgba(0,0,0,0.3);color:#ffffff;">
  192.          
  193.          
  194.           <!----- avatar image ----->
  195.               <div class="card" style="width:150px;height:140px;background-color:transparent;background-size:cover;background-position:center;
  196.                
  197.                background-image:url(https://i.pinimg.com/564x/b9/22/a4/b922a42939d27651ff397d463377c600.jpg);
  198.                
  199.              "></div>
  200.             </div>
  201.        
  202.        
  203.       </div>
  204.       <!----- chat profile end ----->
  205.      
  206.      
  207.       <!-----------------------------------
  208.      
  209.        message and socials
  210.      
  211.      ------------------------------------->
  212.       <div class="card pt-2 rounded-0 border-0 d-flex flex-fill" style="background-color:#000000;">
  213.        
  214.         <!----- send message ----->
  215.         <div class="card border-0 modal-open mb-1" style="border-radius:1.5rem;">
  216.           <div class="row no-gutters">
  217.             <!----- message box ----->
  218.             <div class="col-9 flex-column">
  219.             <div class="card px-2 py-1 rounded-0 border-0 flex-fill" style="background-color:#d4d4d4;color:#000000;">
  220.                
  221.                 <!----- message content ----->
  222.                
  223.                 <p class="small my-auto faded">
  224.                  
  225. "san lang, join me!"              </p>
  226.               </div>
  227.             </div>
  228.             <!----- message box end ----->
  229.            
  230.             <!----- send button ----->
  231.             <div class="col-3 flex-column">
  232.               <!----- replace username with your own ----->
  233.               <a
  234.                href="https://drawing.garden/"
  235.                title="join xie lian!"
  236.                
  237.                class="w-100 btn rounded-0 border-0 d-flex flex-fill mx-auto my-auto tooltipster" style="color:#ffffff;background-color:#d42242;">
  238.                
  239.                   <!----- fontawesome icon ----->
  240.                   <i class="fas fa-paper-plane fa-fw" style="font-size:0.75rem;"></i>
  241.                  
  242.               </a>
  243.             </div>
  244.             <!----- send button end ----->
  245.           </div>
  246.         </div>
  247.         <!----- send message end ----->
  248.        
  249.        
  250.      
  251.       </div>
  252.       <!----- message and socials end ------>
  253.     </div>
  254.     <!----- RIGHT BOX END ----->
  255.   </div>
  256. </div>
  257. <!----- MAIN CONTENT END ----->
  258. <!----- CREDIT ! please do not remove ----->
  259. <p class="text-center faded mx-auto mb-4" style="max-width:700px;">
  260.   <a href="https://toyhou.se/19722685" class="small text-muted" style="text-decoration:none;">code by Leporidebug</a>
  261. </p>
  262. <!----- [ CODE END ] ----->
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!