calpol (f2u)

<!-- • ==============================

• C A L P O L -- free to use

• CODE BY    || fluffykweh • fluffiestkweh • fluffycodes
• TERMS      || https://fluffycodes.carrd.co/
• DONATE     || https://ko-fi.com/fluffykweh

!! KEEP THE CREDIT LOCATED SOMEWHERE VISIBLE ON THE PROFILE !!
removal of my credits is a violation against my rules and may result in a block

!! MAKE SURE WYSIWYG IS TURNED OFF VIA YOUR DISPLAY SETTINGS !!

• COLOURS
-----------------------------
• accent                #ab92b7
• text                  #262028
• background            #d9baee
• content bg            #fef9f9
• progress bg           #e5daea

============================== • -->

<div class="w-100 m-auto row no-gutters p-2" style="max-width: 600px; background-color: #d9baee;">
<div class="col-md-4 col-12 p-2"><div class="p-2 rounded-top" style="background-color: #ab92b7;"></div>
<div class="p-2" style="background-color: #fef9f9;">

<!-- • ========== AVATAR ========== • -->
<a href="/CREDITGOESHERE">

<img class="mx-auto d-block fr-rounded img-thumbnail border-0"  style="height: 150px; background-color: #ab92b7;"
src="https://via.placeholder.com/200">

</a>

<!-- • ========== BASIC INFO ========== • -->
<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">NAME</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== NAME ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">ALIAS</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== ALIAS / NICKNAMES ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">OCCUPATION</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== OCCUPATION ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">GENDER</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== GENDER ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">PRONOUNS</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== PRONOUNS ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">ORIENTATION</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== ORIENTATION ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">SPECIES / RACE</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== SPECIES / RACE ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">STATUS</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== STATUS ========== • -->
info

</span></p><hr class="my-1" style="background-color: #ab92b7;">

<p class="m-0"><span class="text-uppercase text-truncate" style="color: #ab92b7;">WORTH</span>
<span style="font-size: 0.8em; color: #262028;" class="pull-right">

<!-- • ========== WORTH ========== • -->
info

</span></p></div><div class="p-2 rounded-bottom" style="background-color: #ab92b7;"></div></div>

<div class="col-md-8 col-12 p-2"><div class="p-2 rounded-top" style="background-color: #ab92b7;"></div>
<div class="p-2 " style="background-color: #fef9f9; height: 300px; overflow: auto;">

<!-- • ========== ABOUT ========== • -->
<p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">ABOUT</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;">

<p class="m-0" style="font-size: 0.8em; color: #262028;">

Phasellus mauris ex, maximus et elit id, feugiat lacinia mauris. Mauris placerat dui at tincidunt venenatis. Sed bibendum velit orci. Mauris dui lectus, placerat id semper a, interdum eu nibh. Vestibulum imperdiet vel erat a bibendum. Donec non condimentum diam. Integer blandit arcu leo, eget consectetur dui dictum sit amet. In feugiat erat enim, in commodo felis feugiat a. Donec at mi quis dolor consequat vulputate

</p></div><div class="p-2" style="background-color: #fef9f9; height: 127px; overflow: auto;"><div class="row no-gutters">

<!-- • ========== LIKES ========== • -->
<div class="col-6 p-2"><p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">LIKES</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;">

<ul style="font-size: 0.8em; color: #262028;" class="m-0 pl-4 mb-2">

  <li>Sollicitudin;</li>
  <li>Vivamus;</li>
  <li>Pellentesque;</li>

<!-- • ========== DISLIKES ========== • -->
</ul></div><div class="col-6 p-2"><p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">DISLIKES</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;">

<ul style="font-size: 0.8em; color: #262028;" class="m-0 pl-4 mb-2">

  <li>Sollicitudin;</li>
  <li>Vivamus;</li>
  <li>Pellentesque;</li>

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

<div class="p-2 rounded-bottom" style="background-color: #ab92b7;"></div></div>
<div class="col-md-4 col-12 p-2"><div class="p-2 rounded-top" style="background-color: #ab92b7;"></div>
<div class="p-2" style="background-color: #fef9f9;">

<!-- • ========== STATS ========== • -->
<p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">STATS</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;">

