Stor8

<!-- ✦✦ 【F2U】LOVE IT by diadem

❥ Code Terms of Use: https://toyhou.se/32638528.
❥ Troubleshoot Server: https://discord.gg/QdyvxFjuhe

=============== ✧✧  Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~

୨୧ BG: #F9E0FB | #F5BEEA
୨୧ Text: #760f43
୨୧ Opt accent text: #b21062
୨୧ Borders: #D73D8C | #000
୨୧ Accent headers: #EC49B5
୨୧ Window accents: #F4CA7B | #ffb0d8 | #871750
୨୧ Fontmeme/extras: #eb4fcf
୨୧ HRs: #a7125d
୨୧ Links: #ff0081

୨୧ Font: monospace  / courier
୨୧ https://fontmeme.com/fonts/milven-font/
✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
                     background container
        remove background image if just want solid colour
              background container itself CAN be removed
------------------------------------------------------------->
<div class="col p-3 " style="
background-color:#F9E0FB;
background-image:url(IMG_LINK);
background-size:auto;">

<!----------------- start of main area row -------------->
<div class="row no-gutters justify-content-center" 
style="column-gap:10px">
<!------------------------------------------------------------
                        MC / Column 1
------------------------------------------------------------->
<div class="col-md-2 mb-1">
<!-------------------- your pfp or img ------------->
<div class="col p-1 text-center mb-1" style="border:3px solid #D73D8C; background:#D73D8C; position:sticky; top:0;">
    <img src="IMG_LINK" style="border:3px solid #000">
<!----------------- whats on your mind? ----------->
<div style="position:relative; z-index:01; margin-left:15px; margin-top:-5px; margin-bottom:-9px;">
    <div class="card rounded-0 p-2 border-0 container" style="width:15px; border-width:2px 2px 0 0; background:#F5BEEA; transform:rotate(315deg);"></div>
</div>
<div class="card p-2 mb-2 border-0" style="background:#F5BEEA; color:#eb4fcf; font-family:courier; font-size:10px">
    Should be a short quote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
<!---------------- end of MC column 1 --------------->
</div>
</div>
<!------------------------------------------------------------
                        MC / Column 2
------------------------------------------------------------->
<div class="col-md-5">

<!-------------------- [ C2 / about you --------------->
<div class="col mt-1" style="background:#EC49B5">
<div class="row">
    <div class="col pl-1" style="color:#fff; font-family:courier">
        about.txt
    </div>
    <div class="col-auto my-auto pr-2">
        <i class="fa-solid fa-minus fa-xs" style="color:#F4CA7B"></i>
        <i class="far fa-square fa-xs" style="color:#ffb0d8"></i>
        <i class="fa-solid fa-x fa-xs" style="color:#871750"></i>
    </div>
</div>
</div>
<!----------------- about you cont --------------->
<div class="col mb-2 p-1" style="background:#F9E0FB">
<div class="col w-100 h-100 p-2" style="border:1px dashed #D73D8C">

<!------- name png ---------->
<div class="col-auto text-center">
    <img src="https://fontmeme.com/permalink/260110/d80d5667.png">
</div>

<!--------- age / prns / timezone -------->
<div class="col-auto text-center" style="color:#eb4fcf; font-family:courier; font-size:12px">
age ❥ pro/noun ❥ cc GMT+0    
</div>
    
<!---- lil pagedoll ] delete if not wanted -------->
<img src="IMG_LINK" 
class="float-sm-left d-block mx-1 mb-1 p-2 mr-1 hidden-sm-down hidden-md-down" 
style="max-height:290px;" 
alt="alt_text">
<!----------- abt paragraph ] doesnt scroll --------->
<p class="text-justify p-1 mb-3" style="color:#760f43; font-family:monospace; font-size:10px">
    Doesn't scroll but the more you type, it frames around the pagedoll if you have one. 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. 
<br><br>
    <span style="color:#b21062">Lorem ipsum dolor sit amet,</span> 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>

<!---------- comms / trades / requests ----------------->
<div class="col p-2 bg-transparent mb-1" style="border-radius:10px; border-left:2px solid #D73D8C; border-right:2px solid #D73D8C">

<!---- comms ---->
<div class="col row no-gutters p-0 justify-content-between mb-0">
    <div class="col-auto p-1 mb-0" style="color:#760f43; font-family:courier; font-size:12px">
        commissions
    </div>
    <div class="col-auto p-1 mb-0" style="color:#760f43; font-family:courier; font-size:12px; font-style:italic">
        closed
    </div>
</div>
<div class="col p-0 my-auto mb-1">
    <hr class="my-auto" style="border-style:solid; border-color:#a7125d">
</div>

