API tools faq
paste
Advertisement
Guest User

TH profile code prototype

a guest
Mar 8th, 2024
81
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.01 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. <!------ MAIN CONTENT ----------->
  17. <div class="row no-gutters mt-n2">
  18.     <!------ THIN LEFT COLUMN ----->
  19.     <div class="col-12 col-lg-5 col-xl-auto row no-gutters align-content-start pr-lg-2" style="width: 350px;">
  20.         <!------ MAIN USER BOX ------>
  21.         <div class="col-12 card bg-faded mt-2" style"color:="" #ec9a00;""overflow:="" hidden;"="">
  22.             <!------ BANNER ----------->
  23.             <div style="height: 75px;
  24.      ) center; background-size: cover;"> <a href="https://i.imgur.com/rhxjRPu.gif" style="position: absolute; top: 0px; right: 5px;" id="huh"></a></div>
  25.             <!------ USER ICON -------->
  26.             <a class="bg-faded p-1 rounded-circle ml-3" href="%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20CREDITLINK%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20" style="height: 100px; width: 100px; margin-top: -50px;"><img class="rounded-circle fr-fic fr-dii" src="https://i.imgur.com/iKSExwl.png" width="82.002" height="82.002"></a>
  27.             <!------ HEADING ---------->
  28.             <div class="row no-gutters px-3">
  29.                 <div class="col-12 d-flex align-items-center">
  30.                     <h2 class="mb-1" style="color: #ea9a04;" "white-space:="" nowrap;"=""><span style="color: #ec9a00;">Finn/Eddie</span><small class="text-muted"><span style="color: rgb(236, 154, 0);"> • any</span></small></h2>
  31.                     <hr class="col mx-2">
  32.                     <h2 class="mb-0 text-primary" style="color: #ec9a00;" "margin-top:="" -.3rem;"=""><br></h2>
  33.                 </div>
  34.             </div>
  35.             <!------ BULLETS ---------->
  36.             <ul class="mb-0 mx-3 pl-3">
  37.                 <class style="color: #ea9a04;">
  38.                     <li><span style="color: rgb(236, 154, 0);">did it break- NO ID TIDNT</span></li>
  39.                     <li><span style="color: #ea9a04;">Hobbies, interests, time zone, etc.</span></li>
  40.             </ul><span style="color: #ea9a04;"><!------ SOCIALS ---------->
  41.                 <div class="px-3 mt-1 mb-2 justify-content-between" style="color: #ec9a00;" "font-size:=" 1.2rem;"=""><a class="tooltipster" href="https://purpleskelet0n.carrd.co" style="color: #ea9a04;" title="Carrd"></a>
  42.                     <a class="tooltipster" href="SOCIALLINK" style="color: #ea9a04;" title="Tumblr"></a>
  43.                     <a class="tooltipster" href="SOCIALLINK" style="color: #ea9a04;" title="Instagram"></a>
  44.                     <a class="tooltipster" href="SOCIALLINK" style="color: #ea9a04;" title="deviantART"></a <a class="tooltipster" href="SOCIALLINK" style="color: #ea9a04;" title="YouTube"></a>
  45.                     <!------ CREDIT - DON'T DELETE ------>
  46.                     <a class="tooltipster" href="https://toyhou.se/21857710.f2u-html-modular-user" style="color: #ec9a00;" title="F2U HTML by StormyStarlight"></a>
  47.                 </div>
  48.             </span>
  49.         </div><span style="color: #ec9a00;"><!--------------------------->
  50.             <!------ MUSIC PLAYER BOX ----
  51.      
  52.      You will need to host an audio file somewhere in order to
  53.      use a music player like this—you cannot use a YouTube video.
  54.      I recommend using File Garden. This tutorial has more info:
  55.      https://toyhou.se/6560537.-music-player-tutorial-f2u-
  56.      
  57.      Pro Tip: If you want the music player to randomly choose a track from a list
  58.      every time the page is refreshed, like in the live preview, use this site:
  59.      https://sig.grumpybumpers.com/
  60.      
  61.    -----------------------------><audio class="tooltipster w-100 mt-2" controls="" data-placement="bottom" loop="" style="height: 25px; border-radius: 0.25rem; position: relative; z-index: 2;" title="
  62.      
  63.      " DON'T CARRY IT ALL by THE DECEMBERISTS ">
  64. <source src=" https://file.garden/Zep4ZxGi9H-cAZ2M/Tunes/dont%20carry%20it%20all%20decemberists" audiolink="" "=""></audio>
  65.  
  66.    
  67.     <!---------------------------><!------ IMAGE ROW BOX ------><div class=" col-12 card bg-faded mt-2 p-3"><!------ HEADING ---------->
  68.                 <div class="row no-gutters">
  69.                     <div class="col-12 d-flex align-items-center">
  70.                         <h2 class="mb-1" style="color:&quot;#ea9a04;&quot;white-space:" nowrap;"="">Featured</h2>
  71.                         <hr class="col mx-2">
  72.                         <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><br></h2>
  73.                     </div>
  74.                 </div><!------ IMAGE ROW -------->
  75.                 <div class="row no-gutters mx-n1 mb-n1">
  76.                     <div class="col-3 p-1 justify-content-center align-items-center"><br></div>
  77.                 </div>
  78.     </div><!---------------------------><!------ FIELDS BOX --------->
  79.     <div class="col-12 card bg-faded mt-2 p-3">
  80.         <!------ HEADING ---------->
  81.         <div class="row no-gutters">
  82.             <div class="col-12 d-flex align-items-center">
  83.                 <h2 class="mb-1" style="white-space: nowrap;">Favorites</h2>
  84.                 <hr class="col mx-2">
  85.                 <h2 class="mb-0 text-primary" style="color:#ea9a04;" "margin-top:="" -0.3rem;"=""><br></h2>
  86.             </div>
  87.         </div>
  88.         <!------ FIELDS ------------
  89.        Add/remove/rename as many as you want!
  90.      --------------------------->
  91.         <div class="row no-gutters">
  92.             <div class="text-muted col-auto" style="color: #ec9a00;" "width:="" 24px;"=""><br></div>
  93.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  94.                     <class style="color: rgb(236, 154, 0);">Book
  95.                 </span>
  96.                 <span class="text-right" style="color: #ec9a00;" word-break:="" break-word;"="">Answer</span>
  97.             </div>
  98.         </div>
  99.         <div class="row no-gutters">
  100.             <div class="text-muted col-auto" style="color:" #ec9a00;""width:="" 24px;"=""><br></div>
  101.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  102.                     <class style="color: rgb(236, 154, 0);">Movie
  103.                 </span>
  104.                 <span class="text-right" style="color:" #ec9a00;"="" "word-break:="" break-word;"="">Answer</span>
  105.             </div>
  106.         </div>
  107.         <div class="row no-gutters">
  108.             <div class="text-muted col-auto" style="color:" #ec9a00;""width:="" 24px;"=""><br></div>
  109.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  110.                     <class style="color: rgb(236, 154, 0);">TV Series
  111.                 </span>
  112.                 <span class="text-right" style="color: #ec9a00;" "word-break:="" break-word;"="">Answer</span>
  113.             </div>
  114.         </div>
  115.         <div class="row no-gutters">
  116.             <div class="text-muted col-auto" style="color:" #ec9a00;"="" "width:="" 24px;"=""><br></div>
  117.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  118.                     <class style="color: rgb(236, 154, 0);">Video Game
  119.                 </span>
  120.                 <span class="text-right" style="color:" #ec9a00;""word-break:="" break-word;"="">Answer</span>
  121.             </div>
  122.         </div><!-- DIVIDER -->
  123.         <hr class="w-100 my-2">
  124.         <div class="row no-gutters">
  125.             <div class="text-muted col-auto" style="color:" #ec9a00;""width:="" 24px;"=""><br></div>
  126.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  127.                     <class style="color: rgb(236, 154, 0);">Color
  128.                 </span>
  129.                 <span class="text-right" style="word-break:" break-word;"="">Answer</span>
  130.             </div>
  131.         </div>
  132.         <div class="row no-gutters">
  133.             <div class="text-muted col-auto" style="width: 0px;"><br></div>
  134.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  135.                     <class style="color: rgb(236, 154, 0);">Animal
  136.                 </span>
  137.                 <span class="text-right" style="word-break: break-word;">Answer</span>
  138.             </div>
  139.         </div>
  140.         <div class="row no-gutters">
  141.             <div class="text-muted col-auto" style="width: 0px;"><br></div>
  142.             <div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">
  143.                     <class style="color: rgb(236, 154, 0);">Season
  144.                 </span>
  145.                 <span class="text-right" style="word-break: break-word;">Answer</span>
  146.             </div>
  147.         </div>
  148.     </div><!---------------------------><!------ COLLAPSIBLE BOX ---->
  149.     <div class="col-12 card bg-faded mt-2 p-3"><!------ HEADING ---------->
  150.         <div class="row no-gutters">
  151.             <div class="col-12 d-flex align-items-center">
  152.                 <h2 class="mb-1" style="white-space: nowrap;"><a data-toggle="collapse" href="#collapsible-one" style="color: #ea9a04;">Click Me!</a></h2>
  153.                 <hr class="col mx-2">
  154.                 <h2 class="mb-0 text-primary" style="color: #ec9a00;" "margin-top:="" -0.3rem;"=""><br></h2>
  155.             </div>
  156.         </div><!------ HIDDEN CONTENT --->
  157.         <div class="collapse" id="collapsible-one">
  158.             <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>
  159.         </div>
  160.     </div><!---------------------------><!------ FULL IMAGE BOX -----><a class="w-100 mt-2" href="%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20CREDITLINK%0A%20%20%20%20%20%20%0A%20%20%20%20"><img class="rounded fr-fic fr-dii" src="%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20IMAGELINK%0A%20%20%20%20%20%20%0A%20%20%20%20" width="15.9961" height="15.9961"></a><!---------------------------></span>
  161. </div>
  162. <div class="col-12 col-lg"><span style="color: rgb(236, 154, 0);"><!------ MAIN TEXT BOX ------>
  163.         <div class="card bg-faded mt-2 p-3"><!------ FOCAL IMAGE ------>
  164.             <div class="text-center"><a href="%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20CREDITLINK%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20"><img style="max-height: 400px;" src="%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20IMAGELINK%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20" class="fr-fic fr-dii" width="15.9961" height="15.9961"></a></div><!------ HEADING ---------->
  165.             <div class="row no-gutters">
  166.                 <div class="col-12 d-flex align-items-center">
  167.                     <h2 class="mb-1" style="white-space: nowrap;">Hello!</h2>
  168.                     <hr class="col mx-2">
  169.                     <h2 class="mb-0 text-primary" style="color: #ea9a04;" "margin-top:="" -0.3rem;"=""><br></h2>
  170.                 </div>
  171.             </div><!------ MAIN TEXT -------->
  172.             <p class="mb-2">PLEASE WORK</p><!------ HEADING ---------->
  173.             <div class="row no-gutters">
  174.                 <div class="col-12 d-flex align-items-center">
  175.                     <h2 class="mb-1" style="white-space: nowrap;">Please Note</h2>
  176.                     <hr class="col mx-2">
  177.                     <h2 class="mb-0 text-primary" style="color: #ea9a04;" "margin-top:="" -0.3rem;"=""><br></h2>
  178.                 </div>
  179.             </div><!------ BULLETS ---------->
  180.             <ul class="mb-0 pl-4">
  181.                 <li>Write down some quick notes here; anything you would like visiting users to know.</li>
  182.                 <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>
  183.                 <li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
  184.                 <li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
  185.             </ul>
  186.         </div><!---------------------------><!------ IMAGE ROW BOX ------>
  187.     </span>
  188.     <div class="card bg-faded mt-2 p-3"><span style="color: #ea9a04;"><!------ HEADING ---------->
  189.             <div class="row no-gutters">
  190.                 <div class="col-12 d-flex align-items-center">
  191.                     <h2 class="mb-1" style="white-space: nowrap;">Featured</h2>
  192.                     <hr class="col mx-2">
  193.                     <h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><br></h2>
  194.                 </div>
  195.             </div><!------ IMAGE ROW -------->
  196.         </span>
  197.         <div class="row no-gutters mx-n1 mb-n1">
  198.             <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><span style="color: #ea9a04;"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded fr-fic fr-dii" width="15.9961" height="15.9961"></a></span></div>
  199.             <div class="col-6 col-sm-4 col-xl-2 p-1 justify-content-center align-items-center"><span style="color:#ea9a04;"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded fr-fic fr-dii" width="15.9961" height="15.9961"></a></span></div>
  200.             <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 fr-fic fr-dii" width="15.9961" height="15.9961"></a></div>
  201.             <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 fr-fic fr-dii" width="15.9961" height="15.9961"></a></div>
  202.             <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 fr-fic fr-dii" width="15.9961" height="15.9961"></a></div>
  203.             <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 fr-fic fr-dii" width="15.9961" height="15.9961"></a></div>
  204.         </div>
  205.     </div><!--------------------------->
  206. </div><!-----------------------------></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!