<div class="container-fluid">
<!---------- HEADER ------------------>
<div>
<div class="row no-gutters">
<div class="col-sm-6 mb-2 p-4 text-right text-uppercase">
<div class="text-primary" style="font-size:35px; letter-spacing:5px;">Name</div>
<div style="font-size:10px; letter-spacing:5px;">Age / Species</div>
</div>
<div class="col-sm-3 mb-2 p-3" style="line-height:10px;">
<p class="mt-2">
<span class="text-uppercase" style="letter-spacing:5px;">pronouns</span> <span class="pull-right text-secondary" style="letter-spacing:1px;">?? / ??</span></p>
<p><span class="text-uppercase" style="letter-spacing:5px;">gender</span> <span class="pull-right text-secondary" style="letter-spacing:1px;">?? ?????</span></p>
<p><span class="text-uppercase" style="letter-spacing:5px;">sexuality</span> <span class="pull-right text-secondary" style="letter-spacing:1px;">??sexual</span></p>
<p><span class="text-uppercase" style="letter-spacing:5px;">romantic</span> <span class="pull-right text-secondary" style="letter-spacing:1px;">??amorus</span></p>
</div>
</div></div>
<!---------- TRIVIA ------------------>
<div class="row no-gutters">
<div class="col-1" style="height:250px;"></div>
<div class="col-sm-5 card m-1">
<div class="p-2 bg-faded text-uppercase text-center" style="letter-spacing:5px;">Trivia</div>
<div class="m-1 p-1 text-justify" style="height:350px; overflow-y:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum turpis quis dictum volutpat. Praesent justo sem, iaculis pharetra sem id, lacinia tincidunt urna.
<hr class="w-50 my-2">
Praesent justo sem, iaculis pharetra sem id, lacinia tincidunt urna.
<hr class="w-50 my-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum turpis quis dictum volutpat.
<hr class="w-50 my-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dictum turpis quis dictum volutpat.
<hr class="w-50 my-2">
Praesent justo sem, iaculis pharetra sem id, lacinia tincidunt urna.
<hr class="w-50 my-2">
</div>
</div>
<!---------- KINKS ------------------>
<div class="col-sm-5">
<div class="card m-1 mb-2">
<div class="p-2 bg-primary text-uppercase text-center" style="letter-spacing:5px;">Kinks</div>
<div class="m-1 p-1" style="height:150px; overflow-y:auto;">
<div class="text-uppercase text-primary text-left pb-2" style="letter-spacing:5px;">Recieving</div>
<p class="text-justify">
you can do <span class="text-primary">/</span> fun snippets like this <span class="text-primary">/</span> and get descriptive with it <span class="text-primary">/</span> really explain why they like a thing <span class="text-primary">/</span> using little colorful breaks in the lines
</p>
<hr class="w-50 my-2">
<div class="text-uppercase text-primary text-right pb-2" style="letter-spacing:5px;">Giving</div>
<p class="text-justify">
<ul>
<li>Or</li>
<li>You can be</li>
<li>Short and</li>
<li>To the point</li>
<li>With a list</li>
</ul>
</p>
</div>
</div>
<!---------- LIMITS ------------------>
<div class="card m-1">
<div class="p-2 bg-warning text-uppercase text-center" style="letter-spacing:5px;">Limits</div>
<div class="m-1 p-1" style="height:150px; overflow-y:auto;">
<div class="text-uppercase text-warning text-left pb-2" style="letter-spacing:5px;">Soft</div>
<p class="text-justify">
you can do <span class="text-warning">/</span> fun snippets like this <span class="text-warning">/</span> and get descriptive with it <span class="text-warning">/</span> really explain why they like a thing <span class="text-warning">/</span> using little colorful breaks in the lines
</p>
<hr class="w-50 my-3">
<div class="text-uppercase text-warning text-right pb-2" style="letter-spacing:5px;">Hard</div>
<p class="text-justify">
<ul>
<li>Or</li>
<li>You can be</li>
<li>Short and</li>
<li>To the point</li>
<li>With a list</li>
</ul>
</p>
</div>
</div>
</div></div>
<div class="col"></div>
<!---------- PARTNERS ------------------>
<div class="mt-2">
<div class="row no-gutters">
<div class="col-1 mr-1"></div>
<div class="col-sm-10 card">
<div class="p-2 bg-secondary text-uppercase text-center" style="letter-spacing:5px;">Partners</div>
<div class="m-1 p-1 text-justify" style="height:250px; overflow-y:auto;">
<!---------- PARTNER 1 ------------------>
<div style="background-image:url(https://i.imgur.com/FldZvY0.png);
background-positon:center;background-repeat: no-repeat;background-size:cover;min-height:130px;"></div>
<span class="text-uppercase text-primary ml-5 pl-5" style="letter-spacing:5px;">NAME</span>
<span class="pull-right text-secondary pr-5 mr-5" style="letter-spacing:1px;">relationship</span></p>
<div class="text-center" style="font-size:10px; letter-spacing:5px;">AGE <span class="text-primary">/</span> SPECIES <span class="text-primary">/</span> PRONOUNS</div></p>
Aenean libero quam, tristique ac massa ut, lobortis semper leo. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vitae est eu nibh interdum feugiat vel ac nunc. Sed laoreet, sem quis eleifend tincidunt, lacus diam tristique nunc, ut auctor dui leo non mi. Aliquam a ullamcorper massa.
<!---------- PARTNER 2 ------------------>
<hr class="w-50 my-3">
<div style="background-image:url(https://i.imgur.com/FldZvY0.png);
background-positon:center;background-repeat: no-repeat;background-size:cover;min-height:130px;"></div>
<span class="text-uppercase text-primary ml-5 pl-5" style="letter-spacing:5px;">NAME</span>
<span class="pull-right text-secondary pr-5 mr-5" style="letter-spacing:1px;">relationship</span></p>
<div class="text-center" style="font-size:10px; letter-spacing:5px;">AGE <span class="text-primary">/</span> SPECIES <span class="text-primary">/</span> PRONOUNS</div></p>
Aenean libero quam, tristique ac massa ut, lobortis semper leo. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vitae est eu nibh interdum feugiat vel ac nunc. Sed laoreet, sem quis eleifend tincidunt, lacus diam tristique nunc, ut auctor dui leo non mi. Aliquam a ullamcorper massa.
<!---------- PARTNER 3 ------------------>
<hr class="w-50 my-3">
<div style="background-image:url(https://i.imgur.com/FldZvY0.png);
background-positon:center;background-repeat: no-repeat;background-size:cover;min-height:130px;"></div>
<span class="text-uppercase text-primary ml-5 pl-5" style="letter-spacing:5px;">NAME</span>
<span class="pull-right text-secondary pr-5 mr-5" style="letter-spacing:1px;">relationship</span></p>
<div class="text-center" style="font-size:10px; letter-spacing:5px;">AGE <span class="text-primary">/</span> SPECIES <span class="text-primary">/</span> PRONOUNS</div></p>
Aenean libero quam, tristique ac massa ut, lobortis semper leo. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras vitae est eu nibh interdum feugiat vel ac nunc. Sed laoreet, sem quis eleifend tincidunt, lacus diam tristique nunc, ut auctor dui leo non mi. Aliquam a ullamcorper massa.
<!-----For additional partners, copy and paste all contents of PARTNER 3 above this point ----->
</div>
<div class="col"></div>
</div>
<!---------- DO NOT REMOVE ------------------>
</div>
<div class="text-right mr-5 pr-5"><a href="https://toyhou.se/xmoricodes">✘moricodes</a></div>
<div style="min-height:20px"></div>
</div>
