<!--------------------------------
"Modular User" - F2U HTML by @StormyStarlight
VERSION - 6 Jun 2023
https://toyhou.se/21857710.f2u-html-modular-user
• 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.
• 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.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------->
<!------ NOTICE ----------------->
<div class="alert alert-info mb-2 py-2 px-3">
<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>
</div>
<!------------------------------->
<!------ MAIN CONTENT ----------->
<div class="row no-gutters mt-n2">
<!------ THIN LEFT COLUMN ----->
<div class="col-12 col-lg-5 col-xl-auto row no-gutters align-content-start pr-lg-2" style="width: 350px;">
<!------ MAIN USER BOX ------>
<div class="col-12 card bg-faded mt-2" style="overflow: hidden;">
<!------ BANNER ----------->
<div style="height: 75px; background: url(
IMAGELINK
) center; background-size: cover;"><a style="position: absolute; top: 0px; right: 5px;" href="
CREDITLINK
"><i class="fa-light fa-image-polaroid text-white"></i></a></div>
<!------ USER ICON -------->
<a class="bg-faded p-1 rounded-circle ml-3" style="height: 100px; width: 100px; margin-top: -50px;" href="
CREDITLINK
"><img class="rounded-circle" style="height: 100%; width: 100%;" src="
IMAGELINK
"></a>
<!------ FLAGS -------------
These use @VynxCodes' HTML Pride Flags:
https://toyhou.se/16962387.html-pride-flags
To allow the credit link to work, please change the "div"s in them to "span"s!
--------------------------->
<div class="text-right w-100" style="position: absolute; top: 83px; right: 8px; max-width: calc(100% - 125px);">
<a style="text-decoration: none;" href="https://toyhou.se/16962387.html-pride-flags">
<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;"> </span>
<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;"> </span>
</a></div>
<!------ HEADING ---------->
<div class="row no-gutters px-3"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">Name<small class="text-muted"> • pronouns</small></h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ BULLETS ---------->
<ul class="mb-0 mx-3 pl-3">
<li>Write a few short notes about yourself.</li>
<li>Hobbies, interests, time zone, etc.</li>
</ul>
<!------ SOCIALS ---------->
<div class="px-3 mt-1 mb-2 justify-content-between" style="font-size: 1.2rem;">
<a href="https://discordapp.com/users/USERID" style="color: #6170BF;" class="tooltipster" title="Discord"><i class="fa-brands fa-discord"></i></a>
<a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="Tumblr"><i class="fa-brands fa-tumblr"></i></a>
<a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
<a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="deviantART"><i class="fa-brands fa-deviantart"></i></a>
<a href="SOCIALLINK" style="color: #6170BF;" class="tooltipster" title="YouTube"><i class="fa-brands fa-youtube"></i></a>
<!------ CREDIT - DON'T DELETE ------>
<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>
</div>
</div>
<!--------------------------->
<!------ MUSIC PLAYER BOX ----
You will need to host an audio file somewhere in order to
use a music player like this—you cannot use a YouTube video.
I recommend using File Garden. This tutorial has more info:
https://toyhou.se/6560537.-music-player-tutorial-f2u-
Pro Tip: If you want the music player to randomly choose a track from a list
every time the page is refreshed, like in the live preview, use this site:
https://sig.grumpybumpers.com/
----------------------------->
<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="
SONG by ARTIST
"><source src="
AUDIOLINK
"></audio>
<!--------------------------->
<!------ IMAGE ROW BOX ------>
<div class="col-12 card bg-faded mt-2 p-3">
<!------ HEADING ---------->
<div class="row no-gutters"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">Featured</h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ IMAGE ROW -------->
<div class="row no-gutters mx-n1 mb-n1">
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
<div class="col-3 p-1 justify-content-center align-items-center"><a href="CREDITLINK"><img src="IMAGELINK" class="rounded"></a></div>
</div>
</div>
<!--------------------------->
<!------ FIELDS BOX --------->
<div class="col-12 card bg-faded mt-2 p-3">
<!------ HEADING ---------->
<div class="row no-gutters"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">Favorites</h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ FIELDS ------------
Add/remove/rename as many as you want!
--------------------------->
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-book"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Book</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-camera-movie"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Movie</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-tv-retro"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">TV Series</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-gamepad-modern"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Video Game</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
<!-- DIVIDER --> <hr class="w-100 my-2">
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-palette"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Color</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-paw"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Animal</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
<div class="row no-gutters">
<div class="text-muted col-auto" style="width: 24px;"><i class="fa-solid fa-leaf"></i></div>
<div class="justify-content-between col"><span class="font-weight-bold text-uppercase text-muted mr-2">Season</span>
<span class="text-right" style="word-break: break-word;">Answer</span></div>
</div>
</div>
<!--------------------------->
<!------ COLLAPSIBLE BOX ---->
<div class="col-12 card bg-faded mt-2 p-3">
<!------ HEADING ---------->
<div class="row no-gutters"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">
<a style="color: #6170BF;" href="#collapsible-one" data-toggle="collapse">Click Me!</a>
</h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ HIDDEN CONTENT --->
<div id="collapsible-one" class="collapse">
<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>
</div>
</div>
<!--------------------------->
<!------ FULL IMAGE BOX ----->
<a class="w-100 mt-2" href="
CREDITLINK
"><img class="rounded" src="
IMAGELINK
"></a>
<!--------------------------->
</div>
<!----------------------------->
<!------ WIDE RIGHT COLUMN ---->
<div class="col-12 col-lg">
<!------ MAIN TEXT BOX ------>
<div class="card bg-faded mt-2 p-3">
<!------ FOCAL IMAGE ------>
<div class="text-center"><a href="
CREDITLINK
"><img style="max-height: 400px;" src="
IMAGELINK
"></a></div>
<!------ HEADING ---------->
<div class="row no-gutters"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">Hello!</h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ MAIN TEXT -------->
<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>
<!------ HEADING ---------->
<div class="row no-gutters"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">Please Note</h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ BULLETS ---------->
<ul class="mb-0 pl-4">
<li>Write down some quick notes here; anything you would like visiting users to know.</li>
<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>
<li>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li>Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</li>
</ul>
</div>
<!--------------------------->
<!------ IMAGE ROW BOX ------>
<div class="card bg-faded mt-2 p-3">
<!------ HEADING ---------->
<div class="row no-gutters"><div class="col-12 d-flex align-items-center">
<h2 class="mb-1" style="white-space: nowrap;">Featured</h2>
<hr class="col mx-2">
<h2 class="mb-0 text-primary" style="margin-top: -0.3rem;"><i class="fa-duotone fa-cloud-bolt" style="color: #6170BF;"></i></h2>
</div></div>
<!------ IMAGE ROW -------->
<div class="row no-gutters mx-n1 mb-n1">
<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>
<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>
<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>
<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>
<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>
<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>
</div>
</div>
<!--------------------------->
</div>
<!----------------------------->
</div>
<!------------------------------->