Profile
Abbreviated Aesthetic Code
If you'd like to change the colors quickly, use find and replace to edit these color codes:
Accent Text: FFC0CB
Code
<!--
Abbreviated Aesthetic Profile by Rimupon / Rimucode @ Toyhou.se
Customization Notes:
Change any links from placeholder.com to change the images
The accent text color is: #FFC0CB
Please do not remove my credit, ty!
-->
<div class="row no-gutters" style="max-width:800px; margin:auto;">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AESTHETIC BOX 1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-lg-3 col-6" style="height:200px; padding:10px;">
<div class="card border-0 rounded-0" style="height:100%; background-image:url(https://via.placeholder.com/200); background-size:cover; background-position:center; box-shadow: 0px 0px 10px rgba(0,0,0,.3);"></div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AESTHETIC BOX 2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-lg-3 col-6" style="height:200px; padding:10px;">
<div class="card border-0 rounded-0" style="height:100%; background-image:url(https://via.placeholder.com/200); background-size:cover; background-position:center; box-shadow: 0px 0px 10px rgba(0,0,0,.3);"></div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AESTHETIC BOX 3 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-lg-3 col-6" style="height:200px; padding:10px;">
<div class="card border-0 rounded-0" style="height:100%; background-image:url(https://via.placeholder.com/200); background-size:cover; background-position:center; box-shadow: 0px 0px 10px rgba(0,0,0,.3);"></div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ AESTHETIC BOX 4 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-lg-3 col-6" style="height:200px; padding:10px;">
<div class="card border-0 rounded-0" style="height:100%; background-image:url(https://via.placeholder.com/200); background-size:cover; background-position:center; box-shadow: 0px 0px 10px rgba(0,0,0,.3);"></div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CHARACTER IMAGE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-md-6" style="min-height:500px; margin-top:-90px; margin-bottom:10px">
<div class="card border-0 rounded-0" style="height:100%; background:url(https://via.placeholder.com/300x500); background-size:contain; background-repeat:no-repeat; background-position:center; z-index:2"></div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ INFO BOX ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-md" style="padding:10px;">
<div class="card border-0 rounded-0 bg-faded" style="height:100%; padding:10px; box-shadow: 0px 0px 10px rgba(0,0,0,.3);">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CHAR NAME ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<p align="center" style="color:#FFC0CB; font-family:'Trebuchet MS'; font-size:2em; margin:0px;">
Character Name
</p>
<div class="row">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CHAR INFO ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="col-sm-6">
<b style="color:#FFC0CB">Title</b>
<span class="pull-right">Content</span>
</div>
<div class="col-sm-6">
<b style="color:#FFC0CB">Title</b>
<span class="pull-right">Content</span>
</div>
<div class="col-sm-6">
<b style="color:#FFC0CB">Title</b>
<span class="pull-right">Content</span>
</div>
<div class="col-sm-6">
<b style="color:#FFC0CB">Title</b>
<span class="pull-right">Content</span>
</div>
<div class="col-sm-6">
<b style="color:#FFC0CB">Title</b>
<span class="pull-right">Content</span>
</div>
<div class="col-sm-6">
<b style="color:#FFC0CB">Title</b>
<span class="pull-right">Content</span>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CHAR PARAGRAPH ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<p align="justify" style="flex-grow: 1;">
Write a short paragraph about your character in this box. The box will grow with size with no limit. The minimum size is 500 pixels. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse hendrerit pharetra erat, nec gravida mi efficitur eget. Sed vel mollis enim, quis elementum quam. Donec felis arcu, lobortis a vestibulum at, dapibus in orci. Nullam rutrum dapibus dolor quis cursus. Vestibulum molestie libero est, et viverra ligula laoreet in. Sed pulvinar justo odio. Fusce sollicitudin, ante id dapibus vestibulum, massa eros ornare tortor, in dictum mi velit at odio.
</p>
<div class="container">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ COLOR PALETTE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!--
• Change the colors by changing the hexcode in 'color:#ff0000'
• Change the hover text by changing the word Placeholder in 'title="Placeholder"'
-->
<div class="row no-gutters" style="text-align:center;">
<div class="col">
<i class="fas fa-star tooltipster" title="Placeholder" style="font-size:1.5em; color:#ff0000"></i>
</div>
<div class="col">
<i class="fas fa-star tooltipster" title="Placeholder" style="font-size:1.5em; color:#ff0000"></i>
</div>
<div class="col">
<i class="fas fa-star tooltipster" title="Placeholder" style="font-size:1.5em; color:#ff0000"></i>
</div>
<div class="col">
<i class="fas fa-star tooltipster" title="Placeholder" style="font-size:1.5em; color:#ff0000"></i>
</div>
<div class="col">
<i class="fas fa-star tooltipster" title="Placeholder" style="font-size:1.5em; color:#ff0000"></i>
</div>
<div class="col">
<i class="fas fa-star tooltipster" title="Placeholder" style="font-size:1.5em; color:#ff0000"></i>
</div>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ CREDITS ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<p align="right" style="font-size:.8em;">
<!--
• Change the link by changing the word URL in 'href="URL"'
• Change the hover text by changing the words USER and SOCIAL in 'title="Image by: USER on SOCIAL"'
-->
<a href="URL" class="text-secondary">
<i class="fas fa-image tooltipster" title="Image by: USER on SOCIAL"></i>
</a>
<!--
• Please DO NOT change this credit
-->
<a href="https://toyhou.se/rimucode" class="text-secondary">
<i class="fas fa-code tooltipster" title="HTML by: Rimucode"></i>
</a>
</p>
</div>
</div>