Profile
<!----------------------------------------------------------
KEIJI [F2U]
COLOURS:
- Orange: #dc543d
- Light Green: #607A6A
- Green: #425347
- Pastel Brown: #BCB4AF
- Lightest Brown: #594639
- Medium Brown: #352A22
- Darkest Brown: #231C16
- Black: #000
- White: #fff
- Off-white: #F1F0EF
- Light Grey: #D8D8D7
RGBA COLOURS:
- Green: 66,83,71,0.2
------------------------------------------------------------>
<div class="container p-0" style="max-width:700px; font-family:monospace;">
<div class="col-12 p-0 mt-5">
<!-- WHOLE BACKGROUND -->
<div class="card p-3 rounded-0 border-0" style="background-color:#000;">
<!-- FA ICON DECOR; DON'T TOUCH. -->
<span>
<i class="fas fa-signs-post fa-flip fa-3x" style="position:absolute; top:-40px; left:20px; color:#000; animation-duration: 5s;"></i>
<i class="fas fa-trees fa-flip-horizontal fa-3x" style="position:absolute; top:-31px; right:90px; color:#000;"></i>
<i class="fas fa-trees fa-4x" style="position:absolute; top:-40px; right:30px; color:#000;"></i>
</span>
<!-- CONTENT BOX -->
<div class="card p-0 rounded-0 border-0" style="font-size:13px;
background-image:url(https://images.unsplash.com/photo-1612288443047-edd40b6196d4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80);
background-position:top;
background-size:cover;">
<div class="card p-4 rounded-0 border-0" style="background-color:rgba(66,83,71, 0.2);">
<!-- TOP -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-3 p-0">
<div class="card p-2 rounded-0 border-0 h-100" style="background-color:#594639;">
<div class="card h-100 rounded-0 border-0" style="
background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);
background-position:center;
background-size:cover;"></div>
</div>
</div>
<!-- QUOTE -->
<div class="col-9 p-0">
<div class="card p-4 text-center h-100 border-0 rounded-0 justify-content-center" style="min-height:100px; background-color:#352A22; color:#fff;">
<p style="letter-spacing:1px; font-size:11px;"><i>Insert quote here. Maximum 3-4 lines.</i></p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#594639; left:-1px; top:37px; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:30px; width:20px;"></div>
</div>
</div>
<!-- BOTTOM -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#231C16">
<div class="tab-content">
<!-- ABOUT -->
<div class="tab-pane fade active show" id="abt">
<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">
<!-- BASIC INFO -->
<!-- CONTENT; ABOUT -->
<div class="row no-gutters mt-2">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-signature"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; AGE -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-calendar-days"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; BIRTHDAY -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-cake"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; GENDER -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-venus-mars"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; SPECIES -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-dna"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; ORIENTATION -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-heart"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; R/S STATUS -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-rings-wedding"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; OCCUPATION -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fas fa-briefcase"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- CONTENT; STATUS -->
<div class="row no-gutters">
<!-- ICON -->
<div class="col-1 p-0">
<div class="card p-1 text-center justify-content-center h-100 rounded-0 border-0" style="background-color:#607A6A; color:#fff;">
<i class="fa-solid fa-question"></i>
</div>
</div>
<div class="col-11 p-0">
<div class="card p-2 text-right justify-content-center rounded-0 border-0 text-uppercase" style="height:30px; background-color:#F1F0EF; color:#000;">
<p>content</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
</div>
</div>
<!-- PERSONALITY -->
<div class="tab-pane fade" id="pers">
<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">
<!-- DESCRIPTION -->
<div class="row no-gutters">
<!-- CONTENT BOX -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; height:130px; overflow:auto; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
<p>Etiam tincidunt nunc in commodo gravida. Nunc placerat egestas ante in semper. Fusce congue interdum dolor, in sollicitudin dui feugiat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget condimentum urna. Sed ac dui tempor, mollis enim sed, sodales nulla. Mauris sodales, lacus in interdum convallis, mauris tortor tristique eros, at molestie elit felis in felis. Sed nec enim eros. Phasellus eu metus a quam rutrum blandit vel id sapien. Ut vitae turpis id risus lobortis suscipit. Nulla ultrices erat nec luctus euismod. Cras lacinia sapien posuere est semper auctor.</p>
</div>
</div>
<!-- TITLE -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 text-center p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold">PERSONALITY</p>
</div>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height:20px; width:30px; left:275px; top:120px; background-color:#607A6A;"></div>
</div>
<!-- LIKES & DISLIKES -->
<div class="row no-gutters mt-2">
<!-- LIKES -->
<div class="col-6 pr-1">
<!-- TITLE -->
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold text-center">LIKES</p>
</div>
<!-- CONTENT BOX -->
<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">
<ul class="fa-ul" style="font-size:13px;">
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart"></i></span>content</li>
</ul>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#607A6A;"></div>
</div>
<!-- DISLIKES -->
<div class="col-6 pl-1">
<!-- TITLE -->
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold text-center">DILIKES</p>
</div>
<!-- CONTENT BOX -->
<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">
<ul class="fa-ul" style="font-size:13px;">
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-heart-broken"></i></span>content</li>
</ul>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#607A6A;"></div>
</div>
</div>
<!-- STATS -->
<div class="row no-gutters mt-2">
<!-- TITLE -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 text-center p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold">STATISTICS</p>
</div>
</div>
<!-- CONTENT BOX -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; color:#000;">
<div class="row no-gutters">
<div class="col-6 pr-1">
<!-- INTELLIGENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-brain-circuit"></i>
INTELLIGENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#D8D8D7;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#dc543d;"></div>
</div>
</div>
<!-- CONFIDENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-face-smile"></i>
CONFIDENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#D8D8D7;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#dc543d;"></div>
</div>
</div>
<!-- HUMOUR -->
<div class="mb-1">
<div class="justify-content-between">
<span>
<i class="fa-light fa-face-grin-tears"></i>
HUMOUR
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#D8D8D7;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#dc543d;"></div>
</div>
</div>
</div>
<div class="col-6">
<!-- CHARISMA -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-sparkles"></i>
CHARISMA
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#D8D8D7;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#dc543d;"></div>
</div>
</div>
<!-- PATIENCE -->
<div class="mb-2">
<div class="justify-content-between">
<span>
<i class="fa-light fa-comment-dots"></i>
PATIENCE
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#D8D8D7;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#dc543d;"></div>
</div>
</div>
<!-- EMPATHY -->
<div class="mb-1">
<div class="justify-content-between">
<span>
<i class="fa-light fa-hand-holding-hand"></i>
EMPATHY
</span>
<span class="faded">[50%]</span>
</div>
<div class="progress rounded-0" style="background-color:#D8D8D7;">
<div class="progress-bar" style="width:50%; height:10px; background-color:#dc543d;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; left:275px; bottom:-149px; background-color:#607A6A;"></div>
</div>
</div>
</div>
<!-- HISTORY -->
<div class="tab-pane fade" id="hist">
<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">
<!-- BACKSTORY/HISTORY -->
<div class="row no-gutters">
<!-- CONTENT BOX -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; height:130px; overflow:auto; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
<p>Etiam tincidunt nunc in commodo gravida. Nunc placerat egestas ante in semper. Fusce congue interdum dolor, in sollicitudin dui feugiat at. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eget condimentum urna. Sed ac dui tempor, mollis enim sed, sodales nulla. Mauris sodales, lacus in interdum convallis, mauris tortor tristique eros, at molestie elit felis in felis. Sed nec enim eros. Phasellus eu metus a quam rutrum blandit vel id sapien. Ut vitae turpis id risus lobortis suscipit. Nulla ultrices erat nec luctus euismod. Cras lacinia sapien posuere est semper auctor.</p>
</div>
</div>
<!-- TITLE -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 text-center p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold">HISTORY</p>
</div>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height:20px; width:30px; left:275px; top:120px; background-color:#607A6A;"></div>
</div>
<!-- NOTABLE EVENTS -->
<div class="row no-gutters mt-2">
<!-- EVENT -->
<div class="col-6 pr-1">
<!-- TITLE -->
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold text-center">EVENT #1</p>
</div>
<!-- CONTENT BOX -->
<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#607A6A;"></div>
</div>
<!-- EVENT -->
<div class="col-6 pl-1">
<!-- TITLE -->
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold text-center">EVENT #2</p>
</div>
<!-- CONTENT BOX -->
<div class="card rounded-0 border-0 p-2" style="background-color:#F1F0EF; height:120px; overflow:auto; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; top:35px; left:122px; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; background-color:#607A6A;"></div>
</div>
<!-- You can add more events before this line; if there is an odd number, change the last event from col-6 to col-12. -->
</div>
</div>
</div>
<!-- RELATIONS -->
<div class="tab-pane fade" id="rel">
<div class="card rounded-0 border-0 mt-3 p-2" style="background-color:#BCB4AF; height:250px; overflow:auto;">
<!-- SUMMARY -->
<div class="row no-gutters">
<!-- CONTENT BOX -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 p-3" style="background-color:#F1F0EF; height:130px; overflow:auto; color:#000;">
<p>How does your character manage relationships in general? Are they all the same, are there exceptions? Exclusions?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
</div>
</div>
<!-- TITLE -->
<div class="col-12 p-0">
<div class="card rounded-0 border-0 text-center p-2" style="background-color:#607A6A; color:#fff;">
<p class="font-weight-bold">RELATIONSHIPS</p>
</div>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height:20px; width:30px; left:275px; top:120px; background-color:#607A6A;"></div>
</div>
<!-- RELATION -->
<div class="row no-gutters mt-2">
<!-- ICON -->
<div class="col-md-4 col-5">
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A;">
<div class="card rounded-0 border-0" style="height:150px;
background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);
background-position:center;
background-size:cover;"></div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-md-8 col-7">
<!-- NAME -->
<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#425347;">
<a href="/" class="text-uppercase" style="color:#fff;">Character Name</a>
</div>
<!-- DETAILS -->
<div class="card rounded-0 border-0 p-2" style="height:130px; overflow:auto; background-color:#F1F0EF; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- RELATION -->
<div class="row no-gutters mt-2">
<!-- ICON -->
<div class="col-md-4 col-5">
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A;">
<div class="card rounded-0 border-0" style="height:150px;
background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);
background-position:center;
background-size:cover;"></div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-md-8 col-7">
<!-- NAME -->
<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#425347;">
<a href="/" class="text-uppercase" style="color:#fff;">Character Name</a>
</div>
<!-- DETAILS -->
<div class="card rounded-0 border-0 p-2" style="height:130px; overflow:auto; background-color:#F1F0EF; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- RELATION -->
<div class="row no-gutters mt-2">
<!-- ICON -->
<div class="col-md-4 col-5">
<div class="card rounded-0 border-0 p-2" style="background-color:#607A6A;">
<div class="card rounded-0 border-0" style="height:150px;
background-image:url(https://media.istockphoto.com/vectors/thumbnail-image-vector-graphic-vector-id1147544807?k=20&m=1147544807&s=612x612&w=0&h=pBhz1dkwsCMq37Udtp9sfxbjaMl27JUapoyYpQm0anc=);
background-position:center;
background-size:cover;"></div>
</div>
</div>
<!-- DESCRIPTION -->
<div class="col-md-8 col-7">
<!-- NAME -->
<div class="card rounded-0 border-0 p-2 text-right" style="background-color:#425347;">
<a href="/" class="text-uppercase" style="color:#fff;">Character Name</a>
</div>
<!-- DETAILS -->
<div class="card rounded-0 border-0 p-2" style="height:130px; overflow:auto; background-color:#F1F0EF; color:#000;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ullamcorper justo ut diam cursus, faucibus tempor tortor dignissim. Pellentesque placerat, est non porta tempus, lacus ipsum interdum massa, vel ultricies nisi purus pellentesque leo. Nulla vitae nulla eu magna convallis dapibus sit amet in ante. Morbi in elit eu sem accumsan laoreet vitae in ex.</p>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; background-color:#607A6A; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); height:20px; width:10px; top:8px; left:-1px;"></div>
</div>
</div>
<!-- Add more above this line. -->
</div>
</div>
</div>
</div>
<!-- TAGLINE; DESKTOP -->
<div class="col-6 hidden-md-down" style="position:absolute; left:230px; top:20px; transform:rotate(3deg)">
<div class="card rounded-0 border-0 p-1 text-center text-uppercase" style="background-color:#425347; color:#fff; font-size:14px">
<p>subtitle/tagline</p>
</div>
</div>
<!-- TAGLINE; MOBILE -->
<div class="col-6 hidden-md-up" style="position:absolute; left:150px; top:20px; transform:rotate(3deg)">
<div class="card rounded-0 border-0 p-1 text-center text-uppercase" style="background-color:#425347; color:#fff; font-size:14px">
<p>subtitle/tagline</p>
</div>
</div>
<!-- NAMETAG; DESKTOP -->
<div class="col-6 hidden-md-down" style="position:absolute; left:60px; top:-4px; transform:rotate(-5deg)">
<div class="card rounded-0 border-0 p-1 text-center font-weight-bold text-uppercase" style="background-color:#dc543d; color:#fff; letter-spacing:1px; font-size:14px;">
<p>name here</p>
</div>
</div>
<!-- NAMETAG; MOBILE -->
<div class="col-6 hidden-md-up" style="position:absolute; left:40px; top:-4px; transform:rotate(-5deg)">
<div class="card rounded-0 border-0 p-1 text-center font-weight-bold text-uppercase" style="background-color:#dc543d; color:#fff; letter-spacing:1px; font-size:14px;">
<p>name here</p>
</div>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; right:40px; top:-1px; background-color:#352A22;"></div>
</div>
<!-- NAVIGATION BAR + CREDIT -->
<div class="col-12 p-0">
<div class="card p-0 rounded-0 border-0" style="background-color:#594639; color:#fff;">
<ul class="nav row no-gutters text-center">
<!-- ABOUT -->
<li class="nav-item col" style="background-color:#594639;">
<a data-toggle="tab" href="#abt" class="active btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fad fa-user" style="color:#fff"></i>
</a>
</li>
<!-- PERSONALITY -->
<li class="nav-item col" style="background-color:#594639;">
<a data-toggle="tab" href="#pers" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fa-duotone fa-masks-theater" style="color:#fff"></i>
</a>
</li>
<!-- HISTORY -->
<li class="nav-item col" style="background-color:#594639;">
<a data-toggle="tab" href="#hist" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fad fa-books" style="color:#fff"></i>
</a>
</li>
<!-- RELATIONS -->
<li class="nav-item col" style="background-color:#594639;">
<a data-toggle="tab" href="#rel" class="btn btn-outline-secondary rounded-0 border-0 w-100" style="font-size:15px;">
<i class="fad fa-link" style="color:#fff"></i>
</a>
</li>
<!-- CREDIT; DO NOT TAMPER OR REMOVE. -->
<li class="col" style="background-color:#594639;">
<a href="/itemlabel" class="btn btn-outline-secondary border-0 rounded-0 w-100" style="font-size:15px;">
<i class="fa-duotone fa-code" style="color:#fff"></i>
</a>
</li>
</ul>
</div>
</div>
<!-- POINT DECOR; DON'T TOUCH. -->
<div class="card rounded-0 border-0" style="position:absolute; clip-path: polygon(0 0, 50% 100%, 100% 0%); height:20px; width:30px; left:25px; bottom:40px; background-color:#231C16;"></div>
</div>
</div>
</div>
</div>
</div>