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

spacing: .5px;"><div class="row no-gutters">

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

<div class="col-12 p-1"><div class="card bg-faded border-0 p-2"
style="background: url(https://images.unsplash.com/photo-1599355768895-
32b862adf863?
ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjU4fHx5ZWxsb3clMjBmbG93ZXJzfGVufDB8fDB8fA%3D
%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60);
background-size: cover;
background-position: center;
height: 80px;">

<h1 class="display-4 text-white text-right my-auto" style="letter-spacing:

4px;">
</h1>

</div></div>
<!--- [ ABOUT ] -------------------->
<div class="col-md-4 p-1"><div class="card bg-faded border-0 p-3">
<!--- avatar -- can be any size --->
<div class="card bg-faded border-0 p-2 mx-auto" style="height: 170px; width:
170px; margin-top: -80px; border-radius: 50%;"><div class="card border-0 h-100 w-
100" style="
background:
url(https://cdn.discordapp.com/attachments/864574789044928533/864575748790812732/
ezgif-4-a1c106d6ed90.gif);
background-size: cover;
background-position: center;
border-radius: 50%;"
></div></div>
<!--- about header --->
<h4 class="text-primary text-center m-0" style="letter-spacing: 2px; font-
weight: 400;">
NAME / USERNAME
</h4>
<p class="text-muted text-center" style="letter-spacing: 1px;">
age • prns • etc
</p>

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

<!--- about paragraph --->
<div class="text-center" style="height: 154px; overflow-y: scroll;">
write about yourself here!! it'll scroll :) Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Fusce ut purus quam. Fusce sollicitudin vel odio ac
maximus. Donec et neque id dui feugiat elementum ut id nulla.
</div>

</div></div>

<!--- [ NOTICE BOARD ] -------------------->

<div class="col-md-8 p-1"><div class="card bg-faded border-0 p-3" style="height:
200px; overflow-y: scroll;">

<h2 class="text-primary m-0" style="letter-spacing: 2px; font-weight: 400;">

<i class="far fa-star-exclamation"></i> . NOTICE BOARD

 </h2>

<hr class="w-100 mt-1 mb-3">

<ul class="fa-ul text-lowercase mb-2" style="margin: -4px 0px 0px 12px;">

<li class="mb-2"><i class="far fa-pencil fa-fw mr-1 text-muted"></i>

write some notes here, this will scroll
</li>

<li class="mb-2"><i class="fal fa-pencil fa-fw mr-1 text-muted"></i>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</li>

<li class="mb-2"><i class="fal fa-pencil fa-fw mr-1 text-muted"></i>

Fusce ut purus quam. Fusce sollicitudin vel odio ac maximus. Donec et neque
id dui feugiat elementum ut id nulla.
</li>

<li class="mb-2"><i class="fal fa-pencil fa-fw mr-1 text-muted"></i>

Donec et neque id dui feugiat elementum ut id nulla.
</li>

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

</ul>

</div>

<div class="row no-gutters mt-2">

<!--- character ----->
<div class="col-sm-3 pr-sm-1"><div class="card border-0" style="height:
115.5px;
background:
url(https://f2.toyhou.se/file/f2-toyhou-se/images/34391325_8gt0arCIfMGDSZA.png?
1634576216);
background-size: cover;
background-position: center;">

<div class="small" style="position: absolute; bottom: 2px; left: 4px; text-

shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px
#000;" ><a href="link here" class="text-white">
CHARACTER
</a></div>

</div></div>

<!--- character ----->

<div class="col-sm-3 px-md-1"><div class="card border-0" style="height:
115.5px;
background: url(https://f2.toyhou.se/file/f2-toyhou-se/characters/8790204?
1642428229);
background-size: cover;
background-position: center;">

<div class="small" style="position: absolute; bottom: 2px; left: 4px; text-

shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px
#000;" ><a href="link here" class="text-white">
CHARACTER
 </a></div>

