<!DOCTYPE html>
<!--CODING INFORMATION AND TERMS
Cashmere
Free to use
Feel free to edit or frankenstien with other codes (According to ToS of other users)
Every place for an image but the background have been replaced with a stand-in to indicate where they would go, look for URL in all caps
Turn off WYSIWYG and use code editor-->
<!--COLOR CODES
Background: rgba(119, 114, 157, 0.89)
Text color w/ background: #E0BFB8
Text color w/o background: #000
Border: #FFF8E7
Icons: #9590BB
-->
<div class="fluid row col-sm-5 mx-auto py-2" style="color: #000; font-family: Courier;
background: url(https://images.unsplash.com/photo-1514829560620-c510997c9c41?q=80&w=3870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); background-size: cover;
border-radius: 15px; border: 2px solid #FFF8E7;">
<!-- Left column -->
<div class="col-sm-4 py-1" style="text-align: center">
<!-- Name -->
<p style="font-size: 2em; font-family: Algerian"><i class="fa-duotone fa-cat-space" style="color: #9590BB;"></i> Name <i class="fa-duotone fa-planet-ringed" style="color: #9590BB;"></i></p>
<!-- Pronouns -->
<h6 class="col-sm-8 mx-auto py-1" style="background: rgba(119, 114, 157, 0.89); color: #E0BFB8; border-radius: 15px">pronouns</h6>
<!-- Quote -->
<p style="font-size: 1.33em;">"short quote belongs here, three or four"</p>
<!-- Credits -->
<div class="col mt-0 mx-auto py-1 px-3" style="background-color: #77729d99; border-radius:15px; height: 20px;">
<a href="https://toyhou.se/24550562.f2u-cashmere" style="color:rgba(255,255,255,0.5);" title="code credit"> <i class="fa-duotone fa-code px-2 pull-right"> </i> </a>
<a href="URL" style="color:rgba(255,255,255,0.5);" title="image credit"> <i class="fa-duotone fa-images px-2 pull-right"> </i> </a>
</div>
</div>
<!-- Right column -->
<div class="col-sm-8">
<!-- Tab pages content -->
<div class="tab-content m-0 py-1 px-2" style="width: 100%; background: rgba(119, 114, 157, 0.89); color: #E0BFB8; border: .5px solid #FFF8E7; height: 200px; border-radius: 15px;">
<!-- About tab -->
<div class="tab-pane fade show active" id="about" style="height: 200px; overflow: hidden; text-align: justify;">
<p> Text does not scroll, instead becomes clipped. Write about yourself! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales</p>
</div>
<!-- Queue/To-do list tab -->
<div class="tab-pane fade show" id="queue" style="height: 200px; overflow: hidden;">
<div class="row">
<div class="col-sm-6 mt-2 mx-auto">
<p>Working on:</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div class="col-sm-6 mt-2 mx-auto">
<p>Waiting on:</p>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>
</div>
<!-- Characters featured tab -->
<div class="tab-pane fade show" id="characters" style="height: 200px; overflow: hidden;">
<div class="py-2 row">
<a href="character" class="mx-auto" style="color: #000;">
<div class="col-sm-3 my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" class="mx-auto" style="color: #000;">
<div class="col-sm-3 my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" style="color: #000;">
<div class="col-sm-3 mx-auto my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" style="color: #000;">
<div class="col-sm-3 mx-auto my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" style="color: #000;">
<div class="col-sm-3 mx-auto my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" style="color: #000;">
<div class="col-sm-3 mx-auto my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" style="color: #000;">
<div class="col-sm-3 mx-auto my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
<a href="character" style="color: #000;">
<div class="col-sm-3 mx-auto my-1 p-0" style="background-image: url(https://pixy.org/images/placeholder.png); background-size: cover; background-position: center; height: 75px;">
<div style="text-align: center; width: 100%; background: rgba(255, 255, 255, 0.5);">
<p>Name</p>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Tab buttons list -->
<div class="nav mt-1" role="tab-list">
<a class="nav-link mx-auto" data-toggle="pill" href="#about" style="height:3em; color: #9590BB;"><i class="fa-solid fa-user"></i></a>
<a class="nav-link mx-auto" data-toggle="pill" href="#queue" style="height:3em; color: #9590BB;"><i class="fa-solid fa-bars"></i></a>
<a class="nav-link mx-auto" data-toggle="pill" href="#characters" style="height:3em; color: #9590BB;"><i class="fa-solid fa-folder-open"></i></a>
</div>
</div>
</div>
