Booklet
created by:HTMLobster
HTMLBootstrapCharacter
Copy
<!------------------------------------
Booklet - Character Profile
by HTMLobster
TOS: https://toyhou.se/~bulletins/2899311.terms-of-service
------------------------------------->
<div class="container">
<div class="row no-gutters">
<!-- left column -->
<div class="col-lg bg-primary" style="height:650px;">
<div class="p-sm-5 p-3 h-100">
<!-- name -->
<h1 class="display-4 font-weight-bold text-white mb-n3 mt-n3 ml-n3">
Character Name
</h1>
<!-- image -->
<div class="h-100 w-100" style="background:url(image_url) center; background-size:cover;">
</div>
<!-- basics -->
<h2 class="display-4 font-weight-bold text-white mt-n4 mr-n3 text-right">
Age. Pronouns.
</h2>
</div>
</div>
<!-- right column -->
<div class="col bg-faded text-justify">
<div class="p-sm-5 p-3 h-100">
<div id="carousel" class="carousel slide card border-0 rounded-0" data-ride="false" data-pause="true">
<div class="carousel-inner">
<!-- slide 1 -->
<div class="carousel-item active">
<div class="d-block d-lg-flex flex-column">
<div class="py-2 px-3" style="min-height:554px; flex:0 0 554px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;">
<!-- history -->
<p><span class="text-primary font-weight-bold" style="font-variant:small-caps;">history</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis ex lacus. Aliquam a lobortis turpis, accumsan pulvinar turpis. Praesent vestibulum sollicitudin elit ut dictum. Donec et pharetra risus, et malesuada nunc. Praesent iaculis metus vel dignissim dignissim. Ut porta libero id odio commodo accumsan. Nam pharetra purus quis malesuada fermentum. Vivamus cursus ullamcorper gravida. Curabitur vitae egestas ante. Proin pharetra convallis laoreet. Proin quis aliquet augue, ut sodales arcu.</p>
<p>Vivamus ex lorem, finibus sed tortor id, hendrerit scelerisque elit. Praesent enim nibh, sollicitudin quis dui dictum, blandit condimentum odio. Aenean eu facilisis metus. Aenean volutpat odio non faucibus congue.</p>
<!-- about -->
<p><span class="text-primary font-weight-bold" style="font-variant:small-caps;">about</span> Praesent lacus nibh, imperdiet et ornare non, viverra vel magna. Curabitur at tortor non magna consequat accumsan. Suspendisse sollicitudin quam sed metus congue aliquet. Nunc faucibus aliquam nibh non molestie. Sed quis nisl eget tortor porta convallis eget ac elit. Phasellus hendrerit suscipit elit nec fringilla. Ut sed mattis augue, nec tristique est. Integer nunc enim, commodo vitae urna ac, porta dictum erat. Fusce euismod faucibus iaculis. Maecenas vel odio aliquam, dictum neque nec, ultrices lorem.</p>
<p>Nulla dui justo, consequat sed mauris sit amet, rhoncus ultricies urna. Aliquam fringilla neque metus, sit amet elementum odio efficitur eu. Donec condimentum et nulla sit amet consectetur. Nunc odio mi, euismod in odio ac, aliquet facilisis erat. Sed porta blandit erat ac efficitur. </p>
</div>
</div>
</div>
<!-- slide 2 -->
<div class="carousel-item">
<!-- personality -->
<div class="d-block d-lg-flex flex-column">
<div class="py-2 px-3" style="min-height:554px; flex:0 0 554px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;">
<!-- traits -->
<div class="row">
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Outgoing
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Shy
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Generous
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Selfish
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Assertive
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Submissive
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Organized
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Messy
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Humble
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Arrogant
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Warm
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Cold
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Open
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Secretive
</div>
</div>
</div>
<div class="col-12 mt-2">
<div class="row no-gutters align-items-center">
<!-- trait -->
<div class="col-3">
Impulsive
</div>
<!-- rating -->
<div class="col mx-2">
<div>
<div class="progress align-items-center" style="height:2px; overflow:visible;">
<!-- to move dot, adjust the margin-left % -->
<div class="progress-bar" style="margin-left:calc(50% - 10px); width:10px; height:10px; border-radius:50%;"></div>
</div>
</div>
</div>
<!-- trait -->
<div class="col-3 text-right">
Controlled
</div>
</div>
</div>
</div>
<!-- symbolism -->
<div class="row no-gutters">
<div class="col-sm-6 mt-3">
<span class="text-primary font-weight-bold" style="font-variant:small-caps;">star sign</span>
• content
</div>
<div class="col-sm-6 mt-3">
<span class="text-primary font-weight-bold" style="font-variant:small-caps;">tarot card</span>
• content
</div>
<div class="col-sm-6 mt-3">
<span class="text-primary font-weight-bold" style="font-variant:small-caps;">gemstone</span>
• content
</div>
<div class="col-sm-6 mt-3">
<span class="text-primary font-weight-bold" style="font-variant:small-caps;">color</span>
• content
</div>
<div class="col-sm-6 mt-3">
<span class="text-primary font-weight-bold" style="font-variant:small-caps;">season</span>
• content
</div>
<div class="col-sm-6 mt-3">
<span class="text-primary font-weight-bold" style="font-variant:small-caps;">song</span>
• content
</div>
</div>
<!-- description -->
<div class="mt-3">
<p><span class="text-primary font-weight-bold" style="font-variant:small-caps;">personality</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis ex lacus. Aliquam a lobortis turpis, accumsan pulvinar turpis. Praesent vestibulum sollicitudin elit ut dictum. Donec et pharetra risus, et malesuada nunc. Praesent iaculis metus vel dignissim dignissim. Ut porta libero id odio commodo accumsan. Nam pharetra purus quis malesuada fermentum. Vivamus cursus ullamcorper gravida. Curabitur vitae egestas ante. Proin pharetra convallis laoreet. Proin quis aliquet augue, ut sodales arcu.</p>
<p>
Maecenas id turpis tincidunt, eleifend augue id, molestie lectus. Quisque suscipit erat vitae lorem bibendum venenatis. Ut at porta mauris, a vulputate arcu. Ut et justo lobortis, commodo mi at, imperdiet leo. Pellentesque pretium ligula quis consequat hendrerit. Etiam aliquam sapien sed ante rutrum, quis venenatis augue congue. Nullam placerat dignissim odio sed rutrum. Morbi neque orci, aliquet ac urna mollis, pharetra feugiat ex. Nunc nec venenatis nisl. Suspendisse potenti.
</p>
</div>
</div>
</div>
</div>
<!-- slide 3 -->
<div class="carousel-item">
<div class="d-block d-lg-flex flex-column">
<div class="pb-2 pt-1 px-3" style="min-height:554px; flex:0 0 554px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;">
<!-- relationship - left image -->
<div class="row no-gutters mt-3">
<div class="col-sm-4">
<div class="bg-primary p-2">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%;"></div>
</div>
</div>
<div class="col pl-sm-3">
<p>
<!-- link -->
<a href="chara_url" class="font-weight-bold" style="font-variant:small-caps;">
character name
</a>
•
<!-- relationship type -->
<span class="text-muted font-weight-bold" style="font-variant:small-caps;">
relationship
</span>
<!-- description -->
Ut porta libero id odio commodo accumsan. Nam pharetra purus quis malesuada fermentum. Vivamus cursus ullamcorper gravida. Curabitur vitae egestas ante. Proin pharetra convallis laoreet. Proin quis aliquet augue.
</p>
</div>
</div>
<!-- relationship - right image -->
<div class="row no-gutters mt-3">
<div class="col pr-sm-3 order-sm-1 order-2">
<p>
<!-- link -->
<a href="chara_url" class="font-weight-bold" style="font-variant:small-caps;">
character name
</a>
•
<!-- relationship type -->
<span class="text-muted font-weight-bold" style="font-variant:small-caps;">
relationship
</span>
<!-- description -->
Ut porta libero id odio commodo accumsan. Nam pharetra purus quis malesuada fermentum. Vivamus cursus ullamcorper gravida. Curabitur vitae egestas ante. Proin pharetra convallis laoreet. Proin quis aliquet augue.
</p>
</div>
<div class="col-sm-4 order-sm-2 order-1">
<div class="bg-primary p-2">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%;"></div>
</div>
</div>
</div>
<!-- relationship - left image -->
<div class="row no-gutters mt-3">
<div class="col-sm-4">
<div class="bg-primary p-2">
<!-- image -->
<div style="background:url(image_url) center; background-size:cover; padding:50%;"></div>
</div>
</div>
<div class="col pl-sm-3">
<p>
<!-- link -->
<a href="chara_url" class="font-weight-bold" style="font-variant:small-caps;">
character name
</a>
•
<!-- relationship type -->
<span class="text-muted font-weight-bold" style="font-variant:small-caps;">
relationship
</span>
<!-- description -->
Ut porta libero id odio commodo accumsan. Nam pharetra purus quis malesuada fermentum. Vivamus cursus ullamcorper gravida. Curabitur vitae egestas ante. Proin pharetra convallis laoreet. Proin quis aliquet augue.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- carousel buttons -->
<a class="carousel-control-prev align-items-end" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true" style="background:none;"><i class="fas fa-chevron-double-left display-3 text-primary"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next align-items-end mr-3" href="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true" style="background:none;"><i class="fas fa-chevron-double-right display-3 text-primary"></i></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<!-- credit -->
<div class="mt-3 text-center">
<a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="Code by HTMLobster">
<i class="fa-solid fa-lobster"></i>
</a>
</div>
</div>