Profile
<!--
Side Buttons
Free to use & free to edit
Ripping and "Frankenstein-ing" code is allowed
Credit not necessary but appreciated
Feel free to message me for any help/ questions
Code by CanineKing
-->
<!-- "header" stuff-->
<div class="container-fluid">
<div class="row justify-content-center">
<h1 class="font-weight-light text-center" style="font-size:42px; letter-spacing:3px;">FirstName LastName</h1>
<div class="card bg-primary rounded-0 w-100 my-2"></div>
<div class="card bg-primary rounded-0 w-75 my-2"></div>
</div>
</div>
<!-- "header" stuff END-->
<!--actual profile-->
<div class="container-fluid mt-1">
<div class="row justify-content-center">
<div class="col-lg-1 p-1">
<!-- profile buttons, do not touch this section if you don't know what you're doing-->
<ul class="nav flex-lg-column mx-0 justify-content-center text-center">
<li class="nav-item">
<a class="nav-link m-2 active btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="pill" href="#basics"><i class="fal fa-info-circle fa-fw" style="font-size:36px;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="tab" href="#story"><i class="fas fa-book-open fa-fw" style="font-size:36px;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="tab" href="#relationship"><i class="fas fa-heart fa-fw" style="font-size:36px;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="tab" href="#gallery"><i class="fas fa-images fa-fw" style="font-size:36px;"></i></a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="tab" href="#reference"><i class="fas fa-palette fa-fw" style="font-size:36px;"></i></a>
</li>
</ul>
<!-- profile buttons END-->
<!--code credit-->
<p class="small text-center m-2"><a href="https://toyhou.se/6903471.-f2u-side-buttons" target="_BLANK" class="text-muted"><i class="fa fa-paw mr-1"></i><i class="fas fa-crown mr-1"></i></a></p>
</div>
<!-- profile content (structure)-->
<div class="col-lg-11 p-1">
<div class="card rounded-0 bg-faded p-3 m-2" style="height:600px; overflow:auto;">
<div class="tab-content">
<!-- basic information section: shows basic information/ stats, likes/ dislikes, and a brief intro-->
<div class="tab-pane fade show active" id="basics">
<div class="container-fluid">
<div class="row justify-content-center">
<!--left col image, will focus on the top center of your image-->
<div class="col-lg-4 p-1">
<div class="card rounded-0 w-100" style="min-height:550px; background:url('IMGURL'); background-size:cover; background-position:top center;"></div>
</div>
<!--left col END-->
<!--right col written content-->
<div class="col-lg-8 p-1">
<!--top card-->
<div class="card rounded-0 p-2 mx-1">
<!-- basic info-->
<div class="container-fluid">
<div class="row justify-content-center">
<!--left col-->
<div class="col-lg-6 p-1">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Age</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Species</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Gender</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Orientation</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Relationship Status</span>null
</li>
</ul>
</div>
<!--left col END-->
<!--right col-->
<div class="col-lg-6 p-1">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Build</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Height</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Occupation</span>null
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Voice</span><a href="#">null</a>
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Theme</span><a href="#">null</a>
</li>
</ul>
</div>
<!--right col END-->
</div>
</div>
<!--basic info END-->
<!--stats-->
<div class="container-fluid mt-2">
<div class="row no-gutters align-items-center">
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Charisma</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Kindness</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Integrity</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Confidence</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Temper</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Intellect</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Humour</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
<div class="col-lg-2 col-5 text-left text-truncate text-muted pr-1 mb-1" style="letter-spacing: 3px;">
Empathy</div>
<div class="col-lg-4 col-7 px-md-1 pl-1 mb-1 text-muted">
<div class="progress mt-1 rounded-0 mr-2">
<div class="progress-bar" style="width: 50%; height:8px;"></div>
</div>
</div>
</div>
</div>
<!--stats END-->
</div>
<!--top card END-->
<!--likes/ dislikes section-->
<div class="container-fluid">
<div class="row jusitfy-content-center">
<!--likes-->
<div class="col-lg-6 p-1">
<div class="card rounded-0 p-2">
<h2 class="text-center font-weight-light "style="letter-spacing:3px;"><i class="fas fa-heart fa-fw mr-2"></i>Likes</h2>
<ul class="mb-1">
<li>Lorem ipsum</li>
<li>Dolor sit</li>
<li>Amet consectetur adipiscing</li>
<li>Nullam euismod</li>
</ul>
</div>
</div>
<!--likes END-->
<!--dislikes-->
<div class="col-lg-6 p-1">
<div class="card rounded-0 p-2">
<h2 class="text-center font-weight-light "style="letter-spacing:3px;"><i class="fas fa-heart-broken fa-fw mr-2"></i>Dislikes</h2>
<ul class="mb-1">
<li>Elit</li>
<li>Curabitur in</li>
<li>Metus</li>
<li>Morbi</li>
</ul>
</div>
</div>
<!--dislikes END-->
</div>
</div>
<!--likes/ dislikes END-->
<!--intro-->
<div class="card bg-faded border-0 p-2">
<p>Briefly describe your character here. It's kinda like an introduction. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus in diam euismod suscipit. Curabitur imperdiet in ligula eget tempor. Vestibulum magna orci, placerat feugiat erat quis, pulvinar efficitur quam. Sed sed urna blandit, porttitor quam nec, lobortis diam. Aenean vitae efficitur leo, et auctor ante. </p>
</div>
<!--intro END-->
</div>
<!--right col END-->
</div>
</div>
</div>
<!-- basic information section END-->
<!-- story section: write about your character's story or more detailed information about therm here-->
<div class="tab-pane fade pb-3" id="story">
<!--floating side section-->
<div class="float-sm-right ml-sm-3 mb-2 d-block mx-auto">
<img src="https://via.placeholder.com/200x350" style="height:350px;" />
<p class="small text-muted">A caption can go here</p>
</div>
<!--floating side section END-->
<h1 class="font-weight-light" style="letter-spacing:3px;"><i class="fas fa-bookmark fa-fw mr-2"></i>Event 1</h1>
<p>This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus in diam euismod suscipit. Curabitur imperdiet in ligula eget tempor. Vestibulum magna orci, placerat feugiat erat quis, pulvinar efficitur quam. Sed sed urna blandit, porttitor quam nec, lobortis diam. Aenean vitae efficitur leo, et auctor ante. Mauris sed maximus nulla. </p>
<p>Sed ut convallis eros. Vivamus tempor urna ligula, semper interdum nisi pellentesque eget. Vivamus sed elit aliquam, tincidunt nisl eu, facilisis metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam laoreet, neque sed facilisis feugiat, sem ante placerat massa, at accumsan enim lectus eget mi. </p>
<p>Nullam euismod molestie diam, ac tristique quam accumsan quis. Curabitur consectetur, leo ac tincidunt aliquet, enim augue porta odio, sed rutrum tellus nulla eget metus. Mauris ac odio tortor. Maecenas consectetur, quam et sodales fringilla, tortor quam tempus massa, ut ultricies odio sem quis nisl. In eu neque turpis. Praesent erat neque, sagittis vitae egestas commodo, lacinia at turpis. Nullam tempus arcu non risus tincidunt porta. Ut metus leo, blandit et massa ut, aliquam eleifend est. Sed suscipit, dolor sed sagittis varius, magna augue facilisis lorem, et semper augue elit sit amet elit. Morbi purus nibh, fringilla in leo id, tincidunt efficitur velit. Donec in feugiat nunc. Quisque condimentum a nisl finibus congue. Sed id enim libero. Pellentesque dapibus purus sit amet purus tempus, non sodales nisl pretium. Donec gravida ut tellus ac sagittis. </p>
<div class="card bg-primary rounded-0 w-100 my-3"></div>
<h1 class="font-weight-light" style="letter-spacing:3px;"><i class="fas fa-bookmark fa-fw mr-2"></i>Event 2</h1>
<p>Nullam euismod molestie diam, ac tristique quam accumsan quis. Curabitur consectetur, leo ac tincidunt aliquet, enim augue porta odio, sed rutrum tellus nulla eget metus. Mauris ac odio tortor. Maecenas consectetur, quam et sodales fringilla, tortor quam tempus massa, ut ultricies odio sem quis nisl. In eu neque turpis. Praesent erat neque, sagittis vitae egestas commodo, lacinia at turpis. Nullam tempus arcu non risus tincidunt porta. Ut metus leo, blandit et massa ut, aliquam eleifend est. Sed suscipit, dolor sed sagittis varius, magna augue facilisis lorem, et semper augue elit sit amet elit. </p>
<p>Morbi purus nibh, fringilla in leo id, tincidunt efficitur velit. Donec in feugiat nunc. Quisque condimentum a nisl finibus congue. Sed id enim libero. Pellentesque dapibus purus sit amet purus tempus, non sodales nisl pretium. Donec gravida ut tellus ac sagittis. </p>
<div class="card bg-primary rounded-0 w-100 my-3"></div>
<h1 class="font-weight-light" style="letter-spacing:3px;"><i class="fas fa-bookmark fa-fw mr-2"></i>Event 3</h1>
<p>Cras quam tortor, dignissim eu orci nec, fermentum blandit elit. Nullam feugiat aliquam purus, et cursus mauris ornare ac. Integer quis est in mi hendrerit imperdiet nec nec eros. Maecenas lobortis mollis convallis. Fusce in ligula non metus suscipit semper. Praesent placerat felis eget vestibulum pulvinar. Aliquam malesuada odio id sapien ornare blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam eu sem venenatis erat congue pulvinar. Fusce blandit turpis rutrum lectus porta, quis ornare quam fermentum. Donec vitae sollicitudin nunc. Maecenas gravida elit nec leo dignissim lobortis. Etiam diam turpis, pharetra id consequat non, porttitor at lectus. Nam hendrerit ligula quis tellus ultricies bibendum. Cras iaculis rhoncus orci, at porttitor lorem porta at. </p>
</div>
<!--story section END-->
<!-- relationship section: show's the different relationships b/w this character and other characters-->
<div class="tab-pane fade" id="relationship">
<div class="container-fluid">
<!--relationship 1-->
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-2 p-1">
<a href="URL"><img src="https://via.placeholder.com/150" class="rounded-0 d-block mt-1 mx-auto" style="max-height:150px;"></a>
</div>
<!--image END-->
<!--infomration-->
<div class="col-lg-10 p-1">
<div class="card rounded-0 p-3 h-100">
<a href="#"><h3 style="letter-spacing:3px;">Name Here</h3></a>
<h5 style="letter-spacing:3px;">Relationship Type</h5>
<div class="card bg-primary rounded-0 w-75 my-2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus in diam euismod suscipit. Curabitur imperdiet in ligula eget tempor. Vestibulum magna orci, placerat feugiat erat quis, pulvinar efficitur quam. Sed sed urna blandit, porttitor quam nec, lobortis diam. Aenean vitae efficitur leo, et auctor ante. Mauris sed maximus nulla. </p>
</div>
</div>
<!--information-->
</div>
<!--relationship 1 END-->
<div class="card bg-primary rounded-0 w-100 my-1"></div>
<!--relationship 2-->
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-2 p-1">
<a href="URL"><img src="https://via.placeholder.com/150" class="rounded-0 d-block mt-2 mx-auto" style="max-height:150px;"></a>
</div>
<!--image END-->
<!-- info-->
<div class="col-lg-10 p-1">
<div class="card rounded-0 p-3 h-100">
<a href="#"><h3 style="letter-spacing:3px;">Name Here</h3></a>
<h5 style="letter-spacing:3px;">Relationship Type</h5>
<div class="card bg-primary rounded-0 w-75 my-2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus in diam euismod suscipit. Curabitur imperdiet in ligula eget tempor. Vestibulum magna orci, placerat feugiat erat quis, pulvinar efficitur quam. Sed sed urna blandit, porttitor quam nec, lobortis diam. Aenean vitae efficitur leo, et auctor ante. Mauris sed maximus nulla. </p>
</div>
</div>
<!--info END-->
</div>
<!--relationship 2 END-->
<div class="card bg-primary rounded-0 w-100 my-1"></div>
<!--relationship 3-->
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-2 p-1">
<a href="URL"><img src="https://via.placeholder.com/150" class="rounded-0 d-block mt-2 mx-auto" style="max-height:150px;"></a>
</div>
<!--image END-->
<!--info-->
<div class="col-lg-10 p-1">
<div class="card rounded-0 p-3 h-100">
<a href="#"><h3 style="letter-spacing:3px;">Name Here</h3></a>
<h5 style="letter-spacing:3px;">Relationship Type</h5>
<div class="card bg-primary rounded-0 w-75 my-2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus in diam euismod suscipit. Curabitur imperdiet in ligula eget tempor. Vestibulum magna orci, placerat feugiat erat quis, pulvinar efficitur quam. Sed sed urna blandit, porttitor quam nec, lobortis diam. Aenean vitae efficitur leo, et auctor ante. Mauris sed maximus nulla. </p>
</div>
</div>
<!--info END-->
</div>
<!--relationship 3 END-->
</div>
</div>
<!--relationship section END-->
<!-- gallery section: show your favourite images of your character here (kinda like a featured section)-->
<div class="tab-pane fade" id="gallery">
<div class="container-fluid">
<div class="row justify-content-center">
<!--images+info-->
<div class="col-lg-11">
<div class="tab-content mb-3" id="pills-tabContent">
<!--image 1-->
<div class="tab-pane fade show active" id="IMAGE-01" role="tabpanel">
<div class="container-fluid">
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-8 p-1">
<div class="card justify-content-center rounded-0 w-100 mx-auto" style="min-height:550px; border-radius:0px; background:url('IMGURL'); background-position:center center; background-repeat:no-repeat; background-size:contain;"></div>
</div>
<!--image END-->
<!--info-->
<div class="col-lg-4 p-1">
<div class="card rounded-0 h-100 p-3">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Artist(s)</span>@Username
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Type</span>Commission
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Value</span>$30USD
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Date Recieved</span>Month 00, 20XX
</li>
</ul>
</div>
</div>
<!--info END-->
</div>
</div>
</div>
<!--image 1 END-->
<!--image 2-->
<div class="tab-pane fade" id="IMAGE-02" role="tabpanel">
<div class="container-fluid">
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-8 p-1 justify-content-center">
<div class="card justify-content-center rounded-0 w-100 mx-auto" style="min-height:550px; background:url('IMGURL'); background-position:center center; background-repeat:no-repeat; background-size:contain;"></div>
</div>
<!--image END-->
<!--info-->
<div class="col-lg-4 p-1">
<div class="card rounded-0 h-100 p-3">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Artist(s)</span><a href="#">@Username (twitter)</a>
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Type</span>Trade
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Value</span>$25USD
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Date Recieved</span>Month 00, 20XX
</li>
</ul>
</div>
</div>
<!--info END-->
</div>
</div>
</div>
<!--image 2 END-->
<!--image 3-->
<div class="tab-pane fade" id="IMAGE-03" role="tabpanel">
<div class="container-fluid">
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-8 p-1 justify-content-center">
<div class="card justify-content-center rounded-0 w-100 mx-auto" style="min-height:550px; background:url('IMGURL'); background-position:center center; background-repeat:no-repeat; background-size:contain;"></div>
</div>
<!--image END-->
<!--info-->
<div class="col-lg-4 p-1">
<div class="card rounded-0 h-100 p-3">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Artist(s)</span>@Username
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Type</span>Trade
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Value</span>$10USD
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Date Recieved</span>Month 00, 20XX
</li>
</ul>
</div>
</div>
<!--info END-->
</div>
</div>
</div>
<!--image 3 END-->
<!--image 4-->
<div class="tab-pane fade" id="IMAGE-04" role="tabpanel">
<div class="container-fluid">
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-8 p-1 justify-content-center">
<div class="card justify-content-center rounded-0 w-100 mx-auto" style="min-height:550px; background:url('IMGURL'); background-position:center center; background-repeat:no-repeat; background-size:contain;"></div>
</div>
<!--image END-->
<!--info-->
<div class="col-lg-4 p-1">
<div class="card rounded-0 h-100 p-3">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Artist(s)</span>@Username
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Type</span>Freebie
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Value</span>N/A
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Date Recieved</span>Month 00, 20XX
</li>
</ul>
</div>
</div>
<!--info END-->
</div>
</div>
</div>
<!--image 4 END-->
<!--image 5-->
<div class="tab-pane fade" id="IMAGE-05" role="tabpanel">
<div class="container-fluid">
<div class="row justify-content-center">
<!--image-->
<div class="col-lg-8 p-1 justify-content-center">
<div class="card justify-content-center rounded-0 w-100 mx-auto" style="min-height:550px; background:url('IMGURL'); background-position:center center; background-repeat:no-repeat; background-size:contain;"></div>
</div>
<!--image END-->
<!--info-->
<div class="col-lg-4 p-1">
<div class="card rounded-0 h-100 p-3">
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Artist(s)</span>@Username
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Type</span>Commission
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Value</span>$30USD
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Date Recieved</span>Month 00, 20XX
</li>
</ul>
</div>
</div>
<!--info END-->
</div>
</div>
</div>
<!--image 5 END-->
</div>
</div>
<!--images+info END-->
<!--buttons, do not touch this section if you don't know what you're doing-->
<div class="col-lg-1 p-1">
<ul class="nav flex-lg-column mx-0 justify-content-center text-center mb-2" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link m-2 active btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="tab" href="#IMAGE-01" style=" background-image:url(IMGURL);background-position:center center; background-repeat: no-repeat; height:70px; width:70px; background-size:cover;"></a>
</a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="pill" href="#IMAGE-02" style=" background-image:url(IMGURL);background-position:center center; background-repeat: no-repeat; height:70px; width:70px; background-size:cover;"></a>
</a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="pill" href="#IMAGE-03" style=" background-image:url(IMGURL);background-position:center center; background-repeat: no-repeat; height:70px; width:70px; background-size:cover;"></a>
</a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="pill" href="#IMAGE-04" style=" background-image:url(IMGURL);background-position:center center; background-repeat: no-repeat; height:70px; width:70px; background-size:cover;"></a>
</a>
</li>
<li class="nav-item">
<a class="nav-link m-2 btn btn-outline-primary d-inline-block p-2 rounded-0" data-toggle="pill" href="#IMAGE-05" style=" background-image:url(IMGURL);background-position:center center; background-repeat: no-repeat; height:70px; width:70px; background-size:cover;"></a>
</a>
</li>
</ul>
<!--LINK YOUR CHARACTER'S GALLERY HERE vvv-->
<p class="text-center m-1"><a class="btn btn-outline-primary d-inline-block m-2 p-2 rounded-0" href="#" data-toggle="tooltip" data-placement="top" title="View entire gallery" class="text-muted"><i class="fas fa-images fa-fw" style="font-size:36px;"></i></a></p>
<!--buttons END-->
</div>
</div>
</div>
</div>
<!--gallery section END-->
<!-- reference section: shows your character's reference image + additional notes to their design-->
<div class="tab-pane fade" id="reference">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-3 p-1">
<div class="card rounded-0 p-2 h-100">
<h1 class="text-center text-muted font-weight-light" style="letter-spacing:3px; font-size:24px;">Design Notes</h1>
<ul class="mb-1">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in metus in diam euismod suscipit</li>
<li>Curabitur imperdiet in ligula eget tempor</li>
<li>Vestibulum magna </li>
</ul>
<div class="card bg-primary rounded-0 w-100 my-2"></div>
<ul class="list-unstyled mb-0">
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Creator</span>@Username
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Designer(s)</span>@Username
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Obtained by</span>Trade/ Resale/ Gift
</li>
<li class="d-flex justify-content-between align-items-center px-3 py-1">
<span class="text-muted text-truncate font-weight-light"style="letter-spacing:3px;">Total Value</span>$0.00
</li>
</ul>
</div>
</div>
<div class="col-lg-9 p-1">
<a class="h-100 d-flex" href="#" target="_blank" data-toggle="tooltip" data-placement="top" title="CLICK TO SEE FULL RESOLUTION" style="min-height:550px; background:url(IMGURL) center no-repeat;background-size: contain"></a>
</div>
</div>
</div>
</div>
<!--reference section END-->
</div>
</div>
</div>
<!-- profile content END-->
</div>
</div>
<!--actual profile END-->
<!--"footer" stuff-->
<div class="container-fluid mt-1">
<div class="row justify-content-center">
<p class="text-center font-weight-light font-italic" style="font-size:28px;">"A quote can go here..."</p>
</div>
<div class="row justify-content-center">
<div class="card bg-primary rounded-0 w-75 my-2"></div>
<div class="card bg-primary rounded-0 w-100 my-2"></div>
</div>
</div>
<!--"footer" stuff END-->
Recent Images
No images.