<!--------------------------------
"Sunny Boxes" - F2U HTML by @StormyStarlight
VERSION - 8 Feb 2023
https://toyhou.se/15306916.-f2u-html-sunny-boxes
• Do not remove or redirect the credit. You may change how the credit is displayed/move it elsewhere, but it may not be removed altogether. Do not claim you made this layout.
• Feel free to modify/frankenstein this layout as much as you want as long as I am still credited, along with any other involved (consenting) creators.
• Keep Profile Text WYSIWYG disabled and Code Editor enabled when using this layout.
• Do not publicly redistribute this layout, or modified/copied/frankensteined versions of it, regardless of whether it is for free or paid use.
--------------------------------->
<div class="row justify-content-center mx-0">
<!------ LEFT BLOCK IMG --------->
<div class="col-1 col-xl-2 hidden-md-down pl-0">
<!---- IMAGE LINK ------------->
<div class="h-100" style="background: url(
https://images.unsplash.com/photo-1610730758227-7406ec572bc3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80
) left; background-size: cover;"></div>
<!---- CREDIT LINK ------------>
<div style="position: absolute; top: 0px; left: 5px;"><a href="
https://unsplash.com/photos/pmsFvEv6dtM
"><i class="fa-light fa-image-polaroid text-white"></i></a></div>
</div>
<!------ CENTER BOX ------------->
<div class="col-12 col-lg-10 col-xl-8"><div class="row">
<!---- BASICS BOX ------------->
<div class="col-12 col-lg-5 col-xl-4 text-center px-0" style="background: rgba(204, 121, 95, 0.2);">
<!-- AVATAR ----------------->
<div class="justify-content-center"><a href="
CREDITLINK
" style="background: url(
IMAGELINK
) center; background-size: cover; border: solid 8px; border-right-color: #cc795f; border-bottom-color: #cc795f; border-left-color: #784738; border-top-color: #784738; width: 192px; height: 192px;" class="mt-4 rounded-circle"></a></div>
<!-- TEXT ------------------->
<h2 class="mt-2 mb-1 font-italic text-white">NAME</h2>
<p class="font-italic text-lowercase text-white"><i class="fa-light fa-leaf-maple"></i> a short introduction</p>
<div class="text-left mt-2 mb-3 mx-3 py-1 px-2 text-white" style="background: rgba(120, 71, 56, 0.7);">
<div class="justify-content-between"><span class="font-weight-bold text-uppercase">Name</span>
<span class="text-lowercase text-right" style="word-break: break-word;">CONTENT</span></div>
<div class="justify-content-between"><span class="font-weight-bold text-uppercase">Pronouns</span>
<span class="text-lowercase text-right" style="word-break: break-word;">CONTENT</span></div>
<div class="justify-content-between"><span class="font-weight-bold text-uppercase">Orientation</span>
<span class="text-lowercase text-right" style="word-break: break-word;">CONTENT</span></div>
<div class="justify-content-between"><span class="font-weight-bold text-uppercase">Age</span>
<span class="text-lowercase text-right" style="word-break: break-word;">CONTENT</span></div>
<div class="justify-content-between"><span class="font-weight-bold text-uppercase">Species</span>
<span class="text-lowercase text-right" style="word-break: break-word;">CONTENT</span></div>
<div class="justify-content-between"><span class="font-weight-bold text-uppercase">Occupation</span>
<span class="text-lowercase text-right" style="word-break: break-word;">CONTENT</span></div>
</div>
<!-- BACKGROUND IMG --------->
<div style="position: absolute; top: 0px; left: 5px;"><a href="
https://unsplash.com/photos/sIsT-SWFTIY
"><i class="fa-light fa-image-polaroid text-white"></i></a></div>
<div class="h-100 w-100" style="position: absolute; top: 0; left: 0; background: url(
https://images.unsplash.com/photo-1586390092298-cc0cefcbcef8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80
) center; background-size: cover; z-index: -2;"></div>
<!-- CREDIT - DON'T DELETE -->
<div class="small" style="position: absolute; bottom: 0px; left: 4px;"><a href="https://toyhou.se/15306916.-f2u-html-sunny-boxes" class="tooltipster text-white" title="F2U HTML by StormyStarlight" data-placement="right"><i class="fa-light fa-code"></i> HTML</a></div>
<!--------------------------->
</div>
<!---- TABS BOX --------------->
<div class="col-12 col-lg-7 col-xl-8 p-0 bg-faded d-block d-lg-flex flex-column">
<!-- BUTTONS ---------------->
<div class="pb-1 pb-sm-2 pb-lg-0" style="background: #784738;"></div>
<ul class="row no-gutters nav nav-tabs card-header-tabs mb-0" style="background: #cc795f;">
<li class="nav-item col-sm">
<a class="nav-link font-weight-bold text-center text-white text-lowercase active" style="border: 0; border-bottom: solid 4px #784738; border-radius: 0; background: transparent;" data-toggle="tab" href="#character"><i class="fa-light fa-lightbulb-on"></i> Character</a>
</li><li style="border-right: solid 4px #784738;"></li><li class="nav-item col-sm">
<a class="nav-link font-weight-bold text-center text-white text-lowercase" style="border: 0; border-bottom: solid 4px #784738; border-radius: 0; background: transparent;" data-toggle="tab" href="#design"><i class="fa-light fa-palette"></i> Design</a>
</li><li style="border-right: solid 4px #784738;"></li><li class="nav-item col-sm">
<a class="nav-link font-weight-bold text-center text-white text-lowercase" style="border: 0; border-bottom: solid 4px #784738; border-radius: 0; background: transparent;" data-toggle="tab" href="#history"><i class="fa-light fa-books"></i> History</a>
</li>
</ul>
<div class="pb-0 pb-sm-1" style="background: #784738;"></div>
<!-- TEXT BODY -------------->
<div class="tab-content" style="position: relative; flex: 1 1 200px; min-height: 200px; overflow-y: auto;">
<!-- CHARACTER -------------->
<div class="tab-pane fade p-3 active show" id="character">
<h2 class="text-lowercase"><i class="fa-light fa-lightbulb-on"></i> Character</h2><hr class="mt-3 mb-2">
<div class="row no-gutters">
<div class="col-6 pr-1">
<p class="mb-0 mt-1 text-lowercase">Introvert <span class="pull-right">Extrovert</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pl-1">
<p class="mb-0 mt-1 text-lowercase">Optimist <span class="pull-right">Pessimist</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pr-1">
<p class="mb-0 mt-1 text-lowercase">Thinking <span class="pull-right">Feeling</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pl-1">
<p class="mb-0 mt-1 text-lowercase">Apathetic <span class="pull-right">Empathetic</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pr-1">
<p class="mb-0 mt-1 text-lowercase">Cautious <span class="pull-right">Careless</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pl-1">
<p class="mb-0 mt-1 text-lowercase">Mature <span class="pull-right">Immature</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pr-1">
<p class="mb-0 mt-1 text-lowercase">Lawful <span class="pull-right">Chaotic</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
<div class="col-6 pl-1">
<p class="mb-0 mt-1 text-lowercase">Good <span class="pull-right">Evil</span></p>
<div class="progress" style="border-radius: 0;"><div class="progress-bar" role="progressbar" style="width:
50%
; height: 6px; background: #cc795f;"></div></div>
</div>
</div>
<div class="row no-gutters mt-3">
<div class="col-6 col-xl-4 pr-2"><h4 class="text-lowercase">Likes</h4><ul class="fa-ul mb-0">
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart" style="color: #cc795f;"></i> Item</li>
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart" style="color: #cc795f;"></i> Item</li>
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart" style="color: #cc795f;"></i> Item</li>
</ul></div>
<div class="col-6 col-xl-4 pr-2"><h4 class="text-lowercase">Dislikes</h4><ul class="fa-ul mb-0">
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart-crack" style="color: #cc795f;"></i> Item</li>
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart-crack" style="color: #cc795f;"></i> Item</li>
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart-crack" style="color: #cc795f;"></i> Item</li>
</ul></div>
<div class="col-12 col-xl-4 mt-2 mt-xl-0 pr-2"><h4 class="text-lowercase">Notes</h4><ul class="fa-ul mb-0">
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart-pulse" style="color: #cc795f;"></i> Item</li>
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart-pulse" style="color: #cc795f;"></i> Item</li>
<li class="text-lowercase"><i class="fa-li fa-solid fa-heart-pulse" style="color: #cc795f;"></i> Item</li>
</ul></div>
</div>
<p class="mt-2 mb-0">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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<p class="mt-2 mb-0">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.</p>
</div>
<!-- DESIGN ----------------->
<div class="tab-pane fade p-3" id="design">
<h2 class="text-lowercase"><i class="fa-light fa-palette"></i> Design</h2><hr class="mt-3 mb-2">
<p class="mt-2 mb-0">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 class="mt-2 mb-0">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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h4 class="mt-2 mb-0 text-lowercase">Design Notes</h4>
<ul class="mt-2 mb-0">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
</ul>
<p class="mt-3 mb-0 justify-content-around display-2 row no-gutters">
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
<i class="fa-solid fa-square tooltipster" title="#000000" style="color: #000000;"></i>
</p>
</div>
<!-- HISTORY ---------------->
<div class="tab-pane fade p-3" id="history">
<h2 class="text-lowercase"><i class="fa-light fa-books"></i> History</h2><hr class="mt-3 mb-2">
<p class="mt-2 mb-0">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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<h4 class="mt-2 mb-0 text-lowercase">Subheading</h4>
<p class="mt-2 mb-0">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.</p>
<div class="row no-gutters mt-1">
<div class="col-4 col-sm-3 mt-2 mb-0">
<a href="
CHARACTERLINK
"><img src="
IMAGELINK
" class="rounded"></a>
</div>
<div class="col-8 col-sm-9 pl-3">
<h4 class="mt-2 mb-0 text-lowercase"><a href="
CHARACTERLINK
" style="color: #cc795f;">Character</a>
<span class="pull-right" style="color: #cc795f;">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-light fa-heart"></i>
<i class="fa-light fa-heart"></i>
</span>
</h4>
<p class="mt-2 mb-0">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>
</div>
</div>
<div class="row no-gutters mt-1">
<div class="col-4 col-sm-3 mt-2 mb-0">
<a href="
CHARACTERLINK
"><img src="
IMAGELINK
" class="rounded"></a>
</div>
<div class="col-8 col-sm-9 pl-3">
<h4 class="mt-2 mb-0 text-lowercase"><a href="
CHARACTERLINK
" style="color: #cc795f;">Character</a>
<span class="pull-right" style="color: #cc795f;">
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-light fa-heart"></i>
<i class="fa-light fa-heart"></i>
</span>
</h4>
<p class="mt-2 mb-0">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>
</div>
</div>
<p class="mt-2 mb-0">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>
</div>
</div>
</div>
<!----------------------------->
</div></div>
<!------ RIGHT BLOCK IMG -------->
<div class="col-1 col-xl-2 hidden-md-down pr-0">
<!---- IMAGE LINK ------------->
<div class="h-100" style="background: url(
https://images.unsplash.com/photo-1610730758227-7406ec572bc3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80
) right; background-size: cover;"></div>
<!---- CREDIT LINK ------------>
<div style="position: absolute; top: 0px; right: 5px;"><a href="
https://unsplash.com/photos/pmsFvEv6dtM
"><i class="fa-light fa-image-polaroid text-white"></i></a></div>
<!---- PAGEDOLL --------------->
<a href="
CREDITLINK
" class="hidden-lg-down"><img src="
IMAGELINK
" style="max-width: 250px; position: absolute; bottom: -25px; right: 20px;"></a>
<!----------------------------->
</div>
<!------------------------------->
</div>