<!--- twt carrd by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
accent color: #9EC1E1
big text, light icons: #ffffff
text, dark icons: #000000
background: white
border: black
--->
<div class="container p-0" style="max-width:400px; font-size:12px; border:3px solid black; font-weight:380; color:#000000">
<!--- search bar + icons --->
<div class="card rounded-0 p-1 border-left-0 border-top-0 border-right-0" style="height:40px; background:#9EC1E1; border:3px solid black;">
<div class="row no-gutters my-auto">
<!--- search, scrolls horizontally --->
<div class="col-8">
<div class="card border-0 rounded-0" style="height:25px; background:white">
<a href="URLLINK" class="text-reset my-auto">
<p style="white-space:nowrap; overflow-y:auto;"><i class="fa-solid fa-magnifying-glass fa-sm px-1"></i>https://toyhou.se/username</p>
</a>
</div>
</div>
<!--- icons --->
<div class="col-4">
<div class="card h-100 rounded-0 border-0" style="background:transparent;">
<div class="row no-gutters">
<div class="col-6 mt-1">
<p class="text-center">
<i class="fa-solid fa-arrow-left fa-lg pr-2"></i>
<i class="fa-solid fa-arrow-right fa-lg"></i>
</p>
</div>
<div class="col-6 mt-1">
<p class="text-center">
<i class="fa-solid fa-arrow-rotate-right fa-lg pr-2"></i>
<i class="fa-solid fa-xmark fa-lg"></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- main stuff --->
<div class="card p-1 rounded-0 border-0" style="background:white;">
<div class="row no-gutters">
<!--- image --->
<div class="col-md-5 pb-1">
<div class="mx-auto" style="height:150px; width:150px; border:3px solid black;">
<img src="IMGLINK" class="w-100 h-100" style="object-fit:cover;">
</div>
</div>
<!--- name + text --->
<div class="col-md-7">
<h1 class="p-1 font-weight-bold" style="background:#9EC1E1; color:#ffffff"><i class="fa-regular fa-star px-1"></i>NAME</h1>
<div class="card rounded-0 border-0 overflow-auto" style="height:110px; background:transparent;">
<p>Scrolls after 6 lines. 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.</p>
</div>
</div>
</div>
<!--- yes + no --->
<div class="row pt-1">
<!--- yes --->
<div class="col-6">
<h1 class="p-1 font-weight-bold" style="background:#9EC1E1; color:#ffffff"><i class="fa-regular fa-heart px-1"></i>YEAH<i>!!</i></h1>
<ul class="list-unstyled">
<li><i class="fa-solid fa-heart fa-lg px-1" style="color:#9EC1E1;"></i>content</li>
<li><i class="fa-solid fa-heart fa-lg px-1" style="color:#9EC1E1;"></i>content</li>
<li><i class="fa-solid fa-heart fa-lg px-1" style="color:#9EC1E1;"></i>content</li>
</ul>
</div>
<!--- no --->
<div class="col-6">
<h1 class="p-1 font-weight-bold" style="background:#9EC1E1; color:#ffffff"><i class="fa-regular fa-heart-crack px-1"></i>NO<i>!!</i></h1>
<ul class="list-unstyled">
<li><i class="fa-solid fa-heart-crack fa-lg px-1" style="color:#9EC1E1;"></i>content</li>
<li><i class="fa-solid fa-heart-crack fa-lg px-1" style="color:#9EC1E1;"></i>content</li>
<li><i class="fa-solid fa-heart-crack fa-lg px-1" style="color:#9EC1E1;"></i>content</li>
</ul>
</div>
</div>
<!--- art status --->
<h1 class="p-1 font-weight-bold" style="background:#9EC1E1; color:#ffffff"><i class="fa-regular fa-palette px-1"></i>ART STATUS</h1>
<!--- commissions --->
<div class="justify-content-between">
<p class="font-weight-bold m-0">COMMISSIONS</p>
<a href="URLLINK" class="font-weight-bold font-italic" style="color:#000000"><u>open!!</u></a>
</div>
<!--- art trades --->
<div class="justify-content-between">
<p class="font-weight-bold m-0">ART TRADES</p>
<p>closed</p>
</div>
<!--- requests --->
<div class="justify-content-between">
<p class="font-weight-bold m-0">REQUESTS</p>
<p>closed</p>
</div>
</div>
<div class="card rounded-0 p-1 border-left-0 border-bottom-0 border-right-0" style="height:30px; background:#9EC1E1; border:3px solid black;">
<div class="justify-content-center">
<a href="URLLINK" class="px-1" style="color:#000000;"><i class="fa-brands fa-instagram font-weight-bold fa-xl fa-fw"></i></a>
<a href="URLLINK" class="px-1" style="color:#000000;"><i class="fa-brands fa-tumblr fa-xl fa-fw"></i></a>
<a href="URLLINK" class="px-1" style="color:#000000;"><i class="fa-brands fa-twitter fa-xl fa-fw"></i></a>
<a href="URLLINK" class="px-1" style="color:#000000;"><i class="fa-brands fa-discord fa-xl fa-fw"></i></a>
</div>
</div>
</div>
<!--- credit, do not remove --->
<div class="col-12 p-0 mx-auto text-right" style="width:400px;">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird" style="color:#9EC1E1"><i class="fas fa-code fa-xs"></i></a>
</div>