<!----
> thank you for using this template ^^
> turn off WYSIWYG and turn on code editor.
> feel free to frankenstein/change however you like!
> please keep credit visible in some way.
colours:
> text whites: #FFFFFF
> box colour: #5f948a
> accent colour: #506b69
to replace all instances of a colour at once, use ctrl+f in the code editor and select "all".
---->
<center>
<div class="container-md p-5 border-0" style="box-shadow: 0px 0px 10px #FFF;
background-color:#FFF;border:1px solid;background-size:cover;max-width:1080px;">
<div class="row">
<!-------top banner=====-->
<div class="card col-12 py-2" style="border-radius:0px;border:none;background-color:rgba(0,0,0,0);color:#FFFFFF;font-family:times new roman;font-style:italic;text-shadow:0px 0px 3px #FFFFFF;">
<div class="card justify-content-center" style="height:150px;border-radius:0px;border-color:#5f948a;;background-size:cover;background-position:center;
background-image:url(IMG_URL);">
<!-- replace IMG_URL with a link to your image. --->
<p style="font-size:26px;">
QUOTE
</p>
</div>
</div>
<!--top banner end-->
<!-------LEFT SIDE------->
<div class="col-md-5 p-0" style="height:550px;background-size:cover;background-position:center;background-image:
url(IMG_URL)">
<!-- replace IMG_URL with a link to your image. --->
<div class="flex-column justify-content-end p-0" style="height:550px;background-image:linear-gradient(to bottom,rgba(0,0,0,0) 65%,#FFF)">
<div class="flex-column justify-content-end p-0" style="height:550px;background-image:linear-gradient(to right,rgba(0,0,0,0) 95%,#FFF)">
<div class="flex-column justify-content-end p-0" style="height:550px;background-image:linear-gradient(to left,rgba(0,0,0,0) 95%,#FFF)">
<p class="pb-2" style="justify-text:left;font-family:georgia;font-variant:small-caps;color:#506b69;font-size:20px;text-shadow:0px 0px 3px">
ETC.
</p>
</div>
</div>
</div>
</div>
<!-- LEFT SIDE END -->
<!-------RIGHT SIDE------->
<div class="col-md p-0" style="">
<!--name-->
<div class="justify-content-between" style="color:#506b69;text-shadow:0px 0px 3px;">
<hr class="flex-fill my-auto" style="border-top:1px solid; border-bottom:1px solid; height:4px;margin-right:30px">
<p style="font-size:4rem;font-family:times new roman;font-variant:small-caps;">
name
</p>
<hr class="flex-fill my-auto" style="border-top:1px solid; border-bottom:1px solid; height:4px;margin-left:30px">
</div>
<!--name end-->
<div class="row">
<div class="col-md-11" style="background-color:rgba(0,0,0,0)">
<div class="tab tab-content">
<!-------tab 1------->
<div class="tab-pane fade active show" id="tab1">
<p style="font-family:georgia;font-style:italic;color:#506b69;text-align:right;font-size:1rem;text-shadow:0px 0px 2px;">
PROFILE
</p>
<div style="padding-bottom:20px">
<div class="col-md p-3" style="background-color:#5f948a;font-family:georgia;font-style:italic;overflow-y:auto;max-height:400px">
<div class="row no-gutters" style="color:#FFFFFF; filter:opacity(60%)">
<!--left side details-->
<div class="col">
<div class="col-md- px-2">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">nickname</span>
<span class="pull-right">content</span>
<hr style="border-color:#FFFFFF">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">occupation</span>
<span class="pull-right">content</span>
<hr style="border-color:#FFFFFF">
<!--add more if neeeded-->
</div>
</div>
<!--left side details end-->
<!--right side details-->
<div class="col">
<div class="col-md- px-2">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">title</span>
<span class="pull-right">content</span>
<hr style="border-color:#FFFFFF">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">birthday</span>
<span class="pull-right">content</span>
<hr style="border-color:#FFFFFF">
<!--add more if neeeded-->
</div>
</div>
<!--right side details end-->
</div>
<!--details-->
<p class="py-3" style="overflow-y:auto;color:#FFFFFF;max-height:300px">
Box will automatically adjust until scroll.
</p>
<!--details end-->
</div>
</div>
</div>
<!-- tab 1 end -->
<!-------tab 2 start ------->
<div class="tab-pane fade" id="tab2">
<p style="font-family:georgia;font-style:italic;color:#506b69;text-align:right;font-size:1rem;text-shadow:0px 0px 2px;">
PERSONALITY
</p>
<div style="padding-bottom:20px">
<div class="col-md p-3" style="background-color:#5f948a;font-family:georgia;font-style:italic;overflow-y:auto;max-height:400px">
<div class="row no-gutters" style="color:#FFFFFF; filter:opacity(60%)">
<div class="col">
<ul> LIKES
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<!--add more if needed-->
</ul>
</div>
<div class="col">
<ul> DISLIKES
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<!--add more if needed-->
</ul>
</div>
</div>
<hr style="border-color:#FFFFFF;filter:opacity(60%)">
<!--details-->
<p class="" style="overflow-y:auto;color:#FFFFFF;max-height:210px">
Box will automatically adjust until scroll.
</p>
<!--details end-->
</div>
</div>
</div>
<!-- tab 2 end -->
<!------- tab 3 start ------->
<div class="tab-pane fade" id="tab3">
<p style="font-family:georgia;font-style:italic;color:#506b69;text-align:right;font-size:1rem;text-shadow:0px 0px 2px;">
STORY
</p>
<div style="padding-bottom:20px">
<div class="col-md p-3" style="background-color:#5f948a;font-family:georgia;font-style:italic;overflow-y:auto;max-height:400px">
<div class="col" style="color:#FFFFFF; filter:opacity(60%)">
<!-- story tab 1 -->
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">HEADER</span>
<span class="pull-right">I</span>
<hr style="border-color:#FFFFFF">
</div>
<p class="py-3" style="overflow:auto;max-height:200px;color:#FFFFFF">
Section will automatically adjust until scroll.
</p>
<!-- story tab 1 end -->
<!-- story tab 2 -->
<div class="col" style="color:#FFFFFF; filter:opacity(60%)">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">HEADER</span>
<span class="pull-right">II</span>
<hr style="border-color:#FFFFFF">
</div>
<p class="py-3" style="overflow:auto;max-height:200px;color:#FFFFFF">
Section will automatically adjust until scroll.
</p>
<!-- story tab 2 end -->
<!--copy and paste, add as many as needed here-->
</div>
</div>
</div>
<!-- tab 3 end -->
<!--tab 4-->
<div class="tab-pane" id="tab4">
<p style="font-family:georgia;font-style:italic;color:#506b69;text-align:right;font-size:1rem;text-shadow:0px 0px 2px;"> CONNECTIONS </p>
<div style="padding-bottom:20px">
<div class="col-md py-3" style="background-color:#5f948a;font-family:georgia;font-style:italic;overflow-y:auto;max-height:400px">
<!-- character 1 -->
<div class="row no-gutters py-3" style="color:#FFFFFF;">
<img style="height:150px;padding-right:20px"
src="IMG_URL">
<!-- replace IMG_URL with a link to your image. --->
<div class="col" style="color:#FFFFFF">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">
NAME
</span>
<hr style="border-color:#FFFFFF;filter:opacity(60%)">
<!--details-->
<p class="py-3" style="overflow-y:auto;color:#FFFFFF;max-height:280px">
Section automatically adjusts but does not scroll.
</p>
<!--details end-->
</div>
</div>
<!-- character 1 end -->
<!-- character 2 -->
<div class="row no-gutters py-3" style="color:#FFFFFF;">
<img style="height:150px;padding-right:20px"
src="IMG_URL">
<!-- replace IMG_URL with a link to your image. --->
<div class="col" style="color:#FFFFFF">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">
NAME
</span>
<hr style="border-color:#FFFFFF; filter:opacity(60%)">
<!--details-->
<p class="py-3" style="overflow-y:auto;color:#FFFFFF;max-height:280px">
Section automatically adjusts but does not scroll.
</p>
<!--details end-->
</div>
</div>
<!-- character 2 end -->
<!-- character 3 -->
<div class="row no-gutters py-3" style="color:#FFFFFF;">
<img style="height:150px;padding-right:20px"
src="IMG_URL">
<!-- replace IMG_URL with a link to your image. --->
<div class="col" style="color:#FFFFFF">
<span class="text-uppercase pull-left" style="filter: opacity(40%); letter-spacing:1px;">
NAME
</span>
<hr style="border-color:#FFFFFF; filter:opacity(60%)">
<!--details-->
<p class="py-3" style="overflow-y:auto;color:#FFFFFF;max-height:280px">
Section automatically adjusts but does not scroll.
</p>
<!--details end-->
</div>
</div>
<!-- character 3 end -->
<!-- copy and paste, add more here if needed -->
</div>
</div>
</div>
<!--tab 4 end-->
</div>
</div>
<!--buttons start-->
<div class="col-md-1 justify-content-center py-3" style="font-size:2rem;">
<ul class="nav flex-column" style="border-radius:0px; background-color:rgba(255,255,255,0.0);">
<li class="nav-item">
<a data-toggle="tab" href="#tab1" style="color:#506b69;text-shadow:0px 0px 4px #506b69;"><i class="fa-solid fa-user"></i></a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#tab2" style="color:#506b69;text-shadow:0px 0px 4px #506b69;"><i class="fa-solid fa-heart"></i></a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#tab3" style="color:#506b69;text-shadow:0px 0px 4px #506b69;"><i class="fa-solid fa-bookmark"></i></a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#tab4" style="color:#506b69;text-shadow:0px 0px 4px #506b69;"><i class="fa-solid fa-user-group"></i>
</a>
</li>
<!--credits; DO NOT REMOVE-->
<li style="margin-top:auto;padding-bottom:20px">
<a href="https://toyhou.se/khuo" style="color:rgba(0,0,0,0);text-shadow:0px 0px 3px #aaa; class="tooltipster" title="code by khuo""><i class="fa-solid fa-code"></i></a>
</li>
<!--credits end-->
</ul>
</div>
<!--buttons end-->
</div>
</div>
<!------- BOTTOM BANNER ------->
<div class="card col-12" style="border-radius:0px;border:none;background-color:rgba(0,0,0,0);color:#FFFFFF;font-family:times new roman;font-style:italic;text-shadow:0px 0px 3px #FFFFFF;">
<div class="card justify-content-center" style="min-height:250px;border-radius:0px;border-color:#5f948a;background-position:center;background-size:cover;
background-image:url(IMG_URL);">
<!-- replace IMG_URL with a link to your image. --->
<p style="font-size:26px;">
QUOTE
</p>
</div>
</div>
</div>
</div>
</center>