Select All
<!DOCTYPE HTML>
<!--Rules:
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need, including moving credits and repurposing (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
-default colors: #fa6b96
-->
<div class="container py-5" style="max-width:700px">
<!--Header-->
<div class="card text-white rounded-0 border-0 p-2" style="font-size:20px;background-color:#fa6b96">
<div class="card-body px-2">
<span><i class='fas fa-heart'></i> Name</span>
<span class="pull-right">(they/them)</span>
</div>
</div>
<!--end header-->
<!--main body-->
<div class="row no-gutters mt-2">
<!--left panel-->
<div class="col-sm-12 col-md-7 order-2 order-md-1">
<div class="card bg-faded rounded-0 border-0">
<div class="tab-content">
<!--info-->
<div class="tab-pane active" id="about">
<div class="card-body table-responsive p-3" style="text-align:center;height:300px">
<!--basic info-->
<div class="row" style="max-width:400px;margin-left:auto;margin-right:auto">
<div class="col-6 pb-3">
<span class="text-uppercase px-5">title</span>
</div>
<div class="col-6 pb-3">
<span class="faded px-5" style="text-align:right">text</span>
</div>
<div class="col-6 pb-3">
<span class="text-uppercase px-5">title</span>
</div>
<div class="col-6 pb-3">
<span class="faded px-5" style="text-align:right">text</span>
</div>
<div class="col-6 pb-3">
<span class="text-uppercase px-5">title</span>
</div>
<div class="col-6 pb-3">
<span class="faded px-5" style="text-align:right">text</span>
</div>
</div>
<!--end basic info-->
<hr>
<p>this section will scroll!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc ipsum, mattis sollicitudin diam lobortis quis.</p>
</div>
</div>
<!--end info-->
<!--freetab-->
<div class="tab-pane fade" id="misc">
<div class="card-body table-responsive p-3" style="height:300px">
<p style="font-size:20px;text-align:center">Misc. Facts</p>
<ul>
<li class="pb-1">Trivia</li>
<li class="pb-1">Trivia</li>
<li class="pb-1">Trivia</li>
</ul>
<hr>
<p class="px-4">
<a href="#" style="font-size:18px;color:#fa6b96"><i class='fas fa-play'></i> Song title</a>
</p>
<p class="px-4">
<a href="#" style="font-size:18px;color:#fa6b96"><i class='fas fa-play'></i> Song title</a>
</p>
<p class="px-4">
<a href="#" style="font-size:18px;color:#fa6b96"><i class='fas fa-play'></i> Song title</a>
</p>
</div>
</div>
<!--end freetab-->
<!--moodboard-->
<div class="tab-pane fade" id="mood">
<div class="row no-gutters">
<!--top-left image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end top-left image-->
<!--top-right image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end top-right image-->
<!--bottom-left image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end bottom-left image-->
<!--bottom-right image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end bottom-right image-->
</div>
</div>
<!--end moodboard-->
</div>
</div>
</div>
<!--end info-->
<!--chara img-->
<div class="col-sm-12 col-md-5 order-1 order-md-2 h-100">
<!--BG or Character img-->
<div class="card bg-faded rounded-0 border-0" style="
height:300px;
background-image:url(#);
background-position:#;
background-size:#">
<!--Pagedoll. Feel free to delete if you just want to use the card img above-->
<img src="https://via.placeholder.com/200x250" style="
width:#;
display:block;
margin-left:auto;
margin-right:auto;
">
</div>
<!--Credit section. You may move my credit (bottom) but please don't remove it. Remember to credit the other pics as well!-->
<p class="p-1" style="font-size:11px;position:absolute;bottom:0;right:0;">
<a class="px-1" href="#" datatoggle="tooltip" title="pagedoll credit"><i class='fas fa-user-alt'></i></a>
<a class="px-1" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
<a class="px-1" href="https://toyhou.se/10099058" datatoggle="tooltip" title="HTML by Jade-Everstone"><i class='fas fa-heart'></i></a>
</p>
</div>
<!--end chara img-->
</div>
<!--end main body-->
<!--navs-->
<ul class="nav nav-tabs card-header-tabs row">
<li class="col-sm-12 col-md-4 mt-2">
<a class="btn btn-block text-white rounded-0 border-0" style="background-color:#fa6b96" data-toggle="tab" href="#about" role="button"><i class='fas fa-user-alt'></i> About</a>
</li>
<li class="col-sm-12 col-md-4 mt-2">
<a class="btn btn-block text-white rounded-0 border-0" style="background-color:#fa6b96" data-toggle="tab" href="#misc" role="button"><i class='fas fa-list'></i> Misc.</a>
</li>
<li class="col-sm-12 col-md-4 mt-2">
<a class="btn btn-block text-white rounded-0 border-0" style="background-color:#fa6b96" data-toggle="tab" href="#mood" role="button"><i class='fas fa-stars'></i> Moodboard</a>
</li>
</ul>
<!--end navs-->
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need, including moving credits and repurposing (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
-default colors: #fa6b96
-->
<div class="container py-5" style="max-width:700px">
<!--Header-->
<div class="card text-white rounded-0 border-0 p-2" style="font-size:20px;background-color:#fa6b96">
<div class="card-body px-2">
<span><i class='fas fa-heart'></i> Name</span>
<span class="pull-right">(they/them)</span>
</div>
</div>
<!--end header-->
<!--main body-->
<div class="row no-gutters mt-2">
<!--left panel-->
<div class="col-sm-12 col-md-7 order-2 order-md-1">
<div class="card bg-faded rounded-0 border-0">
<div class="tab-content">
<!--info-->
<div class="tab-pane active" id="about">
<div class="card-body table-responsive p-3" style="text-align:center;height:300px">
<!--basic info-->
<div class="row" style="max-width:400px;margin-left:auto;margin-right:auto">
<div class="col-6 pb-3">
<span class="text-uppercase px-5">title</span>
</div>
<div class="col-6 pb-3">
<span class="faded px-5" style="text-align:right">text</span>
</div>
<div class="col-6 pb-3">
<span class="text-uppercase px-5">title</span>
</div>
<div class="col-6 pb-3">
<span class="faded px-5" style="text-align:right">text</span>
</div>
<div class="col-6 pb-3">
<span class="text-uppercase px-5">title</span>
</div>
<div class="col-6 pb-3">
<span class="faded px-5" style="text-align:right">text</span>
</div>
</div>
<!--end basic info-->
<hr>
<p>this section will scroll!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc ipsum, mattis sollicitudin diam lobortis quis.</p>
</div>
</div>
<!--end info-->
<!--freetab-->
<div class="tab-pane fade" id="misc">
<div class="card-body table-responsive p-3" style="height:300px">
<p style="font-size:20px;text-align:center">Misc. Facts</p>
<ul>
<li class="pb-1">Trivia</li>
<li class="pb-1">Trivia</li>
<li class="pb-1">Trivia</li>
</ul>
<hr>
<p class="px-4">
<a href="#" style="font-size:18px;color:#fa6b96"><i class='fas fa-play'></i> Song title</a>
</p>
<p class="px-4">
<a href="#" style="font-size:18px;color:#fa6b96"><i class='fas fa-play'></i> Song title</a>
</p>
<p class="px-4">
<a href="#" style="font-size:18px;color:#fa6b96"><i class='fas fa-play'></i> Song title</a>
</p>
</div>
</div>
<!--end freetab-->
<!--moodboard-->
<div class="tab-pane fade" id="mood">
<div class="row no-gutters">
<!--top-left image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end top-left image-->
<!--top-right image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end top-right image-->
<!--bottom-left image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end bottom-left image-->
<!--bottom-right image-->
<div class="col-6">
<div class="card rounded-0 border-0" style="
height:150px;
background-image:url(https://via.placeholder.com/196x150);
background-size:#;
background-position:#">
<!--img credit-->
<p style="font-size:13px;position:absolute;bottom:0;right:0;">
<a class="px-1 text-white" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
</p>
</div>
</div>
<!--end bottom-right image-->
</div>
</div>
<!--end moodboard-->
</div>
</div>
</div>
<!--end info-->
<!--chara img-->
<div class="col-sm-12 col-md-5 order-1 order-md-2 h-100">
<!--BG or Character img-->
<div class="card bg-faded rounded-0 border-0" style="
height:300px;
background-image:url(#);
background-position:#;
background-size:#">
<!--Pagedoll. Feel free to delete if you just want to use the card img above-->
<img src="https://via.placeholder.com/200x250" style="
width:#;
display:block;
margin-left:auto;
margin-right:auto;
">
</div>
<!--Credit section. You may move my credit (bottom) but please don't remove it. Remember to credit the other pics as well!-->
<p class="p-1" style="font-size:11px;position:absolute;bottom:0;right:0;">
<a class="px-1" href="#" datatoggle="tooltip" title="pagedoll credit"><i class='fas fa-user-alt'></i></a>
<a class="px-1" href="#" datatoggle="tooltip" title="img credit"><i class='fas fa-image'></i></a>
<a class="px-1" href="https://toyhou.se/10099058" datatoggle="tooltip" title="HTML by Jade-Everstone"><i class='fas fa-heart'></i></a>
</p>
</div>
<!--end chara img-->
</div>
<!--end main body-->
<!--navs-->
<ul class="nav nav-tabs card-header-tabs row">
<li class="col-sm-12 col-md-4 mt-2">
<a class="btn btn-block text-white rounded-0 border-0" style="background-color:#fa6b96" data-toggle="tab" href="#about" role="button"><i class='fas fa-user-alt'></i> About</a>
</li>
<li class="col-sm-12 col-md-4 mt-2">
<a class="btn btn-block text-white rounded-0 border-0" style="background-color:#fa6b96" data-toggle="tab" href="#misc" role="button"><i class='fas fa-list'></i> Misc.</a>
</li>
<li class="col-sm-12 col-md-4 mt-2">
<a class="btn btn-block text-white rounded-0 border-0" style="background-color:#fa6b96" data-toggle="tab" href="#mood" role="button"><i class='fas fa-stars'></i> Moodboard</a>
</li>
</ul>
<!--end navs-->
</div>