<!---- trades ---->
<div class="col row no-gutters p-0 justify-content-between mb-0">
    <div class="col-auto p-1 mb-0" style="color:#760f43; font-family:courier; font-size:12px">
        trades
    </div>
    <div class="col-auto p-1 mb-0" style="color:#760f43; font-family:courier; font-size:12px; font-style:italic">
        closed
    </div>
</div>
<div class="col p-0 my-auto mb-1">
    <hr class="my-auto" style="border-style:solid; border-color:#a7125d">
</div>

<!---- requests ---->
<div class="col row no-gutters p-0 justify-content-between mb-0">
    <div class="col-auto p-1 mb-0" style="color:#760f43; font-family:courier; font-size:12px">
        requests
    </div>
    <div class="col-auto p-1 mb-0" style="color:#760f43; font-family:courier; font-size:12px; font-style:italic">
        closed
    </div>
</div>
<!---------- end of C / T / R area ---------------->
</div>

<!-------[ Links -------------------------------------->
<div class="col row no-gutters justify-content-between" style="column-gap:10px">

<!----- 01 || CARRD ---->
<div class="col-auto">
    <a href="CARRD_LINK" style="color:#ff0081">
        <i class="fas fa-id-card tooltipster" title="CARRD/RANDOM LINK" data-toggle="tooltip"></i>
    </a>
</div>

<!----- 02 || DEVIANTART ---->
<div class="col-auto">
    <a href="DA_LINK" style="color:#ff0081">
        <i class="fab fa-deviantart tooltipster" title="DA" data-toggle="tooltip"></i>
    </a>
</div>

<!----- 03 || BLUESKY ---->
<div class="col-auto">
    <a href="DA_LINK" style="color:#ff0081">
        <i class="fab fa-bluesky tooltipster" title="BLUESKY" data-toggle="tooltip"></i>
    </a>
</div>

<!----- 04 || INSTAGRAM ---->
<div class="col-auto">
    <a href="INSTA_LINK" style="color:#ff0081">
        <i class="fab fa-instagram tooltipster" title="INSTAGRAM" data-toggle="tooltip"></i>
    </a>
</div>

<!----- 05 || TUMBLR ---->
<div class="col-auto">
    <a href="TUMBLR_LINK" style="color:#ff0081">
        <i class="fab fa-tumblr tooltipster" title="TUMBLR" data-toggle="tooltip"></i>
    </a>
</div>

<!----- 06 || DISCORD USERNAME ---->
<div class="col-auto" style="color:#ff0081">
        <i class="fab fa-discord tooltipster" title="Discord Username" data-toggle="tooltip"></i>
</div>
<!----------------------- end of abt you -------------->
</div>
</div>
</div>

<!-------------------- [ C2 / BYF / DNI --------------->
<div class="col mt-1" style="background:#EC49B5">
<div class="row">
    <div class="col pl-1" style="color:#fff; font-family:courier">
        byf.txt
    </div>
    <div class="col-auto my-auto pr-2">
        <i class="fa-solid fa-minus fa-xs" style="color:#F4CA7B"></i>
        <i class="far fa-square fa-xs" style="color:#ffb0d8"></i>
        <i class="fa-solid fa-x fa-xs" style="color:#871750"></i>
    </div>
</div>
</div>

<!----------------- byf/dni cont --------------->
<div class="col mb-2 p-1" style="background:#F9E0FB">
<div class="col w-100 h-100 p-2" style="border:1px dashed #D73D8C">

<!------------ BYF ------->
<h3 class="text-left mb-1" style="color:#eb4fcf; font-family:courier">
    <i class="fa-solid fa-heart fa-flip" style="animation-duration:5s"></i> Before you follow --
</h3>

<div class="col p-1 text-justify pl-2 mb-1" style="color:#760f43; font-family:monospace; font-size:9px; border-left:3px solid #000">
    List some warnings, some basic boundaries, etc. Maybe lol. Doesn't scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 
</div>

<ul class="text-left" style="color:#760f43; font-family:courier; font-size:10px">

<li>Thing (not) censored</li>
<li>Thing (not) censored</li>
<li>Thing (not) censored</li>
<li>Thing (not) censored</li>

<!------- add more above this line --------->
</ul>


<!------------ BYF ------->
<h3 class="text-right mb-1" style="color:#eb4fcf; font-family:courier">
     -- Do <u>NOT</u> interact <i class="fa-solid fa-heart-crack fa-flip" style="animation-duration:5s"></i> 
</h3>

<ul class="text-right mb-1" style="color:#760f43; font-family:courier; font-size:10px; list-style-position:inside; ">

<li>Basic dni criteria</li>
<li>content content</li>
<li>content content content</li>
<li>content content content content</li>
<!------- add more above this line --------->
</ul>

<div class="col p-1 text-justify pr-2 mb-1" style="color:#760f43; font-family:monospace; font-size:9px; border-right:3px solid #000;">
    Blurb here. You may want to go into detail? Dni people you blocked? Doesn't scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</div>
<!----------------- end of byf/dni ---------->
</div>
</div>

<!---------------- [ C3 / Friend or Chara --------------->
<div class="col mt-1" style="background:#EC49B5">
<div class="row">
    <div class="col pl-1" style="color:#fff; font-family:courier">
        lovelies.txt
    </div>
    <div class="col-auto my-auto pr-2">
        <i class="fa-solid fa-minus fa-xs" style="color:#F4CA7B"></i>
        <i class="far fa-square fa-xs" style="color:#ffb0d8"></i>
        <i class="fa-solid fa-x fa-xs" style="color:#871750"></i>
    </div>
</div>
</div>

<!----------------- F or C cont --------------->
<div class="col mb-2 p-1" style="background:#F9E0FB">
<div class="col w-100 h-100 p-2" style="border:1px dashed #D73D8C">

<!-------- small blurb ------------->
<div class="col p-1 text-justify mb-1" style="color:#760f43; font-family:courier; font-size:9px">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. 
</div>
<div class="col p-0 my-auto mb-1">
    <hr class="my-auto" style="border-style:dashed; border-color:#a7125d">
</div>

<div class="row no-gutters justify-content-center mt-2" style="column-gap:5px">

<!------------------- Friend/Char One ----------->
<a href="" target="_blank" class="col-3 tooltipster" title="Friend Or Character" data-toggle="tooltip" style="height:100px;
background-image:url(IMG_LINK);
background-size:cover;
background-position:center center;
border:2px solid #000">
</a>

<!------------------- Friend/Char Two ----------->
<a href="" target="_blank" class="col-3 tooltipster" title="Friend Or Character" data-toggle="tooltip" style="height:100px;
background-image:url(IMG_LINK);
background-size:cover;
background-position:center center;
border:2px solid #000">
</a>

<!------------------- Friend/Char Three ----------->
<a href="" target="_blank" class="col-3 tooltipster" title="Friend Or Character" data-toggle="tooltip" style="height:100px;
background-image:url(IMG_LINK);
background-size:cover;
background-position:center center;
border:2px solid #000">
</a>

<!------------------- Friend/Char Four ----------->
<a href="" target="_blank" class="col tooltipster" title="Friend Or Character" data-toggle="tooltip" style="height:100px;
background-image:url(IMG_LINK);
background-size:cover;
background-position:center center;
border:2px solid #000">
</a>

<!--------------- end of F or C ------------------->
</div>
<div class="col p-0 my-auto mb-1">
    <hr class="my-2" style="border-style:dashed; border-color:#a7125d">
</div>
<!------------------------------------------------------------
                        Credits
                    [ do not remove ]
------------------------------------------------------------->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" style="text-decoration:none; color:#ff0081; font-size:9px; font-family:monospace">✦✦✦</a></p>
<!--------- end of Lovelies ------------------------------->
</div>
</div>

<!---------------- [ C4 / fave song lol --------------->
<div class="col mt-1" style="background:#EC49B5">
<div class="row">
    <div class="col pl-1" style="color:#fff; font-family:courier">
        banger.mp3
    </div>
    <div class="col-auto my-auto pr-2">
        <i class="fa-solid fa-minus fa-xs" style="color:#F4CA7B"></i>
        <i class="far fa-square fa-xs" style="color:#ffb0d8"></i>
        <i class="fa-solid fa-x fa-xs" style="color:#871750"></i>
    </div>
</div>
</div>

<!----------------- fave song cont --------------->
<div class="col mb-2 p-1" style="background:#F9E0FB">
<div class="col w-100 h-100 p-1" style="border:1px dashed #D73D8C">

<div class="row no-gutters p-0 col-auto mb-0">

<div class="col-auto p-1" style="font-size:16px">
<iframe class="flex-fill" style="height:1em;width:1em;opacity:0;position:absolute;margin-top:6px;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen

src="https://www.youtube.com/embed/VIDEOIDHERE"></iframe>

<i class="far fa-circle-play" style="color:#760f43"></i>
</div>
<div class="col my-auto p-0">
<hr class="my-1" style="border-color:#D73D8C; border-style:dashed">
</div>

<div class="col-auto p-1 my-auto" style="font-size:10px; font-family:monospace; color:#760f43">
song name (artist)
</div>
<!--------------- end of fave song --------------->
</div>
</div>
<!------------- end of main area row, don't touch --------->
</div>
</div>