<!--
[ MATCHA ] - F2U, USER PROFILE CODE
#001 CUSTOM PALETTE
theme : #bbd19b
light : #f0f7e4
mute : #ced9ba
text : #889c6b
background : #e5ebda
#002 TERMS
do not redistribute
do not remove credit
you may frankenstein with credit
you may edit however you'd like
#003 TIPS
turn off WYSIWYG and turn on Code Editor
{ ctrl + F, *search*, +, *Replace with*, All } to change colors
ask questions in 'https://toyhou.se/~forums/16.htmlcss-graphics'
-->
<div class="card border-0 bg-transparent rounded-0 mx-auto" style="max-width:800px;font-size:16px;color:#889c6b">
<div class="row no-gutters">
<!-- BANNER -->
<div class="col-lg-4">
<div class="card border-0 px-2 pb-2 pt-0" style="color:#f0f7e4;border-radius: 0px 0px 10px 10px;background-color:#bbd19b;height:500px">
<div class="card bg-transparent border-top-0 h-100 w-100 p-2" style="border-radius: 0px 0px 10px 10px;border-width:3px;border-color:#ced9ba">
<!-- ICON -->
<div class="card rounded-0 border-0 bg-transparent p-2">
<div class="card border-0 w-100" style="min-height:210px;background-image:url(
https://f2.toyhou.se/file/f2-toyhou-se/images/52817244_HIUBZpPy0pPC9Nd.png
);background-size:cover;background-position:center;background-color:rgba(0, 0, 0, 0);background-repeat:no-repeat"></div></div>
<hr class="my-2 mx-0" style="border-top: 3px solid #ced9ba">
<!-- STATUS -->
<p class="px-2 pt-2 pb-0 font-weight-bold font-italic px-2 text-center" style="font-family:georgia">
quote / status <br> <i class="fa-duotone fa-megaphone"></i>
</p>
<hr class="mb-2 mt-0 mx-0" style="border-top: 3px solid #ced9ba">
<!-- PROFILE -->
<p class="text-right px-2" style="line-height:30px">
<span class="pull-left text-uppercase" style="opacity:.8;font-family:courier new"><i class="fa-light fa-pen-swirl fa-fw"></i> name</span>
name
<br><span class="pull-left text-uppercase" style="opacity:.8;font-family:courier new"><i class="fa-light fa-comment fa-fw"></i> pronouns</span>
pro/nouns
<br><span class="pull-left text-uppercase" style="opacity:.8;font-family:courier new"><i class="fa-regular fa-calendar fa-fw"></i> age</span>
age
</p>
<hr class="my-2 mx-0" style="border-top: 3px solid #ced9ba">
<!-- SOCIALS -->
<div class="py-auto row no-gutters text-center">
<div class="col-auto mx-auto">
<a class="btn justify-content-center align-items-center bg-transparent" style="box-shadow:none;border-color:#f0f7e4;border-width:2px;color:#f0f7e4;height:35px;width:35px;border-radius:50%" href="
INSTAGRAM_LINK
"><i class="fa-brands fa-instagram"></i>
</div>
<div class="col-auto mx-auto">
<a class="btn justify-content-center align-items-center" style="box-shadow:none;border-color:#f0f7e4;border-width:2px;color:#f0f7e4;height:35px;width:35px;border-radius:50%" href="
TWITTER_LINK
"><i class="fa-brands fa-twitter"></i>
</div>
<div class="col-auto mx-auto">
<a class="btn justify-content-center align-items-center" style="box-shadow:none;border-color:#f0f7e4;border-width:2px;color:#f0f7e4;height:35px;width:35px;border-radius:50%" href="
TUMBLR_LINK
"><i class="fa-brands fa-tumblr"></i>
</div>
<div class="col-auto mx-auto">
<a class="btn justify-content-center align-items-center" style="box-shadow:none;border-color:#f0f7e4;border-width:2px;color:#f0f7e4;height:35px;width:35px;border-radius:50%" href="
DEVIANTART_LINK
"><i class="fa-brands fa-deviantart"></i>
</div>
<div class="col-auto mx-auto">
<a class="btn justify-content-center align-items-center tooltipster" style="bacbox-shadow:none;border-color:#f0f7e4;border-width:2px;color:#f0f7e4;height:35px;width:35px;border-radius:50%" title="
DISCORD_USER
" href="
DISCORD_LINK
"><i class="fa-brands fa-discord"></i>
</div>
</div>
</div>
</div>
</div>
<!-- CONTENT -->
<div class="col-lg-8">
<div class="card border-0 py-3" style="min-height:500px">
<div class="card border-0 h-100 w-100" style="border-radius: 0px 10px 10px 0px;background-color:#e5ebda">
<!-- CAROUSEL -->
<div class="carousel slide h-100 w-100" id="profileSlides" data-ride="false" data-pause="true">
<a class="carousel-control-next" href="#profileSlides" data-slide="next" style="font-size:30px;color:#bbd19b;z-index:2"><i class="fa-regular fa-chevron-right"></i></a>
<div class="carousel-inner">
<!-- SLIDE ONE -->
<div class="carousel-item active p-3">
<!-- HEADER -->
<div class="card rounded-0 border-0 w-100 mb-2" style="background-color:#ced9ba">
<!-- USERNAME -->
<p class="p-2 mx-2 text-center text-uppercase font-italic font-weight-bold" style="letter-spacing:3px;font-family:georgia;font-size:40px;color:#f0f7e4">
username
</p>
<hr class="m-0" style="border-top: 5px solid #bbd19b">
<hr class="my-2 mx-0" style="border-top: 10px solid #f0f7e4">
</div>
<!-- DESCRIPTION -->
<div class="col-11 overflow-auto p-2" style="height:180px">
<p>write about yourself ,, this scrolls !!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus facilisis elit a viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut lacinia, justo in venenatis sagittis, mi magna pellentesque diam, id dignissim enim odio id leo.
</p>
</div>
<hr class="my-2 mx-0" style="border-top: 3px solid #ced9ba">
<!-- PREFERENCE -->
<div class="row no-gutters">
<div class="col-lg-6 p-1">
<div class="card border-0 rounded-0 p-2 overflow-hidden" style="background-color:#f0f7e4;height:120px">
<ul class="fa-ul">
<li class="my-2"><span class="fa-li"><i class="fa-light fa-heart" style="color:#bbd19b;"></i></span><span>
likes
</span></li><li class="mt-2"><span class="fa-li"><i class="fa-light fa-heart" style="color:#bbd19b;"></i></span><span>
likes
</span></li><li class="mt-2"><span class="fa-li"><i class="fa-light fa-heart" style="color:#bbd19b;"></i></span><span>
likes
</span></li></ul>
</div>
</div>
<div class="col-lg-6 p-1">
<div class="card border-0 rounded-0 p-2 overflow-hidden" style="background-color:#f0f7e4;height:120px">
<ul class="fa-ul">
<li class="my-2"><span class="fa-li"><i class="fa-light fa-heart" style="color:#bbd19b;"></i></span><span>
dislikes
</span></li><li class="mt-2"><span class="fa-li"><i class="fa-light fa-heart" style="color:#bbd19b;"></i></span><span>
dislikes
</span></li><li class="mt-2"><span class="fa-li"><i class="fa-light fa-heart" style="color:#bbd19b;"></i></span><span>
dislikes
</span></li></ul>
</div>
</div>
</div>
</div>
<!-- SLIDE TW0 -->
<div class="carousel-item p-2">
<!-- FOLDERS -->
<div class="row no-gutters font-weight-bold font-uppercase text-center" style="font-family:georgia;font-size:20px;letter-spacing:2px">
<div class="col-4 p-1 mb-2">
<a class="card border-0 rounded-0 p-3 justify-content-center align-items-center" style="height:100px;background-color:#f0f7e4;color:#889c6b" href="
FOLDER_LINK
"><span style="position:absolute;top:10px;bottom:10px;opacity:.3;font-size:50px;color:#bbd19b"><i class="fa-solid fa-folder"></i></span><span style="z-index:2">
folder name
</span></a>
</div>
<div class="col-4 p-1 mb-2">
<a class="card border-0 rounded-0 p-3 justify-content-center align-items-center" style="height:100px;background-color:#f0f7e4;color:#889c6b" href="
FOLDER_LINK
"><span style="position:absolute;top:10px;bottom:10px;opacity:.3;font-size:50px;color:#bbd19b"><i class="fa-solid fa-folder"></i></span><span style="z-index:2">
folder name
</span></a>
</div>
<div class="col-4 p-1 mb-2">
<a class="card border-0 rounded-0 p-3 justify-content-center align-items-center" style="height:100px;background-color:#f0f7e4;color:#889c6b" href="
FOLDER_LINK
"><span style="position:absolute;top:10px;bottom:10px;opacity:.3;font-size:50px;color:#bbd19b"><i class="fa-solid fa-folder"></i></span><span style="z-index:2">
folder name
</span></a>
</div>
</div>
<!-- CHARACTERS / FRIENDS -->
<div class="col-11 mb-2" style="height:180px">
<div class="row">
<a href="
CHARACTER_LINK
"><img class="rounded-circle p-2 tooltipster" style="height:90px;width:90px" title="
CHARACTER_NAME
" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/50712452_gfGjrckEu7vbGfv.png
"></a>
<div class="mt-4" style="width:0;height:0;border-top: 12px solid transparent;border-right: 25px solid #ced9ba;border-bottom: 12px solid transparent"></div>
<div class="mb-2 card border-0 rounded-0 p-2 py-3 text-center flex-fill justify-content-center align-items-center" style="background-color:#ced9ba;height:90px">
quote or desc.
</div>
</div>
<div class="row">
<a href="
CHARACTER_LINK
"><img class="rounded-circle p-2 tooltipster" style="height:90px;width:90px" title="
CHARACTER_NAME
" src="
https://f2.toyhou.se/file/f2-toyhou-se/images/50712452_gfGjrckEu7vbGfv.png
"></a>
<div class="mt-4" style="width:0;height:0;border-top: 12px solid transparent;border-right: 25px solid #ced9ba;border-bottom: 12px solid transparent"></div>
<div class="card border-0 rounded-0 p-2 py-3 text-center flex-fill justify-content-center align-items-center" style="background-color:#ced9ba;height:90px">
keep them short !!
</div>
</div>
</div>
<!-- COMMISSIONS -->
<div class="row no-gutters">
<div class="col-lg-7 p-2" style="font-size:20px">
<p class="text-uppercase text-right m-0 pt-1">
<span class="pull-left" style="font-family:courier new;color:#bbd19b"><i class="fa-light fa-sack-dollar"></i> commissions</span>
open
</p>
<hr class="my-2 mx-0" style="border-top: 3px solid #ced9ba">
<p class="text-uppercase text-right m-0">
<span class="pull-left" style="font-family:courier new;color:#bbd19b"><i class="fa-light fa-arrow-right-arrow-left"></i> trades</span>
closed
</p>
<hr class="my-2 mx-0" style="border-top: 3px solid #ced9ba">
<p class="text-uppercase text-right m-0">
<span class="pull-left" style="font-family:courier new;color:#bbd19b"><i class="fa-light fa-paintbrush-pencil"></i> requests</span>
maybe
</p>
</div>
<div class="col-lg-5 p-2 text-center text-weight-bold" style="font-family:georgia">
<a class="card border-0 rounded-0 p-2 mb-2" style="background-color:#bbd19b;color:#f0f7e4" href="PRICES_LINK">prices</a>
<a class="card border-0 rounded-0 p-2 mb-2" style="background-color:#bbd19b;color:#f0f7e4" href="TERMS_LINK">terms</a>
<a class="card border-0 rounded-0 p-2" style="background-color:#bbd19b;color:#f0f7e4" href="EXAMPLES_LINK">examples</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT : DO NOT REMOVE -->
<div class="col-12 mt-3 mb-n1 order-lg-8 text-center"><a href="https://toyhou.se/19029450." class="tooltipster" title="code by shimmerica" style="color:#bbd19b"><i class="fa-light fa-martini-glass-citrus"></i></a></div>
<!-- END [ MATCHA ] -->
