<!--------------------------------
CLARIFY (previously called tabby) - Code by jiko
RULES
– Read this thoroughly please, and maybe leave a small comment saying that you've read it? :'3 thank youu
[ https://toyhou.se/~bulletins/127417.code-rules ]
TIPPY TIPS
– for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
– need more help with HTML or there's a bug (prior to any edits)? don't be afraid to PM me <3
COLOURS
– accent : #aaa
– text : #231f20
– background : #fff
– hr : (0,0,0,.110
(the hr use rgba, NOT hex codes!)
--------------------------------->
<div class="container-fluid pt-4 " style="color: #231f20; font-weight:300; font-size:13px; max-width:1000px">
<div class="row no-gutters">
<!-------------------------------- [ IMAGE ] --------------------------------->
<div class="col-lg-4 p-1">
<div class="card h-100 rounded-0" style="background-color:#aaa; border-color:#aaa">
<div class="h-100" style="min-height:350px;
background: url(IMG URL) center;
background-size:cover;
background-repeat: no-repeat;"></div>
</div>
</div>
<!-------------------------------- [ IMAGE END ] --------------------------------->
<!-------------------------------- [ CONTENT BOX ] --------------------------------->
<div class="col-lg-8 p-1">
<div class="card rounded-0" style="background-color:#aaa; border-color:#aaa">
<div class="h-100">
<!-------------------------------- [ TAB ICONS ] --------------------------------->
<!-- i don't recommand you add or delete tabs unless you 100% know what you're doing lol -->
<ul class="nav row no-gutters text-center my-2">
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card btn-block active" style="background-color:#aaa" data-toggle="tab" href="#profile">
<i class="fad fa-user fa-lg text-white"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card btn-block" style="background-color:#aaa" data-toggle="tab" href="#about">
<i class="fad fa-stars fa-lg text-white"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card bg-faded btn-block" style="background-color:#aaa" data-toggle="tab" href="#history">
<i class="fad fa-books fa-lg text-white"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card bg-faded btn-block" style="background-color:#aaa" data-toggle="tab" href="#misc">
<i class="fad fa-music fa-lg text-white"></i>
</a>
</li>
<li class="nav-item col">
<a class="rounded-0 p-2 border-0 card bg-faded btn-block" style="background-color:#aaa" data-toggle="tab" href="#link">
<i class="fad fa-link fa-lg text-white"></i>
</a>
</li>
</ul>
<!-------------------------------- [ TAB ICONS END ] --------------------------------->
<div class="tab-content">
<!-------------------------------- [ PROFILE ] --------------------------------->
<div class="tab-pane fade active show" id="profile">
<div class="p-2 rounded-0 card" style="background-color:#fff; height:550px; overflow:auto">
<div class="p-3">
<div class="font-italic text-uppercase text-right" style="; font-size:15px; letter-spacing:2px;">
<i class="fad fa-wind pull-left"></i>Profile
<hr class="my-1 mb-4" style="border-color: rgba(0,0,0,.110)"></div>
<div class="px-3 row no-gutters">
<div class="col-lg-12" style="">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Name</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12" style="">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Nickname/s</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12" style="">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Gender</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12" style="">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Age</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Orientation</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Race</span> <!-- or species! -->
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12" style="">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Occupation</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<div class="col-lg-12" style="">
<span class="text-uppercase pull-left" style="filter: opacity(60%); letter-spacing:1px;">Residence</span>
<span class="pull-right">content</span>
<hr class="mt-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
</div>
<!-- quote -->
<div class="mt-4 mx-auto text-center" style="">
<i class="pull-left mr-3 fad fa-quote-left fa-lg" style="color: #aaa"></i>
<i class="pull-right ml-3 fad fa-quote-right fa-lg" style="color: #aaa"></i>
<i style="font-size:22px; font-weight:300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------- [ PROFILE END ] --------------------------------->
<!-------------------------------- [ ABOUT ] --------------------------------->
<div class="tab-pane fade" id="about">
<div class="p-2 rounded-0 card" style="background-color:#fff; height:550px; overflow:auto"><div class="p-3">
<div class="text-uppercase text-right" style="font-size:15px; letter-spacing:2px;">
<i><i class="fad fa-stars pull-left "></i>About</i>
<hr class="my-1 mb-4" style="border-color: rgba(0,0,0,.110)"></div>
<div class="mb-3" style="filter: opacity(60%)">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae pretium fermentum.</p>
<p>Fusce quis velit vel sm pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo.</p>
</div>
<hr class="my-1 mb-4" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<!-------------------------------- [ LIKES AND DISLIKES ] --------------------------------->
<div class="px-3 row no-gutters"><div class="col-sm mb-1">
<div class="text-uppercase" style="font-size:14px; letter-spacing:1px">Likes</div>
<ul style="filter: opacity(60%)">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div class="col-sm mb-1">
<div class="text-uppercase" style="font-size:14px; letter-spacing:1px">Dislikes</div>
<ul style="filter: opacity(60%)">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!-------------------------------- [ LIKES AND DISLIKES END ] --------------------------------->
<hr class="my-1 mb-4" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<!-------------------------------- [ STATS ] --------------------------------->
<div class="p-3 row no-gutters"><div class="col-sm mb-1">
<div class="text-uppercase" style="font-size:14px; letter-spacing:1px">Traits</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Charisma</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Empathy</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Intellect</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Confidence</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Openess</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
</div>
<div class="col-sm-auto m-2" style="border-style:dashed; border-width:1px 1px 0 0; border-color: rgba(0,0,0,.110)"></div>
<div class="col-sm ml-2 mb-1">
<div class="text-uppercase" style="font-size:14px; letter-spacing:1px">Skills</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Strength</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase " style="letter-spacing:1px; filter: opacity(60%)">Endurance</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Agility</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Willpower</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
<div class="p-1 d-flex">
<span class="w-50 p-1 text-uppercase" style="letter-spacing:1px; filter: opacity(60%)">Observation</span>
<div class="w-50 mx-1 progress my-auto rounded-0" style="height:5px; background-color: rgba(0,0,0,.110)">
<div class="progress-bar" style="width: 50%; background-color:#aaa"></div></div>
</div>
</div>
</div>
<!-------------------------------- [ STATS ENDS ] --------------------------------->
</div>
</div>
</div>
<!-------------------------------- [ ABOUT END ] --------------------------------->
<!-------------------------------- [ HISTORY ] --------------------------------->
<div class="tab-pane fade" id="history">
<div class="p-2 rounded-0 card" style="background-color:#fff; height:550px; overflow:auto">
<div class="p-3">
<div class="text-uppercase text-right" style="font-size:15px; letter-spacing:2px;">
<i><i class="fad fa-books pull-left "></i>History</i>
<hr class="my-1 mb-4" style="border-color: rgba(0,0,0,.110)"></div>
<div class="text-uppercase text-left py-1" style="font-size:14px; letter-spacing: 1px"><i class="fad fa-bookmark"></i> Subheading</div>
<div class="px-3 mb-4" style="filter: opacity(60%)">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sm pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo.</p>
</div>
<div class="text-uppercase text-left py-1" style="font-size:14px; letter-spacing: 1px"><i class="fad fa-bookmark"></i> Subheading</div>
<div class="px-3 mb-4" style="filter: opacity(60%)">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sm pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo.</p>
</div>
</div>
</div>
</div>
<!-------------------------------- [ HISTORY END ] --------------------------------->
<!-------------------------------- [ MISC. ] --------------------------------->
<!--------------------------------
T I P S
- to change the video, get the string of characters after
"https://www.youtube.com/watch?v="
- for example: https://www.youtube.com/watch?v="""""e1fLz8aZSWY""""
inside the quatations is what you'd use!
- then below, copy and paste that into where it says, "STRING HERE" ;3
---------------------------------->
<div class="tab-pane fade" id="misc">
<div class="p-2 rounded-0 card" style="background-color:#fff; height:550px; overflow:auto">
<div class="p-3">
<div class="text-uppercase text-right" style="font-size:15px; letter-spacing:2px;">
<i><i class="fad fa-music pull-left"></i>Misc.</i>
<hr class="my-1 mb-4" style="border-color: rgba(0,0,0,.110)"></div>
<iframe class="flex-fill pb-2"
style="width:100%; min-height:250px;"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
src="https://www.youtube.com/embed/STRING HERE">
</iframe>
<hr class="my-3" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<!-------------------------------- [ DN AND TRIVIA END ] --------------------------------->
<div class="px-3 row no-gutters"><div class="col-sm mb-1">
<div class="text-uppercase" style="font-size:14px; letter-spacing:1px">Design Notes</div>
<ul style="filter: opacity(60%)">
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor.</li>
<li>Lorem ipsum dolor.</li>
</ul>
</div>
<div class="col-sm-auto m-2" style="border-style:dashed; border-width:1px 1px 0 0; border-color: rgba(0,0,0,.110)"></div>
<div class="col-sm mb-1"><div class="text-uppercase" style="font-size:14px; letter-spacing:1px">Trivia</div>
<ul style="filter: opacity(60%)">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, odio fames felis.</li>
<li>Suspendisse scelerisque blandit imperdiet interdum, cum nulla.</li>
<li>Habitasse convallis parturient tortor venenatis sapien etiam, diam non consequat accumsan volutpat.</li>
<li>Congue hac quisque est, aptent ante.</li>
</ul>
</div>
</div>
<!-------------------------------- [ DN AND TRIVIA END ] --------------------------------->
</div>
</div>
</div>
<!-------------------------------- [ MISC. END ] --------------------------------->
<!-------------------------------- [ LINK ] --------------------------------->
<!--------------------------------
T I P S
- square images look best!!
- for the text, a few sentences (2-3) would look nice but yeah, keep it short!
---------------------------------->
<div class="tab-pane fade" id="link">
<div class="p-2 rounded-0 card" style="background-color:#fff; height:550px; overflow:auto">
<div class="p-3">
<div class="text-uppercase text-right" style="font-size:15px; letter-spacing:2px;">
<i><i class="fad fa-link pull-left "></i>Links</i>
<hr class="my-1 mb-4" style="border-color: rgba(0,0,0,.110)"></div>
<!-- [ CHARACTER ONE ] -->
<div class="col-lg-12 w-100 mb-2 row no-gutters"><div class="col-md-4 p-2 my-auto hidden-sm-down">
<img src="IMG URL" class="fr-rounded"></div>
<div class="col-md-8 p-2"><div class="d-flex justify-content-between">
<a href="CHARACTER LINK" class="text-uppercase" style="color:#aaa">Name</a> <span><i>relationship</i></span>
</div><hr class="my-1" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<p style="filter: opacity(60%)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in porta sapien. Ut interdum hendrerit tincidunt. Praesent non ipsum venenatis, scelerisque mi sed, varius nisl. Sed eget risus sit amet mi suscipit.</p>
</div>
</div>
<!-- [ CHARACTER ONE END ] -->
<!-- [ CHARACTER TWO ] -->
<div class="col-lg-12 w-100 mb-2 row no-gutters"><div class="col-md-4 p-2 my-auto hidden-sm-down">
<img src="IMG URL" class="fr-rounded float-sm-left"></div>
<div class="col-md-8 p-2"><div class="d-flex justify-content-between">
<a href="CHARACTER LINK" class="text-uppercase" style="color:#aaa">Name</a> <span><i>relationship</i></span>
</div><hr class="my-1" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<p style="filter: opacity(60%)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in porta sapien. Ut interdum hendrerit tincidunt. Praesent non ipsum venenatis, scelerisque mi sed, varius nisl. Sed eget risus sit amet mi suscipit.</p>
</div>
</div>
<!-- [ CHARACTER TWO END ] -->
<!-- [ CHARACTER THREE ] -->
<div class="col-lg-12 w-100 mb-2 row no-gutters"><div class="col-md-4 p-2 my-auto hidden-sm-down">
<img src="IMG URL" class="fr-rounded float-sm-left"></div>
<div class="col-md-8 p-2"><div class="d-flex justify-content-between">
<a href="#" class="text-uppercase" style="color:#aaa">Name</a> <span><i>relationship</i></span>
</div><hr class="my-1" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<p style="filter: opacity(60%)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in porta sapien. Ut interdum hendrerit tincidunt. Praesent non ipsum venenatis, scelerisque mi sed, varius nisl. Sed eget risus sit amet mi suscipit.</p>
</div>
</div>
<!-- [ CHARACTER THREE END ] -->
<!-- [ CHARACTER FOUR ] -->
<div class="col-lg-12 w-100 mb-2 row no-gutters"><div class="col-md-4 p-2 my-auto hidden-sm-down">
<img src="IMG URL" class="fr-rounded float-sm-left"></div>
<div class="col-md-8 p-2"><div class="d-flex justify-content-between">
<a href="CHARACTER LINK" class="text-uppercase" style="color:#aaa">Name</a> <span><i>relationship</i></span>
</div><hr class="my-1" style="border-style:dashed; border-color: rgba(0,0,0,.110)">
<p style="filter: opacity(60%)">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in porta sapien. Ut interdum hendrerit tincidunt. Praesent non ipsum venenatis, scelerisque mi sed, varius nisl. Sed eget risus sit amet mi suscipit.</p>
</div>
</div>
<!-- [ CHARACTER FOUR END ] -->
</div>
</div>
</div>
<!-------------------------------- [ LINK END ] --------------------------------->
</div>
</div>
</div>
</div>
<!-------------------------------- [ CREDITS - don't touchie!! ] --------------------------------->
<small class="pt-1 text-secondary">code by <a href="https://toyhou.se/5913467.-f2u-clarify" style="color:#aaa">jiko</a></small>
</div>
</div>