Profile
<!---------------- WHOLE THING ---------------->
<!----------
Content:
#c9f3ed - BG
#4babe1 - Text
#0056ff - Subtitles
#000090 - Titles
#0080c9 - Bar/Link Color
#000028 - Bar Backgrounds
#bae6e0 - Design Tab Background
#9cd7cf - Design Tab Border
---------->
<div class="container p-0" style="max-width: 1000px;">
<!---------------- MAIN ROW ---------------->
<div class="row no-gutters">
<!---------------- MAIN CONTENT ---------------->
<div class="col-lg">
<div class="row no-gutters">
<!---------------- IMAGE ---------------->
<div class="col-lg-4 d-flex mr-lg-2">
<div class="flex-fill" style="
background: url(https://via.placeholder.com/200x300) top center no-repeat;
background-size: cover; min-height: 500px;">
</div>
</div>
<!---------------- END IMAGE ---------------->
<!---------------- CONTENT SECTION ---------------->
<div class="col-lg">
<!---------------- TABS ---------------->
<ul class="nav row no-gutters justify-content-center" style="letter-spacing: 1px;">
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConeinfo" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100 active">
<i class="m-auto fas fa-user fa-lg"></i>
</a>
</li>
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConepersonality" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100">
<i class="m-auto fas fa-comment fa-lg"></i>
</a>
</li>
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConedesign" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100">
<i class="m-auto fas fa-palette fa-lg"></i>
</a>
</li>
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConebackstory" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100">
<i class="m-auto fas fa-book fa-lg"></i>
</a>
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConeabilities" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100">
<i class="m-auto fas fa-sword fa-lg"></i>
</a>
</li>
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConetrivia" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100">
<i class="m-auto fas fa-stars fa-lg"></i>
</a>
</li>
<li class="nav-item d-flex mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px; background-color: #2148d9">
<a data-toggle="tab" href="#CConelinks" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100">
<i class="m-auto fas fa-users fa-lg"></i>
</a>
</li>
</ul>
<!---------------- END TABS ---------------->
<!---------------- TAB CONTENT ---------------->
<div class="card card-block border-0 rounded-0 m-2" style="overflow: auto; height: 420px; background-color: #c9f3ed; color:#4babe1">
<div class="tab-content">
<!---------------- TAB ONE (INFO) ---------------->
<div class="tab-pane fade in active show" id="CConeinfo">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4" style="color: #000090">
<p>Info</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-user my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- COLUMNS ---------------->
<div class="row no-gutters">
<div class="col-lg px-lg-2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Name</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Age</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Gender</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Species</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Home</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
</div>
<div class="card hidden-lg-down" style="width: 2px; background-color:#000; opacity: 0.2"></div>
<div class="col-lg px-lg-2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Alias</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">D.o.B</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Orientation</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Role</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="d-flex justify-content-between p-1">
<p class="text-uppercase" style="color: #0056ff">Designer</p>
<span class="text-right">content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
</div>
</div>
<!---------------- END COLUMNS ---------------->
<!---------------- ABOUT ---------------->
<h1 class="mb-1 mt-2" style="font-size:20px; color: #0056ff">About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales. </p>
<!---------------- END ABOUT ---------------->
</div>
<!---------------- END TAB ONE (INFO) ---------------->
<!---------------- TAB TWO (PERSONALITY) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="CConepersonality">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4" style="color: #000090">
<p>Character</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-comment my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- PERSONALITY ---------------->
<div class="row no-gutters">
<!---------------- TRAIT ---------------->
<div class="col-lg-12 pl-lg-2 mb-1">
<p class="mb-0" style="color: #0056ff"><b>Trait</b></p> <!---------------- You can write about things like their personality traits, mannerisms, habits, attitudes, etc! ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!---------------- END TRAIT ---------------->
<!---------------- TRAIT ---------------->
<div class="col-lg-12 pl-lg-2 mb-1">
<p class="mb-0" style="color: #0056ff"><b>Trait</b></p> <!---------------- You can write about things like their personality traits, mannerisms, habits, attitudes, etc! ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!---------------- END TRAIT ---------------->
<!---------------- TRAIT ---------------->
<div class="col-lg-12 pl-lg-2 mb-1">
<p class="mb-0" style="color: #0056ff"><b>Trait</b></p> <!---------------- You can write about things like their personality traits, mannerisms, habits, attitudes, etc! ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!---------------- END TRAIT ---------------->
<!---------------- TRAIT ---------------->
<div class="col-lg-12 pl-lg-2 mb-1">
<p class="mb-0" style="color: #0056ff"><b>Trait</b></p> <!---------------- You can write about things like their personality traits, mannerisms, habits, attitudes, etc! ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!---------------- END TRAIT ---------------->
<!---------------- TRAIT ---------------->
<div class="col-lg-12 pl-lg-2 mb-1">
<p class="mb-0" style="color: #0056ff"><b>Trait</b></p> <!---------------- You can write about things like their personality traits, mannerisms, habits, attitudes, etc! ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!---------------- END TRAIT ---------------->
<!---------------- TRAIT ---------------->
<div class="col-lg-12 pl-lg-2 mb-1">
<p class="mb-0" style="color: #0056ff"><b>Trait</b></p> <!---------------- You can write about things like their personality traits, mannerisms, habits, attitudes, etc! ---------------->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<!---------------- END TRAIT ---------------->
</div>
<!---------------- END PERSONALITY ---------------->
</div>
<!---------------- END TAB TWO (PERSONALITY) ---------------->
<!---------------- TAB THREE (DESIGN) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="CConedesign">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4" style="color: #000090">
<p>DESIGN</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-palette my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- CONTENT ---------------->
<div class="text-center">
<img class="p-3" src="https://via.placeholder.com/200x300" style="max-height:300px">
</div>
<div class="row no-gutters">
<div class="col">
<div class="p-1 justify-content-between">
<span class="text-uppercase" style="color: #0056ff">Height</span>
<span>content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="p-1 justify-content-between">
<span class="text-uppercase" style="color: #0056ff">Hair</span>
<span>content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<div class="p-1 justify-content-between">
<span class="text-uppercase" style="color: #0056ff">Eyes</span>
<span>content</span>
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
</div>
</div>
<div class="row no-gutters content-justify-center">
<!---------------- OPTIONAL TRAITS ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3" style="font-size:20px; color: #0056ff">Optional</h1>
<!---------------- This is for details that ARE NOT mandatory when drawing your character! ---------------->
<ul class="pl-lg-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<hr class="m-1 d-lg-none">
</div>
<!---------------- END OPTIONAL TRAITS ---------------->
<div class="card hidden-lg-down" style="width: 2px; background-color:#000; opacity: 0.2"></div>
<!---------------- NON-OPTIONAL TRAITS ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3" style="font-size:20px; color: #0056ff">Not Optional</h1>
<!---------------- This is for details that ARE mandatory when drawing your character! ---------------->
<ul class="pl-lg-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!---------------- END NON-OPTIONAL TRAITS ---------------->
</div>
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<h1 class="mb-0 mt-2 ml-3" style="font-size:20px; color: #0056ff">Other Notes...</h1>
<!---------------- This is for other details about your characters design, such as hidden features or other things like their dominant hand or blood/inner colors! ---------------->
<ul class="pl-lg-3">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<!---------------- END CONTENT ---------------->
</div>
<!---------------- END TAB THREE (DESIGN) ---------------->
<!---------------- TAB FOUR (BACKSTORY) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="CConebackstory">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4" style="color: #000090">
<p>Story</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-book my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- STORY PAGEDOLL ---------------->
<img src="https://via.placeholder.com/200x300" style="max-width:200px; max-height:300px;" class="float-right pl-2 mb-1 hidden-sm-down mt-3">
<!---------------- END STORY PAGEDOLL ---------------->
<!---------------- STORY ---------------->
<!---------------- You can remove the headers if you find them unnecessary! ---------------->
<h1 class="mb-1 mt-2" style="font-size:20px; color: #0056ff"><i class="fas fa-bookmark fa-fw"/>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h1 class="mb-1 mt-2" style="font-size:20px; color: #0056ff"><i class="fas fa-bookmark fa-fw"/>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<h1 class="mb-1 mt-2" style="font-size:20px; color: #0056ff"><i class="fas fa-bookmark fa-fw"/>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
<!---------------- END STORY ---------------->
</div>
<!---------------- END TAB FOUR (BACKSTORY) ---------------->
<!---------------- TAB FIVE (ABILITIES) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="CConeabilities">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4" style="color: #000090">
<p>Abilities</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-sword my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- STATS ---------------->
<div class="row no-gutters pb-1">
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Charisma</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:10%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Kindness</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:25%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Patience</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:40%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Temper</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:50%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Courage</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:60%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Integrity</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:75%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Intellect</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:90%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
<!---------------- STAT ---------------->
<div class="col-lg-6 pl-lg-2 mb-1">
<div class="row no-gutters">
<div class="col-auto" style="margin-bottom:-5px;">
<p class="text-uppercase pb-1" style="color: #0056ff">Humour</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8; background-color: #000028">
<!---------------- BAR ---------------->
<div class="progress-bar" style="width:100%; background-color: #0080c9"></div>
<div class="progress-bar" style="width:0%"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
</div>
<!---------------- END STATS ---------------->
<!---------------- SKILLS ---------------->
<div>
<!---------------- SKILL ---------------->
<hr class="m-2" style="background-color:#000; opacity: 0.2">
<div class="row no-gutters">
<!---------------- IMG ---------------->
<div class="col-lg-3 mb-1 d-flex">
<div class="m-auto" style="background: url(https://via.placeholder.com/200x200) center no-repeat; background-size: cover; height: 100px; width: 100px;">
</div>
</div>
<!---------------- END IMG ---------------->
<!---------------- SKILL DESC ---------------->
<div class="col-lg">
<div class="d-flex justify-content-between mb-0 text-secondary">
<h1 class="my-auto" style="font-size:20px; color: #0056ff">Skill</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!---------------- END SKILL DESC ---------------->
</div>
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<hr class="m-2" style="background-color:#000; opacity: 0.2">
<div class="row no-gutters">
<!---------------- IMG ---------------->
<div class="col-lg-3 mb-1 d-flex">
<div class="m-auto" style="background: url(https://via.placeholder.com/200x200) center no-repeat; background-size: cover; height: 100px; width: 100px;">
</div>
</div>
<!---------------- END IMG ---------------->
<!---------------- SKILL DESC ---------------->
<div class="col-lg">
<div class="d-flex justify-content-between mb-0 text-secondary">
<h1 class="my-auto" style="font-size:20px; color: #0056ff">Skill</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!---------------- END SKILL DESC ---------------->
</div>
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<hr class="m-2" style="background-color:#000; opacity: 0.2">
<div class="row no-gutters">
<!---------------- IMG ---------------->
<div class="col-lg-3 mb-1 d-flex">
<div class="m-auto" style="background: url(https://via.placeholder.com/200x200) center no-repeat; background-size: cover; height: 100px; width: 100px;">
</div>
</div>
<!---------------- END IMG ---------------->
<!---------------- SKILL DESC ---------------->
<div class="col-lg">
<div class="d-flex justify-content-between mb-0 text-secondary">
<h1 class="my-auto" style="font-size:20px; color: #0056ff">Skill</h1>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!---------------- END SKILL DESC ---------------->
</div>
<!---------------- END SKILL ---------------->
</div>
<!---------------- END SKILLS ---------------->
</div>
<!---------------- END TAB FIVE (ABILITIES) ---------------->
<!---------------- TAB SIX (TRIVIA) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="CConetrivia">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4" style="color: #000090">
<p>Trivia</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-stars my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- LIKES/DISLIKES ---------------->
<div class="row no-gutters content-justify-center">
<!---------------- LIKES ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3" style="font-size:20px; color: #0056ff">Likes</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
<hr class="m-1 d-lg-none">
</div>
<!---------------- END LIKES ---------------->
<div class="card hidden-lg-down" style="width: 2px; background-color:#000; opacity: 0.2"></div>
<!---------------- DISLIKES ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3" style="font-size:20px; color: #0056ff">Dislikes</h1>
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!---------------- END DISLIKES ---------------->
</div>
<!---------------- END LIKES/DISLIKES ---------------->
<hr class="m-1" style="background-color:#000; opacity: 0.2">
<!---------------- TRIVIA PAGEDOLL ---------------->
<img src="https://via.placeholder.com/200x300" style="max-width:200px; max-height:300px;" class="float-left pl-2 pr-lg-4 mb-1 hidden-sm-down mt-3">
<!---------------- END TRIVIA PAGEDOLL ---------------->
<!---------------- TRIVIA NOTES ---------------->
<ul class="mb-0 mt-2">
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
</ul>
<!---------------- END TRIVIA NOTES ---------------->
</div>
<!---------------- END TAB SIX (TRIVIA) ---------------->
<!---------------- TAB SEVEN (LINKS) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="CConelinks">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4 mb-3" style="color: #000090">
<p>Relationships</p>
<hr class="flex-fill my-auto mx-2" style="background-color:#000; opacity: 0.2">
<i class="fas fa-users my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- CHARACTER 1 ---------------->
<div class="row no-gutters mb-3">
<!---------------- IMG ---------------->
<div class="col-lg-3 mb-1 d-flex">
<div class="m-auto" style="background: url(https://via.placeholder.com/200x200) center no-repeat; background-size: cover; height: 120px; width: 120px;">
</div>
</div>
<!---------------- END IMG ---------------->
<!---------------- ABOUT ---------------->
<div class="col-lg">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="font-size: 25px; color: #0080c9">NAME</a>
<!----------------
"fas fa-heart" = solid heart
"far fa-heart-half-alt" = half-heart
"fal fa-heart = empty heart
---------------->
<span class="text-right my-auto" style="color: #0056ff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
[ Relationship ]
</span>
</div>
<p>Describe their relationship here! This section will adjust with the length of the text, so go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!---------------- END ABOUT ---------------->
</div>
<hr class="mt-0" style="background-color:#000; opacity: 0.2">
<!---------------- END CHARACTER 1 ---------------->
<!---------------- CHARACTER 2 ---------------->
<div class="row no-gutters mb-3">
<!---------------- IMG ---------------->
<div class="col-lg-3 push-lg-9 mb-1 d-flex">
<div class="m-auto" style="background: url(https://via.placeholder.com/200x200) center no-repeat; background-size: cover; height: 120px; width: 120px;">
</div>
</div>
<!---------------- END IMG ---------------->
<!---------------- ABOUT ---------------->
<div class="col-lg pull-lg-3">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="font-size: 25px; color: #0080c9">NAME</a>
<!----------------
"fas fa-heart" = solid heart
"far fa-heart-half-alt" = half-heart
"fal fa-heart = empty heart
---------------->
<span class="text-right my-auto" style="color: #0056ff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
[ Relationship ]
</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!---------------- END ABOUT ---------------->
</div>
<hr class="mt-0" style="background-color:#000; opacity: 0.2">
<!---------------- END CHARACTER 2 ---------------->
<!---------------- CHARACTER 3 ---------------->
<div class="row no-gutters mb-3">
<!---------------- IMG ---------------->
<div class="col-lg-3 mb-1 d-flex">
<div class="m-auto" style="background: url(https://via.placeholder.com/200x200) center no-repeat; background-size: cover; height: 120px; width: 120px;">
</div>
</div>
<!---------------- END IMG ---------------->
<!---------------- ABOUT ---------------->
<div class="col-lg">
<div class="d-flex justify-content-between mb-2">
<a href="URLHERE" class="display-4" style="font-size: 25px; color: #0080c9">NAME</a>
<!----------------
"fas fa-heart" = solid heart
"far fa-heart-half-alt" = half-heart
"fal fa-heart = empty heart
---------------->
<span class="text-right my-auto" style="color: #0056ff">
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-heart"></i>
<i class="fal fa-heart"></i>
<i class="fal fa-heart"></i>
[ Relationship ]
</span>
</div>
<p>Describe their relationship here! This section will adjust with the length of the text, so go wild! Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<!---------------- END ABOUT ---------------->
</div>
<!---------------- END CHARACTER 3 ---------------->
</div>
<!---------------- END TAB SEVEN (LINKS) ---------------->
</div>
</div>
<!---------------- END TAB CONTENT ---------------->
</div>
<!---------------- END CONTENT SECTION ---------------->
</div>
</div>
<!---------------- END MAIN CONTENT ---------------->
</div>
<!---------------- END MAIN ROW -->
<!---------------- CREDIT ---------------->
<div class="text-right col-12">
<a href="/ShadowDarespark" class="tooltipster text-muted" title="HTML by ShadowDarespark"><i class="far fa-code fa-sm"></i></a>
</div>
<!---------------- END CREDIT ---------------->
</div>
<!---------------- END WHOLE THING ---------------->