<div class="container p-0 my-5" style="max-width: 600px; font-size: 13px;">

<div class="card rounded-0 bg-faded p-1">

<div class="row no-gutters">

<!--- header ----->

<div class="col-12 p-1">
<div class="card rounded-0 p-2">
<h4 class="text-primary text-center m-0" style="letter-spacing: 2px; font-
weight: 300;">

LOOKING FOR OFFERS

</h4>
</div>
</div>
<!--- end header ----->

<!--- side image -- can be any size, but preferably should be transparent (if not
transparent change background-size: to cover instead) ----->
<div class="col-md-5 p-1">
<div class="card rounded-0 p-2" style="height: 300px;">
<div class="card rounded-0 border-0 h-100" style="
background:
url(https://f2.toyhou.se/file/f2-toyhou-se/images/29377244_0TsbmxViQXZ3HD9.png) no-
repeat;
background-size: contain;
background-position: center;">
</div>
</div>
</div>

<!--- right column ----->

<div class="col-md-7 p-1">
<div class="card rounded-0 p-3" style="height: 300px; overflow-y: scroll;">

<!--- item ----->

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
SPECIES
</span>
<span>
content
</span>
</div>

<hr class="w-100 my-1">

<!--- item ----->

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
DESIGNER
</span>
<span>
content
</span>
</div>
 <hr class="w-100 my-1">

<!--- item ----->

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
OBTAINED BY
</span>
<span>
content
</span>
</div>

<hr class="w-100 my-1">

<!--- item ----->

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
ORIGINAL VALUE
</span>
<span>
$0.00
</span>
</div>

<hr class="w-100 my-1">

<!--- item ----->

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
COMMISSIONS
</span>
<span>
+$0.00
</span>
</div>

<hr class="w-100 my-1">

<!--- item ----->

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
TOTAL VALUE
</span>
<span>
$0.00
</span>
</div>

<hr class="w-100 my-1">

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

<h4 class="text-center text-primary m-0" style="letter-spacing: 2px; font-

weight: 300;">

RULES

</h4>
 <!--- rules list ----->
<ul class="fa-ul">
<!--- item ----->
<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
lorem ipsum dolor sit amet, consectetur adipiscing elit
</li>

<!--- item ----->

<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
mauris gravida turpis at augue porttitor pellentesque
</li>

<!--- item ----->

<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
etiam a ullamcorper tellus, non hendrerit erat
</li>

<!--- item ----->

<li><i class="fal fa-chevron-right fa-fw fa-li"></i>
nullam ut ultrices purus, vel dictum neque
</li>

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

</ul>
<!--- end list ----->

</div>
</div>
<!--- end right column ----->

<!--- first box ----->

<div class="col-md-4 p-1">
<div class="card rounded-0 p-3" style="height: 130px; overflow-y: scroll;">
<h4 class="text-center text-primary m-0" style="letter-spacing: 2px; font-
weight: 300;">

LOOKING FOR

</h4>
<hr class="w-100 my-1">
<!--- list ----->
<ul class="fa-ul">
<!--- item ----->
<li><i class="fal fa-check fa-fw fa-li"></i>
one
</li>

<!--- item ----->

<li><i class="fal fa-check fa-fw fa-li"></i>
two
</li>

<!--- item ----->

<li><i class="fal fa-check fa-fw fa-li"></i>
three
</li>

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

 </ul>
<!--- end list ----->
</div>
</div>

<!--- second box ----->

<div class="col-md-4 p-1">
<div class="card rounded-0 p-3" style="height: 130px; overflow-y: scroll;">
<h4 class="text-center text-primary m-0" style="letter-spacing: 2px; font-
weight: 300;">

DON'T OFFER

</h4>
<hr class="w-100 my-1">
<!--- list ----->
<ul class="fa-ul">
<!--- item ----->
<li><i class="fal fa-times fa-fw fa-li"></i>
one
</li>

<!--- item ----->

<li><i class="fal fa-times fa-fw fa-li"></i>
two
</li>

<!--- item ----->

<li><i class="fal fa-times fa-fw fa-li"></i>
three
</li>

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

</ul>
<!--- end list ----->
</div>
</div>

<!--- third box ----->

<div class="col-md-4 p-1">
<div class="card rounded-0 p-3" style="height: 130px; overflow-y: scroll;">
<h4 class="text-center text-primary m-0" style="letter-spacing: 2px; font-
weight: 300;">

WISHLIST

</h4>
<hr class="w-100 my-1">
<!--- list ----->
<ul class="fa-ul">
<!--- item ----->
<li><i class="fal fa-heart fa-fw fa-li"></i>
one
</li>

<!--- item ----->

<li><i class="fal fa-heart fa-fw fa-li"></i>
two
</li>
 <!--- item ----->
<li><i class="fal fa-heart fa-fw fa-li"></i>
three
</li>

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

</ul>
<!--- end list ----->
</div>
</div>

<!--- bottom bar ----->

<div class="col-md-12 p-1">
<div class="card rounded-0 p-2">
<p class="text-center text-primary mb-1" style="letter-spacing: 2px;">

CONTACT

</p>

<!--- contact btns ----->

<div class="justify-content-center">

<i class="fal fa-comment-dots text-muted tooltipster mx-2"

title="message on toyhouse"></i>

<i class="fal fa-envelope text-muted tooltipster mx-2"

title="xxx@email.com"></i>

<i class="fab fa-discord text-muted tooltipster mx-2"

title="user#0000"></i>

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

</div>
<!--- end contact btns ----->

</div>
</div>
<!--- end bottom bar ----->

</div>
</div>

<!--- credit -- pls dont remove (pleading emoji) ----->

<a class="pull-right fal fa-code mt-1 tooltipster" title="code by ronnie"
href="https://toyhou.se/9223228"></a>
<!--- end credit ----->

</div>