pill box
created by:8byte
HTMLBootstrapCharacter
Copy
<!---
==== Pill Box
==== HTML by 8byte
----
==== Colors
---- This code uses bootstrap colors.
--->
<div class="container" style="max-width: 1000px;">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<div class="h-100 d-flex flex-column">
<!--- name --->
<span class="card font-weight-bold border-0 text-center px-2 py-1 mx-auto display-4 w-100 order-md-1 order-2">
Name Surname
</span>
<!--- main profile image --->
<div class="card p-1 card-outline-primary h-100 order-md-2 order-1" style="border-radius: 30px;">
<!--- image --->
<div class="card h-100 border-0" style="background: url(IMGURL); background-size: cover; border-radius: 30px; min-height: 200px; min-width: 200px;"></div>
</div>
<!--- tags --->
<div class="d-none d-md-flex flex-row mt-2 justify-content-center order-3">
<a class="btn btn-primary px-2 py-1 text-white mx-1" style="border-radius: 30px; font-size: 1rem;"><i class="far fa-hashtag mr-2"></i>tag</a>
<a class="btn btn-primary px-2 py-1 text-white mx-1" style="border-radius: 30px; font-size: 1rem;"><i class="far fa-hashtag mr-2"></i>tag</a>
<a class="btn btn-primary px-2 py-1 text-white mx-1" style="border-radius: 30px; font-size: 1rem;"><i class="far fa-hashtag mr-2"></i>tag</a>
</div>
</div>
</div>
<div class="col-md-8 p-1 mb-md-0 mb-5">
<ul class="nav mb-md-n4 ml-4 flex-md-nowrap flex-wrap" style="position: relative; z-index: 999;">
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#ONE" data-toggle="collapse">Basics</a></li>
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#TWO" data-toggle="collapse">Personality</a></li>
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#THREE" data-toggle="collapse">Story</a></li>
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#FOUR" data-toggle="collapse">Notes</a></li>
</ul>
<div id="PARENT" style="min-height: 50px;">
<!--- basics tab --->
<div class="collapse show" id="ONE" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Basics</h1>
<div class="overflow-auto">
<div class="row no-gutters">
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Name</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">name surname</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Pronouns</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">prn/prn</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Age</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">00</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Birthday</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">mon 01</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Occupation</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">occupation</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Orientation</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">orientation</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">MBTI</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">mbti</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Alignment</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">alignment</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Likes</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">content, content, content</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Dislikes</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">content, content, content</span>
</div>
<!--- end content --->
</div>
<div class="d-flex mt-5 align-items-center">
<span class="text-uppercase font-weight-bold">A quote can go here...</span>
<span class="col mx-2 bg-secondary" style="padding: .5px;"></span>
<a class="btn btn-primary text-white" style="border-radius: 30px;"><i class="fas fa-quote-right fa-fw"></i></a>
</div>
</div>
</div>
</div>
<!--- personality tab --->
<div class="collapse" id="TWO" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Personality</h1>
<div class="overflow-auto mb-2">
<div class="row no-gutters">
<div class="col-md-4 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">strengths</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled pl-2">
<!--- strengths --->
<li><i class="far fa-plus mr-2"></i> strength</li>
<li><i class="far fa-plus mr-2"></i> strength</li>
<li><i class="far fa-plus mr-2"></i> strength</li>
<li><i class="far fa-plus mr-2"></i> strength</li>
<li><i class="far fa-plus mr-2"></i> strength</li>
</ul>
</div>
</div>
<div class="col-md-4 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">weaknesses</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled pl-2">
<!--- weaknesses --->
<li><i class="far fa-minus mr-2"></i> weakness</li>
<li><i class="far fa-minus mr-2"></i> weakness</li>
<li><i class="far fa-minus mr-2"></i> weakness</li>
<li><i class="far fa-minus mr-2"></i> weakness</li>
<li><i class="far fa-minus mr-2"></i> weakness</li>
</ul>
</div>
</div>
<div class="col-md-4 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">other traits</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled pl-2">
<!--- neutral --->
<li><i class="far fa-equals mr-2"></i> content</li>
<li><i class="far fa-equals mr-2"></i> content</li>
<li><i class="far fa-equals mr-2"></i> content</li>
<li><i class="far fa-equals mr-2"></i> content</li>
<li><i class="far fa-equals mr-2"></i> content</li>
</ul>
</div>
</div>
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">stats</h4>
<div class="row no-gutters">
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">Strength</span>
<!--- stat bar --->
<div class="progress my-2 mr-2" style="background: transparent; border: 1px solid; border-radius: 30px; width: 150px;">
<!--- change width here --->
<div class="progress-bar bg-primary" style="width:25%; height:16px"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">Intelligence</span>
<!--- stat bar --->
<div class="progress my-2 mr-2" style="background: transparent; border: 1px solid; border-radius: 30px; width: 150px;">
<!--- change width here --->
<div class="progress-bar bg-primary" style="width:25%; height:16px"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">Charisma</span>
<!--- stat bar --->
<div class="progress my-2 mr-2" style="background: transparent; border: 1px solid; border-radius: 30px; width: 150px;">
<!--- change width here --->
<div class="progress-bar bg-primary" style="width:25%; height:16px"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">Kindness</span>
<!--- stat bar --->
<div class="progress my-2 mr-2" style="background: transparent; border: 1px solid; border-radius: 30px; width: 150px;">
<!--- change width here --->
<div class="progress-bar bg-primary" style="width:25%; height:16px"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">Courage</span>
<!--- stat bar --->
<div class="progress my-2 mr-2" style="background: transparent; border: 1px solid; border-radius: 30px; width: 150px;">
<!--- change width here --->
<div class="progress-bar bg-primary" style="width:25%; height:16px"></div>
</div>
</div>
</div>
<!--- stat --->
<div class="col-md-6 p-1">
<div class="d-flex align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">Diligence</span>
<!--- stat bar --->
<div class="progress my-2 mr-2" style="background: transparent; border: 1px solid; border-radius: 30px; width: 150px;">
<!--- change width here --->
<div class="progress-bar bg-primary" style="width:25%; height:16px"></div>
</div>
</div>
</div>
<!--- end stats --->
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">skills</h4>
<div class="row no-gutters">
<!--- skill --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Skill</span>
<p>Description of the skill</p>
</div>
<!--- skill --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Skill</span>
<p>Description of the skill</p>
</div>
<!--- skill --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Skill</span>
<p>Description of the skill</p>
</div>
<!--- skill --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Skill</span>
<p>Description of the skill</p>
</div>
<!--- skill --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Skill</span>
<p>Description of the skill</p>
</div>
<!--- skill --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Skill</span>
<p>Description of the skill</p>
</div>
<!--- end skills --->
</div>
</div>
</div>
</div>
<!--- story tab --->
<div class="collapse" id="THREE" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Story</h1>
<div class="overflow-auto mb-2">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<!--- subsection --->
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">Subsection</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<!--- spoilers section --->
<h4 class="text-secondary text-uppercase px-3 mt-2 d-flex" style="border-left: 3px solid; justify-content: space-between;">
<span>Spoilers</span>
<a href="#SPOILERS" data-toggle="collapse"><i class="far fa-chevron-double-down"></i></a>
</h4>
<!--- any story spoilers can go here --->
<div class="collapse" id="SPOILERS">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<!--- end of spoilered section --->
</div>
</div>
</div>
<!--- notes section --->
<div class="collapse" id="FOUR" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Notes</h1>
<div class="overflow-auto mb-2">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">trivia</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled">
<!--- trivia --->
<li><i class="far fa-pencil fa-flip-horizontal mr-2"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2"></i>content</li>
<li><i class="far fa-pencil fa-flip-horizontal mr-2"></i>content</li>
</ul>
</div>
</div>
<div class="col-md-6 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">playlist</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled">
<!--- playlist --->
<li><a href="LINK"><i class="far fa-play mr-2"></i></a>content</li>
<li><a href="LINK"><i class="far fa-play mr-2"></i></a>content</li>
<li><a href="LINK"><i class="far fa-play mr-2"></i></a>content</li>
<li><a href="LINK"><i class="far fa-play mr-2"></i></a>content</li>
<li><a href="LINK"><i class="far fa-play mr-2"></i></a>content</li>
</ul>
</div>
</div>
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">inventory</h4>
<div class="row no-gutters">
<!--- inventory ---->
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<!--- end of inventory --->
</div>
</div>
</div>
</div>
<!--- preferences tab --->
<div class="collapse" id="FIVE" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Preferences</h1>
<div class="overflow-auto mb-2">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">likes</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled">
<!--- likes --->
<li><i class="far fa-heart mr-2"></i>content</li>
<li><i class="far fa-heart mr-2"></i>content</li>
<li><i class="far fa-heart mr-2"></i>content</li>
<li><i class="far fa-heart mr-2"></i>content</li>
<li><i class="far fa-heart mr-2"></i>content</li>
</ul>
</div>
</div>
<div class="col-md-6 p-1">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">dislikes</h4>
<div class="overflow-auto" style="height: 125px;">
<ul class="list-unstyled">
<!--- dislikes --->
<li><i class="far fa-heart-broken mr-2"></i>content</li>
<li><i class="far fa-heart-broken mr-2"></i>content</li>
<li><i class="far fa-heart-broken mr-2"></i>content</li>
<li><i class="far fa-heart-broken mr-2"></i>content</li>
<li><i class="far fa-heart-broken mr-2"></i>content</li>
</ul>
</div>
</div>
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">hobbies</h4>
<div class="row no-gutters">
<!--- hobby --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Hobby</span>
<p>Description of the hobby</p>
</div>
<!--- hobby --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Hobby</span>
<p>Description of the hobby</p>
</div>
<!--- hobby --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Hobby</span>
<p>Description of the hobby</p>
</div>
<!--- hobby --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Hobby</span>
<p>Description of the hobby</p>
</div>
<!--- hobby --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Hobby</span>
<p>Description of the hobby</p>
</div>
<!--- hobby --->
<div class="col-md-4 p-1">
<span class="text-uppercase font-weight-bold">Hobby</span>
<p>Description of the hobby</p>
</div>
<!--- end hobbies --->
</div>
</div>
</div>
</div>
<!--- design tab --->
<div class="collapse" id="SIX" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Design</h1>
<div class="overflow-auto h-100 mb-2" id="DESIGN-PARENT">
<div class="collapse fade show container h-100 p-2" data-parent="#DESIGN-PARENT" id="DESIGN-INFO">
<div class="row no-gutters">
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Species</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">species</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Race</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">ethnicity/race</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Height</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">00'00"</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Weight</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">00lb</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Features</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">one, two, three</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Accessories</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">one, two, three</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Designer</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">@designer</span>
</div>
<!--- content --->
<div class="col-md-3 col-6 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">Worth</span></h1>
</div>
<div class="col-md-3 col-6 p-1 align-items-center">
<span class="font-italic">$--</span>
</div>
<!--- content --->
<div class="col-md-3 p-1">
<h1><span class="badge badge-primary badge-pill text-uppercase" style="font-weight: normal;">palette</span></h1>
</div>
<!--- palette content --->
<div class="col-md-9 p-1 align-items-center">
<h1>
<!--- palette --->
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
<span class="badge badge-pill m-1" style="background: #000;">#000000</span>
</h1>
</div>
<!--- end content --->
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">moodboard</h4>
<div class="row no-gutters">
<!--- moodboard --->
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<div class="col-md col-6 p-1">
<!--- image --->
<div class="container" style="background: url(IMGURL); background-size: cover; background-position: center; border-radius: 30px; height: 125px;"></div>
</div>
<!--- end of moodboard --->
</div>
<!--- collapse reference image --->
<div class="d-flex mt-3 align-items-center" style="justify-content: space-between;">
<span class="text-uppercase font-weight-bold">View reference image:</span>
<span class="col mx-2 bg-secondary" style="padding: .5px;"></span>
<a href="#DESIGN-REF" data-toggle="collapse" class="btn btn-primary" style="border-radius: 30px;"><i class="fas fa-image fa-fw"></i></a>
</div>
</div>
<!--- main reference image --->
<!--- change background-color to match the background of your reference image for best results! --->
<div class="collapse fade container h-100 p-2" data-parent="#DESIGN-PARENT" style="background: url(IMGURL); background-color: #000000; background-position: center; background-size: contain; background-repeat: no-repeat; border-radius: 30px;" id="DESIGN-REF">
<a href="#DESIGN-INFO" data-toggle="collapse" class="btn btn-primary" style="border-radius: 30px; position: absolute; bottom: 10px; right: 10px;"><i class="fas fa-info fa-fw"></i></a>
</div>
</div>
</div>
</div>
<!--- relationships section --->
<div class="collapse" id="SEVEN" data-parent="#PARENT">
<div class="card p-md-3 p-1 card-outline-primary d-flex flex-column" style="height: 400px; border-radius: 30px;">
<h1 class="text-right text-uppercase pr-2 mt-3 mt-md-0">Links</h1>
<div class="overflow-auto mb-2">
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">family</h4>
<div class="row no-gutters">
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- end links --->
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">friends</h4>
<div class="row no-gutters">
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- end links --->
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">romantic</h4>
<div class="row no-gutters">
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- end links --->
</div>
<h4 class="text-secondary text-uppercase pl-3" style="border-left: 3px solid;">negative</h4>
<div class="row no-gutters">
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- link --->
<div class="col-md-3 col-6 p-1">
<div class="container p-1">
<!--- link to character --->
<a href="LINK" class="btn btn-outline-primary w-100 h-100" style="position: absolute; top: 0; left: 0; z-index: 999; border-radius: 30px;"></a>
<!--- image --->
<div class="container w-100" style="background: url(IMGURL); background-size: cover; padding-top: 100%; border-radius: 30px;"></div>
</div>
<!--- link to character --->
<h4 class="mt-2 mb-0 text-center"><a href="LINK" class="text-secondary text-uppercase">Name Surname</a></h4>
<p class="text-center">[relationship]</p>
</div>
<!--- end links --->
</div>
</div>
</div>
</div>
</div>
<ul class="nav mt-md-n4 mr-4 flex-md-nowrap flex-wrap" style="position: absolute; right: 0; z-index: 999;">
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#FIVE" data-toggle="collapse">Preferences</a></li>
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#SIX" data-toggle="collapse">Design</a></li>
<li class="nav-item card border-0 p-1"><a class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;" href="#SEVEN" data-toggle="collapse">Links</a></li>
<li class="nav-item card border-0 p-1"><a href="/8byte" class="nav-link btn btn-primary font-weight-bold text-uppercase" style="border-radius: 30px;"><i class="fas fa-code"></i></a></li>
</ul>
</div>
</div>
</div>