<!--- poppy by onethird
thank you for using! rules are here: https://toyhou.se/~forums/16.htmlcss-graphics/241166.-onethird-s-f2u-codes-
accent: #e25bad
--->
<div class="container bg-fade p-1" style="max-width:800px; border-radius:10px; font-size:13px;">
<!--- 1st main column --->
<div class="row no-gutters">
<!--- main image --->
<div class="col-lg-4 p-1" style="height:400px;">
<div class="w-100 h-100">
<img src="IMGLINK" class="w-100 h-100 img-thumbnail" style="object-fit:cover; border-radius:15px;">
</div>
</div>
<!--- 2nd main column --->
<div class="col-lg-8 p-1" style="min-height:400px;">
<!--- text box --->
<div class="card px-1" style="max-height:230px; min-height:180px; background:transparent; border-radius:10px;">
<p class="font-weight-bold font-italic" style="letter-spacing:2px; font-size:35px; margin-top:-22px; text-shadow:2px 2px 2px #e25bad;">NAME~</p>
<p class="font-italic font-weight-bold text-muted" style="margin-top:-20px">age / prns / <i class="fa-light fa-sun pr-1" style="color:#e25bad;"></i>sign <i class="fa-light fa-moon pr-1" style="color:#e25bad;"></i>sign</p>
<!--- main text --->
<div class="card overflow-auto border-0" style="background:transparent; max-height:180px;">
<p>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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
<div class="row no-gutters pt-1">
<!--- status box --->
<div class="col-md-8 pt-1">
<div class="card" style="height:150px; border-radius:13px; border:1px solid #e25bad; background:transparent;">
<p class="font-weight-bold font-italic" style="letter-spacing:2px; font-size:35px; margin-top:-22px; text-shadow:2px 2px 2px #e25bad;">STATUS</p>
<div class="row no-gutters" style="height:60px; margin-top:-10px">
<!--- comissions --->
<div class="col-4 p-1">
<div class="card rounded-0 h-100 border-left-0 border-top-0 border-right-0" style="background:transparent;">
<p class="text-center font-weight-bold m-auto" style="text-shadow:2px 2px 2px #e25bad;">COMMS.</p>
<a href="#" class="text-center m-auto font-weight-bold font-italic" style="color:#e25bad">OPEN!</a>
</div>
</div>
<!--- art trades --->
<div class="col-4 p-1">
<div class="card h-100 border-top-0 border-left-0 border-right-0 rounded-0" style="background:transparent;">
<p class="text-center font-weight-bold m-auto" style="text-shadow:2px 2px 2px #e25bad;">ART TRADES</p>
<p class="text-center m-auto">closed</p>
</div>
</div>
<!--- art requests --->
<div class="col-4 p-1">
<div class="card h-100 border-right-0 border-top-0 border-left-0 rounded-0" style="background:transparent;">
<p class="text-center font-weight-bold m-auto" style="text-shadow:2px 2px 2px #e25bad;">ART REQUESTS</p>
<p class="text-center m-auto">closed</p>
</div>
</div>
</div>
<!--- selling --->
<div class="row no-gutters pt-1" style="height:60px;">
<div class="col-4 p-1">
<div class="card h-100 rounded-0 border-left-0 border-bottom-0 border-right-0" style="background:transparent;">
<p class="text-center font-weight-bold m-auto" style="text-shadow:2px 2px 2px #e25bad;">SELLING?</p>
<p class="text-center m-auto"><i class="fa-solid fa-check"></i> <a href="#" class="font-weight-bold font-italic" style="color:#e25bad;">INFO</a></p>
</div>
</div>
<!--- trading --->
<div class="col-4 p-1">
<div class="card h-100 rounded-0 border-bottom-0 border-left-0 border-right-0" style="background:transparent;">
<p class="text-center font-weight-bold m-auto" style="text-shadow:2px 2px 2px #e25bad;">TRADING?</p>
<p class="text-center m-auto"><i class="fa-solid fa-xmark"></i></p>
</div>
</div>
<!--- offers --->
<div class="col-4 p-1">
<div class="card h-100 rounded-0 border-bottom-0 border-right-0 border-left-0" style="background:transparent;">
<p class="text-center font-weight-bold m-auto" style="text-shadow:2px 2px 2px #e25bad;">OFFERS?</p>
<p class="text-center m-auto"><i class="fa-solid fa-xmark"></i></p>
</div>
</div>
</div>
</div>
</div>
<!--- circle image --->
<div class="col-md-4 pt-1">
<div class="m-auto" style="height:150px; width:150px; border:1px solid #e25bad; border-radius:100px">
<img src="IMGLINK" class="w-100 h-100 m-auto" style="object-fit:cover;">
</div>
</div>
</div>
<!--- social media --->
<div class="row pt-1">
<div class="col-12 pt-1">
<div class="card border-0" style="height:53px; background:transparent;">
<p class="my-auto text-muted">
<a href="URLLINK" data-toggle="tooltip" title="username" style="color:#e25bad;"><i class="fa-brands fa-instagram fa-2xl px-1"></i></a> <i class="fa-solid fa-dash"></i>
<a href="URLLINK" data-toggle="tooltip" title="username" style="color:#e25bad;"><i class="fa-brands fa-discord fa-2xl px-1"></i></a> <i class="fa-solid fa-dash"></i>
<a href="URLLINK" data-toggle="tooltip" title="username" style="color:#e25bad;"><i class="fa-brands fa-twitter fa-2xl px-1"></i></a> <i class="fa-solid fa-dash"></i>
<a href="URLLINK" data-toggle="tooltip" title="username" style="color:#e25bad;"><i class="fa-brands fa-tumblr fa-2xl px-1"></i></a>
<!--- credit, do not remove --->
<span class="float-right">
<a href="https://toyhou.se/onethird" data-toggle="tooltip" title="code by onethird" style="color:#e25bad;"><i class="fa-solid fa-code fa-lg"></i></a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>