<!---
========================================================
code by Lullah
colors used:
> #fff (font color, border color, speech bubble, heart on the stamps)
> #F7B7C8 (animated stripes box background)
> #F3A1B8 (2 hearts on the speech bubble, text box background)
> #D94C74 (link color)
> please use this code for applying custom color links:
> <a href="#URL" style="color:#D94C74">text</a>
You may...
> Edit this code to oblivion!
> Recycle parts for your own use!
You may not...
> Remove my watermark!
========================================================
--->
<div class="container" style="max-width:750px;letter-spacing:0.08em;">
<div class="p-3 progress-bar progress-bar-striped progress-bar-animated" style="height:100%;color:#fff;background-color:#F7B7C8;border-radius:45px;">
<div class="row no-gutteres">
<!--- header background image --->
<div class="col-12">
<div class="" src="" style="width:100%;height:80px;
background-image:url(https://via.placeholder.com/120);
border:4px solid #fff;border-radius:35px;background-size:cover;background-position:center;box-shadow: 0px 0px 0px 1000px inset rgba(255,255,255,0.2);"></div>
</div>
<!--- content --->
<div class="col-12">
<div class="row no-gutters">
<!--- icon --->
<div class="col-6 col-md-4 mt-3">
<div class="mx-auto" style="height:145px;width:145px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;border: solid 4px #fff;border-radius:50%;"></div>
</div>
<!--- text bubble --->
<div class="col-6 col-md-8 mt-3 pr-md-3 d-flex">
<div class="my-auto d-flex" style="height:135px;width:100%;background-color:#fff;border:4px solid #fff;border-radius:25px 25px 25px 8px;position:relative;">
<!--- text bubble content --->
<div class="p-3 m-auto" style="color:#333;">
"Let's play!"</div>
<!--- speech bubble triangle -->
<div style="position:absolute;bottom:-12px;left:-15px;"><i class="fas fa-triangle fa-2x" style="transform:rotate(120deg);color:#fff;"></i></div>
<!--- heart (large) --->
<div style="position:absolute;top:-20px;right:5px;"><i class="fas fa-heart fa-3x" style="color:#F3A1B8;transform:rotate(20deg);"></i></div>
<!--- heart (small) --->
<div style="position:absolute;top:15px;right:-10px;"><i class="fas fa-heart fa-2x" style="color:#F3A1B8;transform:rotate(40deg);"></i></div></div>
</div>
<div class="col-md-4 mt-3 p-1" style="">
<div class="px-3 py-2" style="background-color:#F3A1B8;border:4px solid #fff;border-radius:25px;height:100%;">
<!--- basic info --->
<div class="" style="">
<!--- basic info header --->
<div class="text-center">
<i class="fas fa-star fa-fw fa-sm"></i>
<i class="fas fa-star fa-fw fa-lg"></i>
<i class="fas fa-star fa-fw fa-sm"></i>
<hr style="border-top:2px dashed #fff;margin:8px 0px 3px 0px;">
</div>
<div class="justify-content-between">
<span>Name</span>
<span>Info</span></div>
<div class="justify-content-between">
<span>Nickname</span>
<span>Info</span></div>
<div class="justify-content-between">
<span>Age</span>
<span>Info</span></div>
<div class="justify-content-between">
<span>Pronouns</span>
<span>Info</span></div>
<div class="justify-content-between">
<span>Height</span>
<span>Info</span></div>
<div class="justify-content-between">
<span>Occupation</span>
<span>Info</span></div>
<!--- basic info separator --->
<hr style="border-top:2px dashed #fff;margin:7px 0px 3px 0px;">
<div class="justify-content-between">
<span>Base Value</span>
<span>00 USD</span></div>
<div class="justify-content-between">
<span>Designer</span>
<span><a href="https://www.deviantart.com/hinausa/art/Cuties-OPEN-Flat-Rate-777481008" style="color:#D94C74;">Hinausa</a></span></div>
<!--- basic info footer --->
<div class="text-center">
<hr style="border-top:2px dashed #fff;margin:7px 0px 3px 0px;">
<i class="fas fa-star fa-fw fa-sm"></i>
<a href="https://toyhou.se/Lullah" data-toggle="tooltip" title="code"><i class="fas fa-star fa-fw fa-sm" style="color:#D94C74;"></i></a>
<i class="fas fa-star fa-fw fa-sm"></i>
</div>
</div>
</div></div>
<div class="col-md-8 p-1 pl-md-3 mt-3" style=";"><div class="p-1" style="background-color:#F3A1B8;border:4px solid #fff;border-radius:25px;"><div class="px-3 py-2" style=";">
<div class="text-center" style="height:100;">
<i class="fas fa-star fa-fw fa-sm"></i>
<span class="text-uppercase">Summary</span>
<i class="fas fa-star fa-fw fa-sm"></i>
<hr style="border-top:2px dashed #fff;margin:8px 0px 3px 0px;">
<!--- summary content --->
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div></div>
<div class="row no-gutters">
<!--- stamp #1 --->
<div class="col-6 col-md-4 mt-3"><div class="mx-auto" style="height:60px; width:110px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;border:3.5px solid #fff;border-radius:5px;box-shadow:0px 0px 8px rgba(255,255,255,0.4);position:relative;">
<!--- heart --->
<i class="fas fa-heart fa-lg" style="color:#fff;transform:rotate(15deg);position:absolute;top:-4px;right:-8px"></i></div></div>
<!--- stamp #2 --->
<div class="col-6 col-md-4 mt-3"><div class="mx-auto" style="height:60px; width:110px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;border:3.5px solid #fff;border-radius:5px;box-shadow:0px 0px 8px rgba(255,255,255,0.4);position:relative;">
<!--- heart --->
<i class="fas fa-heart fa-lg" style="color:#fff;transform:rotate(15deg);position:absolute;top:-4px;right:-8px"></i></div></div>
<!--- stamp #3 --->
<div class="col-12 col-md-4 mt-3"><div class="mx-auto" style="height:60px; width:110px;
background-image:url(https://via.placeholder.com/120);
background-size:cover;background-position:center;border:3.5px solid #fff;border-radius:5px;box-shadow:0px 0px 8px rgba(255,255,255,0.4);position:relative;">
<!--- heart --->
<i class="fas fa-heart fa-lg" style="color:#fff;transform:rotate(15deg);position:absolute;top:-4px;right:-8px"></i></div></div>
</div>
</div>
</div>
</div>
<!--- footer background image --->
<div class="col-12 mt-3">
<div class="" src="" style="width:100%;height:80px;
background-image:url(https://via.placeholder.com/120);
border:4px solid #fff;border-radius:35px;background-size:cover;background-position:center;box-shadow: 0px 0px 0px 1000px inset rgba(255,255,255,0.2);"></div>
</div>
</div>
</div>
</div>