<!---------------- WHOLE THING ---------------->
<div class="mx-auto" style="font-family: trebuchet ms,geneva; max-width: 600px;">
<div class="card card-block" style="background-color: #a8e9ff; border-color: #3781f5; border-width: 5px; border-radius: 20px; color: #3781f5; background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/29301382_NRZbHyAgfIrHqHu.png?1642800739)">
<!---------------- NAME HEADER ---------------->
<div class="display-4 mb-2 d-flex">Name
<hr class="flex-fill my-auto mx-2" style="background-color: #3781f5">
<i class="fas fa-balloons pull-right"/></div>
<!---------------- END NAME HEADER ---------------->
<!---------------- QUOTE ---------------->
<p class="text-center">
<i class="fas fa-quote-left pull-left"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<i class="fas fa-quote-right pull-right"/>
</p>
<!---------------- END QUOTE ---------------->
<!---------------- MAIN CONTENT ---------------->
<div class="row no-gutters">
<!---------------- PAGEDOLL ---------------->
<div class="col-sm-12 col-lg-4 p-2 m-auto text-center">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53023480_2KRDiYOjPt5AC8Y.png" style="max-height:300px;">
</div>
<!---------------- END PAGEDOLL ---------------->
<!---------------- TAB CONTENT ---------------->
<div class="col-sm-12 col-lg-8 p-2 mb-3 mb-lg-0 mt-3 mt-lg-0">
<div class="card bg-faded card-block p-3 rounded-0" style="height:250px; max-height:250px;; overflow:auto; background-color: #ffe9a8; border-color: #ff837b; border-width: 5px 5px 5px; border-radius: 20px 20px 0 0; color: #ff837b">
<div class="tab-content">
<!---------------- TAB ONE ---------------->
<div class="tab-pane fade in active show" id="CCONE">
<h4 class="text-uppercase"><b>About</b>
<i class="fas fa-party-horn pull-right"/></h4>
<hr class="m-0" style="background-color: #ff837b">
<!---------------- CONTENT BOXES ---------------->
<div class="row no-gutters">
<div class="col">
<div class="d-flex justify-content-between">
<p class="text-uppercase"><b>Species</b></p>
<span class="text-right">content</span>
</div>
<div class="d-flex justify-content-between my-1">
<p class="text-uppercase"><b>Age</b></p>
<span class="text-right">content</span>
</div>
<div class="d-flex justify-content-between my-1">
<p class="text-uppercase"><b>Gender</b></p>
<span class="text-right">content</span>
</div>
<div class="d-flex justify-content-between my-1">
<p class="text-uppercase"><b>Pronouns</b></p>
<span class="text-right">content</span>
</div>
<!---------------- END CONTENT BOXES ---------------->
<hr class="m-0" style="background-color: #ff837b">
<!---------------- ABOUT ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </p>
<!---------------- END ABOUT ---------------->
</div>
</div>
</div>
<!---------------- END TAB ONE ---------------->
<!---------------- TAB TWO ---------------->
<div class="tab-pane fade in show" id="CCTWO">
<h4 class="text-uppercase"><b>Bio</b>
<i class="fas fa-gift pull-right"/></h4>
<hr class="m-0" style="background-color: #ff837b">
<p>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. </p>
<p>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, eget mattis nibh pellentesque.</p>
</div>
<!---------------- END TAB TWO ---------------->
<!---------------- TAB THREE ---------------->
<div class="tab-pane fade in show" id="CCTHREE">
<h4 class="text-uppercase"><b>Trivia</b>
<i class="fas fa-pinata pull-right"/></h4>
<hr class="m-0" style="background-color: #ff837b">
<!---------------- LIKES ---------------->
<div class="my-1">
<p class="text-uppercase mb-0"><i class="fas fa-heart"/><b> Likes</b></p>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!---------------- END LIKES ---------------->
<hr class="m-0" style="background-color: #ff837b">
<!---------------- DISLIKES ---------------->
<div class="my-1">
<p class="text-uppercase mb-0"><i class="fas fa-heart-broken"/><b> Dislikes</b></p>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!---------------- END DISLIKES ---------------->
<hr class="m-0" style="background-color: #ff837b">
<!---------------- TRIVIA ---------------->
<div class="mt-1 mb-0">
<p class="text-uppercase mb-0"><i class="fas fa-sparkles"/><b> Trivia</b></p>
<ul class="mb-0">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!---------------- END TRIVIA ---------------->
</div>
<!---------------- END TAB THREE ---------------->
<!---------------- TAB FOUR ---------------->
<div class="tab-pane fade in show" id="CCFOUR">
<h4 class="text-uppercase"><b>Links</b>
<i class="fas fa-cake-candles pull-right"/></h4>
<hr class="m-0" style="background-color: #ff837b">
<!---------------- CHARACTER ---------------->
<div class="row no-gutters my-2">
<div class="col-lg-4 mb-1 p-2 d-flex">
<div class="rounded-circle m-auto" style="background-image: url(https://via.placeholder.com/100); no-repeat center;background-size:cover;height:80px;width:80px;"></div>
</div>
<div class="col-lg">
<div class="d-flex justify-content-between text-secondary">
<a href="URLHERE"><b>NAME</b></a>
<span class="text-right my-auto">Relationship</span>
</div>
<div style="max-height: 80px; overflow: auto;">
<p>Describe their relationship here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!---------------- END CHARACTER ---------------->
<!---------------- CHARACTER ---------------->
<div class="row no-gutters my-2">
<div class="col-lg-4 mb-1 p-2 d-flex">
<div class="rounded-circle m-auto" style="background-image: url(https://via.placeholder.com/100); no-repeat center;background-size:cover;height:80px;width:80px;"></div>
</div>
<div class="col-lg">
<div class="d-flex justify-content-between text-secondary">
<a href="URLHERE"><b>NAME</b></a>
<span class="text-right my-auto">Relationship</span>
</div>
<div style="max-height: 80px; overflow: auto;">
<p>Describe their relationship here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!---------------- END CHARACTER ---------------->
<!---------------- CHARACTER ---------------->
<div class="row no-gutters my-2">
<div class="col-lg-4 mb-1 p-2 d-flex">
<div class="rounded-circle m-auto" style="background-image: url(https://via.placeholder.com/100); no-repeat center;background-size:cover;height:80px;width:80px;"></div>
</div>
<div class="col-lg">
<div class="d-flex justify-content-between text-secondary">
<a href="URLHERE"><b>NAME</b></a>
<span class="text-right my-auto">Relationship</span>
</div>
<div style="max-height: 80px; overflow: auto;">
<p>Describe their relationship here! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
</div>
</div>
</div>
<!---------------- END CHARACTER ---------------->
</div>
<!---------------- END TAB FOUR ---------------->
</div>
</div>
<!---------------- TAB NAVIGATION ---------------->
<ul class="nav nav-tabs card-header-tabs row no-gutters justify-content-between">
<li class="nav-item col-3 mb-sm-2 mb-lg-0 pr-1"><a class="btn btn-block bg-faded show active rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCONE">About</a></li>
<li class="nav-item col-3 mb-sm-2 mb-lg-0 px-1"><a class="btn btn-block bg-faded show rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCTWO">Bio</a></li>
<li class="nav-item col-3 mb-sm-2 mb-lg-0 px-1"><a class="btn btn-block bg-faded show rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCTHREE">Trivia</a></li>
<li class="nav-item col-3 mb-sm-2 mb-lg-0 pl-1"><a class="btn btn-block bg-faded show rounded-0 border-0 text-uppercase" style="border-radius:0 0 10px 10px; background-color: #3781f5; color: #fff" data-toggle="tab" href="#CCFOUR">Links</a></li>
</ul>
<!---------------- END TAB NAVIGATION ---------------->
</div>
<!---------------- END TAB CONTENT ---------------->
</div>
<!---------------- END MAIN CONTENT ---------------->
</div>
<!---------------- CREDIT - DO NOT REMOVE!!! ---------------->
<div class="text-right">
<a href="https://www.deviantart.com/firstfear/art/Vector-Confetti-Blast-BG-Pack-319233841" class="tooltipster text-muted" title="Background Pattern"><i class="far fa-image fa-sm"></i></a>
<a href="/Prismicodes" class="tooltipster text-muted" title="HTML by Prismicodes"><i class="far fa-code fa-sm"></i></a>
</div>
<!---------------- END CREDIT ---------------->
</div>
<!---------------- END WHOLE THING ---------------->
