<div class="container py-5 px-0">
<div class="row no-gutters">
<div class="col-lg-8 col-sm-10 p-4 offset-lg-2 offset-sm-1">
<div class="row collapsed-sidebar">
<div class="card side-nav" style="border: none; border-radius: 10px; padding: 15px; width:100%;">
<div class="row" style="height:100px;">
<div class="col-xl-2 col-sm-3 col-4">
<div class="collapsed-sidebar" style="margin-left: -25px; margin-top: -35px; position: absolute;">
<img class="rounded-circle" src="https://cdn.discordapp.com/attachments/742548715046437004/1043786900076511293/portrait.jpg" style="position: absolute; height: 130px; max-width: 130px; z-index: 11;">
<div class="side-nav" style="margin-left:-10px; margin-top:-10px; min-width:150px; height:150px; z-index:9; border-radius:50%; border-bottom: none; box-shadow: none;"></div>
</div>
</div>
<div class="col">
<h2 class="card-title ml-2 text-primary">
<i class="fas fa-user" style="display: inline-block;"></i> Name
</h2>
<h6 class="card-subtitle mb-2 ml-2 text-muted" style="font-size: 14px;">Subtitle or Short Description</h6>
</div>
</div>
<div class="row" style="height:220px; overflow-y:scroll; background-color: rgb(255 255 255 / 5%);">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="tab-content pt-2 pl-2 pr-2" id="pills-tabContent">
<div class="tab-pane fade text-center show active" id="pills-main" role="tabpanel" aria-labelledby="pills-main-tab">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam sed ligula et auctor. Mauris mollis mattis lectus, eu scelerisque nulla scelerisque lacinia. Phasellus lacus ligula, euismod non accumsan id, consectetur et nibh. Vestibulum dui mi, maximus in eros at, sodales malesuada enim. Aenean faucibus fermentum purus sed bibendum. Nullam pretium varius fringilla. Pellentesque vestibulum mi a justo sagittis, quis commodo lorem pulvinar. Sed efficitur leo et nisl lacinia tincidunt. Ut vel nulla erat. Duis lobortis tincidunt mi vel imperdiet. Phasellus a felis id urna volutpat interdum. Donec a ex vitae tellus egestas placerat. Nulla facilisi. Duis diam tortor, maximus accumsan posuere ut, faucibus sed ante. </p>
</div>
<div class="tab-pane fade" id="pills-stats" role="tabpanel" aria-labelledby="pills-stats-tab">
<div class="row text-center mb-1">
<div class="col-12">
<h6>RACE | CLASS | LEVEL</h6>
</div>
</div>
<div class="row text-center mb-1">
<div class="col-12">
<div class="badge badge-primary badge-pill mb-1" style="border-radius:10px;padding: 5px 9px;">
<p style="margin: 3px; font-size: 12px;">AC: 10</p>
</div>
<div class="badge badge-primary badge-pill mb-1" style="border-radius:10px;padding: 5px 9px;">
<p style="margin: 3px; font-size: 12px;">INIT: +0</p>
</div>
<div class="badge badge-primary badge-pill mb-1" style="border-radius:10px;padding: 5px 9px;">
<p style="margin: 3px; font-size: 12px;">HP: 10</p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-12">
<div class="badge badge-primary badge-pill" style="border-radius:10px;padding: 5px 9px;">
<p style="margin-bottom: 4px; margin-top: 2px; font-size: 11px;">STR</p>
<p class="d-none d-sm-inline" style="font-size:18px; padding:10px;">+0</p>
<p style="margin-bottom: 2px; margin-top: 4px; font-size: 11px;">10</p>
</div>
<div class="badge badge-primary badge-pill" style="border-radius:10px;padding: 5px 9px;">
<p style="margin-bottom: 4px; margin-top: 2px; font-size: 11px;">DEX</p>
<p class="d-none d-sm-inline" style="font-size:18px; padding:10px;">+0</p>
<p style="margin-bottom: 2px; margin-top: 4px; font-size: 11px;">10</p>
</div>
<div class="badge badge-primary badge-pill" style="border-radius:10px;padding: 5px 9px;">
<p style="margin-bottom: 4px; margin-top: 2px; font-size: 11px;">CON</p>
<p class="d-none d-sm-inline" style="font-size:18px; padding:10px;">+0</p>
<p style="margin-bottom: 2px; margin-top: 4px; font-size: 11px;">10</p>
</div>
<div class="badge badge-primary badge-pill" style="border-radius:10px;padding: 5px 9px;">
<p style="margin-bottom: 4px; margin-top: 2px; font-size: 11px;">INT</p>
<p class="d-none d-sm-inline" style="font-size:18px; padding:10px;">+0</p>
<p style="margin-bottom: 2px; margin-top: 4px; font-size: 11px;">10</p>
</div>
<div class="badge badge-primary badge-pill" style="border-radius:10px;padding: 5px 9px;">
<p style="margin-bottom: 4px; margin-top: 2px; font-size: 11px;">WIS</p>
<p class="d-none d-sm-inline" style="font-size:18px; padding:10px;">+0</p>
<p style="margin-bottom: 2px; margin-top: 4px; font-size: 11px;">10</p>
</div>
<div class="badge badge-primary badge-pill" style="border-radius:10px;padding: 5px 9px;">
<p style="margin-bottom: 4px; margin-top: 2px; font-size: 11px;">CHA</p>
<p class="d-none d-sm-inline" style="font-size:18px; padding:10px;">+0</p>
<p style="margin-bottom: 2px; margin-top: 4px; font-size: 11px;">10</p>
</div>
</div>
</div>
<div class="row m-2 mt-4">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam sed ligula et auctor. Mauris mollis mattis lectus, eu scelerisque nulla scelerisque lacinia. Phasellus lacus ligula, euismod non accumsan id, consectetur et nibh. </p>
</div>
</div>
<div class="tab-pane fade" id="pills-story" role="tabpanel" aria-labelledby="pills-story-tab">
<div class="row ml-2 mr-2">
<h3 class="text-primary">Section Title #1</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam sed ligula et auctor. Mauris mollis mattis lectus, eu scelerisque nulla scelerisque lacinia. Phasellus lacus ligula, euismod non accumsan id, consectetur et nibh. Vestibulum dui mi, maximus in eros at, sodales malesuada enim. Aenean faucibus fermentum purus sed bibendum. Nullam pretium varius fringilla. Pellentesque vestibulum mi a justo sagittis, quis commodo lorem pulvinar. Sed efficitur leo et nisl lacinia tincidunt. Ut vel nulla erat. Duis lobortis tincidunt mi vel imperdiet. Phasellus a felis id urna volutpat interdum. Donec a ex vitae tellus egestas placerat. Nulla facilisi. Duis diam tortor, maximus accumsan posuere ut, faucibus sed ante. </p>
<p> Donec ut est elit. Pellentesque ut nunc eu mi viverra volutpat. Pellentesque aliquet ante turpis, vel tempus tortor vulputate ultrices. Suspendisse suscipit urna at metus pulvinar tempor. Fusce molestie maximus enim eget finibus. Aenean at sem metus. Sed luctus volutpat quam et blandit. Aenean bibendum mi sapien, eu tristique sem eleifend aliquam. Maecenas sem ligula, ultrices et faucibus in, commodo et ipsum. Donec in consequat nisi. Aliquam erat nisi, hendrerit vel augue nec, pharetra posuere velit. Vivamus sit amet elementum tortor. Pellentesque efficitur sodales elit. Sed faucibus ligula at eleifend rutrum. Maecenas consequat facilisis odio, ac molestie tellus feugiat vel. </p>
<h3 class="text-primary">Section Title #2</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam sed ligula et auctor. Mauris mollis mattis lectus, eu scelerisque nulla scelerisque lacinia. Phasellus lacus ligula, euismod non accumsan id, consectetur et nibh. Vestibulum dui mi, maximus in eros at, sodales malesuada enim. Aenean faucibus fermentum purus sed bibendum. Nullam pretium varius fringilla. Pellentesque vestibulum mi a justo sagittis, quis commodo lorem pulvinar. Sed efficitur leo et nisl lacinia tincidunt. Ut vel nulla erat. Duis lobortis tincidunt mi vel imperdiet. Phasellus a felis id urna volutpat interdum. Donec a ex vitae tellus egestas placerat. Nulla facilisi. Duis diam tortor, maximus accumsan posuere ut, faucibus sed ante. </p>
<p> Donec ut est elit. Pellentesque ut nunc eu mi viverra volutpat. Pellentesque aliquet ante turpis, vel tempus tortor vulputate ultrices. Suspendisse suscipit urna at metus pulvinar tempor. Fusce molestie maximus enim eget finibus. Aenean at sem metus. Sed luctus volutpat quam et blandit. Aenean bibendum mi sapien, eu tristique sem eleifend aliquam. Maecenas sem ligula, ultrices et faucibus in, commodo et ipsum. Donec in consequat nisi. Aliquam erat nisi, hendrerit vel augue nec, pharetra posuere velit. Vivamus sit amet elementum tortor. Pellentesque efficitur sodales elit. Sed faucibus ligula at eleifend rutrum. Maecenas consequat facilisis odio, ac molestie tellus feugiat vel. </p>
</div>
</div>
<div class="tab-pane fade" id="pills-facts" role="tabpanel" aria-labelledby="pills-facts-tab">
<div class="row m-1">
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">AGE:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">GENDER:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">PRONOUNS:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">ORIENTATION:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">HEIGHT:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">WEIGHT:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">BUILD:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">HAIR:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">EYES:</b> value
</p>
</div>
<div class="col-sm-6 col-lg-4 col-12">
<p>
<b class="text-primary">SKIN:</b> value
</p>
</div>
</div>
<div class="row m-1 mt-2">
<div class="col-sm-6 col-12 mt-2">
<p>
<i class="fas fa-angle-right text-primary" style="display: inline-block;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam sed ligula et auctor. Mauris mollis mattis lectus, eu scelerisque nulla scelerisque lacinia.
</p>
</div>
<div class="col-sm-6 col-12 mt-2">
<p>
<i class="fas fa-angle-right text-primary" style="display: inline-block;"></i> Phasellus lacus ligula, euismod non accumsan id, consectetur et nibh. Vestibulum dui mi, maximus in eros at, sodales malesuada enim. Aenean faucibus fermentum purus sed bibendum.
</p>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-inv" role="tabpanel" aria-labelledby="pills-inv-tab">
<div class="row m-1">
<div class="col-6 col-sm-4 col-lg-3 text-center mb-3">
<img src="https://www.themorningjump.com/wp-content/plugins/RestaurantBookingTable/assets/images/no_image.png" style="max-height:125px;border-radius:15%;" class="img-thumbnail">
<p class="text-muted">Item Name</p>
</div>
<div class="col-6 col-sm-4 col-lg-3 text-center mb-3">
<img src="https://www.themorningjump.com/wp-content/plugins/RestaurantBookingTable/assets/images/no_image.png" style="max-height:125px;border-radius:15%;" class="img-thumbnail">
<p class="text-muted">Item Name</p>
</div>
<div class="col-6 col-sm-4 col-lg-3 text-center mb-3">
<img src="https://www.themorningjump.com/wp-content/plugins/RestaurantBookingTable/assets/images/no_image.png" style="max-height:125px;border-radius:15%;" class="img-thumbnail">
<p class="text-muted">Item Name</p>
</div>
<div class="col-6 col-sm-4 col-lg-3 text-center mb-3">
<img src="https://www.themorningjump.com/wp-content/plugins/RestaurantBookingTable/assets/images/no_image.png" style="max-height:125px;border-radius:15%;" class="img-thumbnail">
<p class="text-muted">Item Name</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-bottom: -10px;margin-top: 12px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<ul class="nav nav-pills" id="pills-tab" role="tablist">
<li class="nav-item pr-2">
<a class="nav-link active" title="Main" id="pills-main-tab" data-toggle="pill" href="#pills-main" role="tab" aria-controls="pills-main" aria-selected="true">
<i class="fas fa-star fa-lg pt-2 pb-2 mt-1 mb-1" style="display: inline-block;"></i>
<span class="pl-2 d-none d-md-inline-block"> Main</span>
</a>
</li>
<li class="nav-item pr-2">
<a class="nav-link" title="Stats" id="pills-stats-tab" data-toggle="pill" href="#pills-stats" role="tab" aria-controls="pills-stats" aria-selected="true">
<i class="fas fa-dice-d20 fa-lg pt-2 pb-2 mt-1 mb-1" style="display: inline-block;"></i>
<span class="pl-2 d-none d-md-inline-block"> Stats</span>
</a>
</li>
<li class="nav-item pr-2">
<a class="nav-link" title="Story" id="pills-story-tab" data-toggle="pill" href="#pills-story" role="tab" aria-controls="pills-story" aria-selected="false">
<i class="fas fa-books fa-lg pt-2 pb-2 mt-1 mb-1" style="display: inline-block;"></i>
<span class="pl-2 d-none d-md-inline-block"> Story</span>
</a>
</li>
<li class="nav-item pr-2">
<a class="nav-link" title="Facts" id="pills-facts-tab" data-toggle="pill" href="#pills-facts" role="tab" aria-controls="pills-facts" aria-selected="false">
<i class="fas fa-clipboard-check fa-lg pt-2 pb-2 mt-1 mb-1" style="display: inline-block;"></i>
<span class="pl-2 d-none d-md-inline-block"> Facts</span>
</a>
</li>
<li class="nav-item pr-2">
<a class="nav-link" title="Inventory" id="pills-inv-tab" data-toggle="pill" href="#pills-inv" role="tab" aria-controls="pills-inv" aria-selected="false">
<i class="fas fa-backpack fa-lg pt-2 pb-2 mt-1 mb-1" style="display: inline-block;"></i>
<span class="pl-2 d-none d-md-inline-block"> Inv</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col" style="text-align: right;font-size: 12px;">code by
<a href="https://toyhou.se/serenamidori">
<i class="fi-star user-name-icon"></i>serenamidori
</a>
</div>
</div>
</div>
</div>
</div>
