Rainbow Character
created by:HTMLobster
Custom ColorsHTMLCharacter
Copy
<!----------------------------------------------------------------
RAINBOW CHARACTER PROFILE FULL VERSION
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Do not redistribute edits.
------------------------------------------------------------------>
<div class="container rounded p-3" style="max-width:700px; background:linear-gradient(#e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
<!--- Heading --->
<div class="rounded bg-white p-1 mb-2 text-center" style="font-size:1.4em; font-weight:bold; letter-spacing:2px; color:#000;">
<div>Character Name</div>
</div>
<div class="row no-gutters mb-2">
<!--- LEFT column --->
<div class="col-md-5 col-12 rounded bg-white p-1 mr-md-2 mr-sm-0 mb-2 mb-md-0" style="color:#000;">
<!--- Side image --->
<div class="rounded m-2 bg-light" style="height:200px; background:url('https://via.placeholder.com/650.png') center; background-size:cover;"></div>
<!--- Name --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Name</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Character Name</div>
</div>
<!--- Age --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Age</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Age</div>
</div>
<!--- Height --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Height</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Height</div>
</div>
<!--- Weight --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Weight</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Weight</div>
</div>
<!--- Gender --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Gender</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Gender</div>
</div>
<!--- Pronouns --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Pronouns</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Pronouns</div>
</div>
<!--- Species --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Species</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Species</div>
</div>
</div>
<!--- RIGHT column --->
<div class="col rounded bg-white p-2" style="height:373px; overflow:auto; color:#000;">
<div class="accordion md-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<!--- Collapse 1 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="heading1">
<a class="col-auto text-uppercase" data-toggle="collapse" data-parent="#accordion" href="#accordion1" aria-expanded="true" aria-controls="accordion1" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Stats
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height:1px; background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordion1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordion">
<!--- Stat 1 --->
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Strength</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Stat 2 --->
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Perception</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Stat 3 --->
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Endurance</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Stat 4 --->
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Charisma</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Stat 5 --->
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Intelligence</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Stat 6 --->
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Agility</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Stat 7 --->
<div class="row no-gutters pb-2 pr-2">
<div class="col-6 px-2 text-uppercase">Luck</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<!--- Copy one of the above stat sections to add more! --->
</div>
</div>
<!--- Collapse 1 end --->
<!--- Collapse 2 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="heading2">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion2"
aria-expanded="false" aria-controls="accordion2" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
History
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordion2" class="collapse" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordion">
<div class="px-2 pb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo. Ut vel magna neque. Nam luctus risus vel tortor mollis, et tempus mauris malesuada. Suspendisse aliquet finibus est sed faucibus. Nunc sodales faucibus pulvinar. Vestibulum eu tristique lectus, vitae semper ante. Sed ac accumsan dui.</p>
<p>Pellentesque et molestie dolor. Sed gravida diam in elit cursus rutrum. Donec porttitor nibh vel ullamcorper porttitor. Praesent semper ex non augue ornare, id ultricies diam viverra. Quisque non ante sed mauris rhoncus consequat. Aenean rhoncus nibh ac risus sagittis malesuada. Sed et leo non tortor fringilla vehicula et ac odio.</p>
</div>
</div>
</div>
<!--- Collapse 2 end --->
<!--- Collapse 3 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="heading3">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion3"
aria-expanded="false" aria-controls="accordion3" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Personality
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordion3" class="collapse" role="tabpanel" aria-labelledby="heading3"
data-parent="#accordion">
<div class="px-2 pb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo. Ut vel magna neque. Nam luctus risus vel tortor mollis, et tempus mauris malesuada. Suspendisse aliquet finibus est sed faucibus. Nunc sodales faucibus pulvinar. Vestibulum eu tristique lectus, vitae semper ante. Sed ac accumsan dui.</p>
<p>Pellentesque et molestie dolor. Sed gravida diam in elit cursus rutrum. Donec porttitor nibh vel ullamcorper porttitor. Praesent semper ex non augue ornare, id ultricies diam viverra. Quisque non ante sed mauris rhoncus consequat. Aenean rhoncus nibh ac risus sagittis malesuada. Sed et leo non tortor fringilla vehicula et ac odio.</p>
</div>
</div>
</div>
<!--- Collapse 3 end --->
<!--- Collapse 4 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="heading4">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion4"
aria-expanded="false" aria-controls="accordion4" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Preferences
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordion4" class="collapse" role="tabpanel" aria-labelledby="heading4"
data-parent="#accordion">
<div class="px-2 pb-2">
<p class="text-uppercase mb-0">Likes</p>
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-heart"></i>like</li>
<li><i class="fa-li fas fa-heart"></i>like</li>
<li><i class="fa-li fas fa-heart"></i>like</li>
</ul>
<p class="text-uppercase mb-0">Dislikes</p>
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-times"></i>dislike</li>
<li><i class="fa-li fas fa-times"></i>dislike</li>
<li><i class="fa-li fas fa-times"></i>dislike</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo.</p>
</div>
</div>
</div>
<!--- Collapse 4 end --->
<!--- Collapse 5 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="heading5">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion5"
aria-expanded="false" aria-controls="accordion5" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Fun Facts
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordion5" class="collapse" role="tabpanel" aria-labelledby="heading5"
data-parent="#accordion">
<div class="px-2 pb-2">
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-star"></i>fact</li>
<li><i class="fa-li fas fa-star"></i>fact</li>
<li><i class="fa-li fas fa-star"></i>fact</li>
</ul>
<p>Longer facts or details. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo.</p>
</div>
</div>
</div>
<!--- Collapse 5 end --->
<!--- Collapse 6 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="heading6">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordion" href="#accordion6"
aria-expanded="false" aria-controls="accordion6" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Design Details
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordion6" class="collapse" role="tabpanel" aria-labelledby="heading6"
data-parent="#accordion">
<div class="px-2 pb-2">
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-pen"></i>detail</li>
<li><i class="fa-li fas fa-pen"></i>detail</li>
<li><i class="fa-li fas fa-pen"></i>detail</li>
</ul>
<p>Longer facts or details. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo.</p>
</div>
</div>
</div>
<!--- Collapse 6 end --->
<!--- Copy one of the above collapse sections to add more! --->
</div>
</div>
</div>
<!--- Relationships --->
<div class="row no-gutters" style="color:#000;">
<!--- Relation 1 --->
<div class="col-md-4 col-6 mb-2">
<div class="bg-white p-2 rounded h-100">
<div class="rounded m-1 bg-light" style="height:150px; background:url('https://via.placeholder.com/400.png') center; background-size:cover;"></div>
<div class="row no-gutters">
<div class="col-auto pl-1" style="font-weight:bold;"><a href="URL" style="color:#000; text-decoration:none;">Name</a></div>
<div class="col mt-1 px-2"><hr class="my-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto pr-1" style="font-weight:bold;">Relationship</div>
<div class="col-12 px-1">relationship details go here. can be as long as you want.</div>
</div>
</div>
</div>
<!--- Relation 2 --->
<div class="col-md-4 col-6 pl-2 mb-2">
<div class="bg-white p-2 rounded h-100">
<div class="rounded m-1 bg-light" style="height:150px; background:url('https://via.placeholder.com/400.png') center; background-size:cover;"></div>
<div class="row no-gutters">
<div class="col-auto pl-1" style="font-weight:bold;"><a href="URL" style="color:#000; text-decoration:none;">Name</a></div>
<div class="col mt-1 px-2"><hr class="my-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto pr-1" style="font-weight:bold;">Relationship</div>
<div class="col-12 px-1">relationship details go here.</div>
</div>
</div>
</div>
<!--- Relation 3 --->
<div class="col-md-4 col-6 pl-md-2 pl-0 mb-2">
<div class="bg-white p-2 rounded h-100">
<div class="rounded m-1 bg-light" style="height:150px; background:url('https://via.placeholder.com/400.png') center; background-size:cover;"></div>
<div class="row no-gutters">
<div class="col-auto pl-1" style="font-weight:bold;"><a href="URL" style="color:#000; text-decoration:none;">Name</a></div>
<div class="col mt-1 px-2"><hr class="my-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto pr-1" style="font-weight:bold;">Relationship</div>
<div class="col-12 px-1">relationship details go here.</div>
</div>
</div>
</div>
<!--- Relation 4 --->
<div class="col-md-4 col-6 pl-2 pl-md-0 mb-2 mb-md-0">
<div class="bg-white p-2 rounded h-100">
<div class="rounded m-1 bg-light" style="height:150px; background:url('https://via.placeholder.com/400.png') center; background-size:cover;"></div>
<div class="row no-gutters">
<div class="col-auto pl-1" style="font-weight:bold;"><a href="URL" style="color:#000; text-decoration:none;">Name</a></div>
<div class="col mt-1 px-2"><hr class="my-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto pr-1" style="font-weight:bold;">Relationship</div>
<div class="col-12 px-1">relationship details go here.</div>
</div>
</div>
</div>
<!--- Relation 5 --->
<div class="col-md-4 col-6 pl-0 pl-md-2 mb-2 mb-md-0">
<div class="bg-white p-2 rounded h-100">
<div class="rounded m-1 bg-light" style="height:150px; background:url('https://via.placeholder.com/400.png') center; background-size:cover;"></div>
<div class="row no-gutters">
<div class="col-auto pl-1" style="font-weight:bold;"><a href="URL" style="color:#000; text-decoration:none;">Name</a></div>
<div class="col mt-1 px-2"><hr class="my-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto pr-1" style="font-weight:bold;">Relationship</div>
<div class="col-12 px-1">relationship details go here.</div>
</div>
</div>
</div>
<!--- Relation 6 --->
<div class="col-md-4 col-6 pl-2 mb-2 mb-md-0">
<div class="bg-white p-2 rounded h-100">
<div class="rounded m-1 bg-light" style="height:150px; background:url('https://via.placeholder.com/400.png') center; background-size:cover;"></div>
<div class="row no-gutters">
<div class="col-auto pl-1" style="font-weight:bold;"><a href="URL" style="color:#000; text-decoration:none;">Name</a></div>
<div class="col mt-1 px-2"><hr class="my-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto pr-1" style="font-weight:bold;">Relationship</div>
<div class="col-12 px-1">relationship details go here.</div>
</div>
</div>
</div>
<!--- Copy one of the above sections to add more relationships. May need to adjust margins and/or padding for it to look properly on mobile & desktop! --->
</div>
</div>
<div class="container" style="max-width:700px;">
<div class="text-right">
<a href="https://toyhou.se/noll" style="font-size:1.4em; color:#2e88ca;" data-toggle="tooltip" title="theme by noll"><i class="fas fa-rabbit-fast"></i></a>
</div>
</div>Copy
<!----------------------------------------------------------------
RAINBOW CHARACTER PROFILE CONDENSED VERSION
Profile by HTMLobster (noll)
TOS:
Do not remove my credit. You may edit it, however.
You may edit code/frankenstein with others as long as their TOS allows!
Turn off WYSIWYG and turn on Code Editor.
Do not redistribute edits.
------------------------------------------------------------------>
<div class="container rounded p-3" style="max-width:700px; background:linear-gradient(#e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
<!--- Heading --->
<div class="rounded bg-white p-1 mb-2 text-center" style="font-size:1.4em; font-weight:bold; letter-spacing:2px; color:#000;">
<div>Character Name</div>
</div>
<div class="row no-gutters">
<!--- LEFT column --->
<div class="col-md-5 col-12 rounded bg-white p-1 mr-md-2 mr-sm-0 mb-2 mb-md-0" style="color:#000;">
<!--- Side image --->
<div class="rounded m-2 bg-light" style="height:200px; background:url('https://via.placeholder.com/650.png') center; background-size:cover;"></div>
<!--- Name --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Name</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Character Name</div>
</div>
<!--- Age --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Age</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Age</div>
</div>
<!--- Height --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Height</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Height</div>
</div>
<!--- Weight --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Weight</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Weight</div>
</div>
<!--- Gender --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Gender</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Gender</div>
</div>
<!--- Pronouns --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Pronouns</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Pronouns</div>
</div>
<!--- Species --->
<div class="px-2 row no-gutters">
<div class="col-auto text-uppercase" style="font-weight:bold;">Species</div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto">Species</div>
</div>
</div>
<!--- RIGHT column --->
<div class="col rounded bg-white p-2" style="height:373px; overflow:auto; color:#000;">
<div class="accordion md-accordion" id="accordions" role="tablist" aria-multiselectable="true">
<!--- Collapse 1 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingOne">
<a class="col-auto text-uppercase" data-toggle="collapse" data-parent="#accordions" href="#accordionOne" aria-expanded="true" aria-controls="accordionOne" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Stats
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height:1px; background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"
data-parent="#accordions">
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Strength</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Perception</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Endurance</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Charisma</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Intelligence</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<div class="row no-gutters pr-2">
<div class="col-6 px-2 text-uppercase">Agility</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
<div class="row no-gutters pb-2 pr-2">
<div class="col-6 px-2 text-uppercase">Luck</div>
<div class="col-6 d-flex justify-content-around text-primary">
<i class="fas fa-star" style="color:#e6498c;"></i>
<i class="fas fa-star" style="color:#f07d00;"></i>
<i class="fas fa-star-half-alt" style="color:#fab500;"></i>
<i class="far fa-star" style="color:#7db729;"></i>
<i class="far fa-star" style="color:#2e88ca;"></i>
</div>
</div>
</div>
</div>
<!--- Collapse 1 end --->
<!--- Collapse 2 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingTwo">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordions" href="#accordionTwo"
aria-expanded="false" aria-controls="accordionTwo" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
History
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"
data-parent="#accordions">
<div class="px-2 pb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo. Ut vel magna neque. Nam luctus risus vel tortor mollis, et tempus mauris malesuada. Suspendisse aliquet finibus est sed faucibus. Nunc sodales faucibus pulvinar. Vestibulum eu tristique lectus, vitae semper ante. Sed ac accumsan dui.</p>
<p>Pellentesque et molestie dolor. Sed gravida diam in elit cursus rutrum. Donec porttitor nibh vel ullamcorper porttitor. Praesent semper ex non augue ornare, id ultricies diam viverra. Quisque non ante sed mauris rhoncus consequat. Aenean rhoncus nibh ac risus sagittis malesuada. Sed et leo non tortor fringilla vehicula et ac odio.</p>
</div>
</div>
</div>
<!--- Collapse 2 end --->
<!--- Collapse 3 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingThree">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordions" href="#accordionThree"
aria-expanded="false" aria-controls="accordionThree" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Personality
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"
data-parent="#accordions">
<div class="px-2 pb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo. Ut vel magna neque. Nam luctus risus vel tortor mollis, et tempus mauris malesuada. Suspendisse aliquet finibus est sed faucibus. Nunc sodales faucibus pulvinar. Vestibulum eu tristique lectus, vitae semper ante. Sed ac accumsan dui.</p>
<p>Pellentesque et molestie dolor. Sed gravida diam in elit cursus rutrum. Donec porttitor nibh vel ullamcorper porttitor. Praesent semper ex non augue ornare, id ultricies diam viverra. Quisque non ante sed mauris rhoncus consequat. Aenean rhoncus nibh ac risus sagittis malesuada. Sed et leo non tortor fringilla vehicula et ac odio.</p>
</div>
</div>
</div>
<!--- Collapse 3 end --->
<!--- Collapse 4 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingFour">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordions" href="#accordionFour"
aria-expanded="false" aria-controls="accordionFour" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Preferences
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionFour" class="collapse" role="tabpanel" aria-labelledby="headingFour"
data-parent="#accordions">
<div class="px-2 pb-2">
<p class="text-uppercase mb-0">Likes</p>
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-heart"></i>like</li>
<li><i class="fa-li fas fa-heart"></i>like</li>
<li><i class="fa-li fas fa-heart"></i>like</li>
</ul>
<p class="text-uppercase mb-0">Dislikes</p>
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-times"></i>dislike</li>
<li><i class="fa-li fas fa-times"></i>dislike</li>
<li><i class="fa-li fas fa-times"></i>dislike</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo.</p>
</div>
</div>
</div>
<!--- Collapse 4 end --->
<!--- Collapse 5 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingFive">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordions" href="#accordionFive"
aria-expanded="false" aria-controls="accordionFive" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Fun Facts
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionFive" class="collapse" role="tabpanel" aria-labelledby="headingFive"
data-parent="#accordions">
<div class="px-2 pb-2">
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-star"></i>fact</li>
<li><i class="fa-li fas fa-star"></i>fact</li>
<li><i class="fa-li fas fa-star"></i>fact</li>
</ul>
<p>Longer facts or details. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo.</p>
</div>
</div>
</div>
<!--- Collapse 5 end --->
<!--- Collapse 6 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingSix">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordions" href="#accordionSix"
aria-expanded="false" aria-controls="accordionSix" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Design Details
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionSix" class="collapse" role="tabpanel" aria-labelledby="headingSix"
data-parent="#accordions">
<div class="px-2 pb-2">
<ul class="fa-ul mb-1">
<li><i class="fa-li fas fa-pen"></i>detail</li>
<li><i class="fa-li fas fa-pen"></i>detail</li>
<li><i class="fa-li fas fa-pen"></i>detail</li>
</ul>
<p>Longer facts or details. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget lobortis nisl. Donec sit amet sollicitudin leo.</p>
</div>
</div>
</div>
<!--- Collapse 6 end --->
<!--- Collapse 7 --->
<div>
<div class="px-2 row no-gutters" role="tab" id="headingSeven">
<a class="col-auto text-uppercase collapsed" data-toggle="collapse" data-parent="#accordions" href="#accordionSeven"
aria-expanded="false" aria-controls="accordionSeven" style="color:#000; font-weight:bold; text-decoration:none; font-size:1.2em;">
Relationships
</a>
<div class="col row no-gutters mt-1">
<hr class="col my-2 ml-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);">
</div>
</div>
<div id="accordionSeven" class="collapse" role="tabpanel" aria-labelledby="headingSeven"
data-parent="#accordions">
<!--- Relationship 1 --->
<div class="p-2 row no-gutters">
<div class="col-4 rounded mr-2 bg-light" style="background:url('https://via.placeholder.com/250.png') center; background-size:cover;"></div>
<div class="col row no-gutters">
<div class="col-12 row no-gutters">
<div class="col-auto"><a href="URL" style="font-weight:bold; text-decoration:none; color:#000;">Name</a></div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto" style="font-weight:bold;">Relationship</div>
</div>
<div class="col-12">Describe relationship here. Can be as long as you want. Image will be as tall as your text.</div>
</div>
</div>
<!--- Relationship 2 --->
<div class="px-2 pb-2 row no-gutters">
<div class="col-4 rounded mr-2 bg-light" style="background:url('https://via.placeholder.com/250.png') center; background-size:cover;"></div>
<div class="col row no-gutters">
<div class="col-12 row no-gutters">
<div class="col-auto"><a href="URL" style="font-weight:bold; text-decoration:none; color:#000;">Name</a></div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto" style="font-weight:bold;">Relationship</div>
</div>
<div class="col-12">Describe relationship here. Can be as long as you want. Image will be as tall as your text.</div>
</div>
</div>
<!--- Relationship 3 --->
<div class="px-2 pb-2 row no-gutters">
<div class="col-4 rounded mr-2 bg-light" style="background:url('https://via.placeholder.com/250.png') center; background-size:cover;"></div>
<div class="col row no-gutters">
<div class="col-12 row no-gutters">
<div class="col-auto"><a href="URL" style="font-weight:bold; text-decoration:none; color:#000;">Name</a></div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto" style="font-weight:bold;">Relationship</div>
</div>
<div class="col-12">Describe relationship here. Can be as long as you want. Image will be as tall as your text.</div>
</div>
</div>
<!--- Copy the ABOVE relationship section if you want to add more. Put them right below this line.--->
<!--- Relationship 4 --->
<div class="px-2 row no-gutters">
<div class="col-4 rounded mr-2 bg-light" style="background:url('https://via.placeholder.com/250.png') center; background-size:cover;"></div>
<div class="col row no-gutters">
<div class="col-12 row no-gutters">
<div class="col-auto"><a href="URL" style="font-weight:bold; text-decoration:none; color:#000;">Name</a></div> <div class="col" style="margin-top:2px;"><hr class="m-2" style="height: 1px;background: linear-gradient(to right, #e6498c, #f07d00, #fab500, #7db729, #2e88ca);"></div>
<div class="col-auto" style="font-weight:bold;">Relationship</div>
</div>
<div class="col-12">Describe relationship here. Can be as long as you want. Image will be as tall as your text.</div>
</div>
</div>
</div>
</div>
<!--- Collapse 7 end --->
</div>
</div>
</div>
</div>
<div class="container" style="max-width:700px;">
<div class="text-right">
<a href="https://toyhou.se/noll" style="font-size:1.4em; color:#2e88ca;" data-toggle="tooltip" title="theme by noll"><i class="fas fa-rabbit-fast"></i></a>
</div>
</div>