</div></div>

<!--- character ----->

<div class="col-sm-3 px-md-1"><div class="card border-0" style="height:
115.5px;
background:
url(https://f2.toyhou.se/file/f2-toyhou-se/images/44342854_c7QeRO9CmDvzIxF.png);
background-size: cover;
background-position: center;">

<div class="small" style="position: absolute; bottom: 2px; left: 4px; text-

shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px
#000;" ><a href="link here" class="text-white">
CHARACTER
</a></div>

</div></div>

<!--- character ----->

<div class="col-sm-3 pl-md-1"><div class="card border-0" style="height:
115.5px;
background:
url(https://f2.toyhou.se/file/f2-toyhou-se/images/36703797_GkLgOrUzKnQt8n0.jpg?
1634568140);
background-size: cover;
background-position: center;">

<div class="small" style="position: absolute; bottom: 2px; left: 4px; text-

shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px
#000;" ><a href="link here" class="text-white">
CHARACTER
</a></div>

</div></div>
</div>

</div>
<!--- [ ART STATUS ] ---------------------------->
<div class="col-md-6 p-1"><div class="card border-0 bg-faded p-3" style="height:
150px; overflow-y: scroll;">

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-dollar-sign"></i> comms
</span>
<span class="text-success">
OPEN!
</span>
</div>

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

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-exchange"></i> art trades
</span>
<span class="text-warning">
 ASK
</span>
</div>

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

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-pencil-paintbrush"></i> collabs
</span>
<span class="text-warning">
MUTUALS ONLY
</span>
</div>

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

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-gift"></i> requests
</span>
<span class="text-danger">
CLOSED
</span>
</div>
<!--- bottom links --->
<div class="justify-content-around text-muted mt-1">
<a href="link here">comm info</a>

<a href="link here">t.o.s</a>

<a href="link here">to-do</a>

</div>

</div></div>
<!--- [ DESIGNS ] ---------------------------->
<div class="col-md-6 p-1"><div class="card border-0 bg-faded p-3" style="height:
150px; overflow-y: scroll;">

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-dollar-sign"></i> sales
</span>
<span class="text-success">
<i class="fas fa-check"></i>
</span>
</div>

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

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-exchange"></i> character trades
</span>
<span class="text-warning">
<i class="fas fa-question"></i>
</span>
</div>
 <hr class="w-100 my-1">

<div class="justify-content-between">
<span class="text-muted" style="letter-spacing: 1px;">
<i class="far fa-tags"></i> offers
</span>
<span class="text-danger">
<i class="fas fa-times"></i>
</span>
</div>
<!--- bottom links --->
<div class="justify-content-around text-muted mt-auto">
<a class="text-center"
href="https://toyhou.se/ronnie/characters/folder:1812857">
<i class="far fa-folder"></i>
<br>
UFT/S
</a>

<a class="text-center"
href="https://toyhou.se/ronnie/characters/folder:1812855">
<i class="far fa-folder"></i>
<br>
adopts
</a>

<a class="text-center" href="https://toyhou.se/9405767.design-wishlist">

<i class="far fa-heart"></i>
<br>
wishlist
</a>
</div>

</div></div>

<!--- [ SOCIAL MEDIAS ] ---------------------------->

<div class="col-12 p-1"><div class="card border-0 bg-faded p-2">

<div class="justify-content-between">
<span class="text-muted">
<a class="fab fa-twitter my-auto mx-2" href="link here"></a>
//
<a class="fab fa-instagram my-auto mx-2" href="link here"></a>
//
<a class="fas fa-id-card my-auto mx-2" href="link here"></a>
//
<a class="fab fa-etsy my-auto mx-2" href="link here"></a>
</span>

<!--- [ CREDIT - DON'T REMOVE PLS ] ---------------------------->

<a href="/12026125" class="far fa-code tooltipster my-auto" title="code by
ronnie"></a>
</div>

</div></div>

</div></div>