<!-- • ========== CHARISMA ========== • -->
<p class="m-0 text-uppercase" style="color: #ab92b7;">CHARISMA</p>

<div class="progress my-1" style="height: 15px; background-color: #e5daea;">
<div class="progress-bar" style="background-color: #ab92b7;

width: 50%;"></div></div>

<!-- • ========== CREATIVITY ========== • -->
<p class="m-0 text-uppercase" style="color: #ab92b7;">CREATIVITY</p>

<div class="progress my-1" style="height: 15px; background-color: #e5daea;">
<div class="progress-bar" style="background-color: #ab92b7;

width: 50%;">

<!-- • ========== EMPATHY ========== • -->
</div></div><p class="m-0 text-uppercase" style="color: #ab92b7;">EMPATHY</p>

<div class="progress my-1" style="height: 15px; background-color: #e5daea;">
<div class="progress-bar" style="background-color: #ab92b7;

width: 50%;">

<!-- • ========== HUMOR ========== • -->
</div></div><p class="m-0 text-uppercase" style="color: #ab92b7;">HUMOR</p>

<div class="progress my-1" style="height: 15px; background-color: #e5daea;">
<div class="progress-bar" style="background-color: #ab92b7;

width: 50%;">

<!-- • ========== INTELLIGENCE ========== • -->
</div></div><p class="m-0 text-uppercase" style="color: #ab92b7;">INTELLIGENCE</p>

<div class="progress my-1" style="height: 15px; background-color: #e5daea;">
<div class="progress-bar" style="background-color: #ab92b7;

width: 50%;">

<!-- • ========== PATIENCE ========== • -->
</div></div><p class="m-0 text-uppercase" style="color: #ab92b7;">PATIENCE</p>

<div class="progress my-1" style="height: 15px; background-color: #e5daea;">
<div class="progress-bar" style="background-color: #ab92b7;

width: 50%;"></div></div></div>

<div class="p-2 rounded-bottom" style="background-color: #ab92b7;"></div></div>

<!-- • ========== IMAGE ========== • -->
<div class="col-md-8 col-12 p-2"><div class="p-2 rounded-top" style="background-color: #ab92b7;"></div>
<div class="p-2 rounded" style="background-color: #fef9f9; height: 312px;">

<a href="/CREDITGOESHERE"><img class="mx-auto d-block" style="height: 295px;"

  src="https://via.placeholder.com/300">

</a></div><div class="p-2 rounded-bottom" style="background-color: #ab92b7;"></div></div>

<!-- • ========== QUOTE ========== • -->
<div class="col-12 p-2"><div class="p-2 rounded font-italic text-center" style="font-size: 1.2em; color: #fef9f9; background-color: #ab92b7;">

  " so take a bit of <b>calpol</b>
  <br>eventually your arms won't feel so sore "

<!-- • ========== APPEARANCE ========== • -->
</div></div><div class="col-12 p-2"><div class="p-2 rounded-top" style="background-color: #ab92b7;"></div>
<div class="p-2" style="background-color: #fef9f9;"><div class="row no-gutters">

<!-- • ========== REFERENCE ========== • -->
<div class="col-md-6 col-12 p-2 text-center"><p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">REFERENCE</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;">

<a href="URL"><img class="my-2 mx-auto d-block img-thumbnail border-0" style="height: 150px; background-color: #ab92b7;"

  src="https://via.placeholder.com/200">

<!-- • ========== NOTES ========== • -->
</a></div><div class="col-md-6 col-12 p-2"><p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">NOTES</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;">

<ul style="font-size: 0.8em; color: #262028;" class="m-0 pl-4">

  <li>Sollicitudin;</li>
  <li>Vivamus;</li>
  <li>Pellentesque;</li>

<!-- • ========== COLOURS ========== • -->
</ul></div></div><div class="col-12 p-2"><div class="p-2 text-center" style="background-color: #ab92b7;">

  <i class="fas fa-heart fa-fw fa-2x" style="color: #999999;"></i>
  <i class="fas fa-heart fa-fw fa-2x" style="color: #777777;"></i>
  <i class="fas fa-heart fa-fw fa-2x" style="color: #555555;"></i>
  <i class="fas fa-heart fa-fw fa-2x" style="color: #333333;"></i>
  <i class="fas fa-heart fa-fw fa-2x" style="color: #111111;"></i>

