API tools faq
paste
Advertisement
vermilly

profile 8 long baizhu

vermilly
Feb 4th, 2023 (edited)
967
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.08 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2.    
  3.    【F2U】 50.Grains
  4.    
  5.      // Code by Leporidactic
  6.      
  7.      ////////////////// Rules ///////////////////
  8.      
  9.      Do not redistribute this template
  10.      Please keep the credit somewhere visible
  11.      Feel free to change everything else to your liking
  12.      // Thank you for using this template. //
  13.      
  14.      
  15.      //// COLORS ////
  16.      
  17.      find and replace to customize
  18.      ( from darkest to lightest )
  19.      
  20.      → 8a8074
  21.      → 495e41
  22.      → 73856b
  23.      → ffffff
  24.      
  25. ------>
  26.  
  27. <div class="card mx-auto rounded-0 mt-5 modal-open" style="max-width:400px;border-color:#8a8074;">
  28.  
  29.   <!--------------------------------
  30.  
  31.      | TOP HEADER
  32.  
  33.  ---------------------------------->
  34.   <div class="card border-0 rounded-0 p-2" style="background-color:#ffffff;background-size:cover;background-position:top center;
  35.    
  36.    /*----- header background ; replace IMG_URL with image address -----*/;
  37.    background-image:url(https://upload-os-bbs.hoyolab.com/upload/2022/11/18/160313777/eecfb1c30ece0d0b9c7fe43726088900_1444816052502700703.jpg?x-oss-process=image/resize,s_1000/quality,q_80/auto-orient,0/interlace,1/format,jpg);
  38.    
  39.  ">
  40.     <div class="row no-gutters">
  41.       <!----- right side ----->
  42.       <div class="col-lg-auto flex-column order-lg-2">
  43.         <!----- filler card, no need to edit ----->
  44.         <div class="card border-0 d-flex flex-fill rounded-0" style="background-color:transparent;min-height:60px;"></div>
  45.        
  46.        
  47.         <!----- MAIN AVATAR ----->
  48.         <div class="card mx-lg-0 mx-auto mb-lg-0 mb-2" style="height:100px;width:100px;border-width:3px;background-color:#ffffff;border-color:#ffffff;background-size:cover;background-position:center;
  49.          
  50.          /*----- user avatar ; replace IMG_URL with image address -----*/;
  51.          background-image:url(https://64.media.tumblr.com/d0e6d97457009606d99eacbd665df5ff/ff26adf9e70c29c6-52/s400x600/4a2376b7618518eacaf74b5003a4fd8d6b16f46b.gifv);
  52.          
  53.        ">
  54.           <!----- filler card, no need to edit ----->
  55.           <div class="card border-0 rounded-0 d-flex flex-fill" style="background-color:transparent;"></div>
  56.          
  57.           <!----- level for flavor, can use as age or delete if not needed ----->
  58.           <!----- please don't go too crazy with the numbers, it won't fit ----->
  59.           <p class="text-right small mr-1" style="color:#ffffff;text-shadow: -0.5px -0.5px 0 #8a8074, 0.5px -0.5px 0 #8a8074, -0.5px 0.5px 0 #8a8074, 0.5px 0.5px 0 #8a8074;">
  60.            
  61.            
  62.            
  63.           </p>
  64.          
  65.         </div>
  66.       </div>
  67.       <!----- right side end ----->
  68.      
  69.       <!----- left side ----->
  70.       <div class="col-lg px-1 flex-column order-lg-1">
  71.         <!----- filler card, no need to edit ----->
  72.         <div class="card border-0 rounded-0 d-flex flex-fill hidden-sm-down" style="background-color:transparent;"></div>
  73.        
  74.         <!----- BASIC INFO ----->
  75.         <!----- if you would like to remove the borders, delete the entire text-shadow part ----->
  76.         <p class="text-lg-left text-center font-italic font-weight-bold px-2" style="font-size:1.3rem;font-family:'verdana';color:#ffffff;
  77.          
  78.          text-shadow: -1px -1px 0 #8a8074, 1px -1px 0 #8a8074, -1px 1px 0 #8a8074, 1px 1px 0 #8a8074;
  79.          
  80.        ">
  81.          
  82.           <!----- fontawesome icon here ----->
  83.           <i class="fas fa-wheat fa-fw fa-sm"></i>
  84.          
  85.           <!----- separates icon and name to two lines on mobile, no need to edit ----->
  86.           <br class="hidden-sm-up">
  87.          
  88.           Xuxu
  89.          
  90.         </p>
  91.        
  92.         <!----- personal bits ----->
  93.         <div class="card rounded-0 px-1" style="border-color:#8a8074;background-color:#fff;color:#495e41;">
  94.           <p class="small text-lg-left text-center" style="font-family:'avenir'">
  95.            
  96.             they/them . minor (16+) . college freshman
  97.            
  98.           </p>
  99.         </div>
  100.        
  101.       </div>
  102.       <!----- left side end ----->
  103.     </div>
  104.   </div>
  105.   <!----- TOP HEADER END ----->
  106.  
  107.  
  108.   <!--------------------------------
  109.  
  110.      | MAIN PROFILE
  111.  
  112.  ---------------------------------->
  113.   <div class="card p-3 rounded-0" style="border-width:2px 0 0 0;border-color:#8a8074;background-color:#ffffff;color:#8a8074;font-size:0.8rem;">
  114.    
  115.     <!---- SPEECH BUBBLE INTRO ----->
  116.     <div class="card px-lg-5 px-4 py-3 mb-3 border-0" style="background-color:#495e41;color:#ffffff;font-family:'avenir';letter-spacing:px;">
  117.       <!----- arrow icon pointing up, no need to edit position ----->
  118.       <i class="fas fa-caret-up fa-2x" style="position:absolute;right:1rem;top:-0.9rem;color:#495e41;"></i>
  119.      
  120.       <p>
  121.  
  122.  hello! i'm a digital artist and a psych major! i'm  a sucker for androgynous designs. i don't draw too often, so pls bare with my scarce uploads BAHAH! i am incredibly normal (insane) for baizhu and twisted wonderland characters. </p>
  123.      
  124.     </div>
  125.    
  126.    
  127.    
  128.    
  129.     <!----- ART STATUS ----->
  130.     <div class="row no-gutters justify-content-center mb-3" style="font-family:'avenir'">
  131.      
  132.       <!----- commissions ------>
  133.       <div class="col-5">
  134.         <p class="text-right">carrd</p>
  135.       </div>
  136.       <div class="col-1">
  137.         <p class="text-center">
  138.          
  139.           <!----- fontawesome icon here ----->
  140.           <i class="fas fa-wheat fa-sm fa-fw mx-auto my-auto faded"></i>
  141.          
  142.         </p>
  143.       </div>
  144.       <div class="col-5">
  145.        
  146.         <p><a href="https://xuxu-time.carrd.co/" style="color:#73856b;">xuxu-time.carrd.co</a></p>
  147.        
  148.       </div>
  149.      
  150.       <!----- trades ------>
  151.       <div class="col-5">
  152.         <p class="text-right">side account</p>
  153.       </div>
  154.       <div class="col-1">
  155.         <p class="text-center">
  156.          
  157.           <!----- fontawesome icon here ----->
  158.           <i class="fas fa-wheat fa-sm fa-fw mx-auto my-auto faded"></i>
  159.          
  160.         </p>
  161.       </div>
  162.       <div class="col-5">
  163.        
  164.         <p><a href="https://toyhou.se/xuxu_E" style="color:#73856b;">xuxu_E</a></p>
  165.      
  166.       </div>
  167.      
  168.      
  169.       <!----- add more as needed ----->
  170.      
  171.      
  172.      
  173.      
  174.         <!----- ufo ------>
  175.       <div class="col-5">
  176.         <p class="text-right">ufo characters</p>
  177.       </div>
  178.       <div class="col-1">
  179.         <p class="text-center">
  180.          
  181.           <!----- fontawesome icon here ----->
  182.           <i class="fas fa-wheat fa-sm fa-fw mx-auto my-auto faded"></i>
  183.          
  184.         </p>
  185.       </div>
  186.       <div class="col-5">
  187.        
  188.         <p><a href="https://toyhou.se/xuxu/characters/folder:4085969" style="color:#73856b;">folder</a></p>
  189.        
  190.       </div>
  191.      
  192.     </div>
  193.    
  194.    
  195.     <!----- FEATURED CHARACTERS ----->
  196.     <!----- header ----->
  197.     <p class="text-uppercase font-italic font-weight-bold" style="color:#8a8074;">
  198.       Featured
  199.     </p>
  200.     <div class="row no-gutters">
  201.      
  202.       <!----- NAVIGATION BAR ----->
  203.       <!----- all the buttons are super small avatars ----->
  204.       <div class="col-12 order-2">
  205.         <div class="nav nav-row justify-content-center mx-auto">
  206.          
  207.           <!----- TOGGLE CHARACTER ONE ----->
  208.           <a href="#feature1" data-toggle="tab" class="btn p-0 nav-item nav-link rounded-circle mx-1 active" style="display:block;height:30px;width:30px;background-size:cover;background-position:center;border-width:2px;border-color:#8a8074;
  209.            
  210.            /*----- character avatar ; replace IMG_URL with image address -----*/;
  211.            background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/13792657?1643602841);
  212.            
  213.          "></a>
  214.          
  215.          
  216.           <!----- TOGGLE CHARACTER TWO ----->
  217.           <a href="#feature2" data-toggle="tab" class="btn p-0 nav-item nav-link rounded-circle mx-1" style="display:block;height:30px;width:30px;background-size:cover;background-position:center;border-width:2px;border-color:#8a8074;
  218.            
  219.            /*----- character avatar ; replace IMG_URL with image address -----*/;
  220.            background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/16473629?1672606065);
  221.            
  222.          "></a>
  223.          
  224.          
  225.           <!----- TOGGLE CHARACTER THREE ----->
  226.           <a href="#feature3" data-toggle="tab" class="btn p-0 nav-item nav-link rounded-circle mx-1" style="display:block;height:30px;width:30px;background-size:cover;background-position:center;border-width:2px;border-color:#8a8074;
  227.            
  228.            /*----- character avatar ; replace IMG_URL with image address -----*/;
  229.            background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/7329852?1646711044);
  230.            
  231.          "></a>
  232.          
  233.          
  234.           <!----- it's possible to add more characters, but I would recommend
  235.                  not exceeding 5 characters for best visual effect.   ----->
  236.          
  237.          
  238.           <!----- LINK TO CHARACTERS ----->
  239.           <!----- replace [username] with your own ----->
  240.           <a class="btn p-0 nav-item nav-link rounded-circle mx-1 p-1" style="display:block;height:30px;width:30px;border-width:2px;border-color:#73856b;"
  241.            
  242.            href="https://toyhou.se/xuxu/characters"
  243.            
  244.          >
  245.             <!----- fontawesome icon here ... ----->
  246.             <i class="fas fa-ellipsis fa-fw fa-sm" style="color:#73856b;"></i>
  247.            
  248.           </a>
  249.          
  250.         </div>
  251.       </div>
  252.       <!----- NAV BAR END ----->
  253.      
  254.      
  255.       <!----- FEATURED CONTENT ----->
  256.       <div class="col-12 order-1 mb-2">
  257.         <div class="card rounded-0" style="border-color:#8a8074;background-color:#ffffff;">
  258.           <div class="tab-content">
  259.            
  260.            
  261.             <!----- CHARACTER ONE ------>
  262.             <div class="tab-pane show active fade in" id="feature1">
  263.               <div class="row no-gutters">
  264.                
  265.                 <!----- main image ; portrait/vertical image recommended ------>
  266.                 <div class="col-6">
  267.                   <div class="card rounded-0" style="height:200px;border-width:0 5px 0 0;border-color:#495e41;background-color:transparent;background-size:cover;background-position:top center;
  268.                    
  269.                    /*----- character image ; replace IMG_URL with image address -----*/;
  270.                    background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/53011405_7AV4tSzaYSQWSgH.png);
  271.                    
  272.                  "></div>
  273.                 </div>
  274.                
  275.                 <!----- short character summary ------>
  276.                 <div class="col-6">
  277.                   <div class="card rounded-0 p-3" style="height:200px;overflow:auto;border-width:0 0 0 5px;border-color:#495e41;background-color:#ffffff;color:#8a8074;font-size:0.75rem;font-family:'avenir'">
  278.                    
  279.                     <!----- name ----->
  280.                     <h3 class="text-right" style="color:#73856b;font-family:'verdana';">
  281.                      
  282.                       Ayashi
  283.                    
  284.                     </h3>
  285.                    
  286.                     <!----- summary ----->
  287.                     <p>my sona! friendly and good at calligraphy. but, can this nerd also fight...? surely not!!! not relevant. totally. anyways he also wears a funny monocle. </p>
  288.                    
  289.                     <!----- link ----->
  290.                     <p><a href="https://toyhou.se/13792657.ayashi" style="text-decoration:none;color:#73856b;">[ Read More ]</a></p>
  291.                    
  292.                   </div>
  293.                 </div>
  294.               </div>
  295.             </div>
  296.             <!----- CHARACTER ONE END ------>
  297.            
  298.            
  299.            
  300.             <!----- CHARACTER TWO ------>
  301.             <div class="tab-pane fade in" id="feature2">
  302.               <div class="row no-gutters">
  303.                
  304.                 <!----- main image ; portrait/vertical image recommended ------>
  305.                 <div class="col-6">
  306.                   <div class="card rounded-0" style="height:200px;border-width:0 5px 0 0;border-color:#495e41;background-color:transparent;background-size:cover;background-position:top center;
  307.                    
  308.                    /*----- character image ; replace IMG_URL with image address -----*/;
  309.                    background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/59348069_6AUr9SVjQ2OVvTZ.png);
  310.                    
  311.                  "></div>
  312.                 </div>
  313.                
  314.                 <!----- short character summary ------>
  315.                 <div class="col-6">
  316.                   <div class="card rounded-0 p-3" style="height:200px;overflow:auto;border-width:0 0 0 5px;border-color:#495e41;background-color:#ffffff;color:#8a8074;font-size:0.75rem;font-family:'avenir'">
  317.                    
  318.                     <!----- name ----->
  319.                     <h3 class="text-right" style="color:#73856b;font-family:'verdana';">
  320.                      
  321.                       Narsus
  322.                    
  323.                     </h3>
  324.                    
  325.                     <!----- summary ----->
  326.                     <p>father issues (he straight up killed him)! crimes, bodyguard, love. made an fbi agent fall in love with him... by accident tho.</p>
  327.                    
  328.                     <!----- link ----->
  329.                     <p><a href="https://toyhou.se/16473629.narsus" style="text-decoration:none;color:#73856b;">[ Read More ]</a></p>
  330.                    
  331.                   </div>
  332.                 </div>
  333.               </div>
  334.             </div>
  335.             <!----- CHARACTER TWO END ------>
  336.            
  337.            
  338.             <!----- CHARACTER THREE ------>
  339.             <div class="tab-pane fade in" id="feature3">
  340.               <div class="row no-gutters">
  341.                
  342.                 <!----- main image ; portrait/vertical image recommended ------>
  343.                 <div class="col-6">
  344.                   <div class="card rounded-0" style="height:200px;border-width:0 5px 0 0;border-color:#495e41;background-color:transparent;background-size:cover;background-position:top center;
  345.                    
  346.                    /*----- character image ; replace IMG_URL with image address -----*/;
  347.                    background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/images/25360627_CvAaYIfd7MJZJOQ.png);
  348.                    
  349.                  "></div>
  350.                 </div>
  351.                
  352.                 <!----- short character summary ------>
  353.                 <div class="col-6">
  354.                   <div class="card rounded-0 p-3" style="height:200px;overflow:auto;border-width:0 0 0 5px;border-color:#495e41;background-color:#ffffff;color:#8a8074;font-size:0.75rem;font-family:'avenir'">
  355.                    
  356.                     <!----- name ----->
  357.                     <h3 class="text-right" style="color:#73856b;font-family:'verdana';">
  358.                      
  359.                      Cheerio
  360.                    
  361.                     </h3>
  362.                    
  363.                     <!----- summary ----->
  364.                     <p>cheerio is a cheery guy ayyyyyyy haha. okok so he does photography and likes fashion. he can also run in high heels. pretty cool right</p>
  365.                    
  366.                     <!----- link ----->
  367.                     <p><a href="https://toyhou.se/7329852.cheerio" style="text-decoration:none;color:#73856b;">[ Read More ]</a></p>
  368.                    
  369.                   </div>
  370.                 </div>
  371.               </div>
  372.             </div>
  373.             <!----- CHARACTER THREE END ------>
  374.            
  375.             <!----- add more from here as needed ----->
  376.            
  377.           </div>
  378.         </div>
  379.       </div>
  380.     </div>
  381.     <!----- FEATURED CHARACTERS END ----->
  382.   </div>
  383. </div>
  384. <!----- MAIN CARD END ------>
  385.  
  386. <!----- CODING CREDIT ! please do not remove ----->
  387. <p class="text-right mx-auto mb-5" style="max-width:400px;">
  388.   <a class="small" href="https://toyhou.se/19666597" style="text-decoration:none;color:#495e41;">code by Leporidactic</a>
  389. </p>
  390.  
  391. <!----- [ 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!