<div class="card p-3 mb-2 bg-faded mx-auto" style="border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;">
<!-------[ BACKGROUND ]------------>
<div class="card p-2">
<div class="p-3 rounded text-center" style="height:300px; background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url(https://images.unsplash.com/photo-1471624257787-362e0c864ab2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);">
<!-------[ USER PROFILE IMG :) ]------------>
<div class="card border-0 mx-auto" style="width:250px;height:285px;border-radius:200px 200px 10px 10px;background-size:cover;background-position:center;
background-image:url(URL HERE);
"></div>
</div>
<div class="row no-gutters align-items-center">
<div class="col"><hr style="border-width:1px;background:#60594e"></div>
<div><span class="fa-stack fa-2x">
<!-------[ the little tiny banner icon :D ]------------>
<i class="fa-duotone fa-bookmark fa-stack-2x" style="color:#c2ac83"></i>
<!-------[ you can change the icon using fa-awesome font :)) ]------------>
<i class="fa-light fa-swords text-white fa-stack-1x" ></i>
</span>
</div>
<div class="col"><hr style="border-width:1px;background:#60594e"></div>
</div>
<!-------[ MUSIC PLAYER ]------------>
<p align="center" style="font-size:16px;font-weight:600;color:#c2ac83">
MUSIC TITLE - ARTIST NAME
<!-------[ replace [ # ] with youtube video id (found after https://www.youtube.com/watch?v=) ]------------>
<iframe src="https://www.youtube.com/embed/#"
frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;"></iframe>
<!-------[ you can change the icon to fa-play / fa-compact-disc if you want ]------------>
<i class="fas fa-gramophone fa-lg"></i>
</p>
<!-------[ QUOTES ;D ]------------>
<p align="center" class="text-uppercase mb-3" style="font-size:15px;font-weight:700">
<i class="fa-solid fa-quote-left"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-solid fa-quote-right"></i></p>
<div><hr style="border-width:1px;background:#60594e"></div>
</div>
</div>
<!-------[ the first part of chess board ]------------>
<div align="center" class="row no-gutters">
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i> </div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-queen-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-king-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i></div>
</div>
<!-------[ second row,, ]------------>
<div align="center" class="row no-gutters">
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i> </div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
</div>
<!-------[ LEFT COLUMN ]------------>
<div class="row no-gutters">
<div class="col-md-6 row no-gutters">
<div class="card bg-faded rounded-0 col-12 p-2">
<div class="card col-12 p-3 h-100">
<p align="center" class="text-uppercase" style="font-size:16px;font-weight:700"><br>
<!-------[ little icon, use fa-awesome font to change icon! ]------------>
<i class="fa-solid fa-pen-nib" style="color:#c2ac83"></i><i class="fa-solid fa-signature"></i>
NAME <span style="color:#c2ac83">|</span>
AGE <span style="color:#c2ac83">|</span>
PRONOUNS <span style="color:#c2ac83">|</span>
TITLE
</p>
<div><hr style="border-width:1px;background:#60594e"></div>
<!-------[ INTRODUCTION :DD btw this box does not scroll! ]------------>
<p> <i class="fa-solid fa-envelope-open fa-rotate-90" style="color:#fffff"></i>
<span style="font-size:16px;font-weight:700;color:#c2ac83"> Say hi here </span>
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.</p>
<p> Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<div><hr style="border-width:1px;background:#60594e"></div>
<!-------[ SOCIAL MEDIA LINKS ]------------>
<p align="center"><b>
<a style="color:#c2ac83" href="LINK CARRD">
<i class="fa-regular fa-address-card fa-lg"></i></a> |
<a style="color:#c2ac83" href="LINK IG">
<i class="fa-brands fa-instagram fa-lg"></i></a> |
<a style="color:#c2ac83" href="LINK TWT">
<i class="fa-brands fa-twitter fa-lg"></i></a> |
<a style="color:#c2ac83" href="LINK YT">
<i class="fa-brands fa-youtube fa-lg"></i></a> |
<a style="color:#c2ac83" href="LINK DC">
<i class="fa-brands fa-discord fa-lg"></i></a>
</b></p>
<div>
<hr>
</div>
<!-------[ FEATURED you can feature friends or ur oc!! ]------------>
<div class="row no-gutters">
<!-------[ featured one ]------------>
<div class="col-lg-3 col-3 p-1 mb-2">
<a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7">
</a>
</div>
<!-------[ featured two ]------------>
<div class="col-lg-3 col-3 p-1 mb-2">
<a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7"></a></div>
<!-------[ featured three ]------------>
<div class="col-lg-3 col-3 p-1 mb-2">
<a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7"></a>
</div>
<!-------[ featured four ]------------>
<div class="col-lg-3 col-3 p-1 mb-2">
<a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7"></a>
</div>
</div>
</div>
</div>
</div>
<!-------[ RIGHT COLUMN ]------------>
<div class="col-md-6 row no-gutters">
<div class="card bg-faded rounded-0 col-12 p-2">
<div class="card col-12 p-3">
<div class="row no-gutters">
<!-------[ LINKS ]------------>
<div align="center" class="card rounded-0 p-3 col-4 mb-3">
<p class="text-uppercase" style="font-weight:700">
<a href="LINK_ADOPTFOLDER">
<i class="fa-solid fa-shop fa-lg" style="color:#c2ac83"></i></a>
<br> adopts </p>
</div>
<div align="center" class="card rounded-0 p-3 col-4 mb-3">
<p class="text-uppercase" style="font-weight:700">
<a href="LINK_COMMISSIONPAGE">
<i class="fa-solid fa-money-bills fa-lg" style="color:#c2ac83"></i></a>
<br> comms </p>
</div>
<div align="center" class="card rounded-0 p-3 col-4 mb-3">
<p class="text-uppercase" style="font-weight:700">
<a href="LINK_TOS">
<i class="fa-solid fa-list fa-lg" style="color:#c2ac83"></i></a>
<br> t.o.s </p>
</div>
</div>
<div class="row no-gutters">
<div class="col-6 row no-gutters">
<div class="col-12">
<div class=" card p-3 rounded-0">
<div class="d-flex justify-content-between">
<!-------[ ART STATUS ]------------>
<span> COMMISSION </span>
<!-------[ fa-check (open) fa-xmark (closed) ]------------>
<span> <i class="fa-solid fa-check"></i> </span>
</div>
</div>
</div>
<div class="col-12">
<div class="card p-3 rounded-0">
<div class="d-flex justify-content-between">
<span> ART TRADE </span>
<!-------[ fa-check (open) fa-xmark (closed) ]------------>
<span> <i class="fa-solid fa-xmark"></i> </span>
</div>
</div>
</div>
<div class="col-12">
<div class="card p-3 rounded-0 mb-3">
<div class="d-flex justify-content-between">
<span> REQUEST </span>
<!-------[ fa-check (open) fa-xmark (closed) ]------------>
<span> <i class="fa-solid fa-xmark"></i> </span>
</div>
</div>
</div>
</div>
<div class="col-6 row no-gutters">
<div class="col-12">
<div class="card p-2 rounded-0 mb-3">
<!-------[ smol MOODBOARD ]------------>
<div style="height:149px;background-size:cover; background-repeat:no-repeat; background-position:center;
background-image:url(https://images.unsplash.com/photo-1553434320-e9f5757140b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80);">
</div>
</div>
</div>
</div>
</div>
<!-------[ FOLDER LINKS ]------------>
<div align="center" class="card rounded-0 p-3">
<p class="text-uppercase">
<a href="LINK_here">
<i class="fa-brands fa-pagelines fa-lg fa-flip-horizontal" style="color:#c2ac83"></i></a>
I. FOLDER name Lorem ipsum dolor sit amet
</p>
</div>
<div align="center" class="card rounded-0 p-3">
<p class="text-uppercase">
<a href="LINK_here">
<i class="fa-brands fa-pagelines fa-lg fa-flip-horizontal" style="color:#c2ac83"></i></a>
II. FOLDER name Lorem ipsum dolor sit amet
</p>
</div>
<div align="center" class="card rounded-0 p-3 mb-2">
<p class="text-uppercase">
<a href="LINK_here">
<i class="fa-brands fa-pagelines fa-lg fa-flip-horizontal" style="color:#c2ac83"></i></a>
III. FOLDER name Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>
</div>
</div>
<!-------[ second part of the chess board ]------------>
<div align="center" class="row no-gutters">
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i> </div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
</div>
<!-------[ second row ]------------>
<div align="center" class="row no-gutters">
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i> </div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-queen-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-king-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
<div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
<div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i></div>
</div>
<div class="mb-2"></div>
<!-------[ bottom thingy BACKGROUND ]------------>
<div class="card p-2 mb-3" style="border-top-right-radius:0px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
<div class="p-3 rounded text-center" style="height:100px;background-size:cover;background-repeat:no-repeat; background-position:center;
background-image:url(https://images.unsplash.com/photo-1471624257787-362e0c864ab2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);">
<div class="p-4 card col mx-auto" style="font-weight:700">
<p>
<i class="fa-solid fa-quote-left"></i>
<!-------[ final quote :) or use it to say goodbye or smth ]------------>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fa-solid fa-quote-right"></i>
</p>
</div>
</div>
</div>
<!-------[ CREDIT!! dont delete :D ]------------>
<p align="center">
<a style="color:#FFFFFF" href="https://toyhou.se/Codesrollss">
<i class="fas fa-cat-space fa-lg faded"></i><i class="fas fa-apple-whole fa-lg fa-spin faded"></i>
</a>
</p>
<hr>
<!-------[ FIN ]------------>