yellow prof
🧩 Syntax:
<div class="faded" style="background: url(https://images.unsplash.com/photo-1591123164190-204d984dfcdb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=888&q=80); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; width:100%; height: 100%; z-index:-10; position: absolute; top:0; bottom:0; left:0; right:0;"></div>
<div class="container p-0" style="max-width: 600px; letter-spacing: .5px; font-size: 13px;"><div class="card rounded-0 bg-faded p-1"><div class="row no-gutters">
<!--- header ----->
<div class="col-12 p-1"><div class="card rounded-0 px-2 py-1">
<div class="justify-content-between">
<span class="text-primary" style="font-size: 18px; letter-spacing: 1.5px;">
Yell0w_au
</span><span class="text-muted my-auto" style="letter-spacing: 1px;">
01/11 • Yellow • Artist
</span>
</div>
</div></div>
<!--- avatar ----->
<div class="col-md-4 p-1"><div class="card rounded-0 p-1" style="height: 180px;"><div class="card rounded-0 border-0 h-100" style="
background: url(https://cdn.discordapp.com/attachments/1095141464155095162/1095141651447558244/587E7F57-5E18-46F0-8EA0-C817B252A06F.jpeg);
background-size: cover;
background-position: center;">
</div></div></div>
<!--- about ----->
<div class="col-md-8 p-1"><div class="card rounded-0 px-2 py-1" style="height: 180px; overflow: auto;">
<div class="justify-content-between">
<span class="text-primary" style="font-size: 16px; letter-spacing: 1.5px; font-variant: small-caps;">
me
</span>
<i class="fas fa-star text-primary my-auto"></i>
</div>
<p>If you see this hellow! This is Yellow ;> <br>There is nothing interesting about myself other than the fact that I like yellow and am INTJ-T. <br>Despite being an artist, I absolutely hate drawing so I throw money at fellow talented homo sapiens to draw for me ily.(。ˇ ⊖ˇ)♡</p>
<p></p>
</div></div>
<!--- middle image ----->
<div class="col-md-12 p-1"><div class="card rounded-0 p-1" style="height: 55px;"><div class="card rounded-0 border-0 h-100" style="
background: url(https://cdn.discordapp.com/attachments/1095141464155095162/1095142883658567700/B20F1B37-5D22-426F-AE80-4BEAB7D240A6.jpeg);
background-size: cover;
background-position: center;">
</div></div></div>
<!--- important ----->
<div class="col-md-6 p-1"><div class="card rounded-0 px-2 py-1" style="height: 130px; overflow: auto;">
<div class="justify-content-between">
<span class="text-primary" style="font-size: 16px; letter-spacing: 1.5px; font-variant: small-caps;">
Important!
</span>
<i class="fas fa-comment-exclamation text-primary my-auto"></i>
</div>
<ul class="fa-ul ml-2">
<li class="mb-1"><i class="far fa-angle-right text-muted"></i>
Mostly OC art
</li>
<li class="mb-1"><i class="far fa-angle-right text-muted"></i>
Currently working on an OC project called "Life Letters"
</li>
</ul>
<p></p>
</div></div>
<!--- art status ----->
<div class="col-md-6 p-1"><div class="card rounded-0 px-2 py-1" style="height: 130px; overflow: auto;">
<div class="justify-content-between">
<span class="text-primary" style="font-size: 16px; letter-spacing: 1.5px; font-variant: small-caps;">
Art Status
</span>
<i class="fas fa-pencil-alt text-primary my-auto"></i>
</div>
<!--- item --->
<div class="justify-content-between"><span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-dollar-sign"></i> commissions
</span><span class="text-danger">
CLOSED
</span></div><hr class="w-100" style="margin-top: 1.5px; margin-bottom: 1.5px;">
<!--- item --->
<div class="justify-content-between"><span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-exchange"></i> art trades
</span><span class="text-danger">
CLOSED
</span></div><hr class="w-100" style="margin-top: 1.5px; margin-bottom: 1.5px;">
<!--- item --->
<div class="justify-content-between"><span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-gift"></i> requests
</span><span class="text-danger">
CLOSED
</span></div><hr class="w-100" style="margin-top: 1.5px; margin-bottom: 1.5px;">
<!--- art links --->
<div class="justify-content-around mt-auto text-muted">
<a href="link here">
comm info
</a>
•
<a href="link here">
T.O.S
</a>
•
<a href="link here">
to-do
</a>
</div>
</div></div>
<!--- social media ----->
<div class="col-12 p-1"><div class="card rounded-0 px-2 py-1">
<div class="text-center">
<span class="text-muted">
<a class="fab fa-twitter tooltipster" title="twitter"
href="https://twitter.com/yell0w_au"></a>
.
<a class="fab fa-instagram tooltipster" title="instagram"
href="https://www.instagram.com/yell0w_au/"></a>
.
<span class="fab fa-discord tooltipster text-primary" title="1Yell0w#4703"></span>
</span>
</div>
</div></div>
<!--- OC showcase ----->
<div class="col-md-12 p-1">
<div class="card rounded-0 px-2 py-1">
<div class="m-1" style="overflow-x:auto; opacity:0.8">
<div class="d-flex justify-content-center">
<!-- CHRACTER ONE -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/20286996?1676947331);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="https://toyhou.se/20286996.yellow" title="yellow"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
<div class="text-center" style="background-color: #fffb5e; color: #3d3232; border-right: solid 6px;border-left: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-star"></i>
</div>
</div>
<!-- CHRACTER TWO -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/20286996?1676947331);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="https://toyhou.se/20286996.yellow" title="yellow"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
<div class="text-center" style="background-color: #c65858; color: #fff; border-right: solid 6px;border-left: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-star"></i>
</div>
</div>
<!-- CHRACTER THREE -->
<div class="card border-0 rounded-0 mr-1 my-1"
style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/20286996?1676947331);
background-position:center top; background-size:cover; border:0px; height:150px; min-width:150px">
<a href="https://toyhou.se/20286996.yellow" title="yellow"
class="btn btn-outline-primary mx-auto w-100 h-100 border-0 rounded-0 tooltipster" style="opacity: 0.4; mix-blend-mode:screen"></a>
<div class="text-center" style="background-color: #58c663; color: #fff; border-right: solid 6px;border-left: solid 6px; border-color: rgba(255,255,255, .3);">
<!-- FA ICON == Replace "wheat" with another icon name -->
<i class="fal fa-star"></i>
</div>
</div>
<!-- add more characters above -->
</div>
</div>
</div>
</div>
<!--- social media ----->
<div class="col-12 p-1"><div class="card rounded-0 px-2 py-1">
<div class="text-right">
<!--- credit -- pls don't remove (pleading emoji) ----->
<a class="far fa-code my-auto small"
href="https://toyhou.se/6662994.-user-howdy"></a>
</div>
</div></div>
</div></div></div>
<div class="mx-md-0 mx-1 col-md-auto col">
<a data-toggle="collapse" href="#secrets">
<img src="https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWMyZWEyMzFhMzFhN2QzNjViYmNkZTY0ZTJmOTI2YjMzZGM3YWIxMCZjdD1z/ZcovFpSReloY6eYY2Z/giphy.gif" class="btn btn-outline-transparent p-0 tooltipster" title="🫣🫣🫣"
style="max-width:17%; position:fixed; bottom:5px; right:5px; z-index:3;" > </a>
</div>
</div>
<div class="collapse fade" style="position:absolute; top:0; left:0; right:0; bottom:0; z-index:101; background-color:rgba(0,0,0,0.75); color:#ffffff;" id="secrets">
<div class="card bg-transparent border-0 rounded-0 px-5" style="position:sticky; top:0; height:calc(100vh - 43.2px);">
<!--CONTENT-->
<div class="row no-gutters align-items-center" style="height:calc(100vh - 43.2px);">
<div class="col-md-12 py-3 text-center">
<!--text-->
<p style="position:relative; z-index:13;">"Letters and words"</p>
</div>
</div> <!--content end-->
<!--close button-->
<a class="btn" style="position:absolute; top:0; left:0; right:0; bottom:0; z-index:10;" data-toggle="collapse"
href="#secrets"></a>
</div>
</div>