<!--------------------------------
WINDOW — Bootstrap Version
(code by jiko)
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ for the stats, change the number in [ width:50% ] to your desired percentage [ 0% to 100% ]
→ for the images, make sure they are squared! any size is okay, just squared. okie!!
--------------------------------->
<div class="mx-auto card text-justify" style="margin-top: 40px; max-width:850px">
<!-------------------------------- [ TOP BAR ] --------------------------------->
<div class="p-2 text-uppercase bg-faded justify-content-between card rounded-0"
style="float:right; letter-spacing: 2px; font-size: 12px;">
<!-- [ change "tree-palm" to your desired icon here! ] -->
<span class="pt-1"><i class="fad fa-tree-palm fa-lg"></i>
<span class="pull-right fa-stack">
<i class="far fa-square fa-stack-2x"></i>
<i class="far fa-times fa-stack-1x"></i>
</span>
<span class="pull-right fa-stack">
<i class="far fa-square fa-stack-2x"></i>
<i class="far fa-window-maximize fa-stack-1x"></i>
</span>
<span class="pull-right fa-stack">
<i class="far fa-square fa-stack-2x"></i>
<i class="far fa-window-minimize fa-stack-1x"></i>
</span>
</span>
</div>
<!-------------------------------- [ BACKGROUND ] --------------------------------->
<!-- [ remove no-repeat if your bg is tiled! ] -->
<div class="card container border-0 rounded-0 p-4"
style="background: url() no-repeat;
background-size: cover;
background-position: center right;
background-attachment: fixed;
font-size:13px; max-width:850px;">
<div class="row no-gutters">
<!-------------------------------- [ LEFT BOX ] --------------------------------->
<div class="col-lg-4 p-1">
<div class="card border-0 h-100">
<!-------------------------------- [ TOGGLE BUTTONS ] --------------------------------->
<div class="card-header bg-faded">
<ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
<!-- [ on mobile view, the text will appear as icons! ] -->
<!-- [ this section does not support more than two tabs! ] -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#profile">
<span class="justify-content-between rounded-0">
<span class="hidden-sm-down">Profile</span>
<span class="hidden-md-up"><i class="fas fa-user"></i></span>
<span class=""><i class="fal fa-times"></i></span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#stats">
<span class="justify-content-between rounded-0">
<span class="hidden-sm-down">Stats</span>
<span class="hidden-md-up"><i class="fas fa-chart-bar"></i></span>
<span class=""><i class="fal fa-times"></i></span>
</span>
</a>
</li>
</ul>
</div>
<!-------------------------------- [ AVATAR ] --------------------------------->
<div class="mx-auto p-3">
<!-- [ remove fr-rounded if you'd like a squareed icon! ] -->
<!-- [ square images only! ] -->
<img class="p-1 bg-faded fr-rounded img-thumbnail"
src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
style="width:170px; height:170px">
</div>
<!-------------------------------- [ INFO ] --------------------------------->
<div class="tab-content">
<!-------------------------------- [ PROFILE ] --------------------------------->
<div class="tab-pane active show" id="profile">
<div class="h-100 px-2" style="max-height:178px; overflow:auto">
<div class="px-4 row no-gutters">
<div class="col-2 text-uppercase pr-1"><i class="fal fa-id-card"></i></div>
<div class="text-muted col-10 text-right mb-2">name</div>
<div class="col-2 text-uppercase pr-1"><i class="fal fa-calendar-alt"></i></div>
<div class="text-muted col-10 text-right mb-2">age</div>
<div class="col-2 text-uppercase pr-1"><i class="fal fa-venus-mars"></i></div>
<div class="text-muted col-10 text-right mb-2">gender</div>
<div class="col-2 text-uppercase pr-1"><i class="fal fa-heart"></i></div>
<div class="text-muted col-10 text-right mb-2">orientation</div>
<div class="col-2 text-uppercase pr-1"><i class="fal fa-question"></i></div>
<div class="text-muted col-10 text-right mb-2">species or race</div>
<div class="col-2 text-uppercase pr-1"><i class="fal fa-birthday-cake"></i></div>
<div class="text-muted col-10 text-right mb-2">birthday</div>
<div class="col-2 text-uppercase pr-1"><i class="fal fa-paperclip"></i></div>
<div class="text-muted col-10 text-right mb-2">occupation</div>
</div>
</div>
</div>
<!-------------------------------- [ STATS ] --------------------------------->
<div class="tab-pane" id="stats">
<div class="mx-4 text-muted pb-3 h-100" style="max-height:180px;">
<div class="row no-gutters">
<!-- [ charisma ] -->
<div class="col-2 text-center p-1">cha</div>
<div class="col-10 p-1 my-auto">
<div class="progress">
<div class="progress-bar bg-success" style="width:50%; height:.3rem;"></div>
</div>
</div>
<!-- [ confidence ] -->
<div class="col-2 text-center p-1">con</div>
<div class="col-10 p-1 my-auto">
<div class="progress">
<div class="progress-bar bg-success" style="width:50%; height:.3rem;"></div>
</div>
</div>
<!-- [ intelligence ] -->
<div class="col-2 text-center p-1">int</div>
<div class="col-10 p-1 my-auto">
<div class="progress">
<div class="progress-bar bg-warning" style="width:50%; height:.3rem;"></div>
</div>
</div>
<!-- [ wisdom ] -->
<div class="col-2 text-center p-1">wis</div>
<div class="col-10 p-1 my-auto">
<div class="progress">
<div class="progress-bar bg-warning" style="width:50%; height:.3rem;"></div>
</div>
</div>
<!-- [ empathy ] -->
<div class="col-2 text-center p-1">emp</div>
<div class="col-10 p-1 my-auto">
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%; height:.3rem;"></div>
</div>
</div>
<!-- [ humour ] -->
<div class="col-2 text-center p-1">hum</div>
<div class="col-10 p-1 my-auto">
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%; height:.3rem;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------- [ INFO END ] --------------------------------->
</div>
</div>
<!-------------------------------- [ LEFT BOX END ] --------------------------------->
<!-------------------------------- [ RIGHT BOX ] --------------------------------->
<div class="col-lg-8 p-1">
<div class="card border-0 h-100">
<!-------------------------------- [ TOGGLE TABS ] --------------------------------->
<div class="card-header bg-faded">
<ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
<!-- [ on mobile view, the text will appear as icons! ] -->
<!-- [ this section does not support more than six tabs! ] -->
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#about">
<span class="justify-content-between rounded-0">
<span class="hidden-sm-down">About</span>
<span class="hidden-md-up"><i class="fas fa-chart-bar"></i></span>
<span><i class="fal fa-times"></i></span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#trivia">
<span class="justify-content-between rounded-0">
<span class="hidden-sm-down">Trivia</span>
<span class="hidden-md-up"><i class="fas fa-question-circle"></i></span>
<span><i class="fal fa-times"></i></span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#story">
<span class="justify-content-between rounded-0">
<span class="hidden-sm-down">Story</span>
<span class="hidden-md-up"><i class="fas fa-books"></i></span>
<span><i class="fal fa-times"></i></span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#link">
<span class="justify-content-between rounded-0">
<span class="hidden-sm-down">Links</span>
<span class="hidden-md-up"><i class="fas fa-link"></i></span>
<span><i class="fal fa-times"></i></span>
</span>
</a>
</li>
</ul>
</div>
<!-------------------------------- [ TOGGLE TABS END ] --------------------------------->
<!-------------------------------- [ TAB-CONTENT BOX ] --------------------------------->
<div class="tab-content">
<!-------------------------------- [ ABOUT TAB ] --------------------------------->
<div class="tab-pane active show" id="about">
<div class="p-3" style="max-height:370px; overflow:auto">
<div class="text-center small text-uppercase" style="letter-spacing:1px;">
<i>adjective . adjective . adjective</i>
</div>
<hr class="w-50 mx-auto">
<div class="bg-faded text-muted p-3">
<p>Keep this morderately short! It does not scroll! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</p>
<p>Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</p>
</div>
<!-------------------------------- [ LIKES AND DISLIKES ] --------------------------------->
<div class="row no-gutters mt-4">
<!-- [ LIKES ] -->
<div class="col-lg-6">
<div class="text-center text-uppercase" style="letter-spacing:1px;">Likes</div>
<hr class="m-2">
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- [ DISLIKES ] -->
<div class="col-lg-6">
<div class="text-center text-uppercase" style="letter-spacing:1px;">Dislikes</div>
<hr class="m-2">
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!-------------------------------- [ LIKES AND DISLIKES END] --------------------------------->
</div>
</div>
<!-------------------------------- [ ABOUT TAB END ] --------------------------------->
<!-------------------------------- [ TRIVIA TAB ] --------------------------------->
<div class="tab-pane" id="trivia">
<div class="p-3" style="max-height:370px; overflow:auto">
<!-------------------------------- [ QUOTE ] --------------------------------->
<div class="p-3 card border-0 bg-faded">
<div class="text-center">
<i class="pull-left mr-3 fas fa-quote-left"></i>
<i class="pull-right ml-3 fas fa-quote-right"></i>
<i class="text-muted">Epic quote time.</i>
</div>
</div>
<!-------------------------------- [ TRIVIA AND NOTES ] --------------------------------->
<div class="row no-gutters mt-4">
<!-- [ TRIVIA ] -->
<div class="col-lg-6">
<div class="text-center text-uppercase" style="letter-spacing:1px;">Trivia</div>
<hr class="m-2">
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- [ DESIGN NOTES ] -->
<div class="col-lg-6">
<div class=" text-center text-uppercase" style="letter-spacing:1px;">Design Notes</div>
<hr class="m-2">
<ul class="text-muted">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!-------------------------------- [ TRIVIA AND NOTES END] --------------------------------->
</div>
</div>
<!-------------------------------- [ TRIVIA TAB END] --------------------------------->
<!-------------------------------- [ STORY TAB ] --------------------------------->
<div class="tab-pane" id="story">
<div class="pb-3">
<!-- [ TOP BAR ] -->
<div class="p-2 text-uppercase text-center">
<a href="#first">CHILDHOOD</a> .
<a href="#second">TEENAGE LIFE</a> .
<a href="#third">ADULTHOOD</a> .
<a href="#forth">TLDR</a>
</div>
<div class="px-3" style="max-height:325px; overflow-y:auto">
<!-- [ CHILDHOOD ] -->
<div class="p-0">
<div class="p-3 card border-0 bg-faded" id="first">
<div class="text-center text-uppercase" style="letter-spacing:1px;">
CHILDHOOD
</div><hr class="w-50 mx-auto">
<div class="text-muted">
<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 sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</p>
<p>Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</p>
</div>
</div>
</div>
<!-- [ TEENAGE LIFE ] -->
<div class="pt-4">
<div class="p-3 card border-0 bg-faded" id="second">
<div class="text-center text-uppercase" style="letter-spacing:1px;">
TEENAGE LIFE
</div><hr class="w-50 mx-auto">
<div class="text-muted">
<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 sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</p>
<p>Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</p>
</div>
</div>
</div>
<!-- [ ADULTHOOD ] -->
<div class="pt-4">
<div class="p-3 card border-0 bg-faded" id="third">
<div class="text-center text-uppercase" style="letter-spacing:1px;">
ADULTHOOD
</div><hr class="w-50 mx-auto">
<div class="text-muted">
<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 sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</p>
<p>Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget.</p>
</div>
</div>
</div>
<!-- [ TLDR ] -->
<div class="pt-4">
<div class="p-3 card border-0 bg-faded" id="forth">
<div class="text-center text-uppercase" style="letter-spacing:1px;">
TLDR
</div><hr class="w-50 mx-auto">
<div class="text-muted">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Suspendisse a felis molestie, porttitor est eget, euismod mauris.</li>
<li>Integer fermentum est vitae dui pretium fermentum.</li>
<li>Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-------------------------------- [ STORY TAB END] --------------------------------->
<!-------------------------------- [ LINK TAB ] --------------------------------->
<!-- [ square images only for the icons!!! ] -->
<!-- [ keep track of the order-md-x in the icons and text! ] -->
<div class="tab-pane" id="link">
<div class="p-3" style="max-height:370px; overflow-y:auto">
<div class="row no-gutters">
<!-------------------------------- [ CHARACTER ONE ] --------------------------------->
<!-- [ AVATAR ] -->
<div class="order-md-1 col-md-4 col-sm-8 px-2 pb-4 hidden-sm-down">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="m-auto img-thumbnail rounded-circle w-100 bg-faded">
</div>
<!-- [ CONTENTS ] -->
<div class="order-md-2 col-md-8 pb-4">
<div class="p-3 card bg-faded border-0 my-auto">
<p class="d-flex justify-content-between align-auto">
<a class="text-uppercase my-auto" href="LINK HERE">Name</a>
<span>relationship</span>
</p>
<hr class="w-100 my-1">
<div class="p-1 text-muted" style="max-height:100px; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris.</p>
<p>Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus</p>
</div>
</div>
</div>
<!-------------------------------- [ CHARACTER ONE END] --------------------------------->
<!-------------------------------- [ CHARACTER TWO ] --------------------------------->
<!-- [ AVATAR ] -->
<div class="order-md-4 col-md-4 px-2 pb-4 d-flex hidden-sm-down">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="m-auto img-thumbnail rounded-circle w-100 bg-faded">
</div>
<!-- [ CONTENTS ] -->
<div class="order-md-3 col-md-8 pb-4">
<div class="p-3 card bg-faded border-0 my-auto">
<p class="d-flex justify-content-between align-auto">
<a class="text-uppercase my-auto" href="LINK HERE">Name</a>
<span>relationship </span>
</p>
<hr class="w-100 my-1">
<div class="p-1 text-muted" style="max-height:110px; overflow:auto">
<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.</p>
<p>Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus</p>
</div>
</div>
</div>
<!-------------------------------- [ CHARACTER TWO END] --------------------------------->
<!-------------------------------- [ CHARACTER THREE ] --------------------------------->
<!-- [ AVATAR ] -->
<div class="order-md-5 col-md-4 px-2 pb-4 d-flex hidden-sm-down">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="m-auto img-thumbnail rounded-circle w-100 bg-faded">
</div>
<!-- [ CONTENTS ] -->
<div class="order-md-6 col-md-8 pb-4">
<div class="p-3 card bg-faded border-0 my-auto">
<p class="d-flex justify-content-between align-auto my-auto">
<a class="text-uppercase my-auto" href="LINK HERE">Name</a>
<span>relationship</span>
</p>
<hr class="w-100 my-1">
<div class="p-1 text-muted" style="max-height:110px; overflow:auto">
<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.</p>
<p>Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus</p>
</div>
</div>
</div>
<!-------------------------------- [ CHARACTER THREE END] --------------------------------->
</div>
</div>
</div>
<!-------------------------------- [ LINK END] --------------------------------->
</div>
<!-------------------------------- [ TAB-CONTENT BOX END ] --------------------------------->
</div>
</div>
<!-------------------------------- [ RIGHT BOX END ] --------------------------------->
</div>
<!-------------------------------- [ CREDITS - don't touch!! ] --------------------------------->
<div class="p-1">
<div class="card bg-faded border-0 p-2 small text-right" style=" max-width:850px">
<span>code by <a href="https://toyhou.se/6387419.-f2u-window">jiko</a> |
background by @ user</span>
</div>
</div>
<!-------------------------------- [ CREDITS END ] --------------------------------->
</div>
</div>
