starterpack
created by:sunxrice
HTMLBootstrapCharacter
Copy
<!--
starterpack
by sunxrice
accents -
primary : -primary
secondary : -light
styles -
heading : font-weight:bold; text-transform:uppercase
subtitle : font-style:italic; text-transform:lowercase; line-height:1
use find and replace!
-->
<div class="container bg-primary px-4 py-2" style="border-radius:1em">
<!-- title -->
<div class="text-center text-light my-2">
<!-- name -->
<span class="d-block mb-n1" style="font-size:2em; font-weight:bold; text-transform:uppercase">
NAME
</span>
<!-- details -->
<span class="d-block" style="font-size:1.2em; font-style:italic; text-transform:lowercase; line-height:1">
pronouns • age • role
</span>
</div>
<!-- /title -->
<!-- content -->
<div class="row">
<!-- character image -->
<div class="col-sm-4 order-1 order-sm-2 px-2">
<div class="card border-0 p-2 my-2" style="height:24rem;
background-image:url(imglink);
background-size:contain; background-position:center; background-repeat:no-repeat"></div>
</div>
<!-- /character -->
<!-- basic info -->
<div class="col-sm-4 order-2 order-sm-1 px-2">
<!-- text box -->
<div class="tab-content card border-0 py-2 my-2" style="height:16rem">
<!-- tab - basic -->
<div class="tab-pane fade show active text-justify px-2" style="overflow-y:auto; scrollbar-width:thin" id="basic">
<p>describe your character here. all text boxes scroll if long. 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.</p>
</div>
<!-- /tab -->
<!-- tab - stats
remember to change the numbers in both width and valuenow!
-->
<div class="tab-pane fade px-2" style="overflow-y:auto; scrollbar-width:thin" id="stats">
<!-- heading -->
<div class="text-center my-2">
<!-- title -->
<span class="d-block" style="font-size:1.2em; font-weight:bold; text-transform:uppercase">
stats category 1
</span>
<!-- subtitle -->
<span class="d-block text-muted" style="font-style:italic; text-transform:lowercase; line-height:1">
add as many (or as few) categories as you want!
</span>
</div>
<!-- /heading -->
<!-- stat -->
<div class="d-flex my-1">
<!-- icon -->
<i class="fas fa-sword text-primary mr-2 tooltipster"
title="stat name"
></i>
<!-- progress bar -->
<div class="progress w-100 my-auto" style="height:1em"><div class="progress-bar" role="progressbar"
style="width:50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div></div>
</div>
<!-- /stat -->
<!-- stat -->
<div class="d-flex my-1">
<!-- icon -->
<i class="fas fa-sword text-primary mr-2 tooltipster"
title="stat name"
></i>
<!-- progress bar -->
<div class="progress w-100 my-auto" style="height:1em"><div class="progress-bar" role="progressbar"
style="width:50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div></div>
</div>
<!-- /stat -->
<!-- heading -->
<div class="text-center my-2">
<!-- title -->
<span class="d-block" style="font-size:1.2em; font-weight:bold; text-transform:uppercase">
stats category 2
</span>
<!-- subtitle -->
<span class="d-block text-muted" style="font-style:italic; text-transform:lowercase; line-height:1">
subtitle
</span>
</div>
<!-- /heading -->
<!-- stat -->
<div class="d-flex my-1">
<!-- icon -->
<i class="fas fa-sword text-primary mr-2 tooltipster"
title="stat name"
></i>
<!-- progress bar -->
<div class="progress w-100 my-auto" style="height:1em"><div class="progress-bar" role="progressbar"
style="width:50%" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100"></div></div>
</div>
<!-- /stat -->
<!-- put more above this line -->
</div>
<!-- /tab -->
<!-- tab - design -->
<div class="tab-pane fade px-2" style="overflow-y:auto; scrollbar-width:thin" id="design">
<div class="d-block">
<b>height</b>
<span class="pull-right">cm / ft</span>
</div>
<div class="d-block">
<b>species</b>
<span class="pull-right">thing</span>
</div>
<div class="d-block">
<b>designer</b>
<span class="pull-right">user</span>
</div>
<ul class="pl-4 my-2">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-- /tab -->
</div>
<!-- /text -->
<!-- navigation - main -->
<div class="my-2" style="height:3rem">
<div class="nav nav-pills nav-fill h-100">
<!-- link -->
<a data-toggle="tab" class="nav-item nav-link active bg-light text-primary justify-content-center align-items-center mr-2 tooltipster"
title="basic info"
href="#basic">
<i class="fas fa-lg fa-fw fa-book"></i>
</a>
<!-- link -->
<a data-toggle="tab" class="nav-item nav-link bg-light text-primary justify-content-center align-items-center mr-2 tooltipster"
title="stats"
href="#stats">
<i class="fas fa-lg fa-fw fa-chart-simple"></i>
</a>
<!-- link -->
<a data-toggle="tab" class="nav-item nav-link bg-light text-primary justify-content-center align-items-center tooltipster"
title="design notes"
href="#design">
<i class="fas fa-lg fa-fw fa-palette"></i>
</a>
<!-- paste more links above this line - note: every button has the mr-2 class except the last one -->
</div>
</div>
<!-- /navigation -->
<!-- palette -->
<div class="card border-0 p-2 my-2" style="height:4rem">
<div class="flex-row h-100">
<div class="w-100" style="background:#e5e4e0"></div>
<div class="w-100" style="background:#c1bfba"></div>
<div class="w-100" style="background:#7c7b74"></div>
<div class="w-100" style="background:#403e3a"></div>
<!-- put more colors above this line -->
</div>
</div>
<!-- /palette -->
</div>
<!-- /basic -->
<!-- extra info -->
<div class="col-sm-4 order-3 px-2">
<!-- navigation - items -->
<div class="my-2" style="height:4rem">
<div class="nav nav-pills nav-fill h-100">
<!-- link -->
<a data-toggle="tab" class="nav-item nav-link active bg-light text-primary justify-content-center align-items-center mr-2"
href="#item-1">
<img class="h-100" style="object-fit:contain" src="https://f2.toyhou.se/file/f2-toyhou-se/images/67571379_YNbZSVnqU791JUS.png?1739020702" alt="item 1">
</a>
<!-- link -->
<a data-toggle="tab" class="nav-item nav-link bg-light text-primary justify-content-center align-items-center mr-2"
href="#item-2">
<img class="h-100" style="object-fit:contain" src="https://f2.toyhou.se/file/f2-toyhou-se/images/67571379_YNbZSVnqU791JUS.png?1739020702" alt="item 2">
</a>
<!-- link -->
<a data-toggle="tab" class="nav-item nav-link bg-light text-primary justify-content-center align-items-center"
href="#item-3">
<img class="h-100" style="object-fit:contain" src="https://f2.toyhou.se/file/f2-toyhou-se/images/67571379_YNbZSVnqU791JUS.png?1739020702" alt="item 3">
</a>
<!-- paste more links above this line - note: every button has the mr-2 class except the last one -->
</div>
</div>
<!-- /navigation -->
<!-- items -->
<div class="tab-content card border-0 py-2 my-2" style="height:13rem">
<!-- item 1 -->
<div class="tab-pane fade show active px-2" style="overflow-y:auto; scrollbar-width:thin" id="item-1">
<!-- info -->
<div class="row no-gutters mb-2">
<!-- image -->
<div class="col-3 mr-2 my-auto">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/67571379_YNbZSVnqU791JUS.png?1739020702" alt="">
</div>
<!-- name -->
<div class="col my-auto">
<span class="d-block" style="font-size:1.2em; font-weight:bold; text-transform:uppercase">
item
</span>
<span class="d-block text-muted" style="font-style:italic; text-transform:lowercase; line-height:1">
type
</span>
</div>
</div>
<!-- /info -->
<!-- description -->
<p class="text-justify">an item the character carries. describe it here or something. this box also scrolls.</p>
</div>
<!-- /item -->
<!-- item 2 -->
<div class="tab-pane fade px-2" style="overflow-y:auto; scrollbar-width:thin" id="item-2">
<!-- info -->
<div class="row no-gutters mb-2">
<!-- image -->
<div class="col-3 mr-2 my-auto">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/67571379_YNbZSVnqU791JUS.png?1739020702" alt="">
</div>
<!-- name -->
<div class="col my-auto">
<span class="d-block" style="font-size:1.2em; font-weight:bold; text-transform:uppercase">
item
</span>
<span class="d-block text-muted" style="font-style:italic; text-transform:lowercase; line-height:1">
type
</span>
</div>
</div>
<!-- /info -->
<!-- description -->
<p class="text-justify">long description. 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.</p>
</div>
<!-- /item -->
<!-- item 3 -->
<div class="tab-pane fade px-2" style="overflow-y:auto; scrollbar-width:thin" id="item-3">
<!-- info -->
<div class="row no-gutters mb-2">
<!-- image -->
<div class="col-3 mr-2 my-auto">
<img src="https://f2.toyhou.se/file/f2-toyhou-se/images/67571379_YNbZSVnqU791JUS.png?1739020702" alt="">
</div>
<!-- name -->
<div class="col my-auto">
<span class="d-block" style="font-size:1.2em; font-weight:bold; text-transform:uppercase">
item
</span>
<span class="d-block text-muted" style="font-style:italic; text-transform:lowercase; line-height:1">
type
</span>
</div>
</div>
<!-- /info -->
<!-- description -->
<p class="text-justify">longer description. 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. 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. 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.</p>
</div>
<!-- /item -->
</div>
<!-- /text -->
<!-- ribbons / etc -->
<div class="card border-0 my-2" style="height:6rem">
<div class="p-2 h-100 justify-content-around" style="overflow-x:auto; scrollbar-width:thin">
<img class="mx-3 my-auto tooltipster" title="name" src="https://file.toyhou.se/images/15987643_bvhutjRbgnwMYz3.png?1565855179">
<img class="mx-3 my-auto tooltipster" title="name" src="https://file.toyhou.se/images/15987643_bvhutjRbgnwMYz3.png?1565855179">
<img class="mx-3 my-auto tooltipster" title="name" src="https://file.toyhou.se/images/15987643_bvhutjRbgnwMYz3.png?1565855179">
<!-- put more above this line -->
</div>
</div>
<!-- /ribbons -->
</div>
<!-- /extra -->
</div>
<!-- /content -->
<!-- credits -->
<div class="text-right text-light d-block">
<a class="fas fa-ribbon text-light ml-2 tooltipster" style="text-decoration:none" title="ribbons by MisterMuse" href="https://toyhou.se/4739396.ribbons"></a>
<a class="fas fa-sun-haze text-light ml-2 tooltipster" style="text-decoration:none" title="code by sunxrice" href="https://toyhou.se/34273435.starterpack"></a>
</div>
<!-- /credits -->
</div>
<!-- end -->