Profile
<!------
Use ctrl+f to replace the colors used
main background = #f5f4df
color1 (char name - quote - credit - stat bar) = #6bb59b
color2 (headers) = #81b3a1
color3 (main text) = #445e55
----->
<div class="mx-auto">
<!----MAIN HEADER PART THING--->
<div class="card mx-auto p-0" style="max-width: 550px; background-color:#f5f4df;">
<!----IMAGE HEADER--->
<div class="card-block" style="background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat; height: 60px;"></div>
<div class="p-2 row no-gutters">
<!----character icon--->
<div class="col-md-4 col-12 p-1"><div class = "card p-0 mt-2 mx-auto" style = "max-width: 180px; height: 130px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>
<!----character short info---->
<div class="col-md-8 col-12 pt-2 pl-2 pr-2 pb-2">
<div class="font-weight-bold " STYLE="font-family: Playfair Display; font-size: 30px; color: #6bb59b;">Character Name</div>
<div style="font-family: Lato; font-size: 15px; color: #81b3a1"><i>age | gender | sexuality | pronouns</i></div>
<!---short character desc.--->
<div class="text-justify mt-2" style="font-family: Lato; font-size: 12px; color: #445e55">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in luctus turpis, non venenatis mauris. Nunc ornare nisi sit amet bibendum volutpat. Sed vel interdum arcu.</div>
</div>
</div>
</div>
<!----MAIN CHARACTER PROFILE---->
<div class="card mx-auto p-0 mt-2" style="max-width: 550px; background-color: #f5f4df;">
<div class="p-2">
<!-----QUOTE + COLLAPSE LINK--->
<div class="p-1 text-center"><a href="#topcollapse" class="tooltipster" title="Read More" data-toggle="collapse" style="font-size: 20px; color: #6bb59b;font-family: Playfair Display;"><b><i>"Some Cool Quote Here"</i></b></a></div>
<!---CONTENTS---->
<div id="topcollapse" class="collapse">
<hr></hr>
<div class="row no-gutters mt-2">
<div class="col-md-5 p-2">
<!--STATS--->
<div style="font-family: Playfair Display; font-size:26px; color: #81b3a1;"><b>Stats</b></div>
<div class="row no-gutters mt-1">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Introverted</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Extroverted</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
<div class="row no-gutters mt-2">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Cautious</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Curious</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
<div class="row no-gutters mt-2">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Nervous</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Confident</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
<div class="row no-gutters mt-2">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Friendly</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Challenging</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
<div class="row no-gutters mt-2">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Organized</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Careless</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
<div class="row no-gutters mt-2">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Impatient</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Patient</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
<div class="row no-gutters mt-2">
<span class="w-50 text-left" style="font-family: Lato; font-size: 12px; color: #445e55">Cold</span>
<span class="w-50 text-right" style="font-family: Lato; font-size: 12px; color: #445e55">Warm</span>
</div>
<div class="progress py-1 pl-1" style="max-height: 5px; border-radius: 0px; overflow: visible;">
<!---Stat Bar (change width % to modify the stats)--->
<div class="progress-bar justify-content-end" style="background: none; width: 50%;"><div style="height: 12px; min-width: 8px; margin-top: -6px; margin-right: -2px; background-color: #6bb59b;"></div></div>
</div>
</div>
<div class="col-md-7 p-1">
<!----PERSONALITY--->
<div class="p-1" style="font-family: Playfair Display; font-size:26px; color: #81b3a1;"><b>Personality</b></div>
<!-----feel free to write as much as you can, this box scrolls--->
<div class="text-justify p-1" style="font-family: Lato; font-size: 12px; color: #445e55; overflow-y: scroll; height: 240px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in luctus turpis, non venenatis mauris. Nunc ornare nisi sit amet bibendum volutpat. Sed vel interdum arcu. Nam lorem arcu, feugiat at eleifend at, suscipit id ex. Aenean euismod viverra vulputate. Aenean varius auctor nibh. Nulla rutrum mi tellus, non lacinia metus varius scelerisque. Quisque commodo eros nunc, eget imperdiet tellus sodales vel.</p>
<p>Vestibulum mi ipsum, auctor dignissim viverra sed, consequat a tellus. Morbi neque felis, lobortis a cursus id, semper eget augue. Ut imperdiet dapibus dolor, eget ultrices nisl dictum id. Curabitur in facilisis tortor. Suspendisse at vulputate ligula. Aliquam eu diam ultricies, mollis erat sed, fringilla nunc. Nullam porttitor tincidunt lacus a fringilla. Aenean auctor sapien a iaculis consequat. Curabitur faucibus nec diam sed fringilla. Maecenas faucibus, enim gravida suscipit rutrum, tortor lacus consectetur ante, vel pulvinar risus enim posuere mi. Nulla ut elementum eros.</p>
</div>
</div>
</div>
<div class="row no-gutters mt-1">
<div class="col-md-7 p-1">
<!----HISTORY--->
<div class="p-1" style="font-family: Playfair Display; font-size:26px; color: #81b3a1;"><b>History</b></div>
<!-----feel free to write as much as you can, this box scrolls--->
<div class="text-justify p-1" style="font-family: Lato; font-size: 12px; color: #445e55; overflow-y: scroll; height: 300px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in luctus turpis, non venenatis mauris. Nunc ornare nisi sit amet bibendum volutpat. Sed vel interdum arcu. Nam lorem arcu, feugiat at eleifend at, suscipit id ex. Aenean euismod viverra vulputate. Aenean varius auctor nibh. Nulla rutrum mi tellus, non lacinia metus varius scelerisque. Quisque commodo eros nunc, eget imperdiet tellus sodales vel.</p>
<p>Vestibulum mi ipsum, auctor dignissim viverra sed, consequat a tellus. Morbi neque felis, lobortis a cursus id, semper eget augue. Ut imperdiet dapibus dolor, eget ultrices nisl dictum id. Curabitur in facilisis tortor. Suspendisse at vulputate ligula. Aliquam eu diam ultricies, mollis erat sed, fringilla nunc. Nullam porttitor tincidunt lacus a fringilla. Aenean auctor sapien a iaculis consequat. Curabitur faucibus nec diam sed fringilla. Maecenas faucibus, enim gravida suscipit rutrum, tortor lacus consectetur ante, vel pulvinar risus enim posuere mi. Nulla ut elementum eros.</p>
</div>
</div>
<!----RELATIONSHIPS---->
<div class="col-md-5 p-1">
<div class="p-1" style="font-family: Playfair Display; font-size:26px; color: #81b3a1;"><b>Relationships</b></div>
<!----Relationship 1--->
<div class="row no-gutters">
<div class="col-5 p-1"><div class = "card p-0 mt-2 mx-auto" style = "height: 80px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>
<div class="col-7 p-1">
<a href="link" class="font-weight-bold" style="font-family: Lato; font-size: 18px; color: #6bb59b;">Name</a>
<p class="text-justify" style="font-family: Lato; font-size: 12px; color: #445e55">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus</p>
</div>
</div>
<!----Relationship 2--->
<div class="row no-gutters">
<div class="col-5 p-1"><div class = "card p-0 mt-2 mx-auto" style = "height: 80px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>
<div class="col-7 p-1">
<a href="link" class="font-weight-bold" style="font-family: Lato; font-size: 18px; color: #6bb59b;">Name</a>
<p class="text-justify" style="font-family: Lato; font-size: 12px; color: #445e55">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus</p>
</div>
</div>
<!----Relationship 3--->
<div class="row no-gutters">
<div class="col-5 p-1"><div class = "card p-0 mt-2 mx-auto" style = "height: 80px; background:url(IMG URL); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>
<div class="col-7 p-1">
<a href="link" class="font-weight-bold" style="font-family: Lato; font-size: 18px; color: #6bb59b;">Name</a>
<p class="text-justify" style="font-family: Lato; font-size: 12px; color: #445e55">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-----CREDITS dont remove pls---->
<div class="text-center mt-2"><a href="https://toyhou.se/Wren_Song"><i class="fa-solid fa-code" style="color: #6bb59b;"></i></a></div>
</div>
Recent Images
No images.