API tools faq
paste
Advertisement
Euna-

[f2u] User - Pink comet

Euna-
May 17th, 2025
401
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.47 KB | None | 0 0
raw download clone embed print report
  1.  
  2.  
  3.  
  4. <!--
  5.  
  6. background:         #ffebf3
  7. text highlight:     #ff96c2
  8. regular text:       #5e5e5e
  9.  
  10. -->
  11.  
  12. <!-- outline container -->
  13. <div style="max-width: 1100px; margin-top: 10px; margin: auto; padding: 10px;  border: solid 2px #ffebf3; border-radius: 30px; background: #fff; color: #ff96c2; box-shadow: 0 0 6px #ffebf3;">
  14.    
  15. <!-- main container -->
  16. <div style="margin: auto; padding: 20px; border-radius: 20px; background: #ffebf3; color: #ff96c2; box-shadow: 0 0 3px #ffebf3;">    
  17.    
  18.     <!-- header (image) -->
  19.     <div style=" background: #ffebf3; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.30);
  20.    background-image: url(
  21.    
  22.    https://images.unsplash.com/photo-1609083380444-26fd227d7339?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
  23.    
  24.    );
  25.    background-size: cover; min-height: 160px; padding: 20px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-right-radius: 16px;">
  26.        
  27.         <!-- quote / line -->
  28.         <p style="text-align: right; font-size: 160%; font-variant: small-caps;">
  29.             <i class="fa-duotone fa-quote-left"></i>
  30.             Quote / line here.
  31.             <i class="fa-duotone fa-quote-right"></i>
  32.         </p>
  33.        
  34.        
  35.     </div>   <!-- end header -->
  36.    
  37.     <div class="row"><!-- row -->
  38.         <div class="col-sm-4"><!-- column -->
  39.        
  40.        
  41.             <!-- image
  42.            (any aspect ratio will do, image will remain circle) -->
  43.             <div style=" background-image: url(https://images.unsplash.com/photo-1555231955-348aa2312e19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80);
  44.            background-size: cover; min-height: 160px; width: 160px; border-radius: 100px; border: solid 8px #ffebf3 ; box-shadow: 0 0 3px #ffebf3; ;margin: auto; margin-top: -60px;"></div><!-- image -->
  45.            
  46.             <!-- icon -->
  47.             <p style="text-align: center;margin-top: -30px;">
  48.             <span class="fa-stack fa-2x">
  49.                 <i class="fa-solid fa-circle fa-stack-2x fa-inverse"></i>
  50.                 <i class="fa-duotone fa-meteor fa-stack-1x "></i>
  51.             </span>
  52.             </p>
  53.            
  54.            
  55.             <!-- name -->
  56.             <h1 style="font-variant: small-caps; text-align: center; font-size: 200%; text-shadow: 0 0 2px #ff96c2;"> Name here </span></h1>
  57.            
  58.             <!-- info -->
  59.             <p style="text-align: center;">
  60.                
  61.                  <span class="badge" style="background: #ff96c2; color: #fff;"> info </span>
  62.                  <span class="badge" style="background: #ff96c2; color: #fff;"> info </span>
  63.                  <span class="badge" style="background: #ff96c2; color: #fff;"> info </span>
  64.                  <span class="badge" style="background: #ff96c2; color: #fff;"> info </span>
  65.                  
  66.             </p>
  67.            
  68.             <hr style="background: #ff96c2;">
  69.            
  70.        
  71.             <!-- scroll -->
  72.             <div style="max-height: 220px; overflow: auto;">
  73.            
  74.                 <!-- buttons links
  75.                you can add more, this seperate box will scroll once there are enough
  76.                -->
  77.            
  78.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  79.                     <!--icon --> <i class="fa-solid fa-star"></i>
  80.                     Link / Item 1</div></a>
  81.                
  82.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  83.                     <!--icon --> <i class="fa-solid fa-star"></i>
  84.                     Link / Item 2</div></a>
  85.                
  86.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  87.                     <!--icon --> <i class="fa-solid fa-star"></i>
  88.                     Link / Item 3</div></a>
  89.                    
  90.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  91.                     <!--icon --> <i class="fa-solid fa-star"></i>
  92.                     Link / Item 4</div></a>
  93.                
  94.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  95.                     <!--icon --> <i class="fa-solid fa-star"></i>
  96.                     Link / Item 5</div></a>
  97.                
  98.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  99.                     <!--icon --> <i class="fa-solid fa-star"></i>
  100.                     Link / Item 6</div></a>
  101.                    
  102.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  103.                     <!--icon --> <i class="fa-solid fa-star"></i>
  104.                     Link / Item 7</div></a>
  105.                
  106.                 <a href="LINK_HERE" style="color: #ff96c2;"><div class="btn" style="background: #fff; color: #ff96c2; font-weight: 700; font-variant: small-caps; margin: 6px; text-shadow: 0 0 1.5px #ff96c2;">
  107.                     <!--icon --> <i class="fa-solid fa-star"></i>
  108.                     Link / Item 8</div></a>    
  109.                 <!-- buttons -->
  110.            
  111.             </div><!-- scroll -->
  112.    
  113.         </div><!-- column -->
  114.        
  115.         <div class="col-sm-8"><!-- column -->
  116.        
  117.        
  118.             <!-- decoration icon -->
  119.             <p style="margin-top: -20px; margin-bottom: -50px; margin-left: -30px; font-size: 350%;">
  120.             <i class="fa-duotone fa-clouds"></i></p><!-- decoration icon -->
  121.        
  122.             <!-- container -->
  123.             <div style="background: #fff; color: #5e5e5e; height: 400px; padding: 20px;  margin-top: 20px; border-radius: 16px; overflow: auto;">
  124.                
  125.                 <!-- =========================== -->
  126.                
  127.                 <!-- more links -->
  128.                 <span style="font-size: 200%; letter-spacing: 10px;">
  129.                    
  130.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  131.                    data-toggle="tooltip" title="carrd">      
  132.                         <i class="fa-solid fa-id-card"></i></a>      
  133.                    
  134.                     <a href="#" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  135.                    data-toggle="tooltip" title="USER#0000">      
  136.                         <i class="fa-brands fa-discord"></i></a>      
  137.                    
  138.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  139.                    data-toggle="tooltip" title="Deviantart">
  140.                         <i class="fa-brands fa-deviantart"></i></a>
  141.                        
  142.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  143.                    data-toggle="tooltip" title="Twitter">    
  144.                         <i class="fa-brands fa-twitter"></i></a>
  145.                    
  146.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  147.                    data-toggle="tooltip" data-placement="bottom" title="Tumblr">    
  148.                         <i class="fa-brands fa-tumblr"></i></a>
  149.                    
  150.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  151.                    data-toggle="tooltip" title="Instagram">    
  152.                         <i class="fa-brands fa-instagram"></i></a>
  153.                        
  154.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  155.                    data-toggle="tooltip" title="Youtube">    
  156.                         <i class="fa-brands fa-youtube"></i></a>  
  157.                        
  158.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  159.                    data-toggle="tooltip" title="Artfight">      
  160.                         <i class="fa-solid fa-pen-paintbrush"></i></a>    
  161.                        
  162.                     <a href="LINK_HERE" style="color: #ff96c2; text-shadow: 0 0 2px #ff96c2;"
  163.                    data-toggle="tooltip" title="TikTok">      
  164.                         <i class="fa-brands fa-tiktok"></i></a>      
  165.                        
  166.                      
  167.                    
  168.                 </span>
  169.                    
  170.                 <hr style="background: #ff96c2;">    
  171.                 <!-- =========================== -->
  172.                
  173.                 <!-- bio -->
  174.                 <p>
  175.                 this entire box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam nulla. Lectus nulla at volutpat diam ut. Laoreet id donec ultrices tincidunt arcu non. Ipsum dolor sit amet consectetur. Aliquam purus sit amet luctus venenatis lectus. A lacus vestibulum sed arcu. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Nunc vel risus commodo viverra maecenas accumsan lacus. Quam nulla porttitor massa id neque aliquam. Massa enim nec dui nunc. Aliquet nibh praesent tristique magna sit amet purus.
  176.                 <p>    
  177.                
  178.                 <!-- =========================== -->
  179.                 <hr style="background: #ff96c2;">
  180.                
  181.                 <!-- status -->
  182.                 <div class="d-flex justify-content-between">
  183.                     <span style="font-variant: small-caps;"> Commissions </span>
  184.                     <span class="badge" style="background: #ff96c2; color: #fff; font-size: 100%;"> status </span>
  185.                 </div>
  186.                 <hr style="background: #ffebf3; margin: 3px;">
  187.                
  188.                 <div class="d-flex justify-content-between">
  189.                     <span style="font-variant: small-caps;"> Art trades </span>
  190.                     <span class="badge" style="background: #ff96c2; color: #fff; font-size: 100%;"> status </span>
  191.                 </div>  
  192.                 <hr style="background: #ffebf3; margin: 3px;">
  193.                
  194.                 <div class="d-flex justify-content-between">
  195.                     <span style="font-variant: small-caps;"> Art collabs </span>
  196.                     <span class="badge" style="background: #ff96c2; color: #fff; font-size: 100%;"> status </span>
  197.                 </div>  
  198.                 <hr style="background: #ffebf3; margin: 3px;">
  199.                
  200.                 <div class="d-flex justify-content-between">
  201.                     <span style="font-variant: small-caps;"> Requests </span>
  202.                     <span class="badge" style="background: #ff96c2; color: #fff; font-size: 100%;"> status </span>
  203.                 </div>
  204.                 <hr style="background: #ffebf3; margin: 3px;">
  205.                
  206.                 <hr style="background: #ff96c2;">
  207.                 <!-- =========================== -->
  208.                
  209.                 <p>
  210.                 some more text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et leo duis ut diam quam nulla. Lectus nulla at volutpat diam ut. Laoreet id donec ultrices tincidunt arcu non.
  211.                 </p>  
  212.                
  213.                 <p>
  214.                 <span style="color: #ff96c2"><i class="fa-duotone fa-angles-right"></i></span>
  215.                 write some notes here <br>
  216.                    
  217.                 <span style="color: #ff96c2"><i class="fa-duotone fa-angles-right"></i></span>
  218.                 write some notes here <br>
  219.                
  220.                 <span style="color: #ff96c2"><i class="fa-duotone fa-angles-right"></i></span>
  221.                 write some notes here <br>
  222.                    
  223.                 <span style="color: #ff96c2"><i class="fa-duotone fa-angles-right"></i></span>
  224.                 write some notes here <br>    
  225.                    
  226.                 </p>    
  227.                
  228.                
  229.             </div> <!-- container -->
  230.            
  231.             <!-- decoration icon -->
  232.             <p style="margin-bottom: -20px; margin-top: -50px; margin-right: -20px; font-size: 350%; text-align: right;">
  233.             <i class="fa-duotone fa-stars"></i></p><!-- decoration icon -->      
  234.        
  235.         </div><!-- column -->
  236.        
  237.        
  238.  
  239.     </div><!-- row -->
  240.    
  241.     <!--  image + credit section-->
  242.     <div style=" background: #ffebf3; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.30);
  243.    background-image: url(
  244.    
  245.    https://images.unsplash.com/photo-1609083380444-26fd227d7339?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
  246.    
  247.    ); padding: 10px; margin-top: 20px;
  248.    border-bottom-left-radius: 10px; border-bottom-right-radius: 20px; border-top-right-radius: 10px;">
  249.        
  250.        
  251.        
  252.         <!-- code credit ___ do not remove this section -->
  253.         <a href="https://toyhou.se/EunaCodes" style="color: #fff;" data-toggle="tooltip" data-placement="bottom" title="html by EUNA" >
  254.             <i class="fa-regular fa-code"></i></a><!-- code credit -->
  255.            
  256.         .
  257.            
  258.         <!-- image credit -->  
  259.         <a href="LINK_HERE" style="color: #fff;" data-toggle="tooltip" data-placement="bottom" title="profile image by ???" >
  260.             <i class="fa-regular fa-image"></i></i></a><!-- image credit -->
  261.            
  262.         .    
  263.            
  264.         <!-- image credit -->  
  265.         <a href="LINK_HERE" style="color: #fff;" data-toggle="tooltip" data-placement="bottom" title="header image by ???" >
  266.             <i class="fa-regular fa-image"></i></i></a><!-- image credit -->    
  267.            
  268.        
  269.     </div> <!-- credit-->
  270.  
  271. </div><!-- main container -->
  272.  
  273. </div><!-- outline container -->
  274.  
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
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!