Profile
<!---------------- WHOLE THING ---------------->
<div class="container p-0" style="max-width: 1000px;">
<!---------------- MAIN ROW ---------------->
<div class="row no-gutters">
<!---------------- NAVIGATION ---------------->
<div class="d-flex mx-auto">
<ul class="nav flex-lg-column flex-row my-auto">
<!---------------- FORM 1 BUTTON ---------------->
<li class="nav-item d-flex bg-dark my-2 mr-2" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a type="button" data-target="#profiles" data-slide-to="0" aria-controls="profile-1" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100 tooltipster" title="Form, Character, or AU Title">
<i class="m-auto fas fa-1 fa-lg"></i> <!---------------- You can change the symbol of the button by replacing the "1" in "fas fa-1" to something else. (for example; "fas fa-heart") Use Fontawesome.com to find more icons! ---------------->
</a>
</li>
<!---------------- END FORM 1 BUTTON ---------------->
<!---------------- FORM 2 BUTTON ---------------->
<li class="nav-item d-flex bg-dark mt-lg-0 my-2 mr-2" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a type="button" data-target="#profiles" data-slide-to="1" aria-controls="profile-2" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100 tooltipster" title="Form, Character, or AU Title">
<i class="m-auto fas fa-2 fa-lg"></i> <!---------------- You can change the symbol of the button by replacing the "2" in "fas fa-2" to something else. (for example; "fas fa-heart") Use Fontawesome.com to find more icons! ---------------->
</a>
</li>
<!---------------- END FORM 2 BUTTON ---------------->
<!---------------- FORM 3 BUTTON ---------------->
<li class="nav-item d-flex bg-dark mt-lg-0 my-2 mr-2" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a type="button" data-target="#profiles" data-slide-to="2" aria-controls="profile-3" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100 tooltipster" title="Form, Character, or AU Title">
<i class="m-auto fas fa-3 fa-lg"></i> <!---------------- You can change the symbol of the button by replacing the "3" in "fas fa-3" to something else. (for example; "fas fa-heart") Use Fontawesome.com to find more icons! ---------------->
</a>
</li>
<!---------------- END FORM 3 BUTTON ---------------->
</ul>
</div>
<!---------------- END NAVIGATION ---------------->
<!---------------- MAIN CONTENT ---------------->
<div class="col-lg">
<div class="carousel slide carousel-fade" data-interval="false" id="profiles">
<div class="carousel-inner">
<!---------------- FORM 1 ---------------->
<div id="profile-1" class="carousel-item active">
<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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#oneinfo" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#onepersonality" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#onedesign" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#onebackstory" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#oneabilities" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#onetrivia" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#onelinks" 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 bg-faded border-0 rounded-0 m-2" style="overflow: auto; height: 420px">
<div class="tab-content">
<!---------------- TAB ONE (INFO) ---------------->
<div class="tab-pane fade in active show" id="oneinfo">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Info</p>
<hr class="flex-fill my-auto mx-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-secondary text-uppercase">Name</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Age</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Gender</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Species</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Home</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
</div>
<div class="card hidden-lg-down" style="width: 2px;"></div>
<div class="col-lg px-lg-2">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase text-uppercase">Alias</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">D.o.B</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Orientation</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Role</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Designer</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
</div>
</div>
<!---------------- END COLUMNS ---------------->
<!---------------- ABOUT ---------------->
<h1 class="mb-1 mt-2 text-secondary" style="font-size:20px">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="onepersonality">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Character</p>
<hr class="flex-fill my-auto mx-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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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="onedesign">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Design</p>
<hr class="flex-fill my-auto mx-2">
<i class="fas fa-palette my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- CONTENT ---------------->
<div>
<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 text-muted">Height</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="p-1 justify-content-between">
<span class="text-uppercase text-muted">Hair</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="p-1 justify-content-between">
<span class="text-uppercase text-muted">Eyes</span>
<span>content</span>
</div>
<hr class="m-1">
</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 text-secondary" style="font-size:20px">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" style="width: 2px;"></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 text-secondary" style="font-size:20px">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">
<h1 class="mb-0 mt-2 ml-3 text-secondary" style="font-size:20px">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>
</div>
<!---------------- END CONTENT ---------------->
</div>
<!---------------- END TAB THREE (DESIGN) ---------------->
<!---------------- TAB FOUR (BACKSTORY) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="onebackstory">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Story</p>
<hr class="flex-fill my-auto mx-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 text-secondary" style="font-size:20px"><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 text-secondary" style="font-size:20px"><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 text-secondary" style="font-size:20px"><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="oneabilities">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Abilities</p>
<hr class="flex-fill my-auto mx-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-secondary text-uppercase pb-1">Charisma</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:10%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Kindness</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:25%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Patience</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:40%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Temper</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:50%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Courage</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:60%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Integrity</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:75%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Intellect</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:90%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Humour</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:100%;"></div>
<div class="progress-bar bg-faded" style="width:0%;"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
</div>
<!---------------- END STATS ---------------->
<hr class="m-1">
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
</div>
<!---------------- END TAB FIVE (ABILITIES) ---------------->
<!---------------- TAB SIX (TRIVIA) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="onetrivia">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Trivia</p>
<hr class="flex-fill my-auto mx-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 text-secondary" style="font-size:20px">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" style="width: 2px;"></div>
<!---------------- DISLIKES ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3 text-secondary" style="font-size:20px">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">
<!---------------- 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="onelinks">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4 mb-3">
<p>Relationships</p>
<hr class="flex-fill my-auto mx-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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- 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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- 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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- END CHARACTER 3 ---------------->
</div>
<!---------------- END TAB SEVEN (LINKS) ---------------->
</div>
</div>
<!---------------- END TAB CONTENT ---------------->
</div>
<!---------------- END CONTENT SECTION ---------------->
</div>
</div>
<!---------------- END FORM 1 ---------------->
<!---------------- FORM 2 ---------------->
<div id="profile-2" class="carousel-item">
<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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twoinfo" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twopersonality" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twodesign" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twobackstory" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twoabilities" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twotrivia" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#twolinks" 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 bg-faded border-0 rounded-0 m-2" style="overflow: auto; height: 420px">
<div class="tab-content">
<!---------------- TAB ONE (INFO) ---------------->
<div class="tab-pane fade in active show" id="twoinfo">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Info</p>
<hr class="flex-fill my-auto mx-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-secondary text-uppercase">Name</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Age</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Gender</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Species</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Home</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
</div>
<div class="card hidden-lg-down" style="width: 2px;"></div>
<div class="col-lg px-lg-2">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase text-uppercase">Alias</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">D.o.B</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Orientation</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Role</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Designer</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
</div>
</div>
<!---------------- END COLUMNS ---------------->
<!---------------- ABOUT ---------------->
<h1 class="mb-1 mt-2 text-secondary" style="font-size:20px">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="twopersonality">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Character</p>
<hr class="flex-fill my-auto mx-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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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="twodesign">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Design</p>
<hr class="flex-fill my-auto mx-2">
<i class="fas fa-book my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- CONTENT ---------------->
<div>
<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 text-muted">Height</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="p-1 justify-content-between">
<span class="text-uppercase text-muted">Hair</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="p-1 justify-content-between">
<span class="text-uppercase text-muted">Eyes</span>
<span>content</span>
</div>
<hr class="m-1">
</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 text-secondary" style="font-size:20px">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" style="width: 2px;"></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 text-secondary" style="font-size:20px">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">
<h1 class="mb-0 mt-2 ml-3 text-secondary" style="font-size:20px">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>
</div>
<!---------------- END CONTENT ---------------->
</div>
<!---------------- END TAB THREE (DESIGN) ---------------->
<!---------------- TAB FOUR (BACKSTORY) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="twobackstory">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Story</p>
<hr class="flex-fill my-auto mx-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 text-secondary" style="font-size:20px"><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 text-secondary" style="font-size:20px"><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 text-secondary" style="font-size:20px"><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="twoabilities">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Abilities</p>
<hr class="flex-fill my-auto mx-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-secondary text-uppercase pb-1">Charisma</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:10%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Kindness</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:25%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Patience</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:40%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Temper</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:50%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Courage</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:60%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Integrity</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:75%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Intellect</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:90%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Humour</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:100%;"></div>
<div class="progress-bar bg-faded" style="width:0%;"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
</div>
<!---------------- END STATS ---------------->
<hr class="m-1">
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
</div>
<!---------------- END TAB FIVE (ABILITIES) ---------------->
<!---------------- TAB SIX (TRIVIA) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="twotrivia">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Trivia</p>
<hr class="flex-fill my-auto mx-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 text-secondary" style="font-size:20px">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" style="width: 2px;"></div>
<!---------------- DISLIKES ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3 text-secondary" style="font-size:20px">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">
<!---------------- 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="twolinks">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4 mb-3">
<p>Relationships</p>
<hr class="flex-fill my-auto mx-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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- 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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- 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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- END CHARACTER 3 ---------------->
</div>
<!---------------- END TAB SEVEN (LINKS) ---------------->
</div>
</div>
<!---------------- END TAB CONTENT ---------------->
</div>
<!---------------- END CONTENT SECTION ---------------->
</div>
</div>
<!---------------- END FORM 2 ---------------->
<!---------------- FORM 3 ---------------->
<div id="profile-3" class="carousel-item">
<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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threeinfo" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threepersonality" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threedesign" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threebackstory" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threeabilities" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threetrivia" 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 bg-dark mt-lg-0 m-1" style="clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); width: 50px; height: 60px;">
<a data-toggle="tab" href="#threelinks" 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 bg-faded border-0 rounded-0 m-2" style="overflow: auto; height: 420px">
<div class="tab-content">
<!---------------- TAB ONE (INFO) ---------------->
<div class="tab-pane fade in active show" id="threeinfo">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Info</p>
<hr class="flex-fill my-auto mx-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-secondary text-uppercase">Name</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Age</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Gender</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Species</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Home</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
</div>
<div class="card hidden-lg-down" style="width: 2px;"></div>
<div class="col-lg px-lg-2">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase text-uppercase">Alias</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">D.o.B</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Orientation</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Role</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
<div class="d-flex justify-content-between p-1">
<p class="text-secondary text-uppercase">Designer</p>
<span class="text-right">content</span>
</div>
<hr class="m-1">
</div>
</div>
<!---------------- END COLUMNS ---------------->
<!---------------- ABOUT ---------------->
<h1 class="mb-1 mt-2 text-secondary" style="font-size:20px">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="threepersonality">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Character</p>
<hr class="flex-fill my-auto mx-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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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 text-secondary"><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="threedesign">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Design</p>
<hr class="flex-fill my-auto mx-2">
<i class="fas fa-book my-auto text-right"></i>
</div>
<!---------------- END HEADER ---------------->
<!---------------- CONTENT ---------------->
<div>
<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 text-muted">Height</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="p-1 justify-content-between">
<span class="text-uppercase text-muted">Hair</span>
<span>content</span>
</div>
<hr class="m-1">
<div class="p-1 justify-content-between">
<span class="text-uppercase text-muted">Eyes</span>
<span>content</span>
</div>
<hr class="m-1">
</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 text-secondary" style="font-size:20px">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" style="width: 2px;"></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 text-secondary" style="font-size:20px">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">
<h1 class="mb-0 mt-2 ml-3 text-secondary" style="font-size:20px">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>
</div>
<!---------------- END CONTENT ---------------->
</div>
<!---------------- END TAB THREE (DESIGN) ---------------->
<!---------------- TAB FOUR (BACKSTORY) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="threebackstory">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Story</p>
<hr class="flex-fill my-auto mx-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 text-secondary" style="font-size:20px"><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 text-secondary" style="font-size:20px"><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 text-secondary" style="font-size:20px"><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="threeabilities">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Abilities</p>
<hr class="flex-fill my-auto mx-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-secondary text-uppercase pb-1">Charisma</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:10%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Kindness</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:25%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Patience</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:40%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Temper</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:50%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Courage</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:60%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Integrity</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:75%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Intellect</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:90%;"></div>
<div class="progress-bar bg-faded" 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-secondary text-uppercase pb-1">Humour</p>
</div>
<div class="col px-1 pb-1"></div>
</div>
<div class="progress rounded-0" style="height:5px; opacity: 0.8">
<!---------------- BAR ---------------->
<div class="progress-bar bg-primary" style="width:100%;"></div>
<div class="progress-bar bg-faded" style="width:0%;"></div>
<!---------------- END BAR ---------------->
</div>
</div>
<!---------------- END STAT ---------------->
</div>
<!---------------- END STATS ---------------->
<hr class="m-1">
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
<!---------------- SKILL ---------------->
<div class="row no-gutters mb-1">
<!---------------- 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 text-secondary" style="font-size:20px">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>
<hr class="mt-0">
<!---------------- END SKILL ---------------->
</div>
<!---------------- END TAB FIVE (ABILITIES) ---------------->
<!---------------- TAB SIX (TRIVIA) ---------------->
<div class="tab-pane fade" data-toggle="tab" id="threetrivia">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4">
<p>Trivia</p>
<hr class="flex-fill my-auto mx-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 text-secondary" style="font-size:20px">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" style="width: 2px;"></div>
<!---------------- DISLIKES ---------------->
<div class="col-lg px-lg-2 pl-sm-3 pl-lg-0">
<h1 class="mb-0 mt-2 ml-3 text-secondary" style="font-size:20px">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">
<!---------------- 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="threelinks">
<!---------------- HEADER ---------------->
<div class="d-flex justify-content-between text-uppercase display-4 mb-3">
<p>Relationships</p>
<hr class="flex-fill my-auto mx-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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- 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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- 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 text-secondary">
<a href="URLHERE" class="display-4" style="font-size: 25px;">
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">
<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">
<!---------------- END CHARACTER 3 ---------------->
</div>
<!---------------- END TAB SEVEN (LINKS) ---------------->
</div>
</div>
<!---------------- END TAB CONTENT ---------------->
<!---------------- END CONTENT SECTION ---------------->
</div>
</div>
<!---------------- END FORM 3 ---------------->
</div>
<!---------------- END FORM 3 ---------------->
</div>
</div>
<!---------------- END MAIN CONTENT ---------------->
</div>
<!---------------- END MAIN CONTENT ---------------->
</div>
<!---------------- END MAIN ROW -->
<!---------------- CREDIT ---------------->
<div class="text-right col-12">
<a href="/Prismicodes" class="tooltipster text-muted" title="HTML by Prismicodes"><i class="far fa-code fa-sm"></i></a>
</div>
<!---------------- END CREDIT ---------------->
</div>
<!---------------- END WHOLE THING ---------------->