API tools faq
paste
Advertisement
StormyStarlight

Modular User

StormyStarlight
Feb 6th, 2024
20
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.93 KB | Source Code | 0 0
raw download clone embed print report
  1. <!--------------------------------
  2.  
  3.  
  4.  "Modular User" - F2U HTML by @StormyStarlight
  5.  VERSION - 6 Jun 2023
  6.  
  7.  https://toyhou.se/21857710.f2u-html-modular-user
  8.  
  9.  • Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
  10.  • Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
  11.  • Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
  12.  • Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
  13.  
  14.  
  15. --------------------------------->
  16.  
  17. <!------ NOTICE ----------------->
  18. <div class="alert alert-info mb-2 py-2 px-3">
  19.   <p><b><i class="fad fa-circle-info"></i> This is a short notice for whatever you want.</b> Don't mind the mess, I'm on hiatus, commissions are open, etc.</p>
  20. </div>
  21. <!------------------------------->
  22.  
  23. <!------ MAIN CONTENT ----------->
  24. <div class="row no-gutters mt-n2">
  25.  
  26.   <!------ THIN LEFT COLUMN ----->
  27.   <div class="col-12 col-lg-5 col-xl-auto row no-gutters align-content-start pr-lg-2" style="width: 350px;">
  28.    
  29.    
  30.     <!------ MAIN USER BOX ------>
  31.     <div class="col-12 card bg-faded mt-2" style="overflow: hidden;">
  32.      
  33.       <!------ BANNER ----------->
  34.       <div style="height: 75px; background: url(
  35.        
  36.        IMAGELINK
  37.        
  38.      ) center; background-size: cover;"><a style="position: absolute; top: 0px; right: 5px;" href="
  39.        
  40.        CREDITLINK
  41.        
  42.      "><i class="fa-light fa-image-polaroid text-white"></i></a></div>
  43.      
  44.       <!------ USER ICON -------->
  45.       <a class="bg-faded p-1 rounded-circle ml-3" style="height: 100px; width: 100px; margin-top: -50px;" href="
  46.        
  47.        CREDITLINK
  48.        
  49.      "><img class="rounded-circle" style="height: 100%; width: 100%;" src="
  50.        
  51.        IMAGELINK
  52.        
  53.      "></a>
  54.      
  55.       <!------ FLAGS -------------
  56.        
  57.        These use @VynxCodes' HTML Pride Flags:
  58.        https://toyhou.se/16962387.html-pride-flags
  59.        
  60.        To allow the credit link to work, please change the "div"s in them to "span"s!
  61.        
  62.      --------------------------->
  63.       <div class="text-right w-100" style="position: absolute; top: 83px; right: 8px; max-width: calc(100% - 125px);">
  64.       <a style="text-decoration: none;" href="https://toyhou.se/16962387.html-pride-flags">
  65.         <span class="rounded d-inline-block" style="background-image:linear-gradient(#e40303,#e40303 16.7%,#ff8c00 16.7%,#ff8c00 33.4%,#ffed00 33.3%,#ffed00 50.1%,#008026 50.1%,#008026 66.8%,#004dff 66.8%,#004dff 83.5%,#750787 83.5%);line-height:20px;width:26px;">&nbsp;</span>
  66.         <span class="rounded d-inline-block" style="background-image:linear-gradient(#5ac7ed,#5ac7ed 20%,#efa4b1 20%,#efa4b1 40%,#fff 40%,#fff 60%,#efa4b1 60%,#efa4b1 80%,#5ac7ed 80%);line-height:20px;width:26px;">&nbsp;</span>
  67.       </a></div>
  68.      
  69.       <!------ HEADING ---------->
  70.       <div class="row no-gutters px-3"><div class="col-12 d-flex align-items-center">
  71.         <h2 class="mb-1" style="white-space: nowrap;">Name<small class="text-muted"> • pronouns</small></h2>
  72.         <hr class="col mx-2">
  73.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  74.       </div></div>
  75.      
  76.       <!------ BULLETS ---------->
  77.       <ul class="mb-0 mx-3 pl-3">
  78.         <li>Write a few short notes about yourself.</li>
  79.         <li>Hobbies, interests, time zone, etc.</li>
  80.       </ul>
  81.      
  82.       <!------ SOCIALS ---------->
  83.       <div class="px-3 mt-1 mb-2 justify-content-between" style="font-size: 1.2rem;">
  84.         <a href="https://discordapp.com/users/USERID" style="color: #6170BF;" class="tooltipster" title="Discord"><i class="fa-brands fa-discord"></i></a>
  85.         <a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="Tumblr"><i class="fa-brands fa-tumblr"></i></a>
  86.         <a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
  87.         <a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
  88.         <a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="deviantART"><i class="fa-brands fa-deviantart"></i></a>
  89.         <a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="YouTube"><i class="fa-brands fa-youtube"></i></a>
  90.         <!------ CREDIT - DON'T DELETE ------>
  91.         <a href="https://toyhou.se/21857710.f2u-html-modular-user" style="color: #6170BF;" class="tooltipster" title="F2U HTML by StormyStarlight"><i class="fa-solid fa-code"></i></a>
  92.       </div>
  93.      
  94.     </div>
  95.     <!--------------------------->
  96.    
  97.    
  98.     <!------ MUSIC PLAYER BOX ----
  99.      
  100.      You will need to host an audio file somewhere in order to
  101.      use a music player like this—you cannot use a YouTube video.
  102.      I recommend using Discord. This tutorial has more info:
  103.      https://toyhou.se/6560537.-music-player-tutorial-f2u-
  104.      
  105.      Pro Tip: If you want the music player to randomly choose a track from a list
  106.      every time the page is refreshed, like in the live preview, use this site:
  107.      https://sig.grumpybumpers.com/
  108.      
  109.    ----------------------------->
  110.     <audio controls loop style="height: 25px; border-radius: 0.25rem; position: relative; z-index: 2;" class="tooltipster w-100 mt-2" data-placement="bottom" title="
  111.      
  112.      SONG by ARTIST
  113.      
  114.    "><source src="
  115.      
  116.      AUDIOLINK
  117.      
  118.    "></audio>
  119.     <!--------------------------->
  120.    
  121.    
  122.     <!------ IMAGE ROW BOX ------>
  123.     <div class="col-12 card bg-faded mt-2 p-3">
  124.      
  125.       <!------ HEADING ---------->
  126.       <div class="row no-gutters"><div class="col-12 d-flex align-items-center">
  127.         <h2 class="mb-1" style="white-space: nowrap;">Featured</h2>
  128.         <hr class="col mx-2">
  129.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  130.       </div></div>
  131.      
  132.       <!------ IMAGE ROW -------->
  133.       <div class="row no-gutters mx-n1 mb-n1">
  134.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  135.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  136.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  137.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  138.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  139.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  140.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  141.         <div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  142.       </div>
  143.      
  144.     </div>
  145.     <!--------------------------->
  146.    
  147.    
  148.     <!------ FIELDS BOX --------->
  149.     <div class="col-12 card bg-faded mt-2 p-3">
  150.      
  151.       <!------ HEADING ---------->
  152.       <div class="row no-gutters"><div class="col-12 d-flex align-items-center">
  153.         <h2 class="mb-1" style="white-space: nowrap;">Favorites</h2>
  154.         <hr class="col mx-2">
  155.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  156.       </div></div>
  157.      
  158.       <!------ FIELDS ------------
  159.        Add/remove/rename as many as you want!
  160.      --------------------------->
  161.       <div class="row no-gutters">
  162.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-book"></i></div>
  163.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Book</span>
  164.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  165.       </div>
  166.       <div class="row no-gutters">
  167.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-camera-movie"></i></div>
  168.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Movie</span>
  169.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  170.       </div>
  171.       <div class="row no-gutters">
  172.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-tv-retro"></i></div>
  173.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">TV Series</span>
  174.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  175.       </div>
  176.       <div class="row no-gutters">
  177.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-gamepad-modern"></i></div>
  178.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Video Game</span>
  179.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  180.       </div>
  181.       <!-- DIVIDER --> <hr class="w-100 my-2">
  182.       <div class="row no-gutters">
  183.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-palette"></i></div>
  184.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Color</span>
  185.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  186.       </div>
  187.       <div class="row no-gutters">
  188.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-paw"></i></div>
  189.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Animal</span>
  190.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  191.       </div>
  192.       <div class="row no-gutters">
  193.         <div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-leaf"></i></div>
  194.         <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Season</span>
  195.         <span class="text-right" style="word-break: break-word;">Answer</span></div>
  196.       </div>
  197.      
  198.     </div>
  199.     <!--------------------------->
  200.    
  201.    
  202.     <!------ COLLAPSIBLE BOX ---->
  203.     <div class="col-12 card bg-faded mt-2 p-3">
  204.        
  205.       <!------ HEADING ---------->
  206.       <div class="row no-gutters"><div class="col-12 d-flex align-items-center">
  207.         <h2 class="mb-1" style="white-space: nowrap;">
  208.           <a style="color: #6170BF;" href="#collapsible-one" data-toggle="collapse">Click Me!</a>
  209.         </h2>
  210.         <hr class="col mx-2">
  211.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  212.       </div></div>
  213.      
  214.       <!------ HIDDEN CONTENT --->
  215.       <div id="collapsible-one" class="collapse">
  216.         <p>Any content in here will be hidden by default. If you want it to be visible by default, add the "show" class to this div.</p>
  217.       </div>
  218.      
  219.     </div>
  220.     <!--------------------------->
  221.    
  222.    
  223.     <!------ FULL IMAGE BOX ----->
  224.     <a class="w-100 mt-2" href="
  225.      
  226.      CREDITLINK
  227.      
  228.    "><img class="rounded" src="
  229.      
  230.      IMAGELINK
  231.      
  232.    "></a>
  233.     <!--------------------------->
  234.    
  235.    
  236.   </div>
  237.   <!----------------------------->
  238.  
  239.   <!------ WIDE RIGHT COLUMN ---->
  240.   <div class="col-12 col-lg">
  241.    
  242.    
  243.     <!------ MAIN TEXT BOX ------>
  244.     <div class="card bg-faded mt-2 p-3">
  245.        
  246.       <!------ FOCAL IMAGE ------>
  247.       <div class="text-center"><a href="
  248.        
  249.        CREDITLINK
  250.        
  251.      "><img style="max-height: 400px;" src="
  252.        
  253.        IMAGELINK
  254.        
  255.      "></a></div>
  256.      
  257.       <!------ HEADING ---------->
  258.       <div class="row no-gutters"><div class="col-12 d-flex align-items-center">
  259.         <h2 class="mb-1" style="white-space: nowrap;">Hello!</h2>
  260.         <hr class="col mx-2">
  261.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  262.       </div></div>
  263.      
  264.       <!------ MAIN TEXT -------->
  265.       <p class="mb-2">Put some introductory text about yourself/your account here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  266.      
  267.       <!------ HEADING ---------->
  268.       <div class="row no-gutters"><div class="col-12 d-flex align-items-center">
  269.         <h2 class="mb-1" style="white-space: nowrap;">Please Note</h2>
  270.         <hr class="col mx-2">
  271.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  272.       </div></div>
  273.      
  274.       <!------ BULLETS ---------->
  275.       <ul class="mb-0 pl-4">
  276.         <li>Write down some quick notes here; anything you would like visiting users to know.</li>
  277.         <li>(Please use this or a collapsible box for things like DNIs/BYFs rather than misusing the user content warning feature. Accessibility is cool!) Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  278.         <li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
  279.         <li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
  280.       </ul>
  281.      
  282.     </div>
  283.     <!--------------------------->
  284.    
  285.    
  286.     <!------ IMAGE ROW BOX ------>
  287.     <div class="card bg-faded mt-2 p-3">
  288.      
  289.       <!------ HEADING ---------->
  290.       <div class="row no-gutters"><div class="col-12 d-flex align-items-center">
  291.         <h2 class="mb-1" style="white-space: nowrap;">Featured</h2>
  292.         <hr class="col mx-2">
  293.         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
  294.       </div></div>
  295.        
  296.       <!------ IMAGE ROW -------->
  297.       <div class="row no-gutters mx-n1 mb-n1">
  298.         <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  299.         <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  300.         <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  301.         <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  302.         <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  303.         <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
  304.       </div>
  305.      
  306.     </div>
  307.     <!--------------------------->
  308.    
  309.    
  310.   </div>
  311.   <!----------------------------->
  312.  
  313. </div>
  314. <!------------------------------->
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!