API tools faq
paste
Advertisement
eggqqe

HTML // User Widescreen

eggqqe
May 25th, 2025
249
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 23.78 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2. |
  3. |     Hi. (｡･∀･)ﾉﾞ
  4. |
  5. |
  6. |     This code is designed to be a gift for ko-fi supporters. If you have this code but are not a supporter, consider
  7. |     supporting me at ko-fi/eggqqe so I can buy crunchy snack!
  8. |
  9. |     TOOLS THAT WILL HELP YOU:
  10. |         - https://th.circlejourney.net
  11. |         - https://htmlcolorcodes.com/
  12. |       (ko-fi supporters get free customer service if they need it! just msg me!)
  13. |
  14. |
  15.  
  16. |    This code is Purely HTML!
  17. |    I stole the music player from somewhere. I'm sorry. Just arrest me. it was F2U, i swear...
  18. --->
  19.  
  20.  
  21.  
  22. <!---
  23. |
  24. |    Main Background (At the VERY back)
  25. |    if you want it to be a solid color, then use background-color
  26. |    if you want an image background, then use background-image
  27. |
  28. --->
  29.  
  30. <div class="fixed-top p-5 d-none d-lg-block d-md-block"
  31.     style="right:0;left:0; bottom:0; z-index:0;
  32.    
  33.            background-image:url('IMAGEURLHERE');
  34.            background-size:cover;
  35.            background-color:#07050a;">
  36.  
  37. <div class="my-5" style="position:absolute; width:100%; left:0; right:0;">
  38.    
  39.     <div class="pr-4" style="position:absolute; top:0; right:0;">
  40.         <a href="https://toyhou.se/robot"><i style="font-size:20px; color:#64797f; opacity:0.2;" class="fa-solid fa-message-code"></i></a>
  41.     </div>
  42.  
  43. <!---
  44. |
  45. |    Secondary Background.
  46. |    This is layered with multiple linear-gradients. Think of it like layers in an art program.
  47. |    Fiddle with each color until you get the desired effect - I find using black shades or white shades for light themes
  48. |     works the best.
  49. |
  50. --->
  51.  
  52. <div class="justify-content-center my-5 border-0 rounded-0 align-items-center p-0 m-0" style="right:0; left:0; bottom:0; right:inherit;">
  53.  
  54.     <div class="col-12 card rounded border-0 rounded-0 bg-dark m-0 p-0"
  55.         style="
  56.        
  57.                 background-image:url(https://cdn.steamstatic.com/steamcommunity/public/images/items/2603600/9bf3bb3481f2411fe5f4ec879ee0c0a90c59a738.jpg);
  58.                 background-attachment: fixed;
  59.                 background-size:;
  60.                 background-position:center;
  61.                 background-repeat:repeat;
  62.                 z-index:4; ">
  63.        
  64.         <div class="content col-12 m-o p-0 h-100 w-100"
  65.             style="position:absolute; background-color:#070a1b; opacity:0.5;">
  66.         </div>
  67.        
  68.     <div class="content col-12 m-0 p-0 rounded-0"
  69.         style="background: linear-gradient(to left, rgba(41, 45, 51,0) 66%,rgba(3,3,5,0.9) 80%);">
  70.     <div class="content col-12 m-0 pl-5 rounded-0"
  71.         style="background: linear-gradient(to right, rgba(217,217,217,0) 46%,rgba(15,21,30,0.8) 90%);">
  72.        
  73.    
  74. <!---
  75. |
  76. |     Icon Image.
  77. |     If you want a circle Icon, then put an image URL in background-image:url(IMAGEURLHERE);
  78. |     If you want a lil transparent pagedoll type thing, then ignore background-image and instead use <img src="IMAGEURLHERE">
  79. |
  80. --->
  81.  
  82.         <div class="row h-100 ">
  83.            
  84.             <div class="col-lg-3 bg-none h-100 m-0 p-3" style="border-right:2px solid rgba(39,69,78,0.2); max-width:270px;">
  85.                
  86.                
  87.                 <div class="bg-none mx-0 mt-3" style="height:200px; width:200px; border-radius:50%; background-image:url(); background-position:center; background-size:130%; filter: grayscale(20%);">
  88.                    
  89.                     <img src="https://eggqqe.neocities.org/other/embed%20transparent%20line.png">
  90.                    
  91.                 </div>
  92.                
  93. <!---
  94. |
  95. |     URL spaghetti. Don't try to hide block / report buttons, people WILL find a way.
  96. |     Make sure you set up all of the URL links! Replace ### with the correct URL!
  97. |
  98. --->
  99.  
  100.             <ul class="nav m-0 px-2 pt-4 pb-2 row no-gutters d-lg-block align-items-center justify-content-around my-1 my-lg-auto" style="font-size:14px; color:white;">
  101. <!--- Website 1 -------------------------------------------------------------------------------------------- --->
  102.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  103.                    
  104.                 <!--- URL LINK ------------------>
  105.                 <a href="HTTPS://WEBSITE1URL"
  106.                
  107.                   class="nav-link btn btn-outline-danger border-0"
  108.                   style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  109.                
  110.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  111.                    
  112.                     <i style="color:#64bdc4;" class="fa-solid fa-cup-togo"></i> website 1
  113.                 </p>
  114.                
  115.                 </li>
  116. <!--- Website 2 -------------------------------------------------------------------------------------------- --->
  117.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  118.                    
  119.                 <!--- URL LINK ------------------>
  120.                 <a href="HTTPS://WEBSITE2URL"
  121.                
  122.                class="nav-link btn btn-outline-danger border-0"
  123.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  124.                
  125.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  126.                    
  127.                     <i class="fa-solid fa-money-check-dollar-pen"></i> website 2
  128.                 </p>
  129.                
  130.                 </li>
  131.             </ul>
  132. <!--- -------------------------------------------------------------------------------------------- --->
  133.     <div class="mx-4 m-0 justify-content-center" style="max-width:80%; height:2px; background-color:black; opacity:0.1;"></div>
  134. <!--- Art -------------------------------------------------------------------------------------------- --->
  135.         <ul class="nav py-1 px-3 row no-gutters d-lg-block align-items-center justify-content-around my-1 my-lg-auto" style="font-size:14px; color:white;">
  136.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  137.                    
  138.                  <!--- REPLACE WITH UR USERNAME ------------------>
  139.                  <a href="./USERNAME/art"
  140.                  
  141.                   class="nav-link btn btn-outline-danger border-0"
  142.                   style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  143.                
  144.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  145.        
  146.                     <i class="fa-solid fa-caret-right"></i> artwork
  147.                 </p>
  148.                
  149.                 </li>
  150. <!--- Characters -------------------------------------------------------------------------------------------- --->
  151.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  152.                    
  153.                 <!--- REPLACE WITH UR USERNAME ------------------>
  154.                 <a href="./USERNAME/characters"
  155.                
  156.                   class="nav-link btn btn-outline-danger border-0"
  157.                   style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  158.                
  159.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  160.                    
  161.                     <i class="fa-solid fa-caret-right"></i> characters
  162.                 </p>
  163.                
  164.                 </li>
  165. <!--- Designs -------------------------------------------------------------------------------------------- --->
  166.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  167.                    
  168.                 <!--- REPLACE WITH UR USERNAME ------------------>
  169.                 <a href="./USERNAME/created"
  170.                
  171.                   class="nav-link btn btn-outline-danger border-0"
  172.                   style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  173.                
  174.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  175.                    
  176.                     <i class="fa-solid fa-caret-right"></i> designs
  177.                     </p>
  178.                
  179.                 </li>
  180. <!--- Favorites -------------------------------------------------------------------------------------------- --->
  181.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  182.                    
  183.                 <!--- REPLACE WITH UR USERNAME ------------------>
  184.                 <a href="./USERNAME/favorites"
  185.                
  186.                class="nav-link btn btn-outline-danger border-0"
  187.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  188.                
  189.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  190.                    
  191.                     <i class="fa-solid fa-star"></i> favorites
  192.                 </p>
  193.                
  194.                 </li>
  195. <!--- Comments -------------------------------------------------------------------------------------------- --->
  196.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  197.                    
  198.                     <!--- REPLACE WITH UR USERNAME ------------------>
  199.                     <a href="./USERNAME/comments"
  200.                    
  201.                    class="nav-link btn btn-outline-danger border-0"
  202.                    style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  203.                
  204.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  205.                    
  206.                     <i class="fa-solid fa-comment-lines"></i> comments
  207.                 </p>
  208.                
  209.                 </li>
  210.             </ul>
  211. <!--- -------------------------------------------------------------------------------------------- --->
  212.         <div class="mx-4 m-0 justify-content-center" style="max-width:80%; height:2px; background-color:black; opacity:0.1;"></div>
  213. <!--- Message -------------------------------------------------------------------------------------------- --->
  214.             <ul class="nav py-1 px-3 row no-gutters d-lg-block align-items-center justify-content-around my-1 my-lg-auto" style="font-size:14px; color:white;">
  215.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  216.                    
  217.                 <!--- REPLACE WITH UR USERNAME ------------------>
  218.                 <a href="https://toyhou.se/~messages/create/USERNAME"
  219.                
  220.                class="nav-link btn btn-outline-danger border-0"
  221.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  222.                
  223.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  224.                    
  225.                     <i class="fa-solid fa-envelope"></i> message
  226.                 </p>
  227.                
  228.                 </li>
  229. <!--- Subscribe -------------------------------------------------------------------------------------------- --->
  230.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  231.                    
  232.                 <!--- REPLACE WITH UR USERNAME ------------------>
  233.                 <a href="./USERNAME/subscribe"
  234.                
  235.                class="nav-link btn btn-outline-danger border-0"
  236.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  237.                
  238.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  239.                    
  240.                     <i class="fa-solid fa-bell"></i> subscribe
  241.                 </p>
  242.                
  243.                 </li>
  244. <!--- Authorize -------------------------------------------------------------------------------------------- --->
  245.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  246.                    
  247.                 <!--- REPLACE WITH UR USERNAME ------------------>
  248.                 <a href="./USERNAME/authorize"
  249.                
  250.                class="nav-link btn btn-outline-danger border-0"
  251.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  252.                
  253.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  254.                    
  255.                     <i class="fa-solid fa-check"></i> authorize
  256.                 </p>
  257.                
  258.                 </li>
  259. <!--- Block -------------------------------------------------------------------------------------------- --->
  260.                 <li class="nav-item align-items-center m-0 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  261.                    
  262.                 <!--- REPLACE WITH UR USERNAME ------------------>
  263.                 <a href="./USERNAME/block"
  264.                
  265.                class="nav-link btn btn-outline-danger border-0"
  266.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  267.                
  268.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  269.                    
  270.                     <i class="fa-solid fa-ban"></i> block
  271.                 </p>
  272.                
  273.                 </li>
  274. <!--- Report -------------------------------------------------------------------------------------------- --->
  275.                 <li class="nav-item align-items-center mb-3 p-0" style="letter-spacing:1.5px; font-family:verdana; font-weight:600;">
  276.                    
  277.                 <!--- TO GET YOUR REPORT TICKET NUMBER, JUST COPY THE URL FROM YOUR OWN PAGE ------------------>
  278.                 <a href="REPORT URL"
  279.                
  280.                class="nav-link btn btn-outline-danger border-0"
  281.                style="mix-blend-mode: multiply; width: 100%; z-index: 2; border-radius: 0%; opacity: .15; min-height:30px;"></a>
  282.                
  283.                 <p class="p-4" style="position:absolute; opacity:0.6;">
  284.                    
  285.                     <i class="fa-solid fa-warning"></i> report
  286.                 </p>
  287.                
  288.                 </li>
  289. <!--- -------------------------------------------------------------------------------------------- --->
  290.             </ul>
  291.         </div>
  292.            
  293. <!---
  294. |
  295. |     Introduction / Text Area.
  296. |     Tell the world how it can't match your freak.
  297. |
  298. --->
  299.            
  300.             <div class="bg-none w-100 col-lg-9 col-md-12 col-sm-12 pl-0" style="color:#708b88;">
  301.                
  302.                 <div class="row no-gutters h-100">
  303.                 <div class="bg-none rounded w-100 col-lg-6 col-sm-12 pull-left mt-5 pt-4" style="">
  304.                 <div class="w-100 m-0 pb-1 col-12 pl-3 "
  305.                     style="background: linear-gradient(to left,  rgba(217,217,217,0) 29%,rgba(28,39,41,0.6) 110%);">
  306.                    
  307.                 <span style="font-size:20px; font-variant:small-caps; letter-spacing:2px;">
  308.                    
  309.                     username, title, or pronouns? <i class="fa-solid fa-eye"></i>
  310.                    
  311.                 </span>
  312.                 </div>
  313.                
  314.                
  315.                 <div style="max-width:460px; font-size:13px; line-height:22px;">
  316.                    
  317.                
  318.                 <blockquote class="px-3 my-4 ml-5"
  319.                            style="letter-spacing:1.8px; color:white; font-size:13px;
  320.                                   border-left: 3px solid rgba(217, 217, 217, 0.2); opacity:0.8;">
  321.                    
  322.                 <p class="pl-3"
  323.                   style="letter-spacing:1.8px;">
  324.                    
  325.                     introductory text goes here. i don't suggest making it 12 pages long - short and sweet keeps you sexy and mysterious, and that's a hot look on you.
  326.                    
  327.                 </p>
  328.                 </blockquote>
  329.                
  330.                 <p class="px-5 my-4" style="letter-spacing:1.8px;">#hashtag • #hashtag • #hashtag</p>
  331.                 <p class="px-5 my-4" style="letter-spacing:1.8px;">WARNING: trigger warnings • go here</b></p>
  332.                
  333.                
  334.                 <blockquote class="px-4 my-4 ml-5"
  335.                            style="letter-spacing:1.8px; color:white; font-size:13px;
  336.                                   border-left: 3px solid rgba(217, 217, 217, 0.2); opacity:0.3; position:absolute; bottom:0; max-width:400px;">
  337.                    
  338.                     optional extra note at the bottom. you can delete this whole blockquote if you don't want it.
  339.                    
  340.                 </blockquote>
  341.                
  342.                </div>
  343.                </div>
  344.                
  345.                    
  346. <!---
  347. |
  348. |     Right-Side Chibi/Focal Image (i suggest transparent lil guys)
  349. |
  350. --->
  351.  
  352.                <div class="col-lg-6 bg-none p-0 m-0 col-sm-12 card-block" style="position:absolute; right:0;">
  353.                     <div class="d-none d-lg-block border-0 pull-right" style="height:0px; z-index:2;">
  354.                        
  355.                         <img src="https://i.gyazo.com/0fdf22ff5046ab4c2a7de5d2f2ff056f.png"
  356.                             style="height:800px; top:-50px; filter: drop-shadow(0 0 0.8rem #000000);"
  357.                             class="fr-fic fr-dii"></div>
  358.  
  359.                 </div>
  360.                
  361. <!---
  362. |
  363. |     End of Chibi/Focal Image
  364. |
  365. --->
  366.                
  367.                 <div class="text-center bg-none mb-3 mr-4" style="position: absolute; bottom:0; right:0;">
  368.                    
  369.                 <!--- Music Player ---->
  370.                 <div class="d-none d-lg-block p-2 text-dark">
  371.                
  372.                 <div class="justify-content-center mb-3" style="height:40px; width:350px; bottom:0; position:relative;">
  373.                    
  374.                    
  375.                   <div class="card mb-3 mx-4 w-100 h-100" style="border:0px; border-radius:10px;">
  376.                      
  377.                       <div class="h-100 w-100 justify-content-center" style="background-color:#020305; background-position:center; background-size:cover; overflow: hidden; border-radius:7px; color:#476863;">
  378.                          
  379.                          
  380.                         <div class="justify-content-center justify-content-around h-100 align-items-center ml-4">
  381.                           <!-- this is the invisible youtube video that you're actually clicking on to make music play. Click the share button on a youtube video and copy the last part that's a jumble of letters and paste it here after the embed/ (do not just copy paste the url - that's a youtu.be link, it doesn't work)-->
  382.                          <iframe class="" style="width: 65px; height: 36px; opacity:.01; position:absolute;z-index:2;" src="https://www.youtube.com/embed/ukfYzSwvq0U"></iframe>
  383.    
  384.                          <div class="" style="border-radius:50%"><!-- this is the icon in the center of the play button... I've aligned this a few times and idk why it's always off, but you can mess with the margins here if you want to try and better center it -->
  385.                          
  386.                          <i class="fa-solid fa-play justify-content-center justify-content-around h-100 d-flex"></i>
  387.                          
  388.                          
  389.                          </div>
  390.    
  391.                       </div>
  392.                       <p class="col justify-content-center justify-content-around h-100 align-items-center"><b style="color:#e10f56; letter-spacing:1px; font-size:11px;">song title here</b></p>
  393.                     </div>
  394.                     </div>
  395.                     </div>
  396.                      
  397.                      <!--- End of Music Player --->
  398.  
  399.                        
  400.                     </div>
  401.                     </div>
  402.                
  403.                </div>
  404.                </div>
  405.             </div>
  406.             <!--- ---->
  407.         </div>
  408.         </div>
  409.     </div>
  410.     </div>
  411.  
  412. </div>
  413.  
  414. </div>
  415.  
  416. <!---
  417. |
  418. |     This is the mobile part of the code. When looking at this profile on a phone, you can opt to make it look
  419. |      different or keep things the same by re-filling out the information above (such as images and text)
  420. |
  421. --->
  422.  
  423. <div class="hidden-lg-up p-0 m-0" style="position:relative; z-index:-1">
  424.    
  425.     <div class="bg-dark container-fluid justify-content-center border-0 p-0"
  426.         style="max-width:500px;  top:0; bottom:0; position:relative; border-radius:16px;
  427.        
  428.        
  429.               background-image:url(https://cdn.steamstatic.com/steamcommunity/public/images/items/2603600/9bf3bb3481f2411fe5f4ec879ee0c0a90c59a738.jpg);
  430.               background-position:top;">
  431.        
  432.         <div class="p-0 m-0"
  433.             style="background: linear-gradient(to bottom right,  rgba(20,19,22,0.6) 10%,rgba(8,10,18,0.9) 100%);
  434.                    border-radius: 15px;">
  435.        
  436.        
  437.         <div class="row no-gutters col-12" style="display: flex;justify-content: center; align-items: center;">
  438.            
  439.         <div class="col-12 justify-content-center">
  440.            
  441. <!---
  442. |
  443. |     Same as above, use img src for a pagedoll or background-image:url() for an icon
  444. |
  445. --->
  446.  
  447.         <div class="bg-none m-4 p-0"
  448.             style="height:200px; width:200px; color:black; border-radius:50%;
  449.            
  450.             background-image:url(IMAGEURLHERE);
  451.             background-size: cover;
  452.             background-repeat:no-repeat;
  453.             background-position:center;">
  454.            
  455.             <img src="https://eggqqe.neocities.org/other/embed%20transparent%20line.png">
  456.            
  457.         </div>
  458.         </div>
  459.        
  460.         <div class="mb-3 col-12 text-center" style="letter-spacing:4.2px; font-size:17px; font-family: v; font-weight: 300; opacity:0.8; color:#C5C9D0; max-width:360px; ">
  461.         username or title
  462.         </div>
  463.        
  464.         <div class="card col-12" style="background-color:#FFFFFF; height:2px; opacity:0.3; max-width:80%;"></div>
  465.        
  466.         <div class="pt-4 mb-3 col-12" style="letter-spacing:1.2px; font-size:12px; font-family: v; font-weight: 300; opacity:0.8; color:#C5C9D0; max-width:360px; ">
  467.            
  468.             <p class="pl-3" style="letter-spacing:1.8px;">
  469.                
  470.                 text for mobile goes here. it can be the same as before or something different and unique.
  471.                
  472.             </p>
  473.         </div>
  474.        
  475.         <div class="card col-12" style="background-color:#FFFFFF; height:2px; opacity:0.3; max-width:80%;"></div>
  476.        
  477.         <div class="pt-4 mb-3 col-12" style="letter-spacing:1.2px; font-size:14px; font-family: v; font-weight: 300; opacity:0.8; color:#C5C9D0; max-width:250px;">
  478.            
  479.             <!--- WEBSITE 1 --->
  480.             <span class="pull-left">
  481.                 <a href="WEBSITE1URL" style="color:white;">
  482.                     <i class="fa-solid fa-cup-togo" style="color:#e40044;"></i> Website 1</a>
  483.             </span>
  484.            
  485.             <!--- WEBSITE 2 --->
  486.             <span class="pull-right">
  487.                 <a href="WEBSITE2URL" style="color:white;">
  488.                     <i class="fa-solid fa-money-check-dollar-pen"></i> Website 2</a>
  489.             </span>
  490.         </div>
  491.        
  492.        
  493.         </div>
  494.     </div>
  495.     </div>
  496. </div>
  497. </div>
  498. </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!