</div></div></div>
<div class="p-2 rounded-bottom" style="background-color: #ab92b7;"></div></div>

<!-- • ========== AESTHETICS ========== • -->
<div class="col-12 p-2"><div class="p-2 rounded text-center" style="background-color: #ab92b7;">

<a href="URL"><img class="m-2"
  src="https://media.discordapp.net/attachments/558000903378960450/714240168449671198/stamp_template_by_timarena_d1bhor8.png">

</a><a href="URL"><img class="m-2"
  src="https://media.discordapp.net/attachments/558000903378960450/714240168449671198/stamp_template_by_timarena_d1bhor8.png">

</a><a href="URL"><img class="m-2"
  src="https://media.discordapp.net/attachments/558000903378960450/714240168449671198/stamp_template_by_timarena_d1bhor8.png">

<!-- • ========== RELATIONSHIPS ========== • -->
</a></div></div><div class="col-12 p-2"><div class="p-2 rounded-top" style="background-color: #ab92b7;"></div>
<div class="p-2 text-center" style="height: 248px; overflow: auto; background-color: #fef9f9;">

<p class="m-0 text-uppercase text-center display-4" style="font-size: 1.5em; color: #ab92b7;">RELATIONSHIPS</p>
<hr class="my-1" style="width: 80%; background-color: #ab92b7;"><div class="row no-gutters">

<!-- • ========== FIRST ========== • -->
<div class="col-md-6 col-12 row no-gutters p-2"><div class="col-4 p-2">

  <a href="IMGURL"><img class="mx-auto d-block img-thumbnail border-0" style="height: 75px; background-color: #ab92b7;"
  src="https://via.placeholder.com/200"></a></div><div class="col-8 p-2">

  <a class="btn btn-primary btn-sm btn-block" role="button" style="color: #FFF; background-color: #ab92b7; border-color: #ab92b7;"
  href="URL">name • relationship</a><p style="font-size: 0.8em; color: #262028;" class="m-0">
    sed placerat erat consectetur nibh sodales ornare. quisque at est nec ante pellentesque mollis rutrum eu tortor

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

<!-- • ========== SECOND ========== • -->
<div class="col-md-6 col-12 row no-gutters p-2"><div class="col-4 p-2">

  <a href="IMGURL"><img class="mx-auto d-block img-thumbnail border-0" style="height: 75px; background-color: #ab92b7;"
  src="https://via.placeholder.com/200"></a></div><div class="col-8 p-2">

  <a class="btn btn-primary btn-sm btn-block" role="button" style="color: #FFF; background-color: #ab92b7; border-color: #ab92b7;"
  href="URL">name • relationship</a><p style="font-size: 0.8em; color: #262028;" class="m-0">
    sed placerat erat consectetur nibh sodales ornare. quisque at est nec ante pellentesque mollis rutrum eu tortor

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

<!-- • ========== THIRD ========== • -->
<div class="col-md-6 col-12 row no-gutters p-2"><div class="col-4 p-2">

  <a href="IMGURL"><img class="mx-auto d-block img-thumbnail border-0" style="height: 75px; background-color: #ab92b7;"
  src="https://via.placeholder.com/200"></a></div><div class="col-8 p-2">

  <a class="btn btn-primary btn-sm btn-block" role="button" style="color: #FFF; background-color: #ab92b7; border-color: #ab92b7;"
  href="#">name • relationship</a><p style="font-size: 0.8em; color: #262028;" class="m-0">
    sed placerat erat consectetur nibh sodales ornare. quisque at est nec ante pellentesque mollis rutrum eu tortor

</p></div>

<!-- • ========== C R E D I T - DO NOT REMOVE ========== • -->
</div></div></div><div class="p-2 rounded-bottom" style="background-color: #ab92b7;"></div></div></div>
<a class="d-block text-muted text-center" href="https://toyhou.se/19133696." style="font-size:0.8em;">html by fluffycodes <i class="fas fa-paw fa-fw"></i></a>