<!

-- BACKGROUND IMAGE - Set to be a repeating pattern, make sure you adjust

the repeat or size if you change it -->

<div class="mx-auto card border-0 pt-md-5 pt-3 px-md-0 px-3"

style="background:url('https://i.imgur.com/zFnnUQg.png') center; background-
color:#EDEDED; border-radius:20px;">

<!-- START OF INFO CARD -->

<div class="card border-0 py-md-5 my-5 bg-transparent mx-auto px-md-2

px-2 py-3" style="max-width:650px;">

<div class="card px-2 border-0" style="background-color:#fefefe;

color:#C2C9BD; border-radius:50px; overflow:hidden; box-shadow:2px 2px 3px 1px
rgba(0,0,0,0.075);">

<div class="row pt-1 pb-1 pb-md-0 mx-3 mt-3"

style="background-color:#C2C9BD; color:#fefefe; border-radius:50px;">

<!-- SOCIAL LINKS - If you want to change these, look

up the icons you want on Font Awesome -->

<div class="col-md-6 flex-row justify-content-between

px-3 pr-md-5 pl-md-3" style="font-size:16pt;">
<a href="#" style="color:inherit;"><i
class="fab fa-twitter fa-fw"></i></a>
<a href="#" style="color:inherit;"><i
class="fab fa-instagram fa-fw"></i></a>
<a href="#" style="color:inherit;"><i
class="fab fa-deviantart fa-fw"></i></a>
<a href="#" style="color:inherit;"><i
class="fab fa-tiktok fa-fw"></i></a>
<a href="#" style="color:inherit;"><i
class="fas fa-link fa-fw"></i></a>
</div>

<div class="col-6">

<!-- YOUR USERNAME -->

<h1 class="text-monospace text-right display-4
pr-2 d-none d-md-block mt-1" style="font-size:18pt;"><i class="far fa-at fa-sm mr-
1"></i>username</h1>

</div>
</div>

<div class="row no-gutters">

<div class="col-md-4 pl-md-4 py-md-4 py-3 px-4 pr-md-
0 mt-md-0 mt-3">

<!-- USER IMAGE BELOW -->

<div class="card h-100 border-0 bg-transparent"
style=

"background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/
15774049?1650575968'); background-size:cover; padding-bottom:100%; border-
radius:50%;">
</div>
</div>

<div class="col-md-8 p-md-4 p-3">

<div class="pl-md-2">

<!-- NAME AND INFO BELOW -->

<h1 class="display-4 mb-0 mt-n2"

style="font-family:'Impact', sans-serif; letter-spacing:2px;"><i class="far fa-
leaf"></i> <i>name</i></h1>

<h1 class="mt-n1 display-4"

style="color:#aaa; font-size:15pt; letter-spacing:1px;">age - prns - gender -
etc</h1>

<!-- INFO BLURB -->

<div class="px-3 py-2 mt-3 mx-n1 text-

justify text-monospace" style="font-size:10pt; color:#aaa; border-left:2px solid
#C2C9BD; border-right: 2px solid #C2C9BD; border-radius:15px;">
<b>This is an info blurb.</b> Write
a little bit about yourself or your characters. You can <a href="#"
style="color:#C2C9BD;"><b>toss in some links</b></a> or <i>style the blurb</i>
<b>to
your preferences.</b> The info does
not scroll, so keep it brief.
</div>
</div>
</div>

<div class="col-12">

<!-- LINKS - Can easily remove this section if

prefered or change icons -->

<ul class="nav nav-fill row mx-md-3 mx-2 mt-0

mb-3 mb-md-2" style="letter-spacing:2px;">
<li class="nav-item col-md-4 px-2 mb-2">
<a class="border-0 btn btn-default
nav-link pb-2" href="#" style="background:#C2C9BD; color:#fefefe; border-
radius:25px; font-size:12pt;"><i class="far fa-folders pr-2"></i> folders</a>
</li>

<li class="nav-item col-md-4 px-2 mb-2">

<a class="border-0 btn btn-default
nav-link pb-2" href="#" style="background:#C2C9BD; color:#fefefe; border-
radius:25px; font-size:12pt;"><i class="far fa-info-circle pr-2"></i> about</a>
</li>

<li class="nav-item col-md-4 px-2 mb-2">

<a class="border-0 btn btn-default
nav-link pb-2" href="#" style="background:#C2C9BD; color:#fefefe; border-
radius:25px; font-size:12pt;"><i class="fas fa-dice-d20 pr-2"></i> rp info</a>
 </li>
</ul>
</div>
</div>
</div>
</div>

<!-- CREDIT LINK, DO NOT REMOVE -->

<div class="text-right pb-2 pr-4 text-monospace mt-md-3 mt-1">

<a href="https://toyhou.se/~forums/16.htmlcss-graphics/105818"
style="color:#C2C9BD; text-decoration:none; font-size:13pt;"><i class="far fa-
code"></i> credit</a>
</div>
</div>