<!--
____ ___ _ _____ _ _ ____ _
| \ | _| | | | ___| | | | / __| | |
| |_) |_ __ __ | |_ _| | _____ | |_ | | ___ ___| |__ | / ___ _ __ _| |
| __/| /__|/ \| _| | |/ _ / | _| | |/ _ \ / __| | | | / _ \| /__|/ _ |
| | | / | () | | | | | (/ /_ | | | | (/ |__ | || | | \__| (/ | / | (/ |
|_| |_| \__/|_| |_|_|\____| |_| |_|\_/|_|___/|_||_| \____|\_/|_|_| \___|
Layout by mrpuppychow
Made for the Advent 2020 Coding Calendar!
-->
<div id="accordion" class="card bg-faded rounded-0 shadow col-lg-8 mx-auto p-2">
<div id="collapseMain" class="collapse show" data-parent="#accordion" style="">
<div class="row no-gutters text-center align-items-center">
<!-- CARD IMAGE -->
<div class="col-12 col-md-4 ml-0 ml-md-auto">
<img src="image_link">
</div>
<!-- CARD INFO -->
<div class="col-12 col-md-6 mr-0 mr-md-auto">
<h1 class="display-1">name</h1>
<p style="font-size:1.5em;font-weight:300;">pronouns | age | species</p>
</div>
<h1 class="col-12 display-4"><a href="#collapseMore" data-toggle="collapse" aria-expanded="false" aria-controls="collapseMore" class="text-secondary collapsed"><span class="fas fa fa-angle-down"></span></a></h1>
</div>
</div>
<div id="collapseMore" class="collapse" data-parent="#accordion" style="">
<ul id="myTab" style="border-color:#fff;" class="nav flex-wrap justify-content-center align-items-center">
<li class="nav-item flex-grow-1 col-12 col-sm-auto">
<!-- NAVIGATION AVATAR + NAME -->
<a href="#collapseMain" data-toggle="collapse" aria-expanded="true" aria-controls="collapseMain" class="nav-link row align-items-center text-secondary">
<img src="image_link" style="height:50px;" class="rounded-circle mr-2">
<span class="display-4">name</span>
</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#ProfileTab" class="nav-link text-secondary show active" aria-controls="ProfileTab">
<i class="fas fa-2x fa-star"></i>
</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#StatsTab" class="nav-link text-secondary show" aria-controls="StatsTab">
<i class="fas fa-2x fa-chart-bar"></i>
</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#LinksTab" class="nav-link text-secondary show" aria-controls="LinksTab">
<i class="fas fa-2x fa-user-friends"></i>
</a>
</li>
<li class="nav-item">
<a data-toggle="tab" href="#DesignTab" class="nav-link text-secondary show" aria-controls="DesignTab">
<i class="fas fa-2x fa-pencil"></i>
</a>
</li>
</ul>
<div id="myTabContent" class="tab-content card p-2" style="min-height:300px;">
<div id="ProfileTab" class="tab-pane fade active show">
<div class="col-md-11 mx-auto">
<!-- QUOTE -->
<p class="lead font-italic text-center px-3 mb-2">inset famous line</p>
<h6 class="display-4 text-center">Profile</h6>
<hr class="my-2">
<table class="table table-hover m-0 border-0">
<tbody>
<!-- PROFILE INFO -->
<!--
>> each <tr> represents a row
>> the first <td> = category name
>> the second <td> = category value
-->
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
<tr>
<td class="p-0 initialism">category</td>
<td class="p-0 text-right">value</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-11 mx-auto mb-2">
<h6 class="display-4 text-center">About</h6>
<hr class="my-2">
<!-- PROFILE DESCRIPTION -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit libero nec metus finibus pulvinar. Nam non diam mi. Cras quis tempor tellus, dignissim malesuada felis. Nullam lacinia nisi purus, eu varius metus dapibus ut. Sed sed justo lacus. Curabitur tristique velit vel dignissim sodales. Nulla imperdiet metus laoreet scelerisque tincidunt.</p>
</div>
</div>
<div id="StatsTab" class="px-2 tab-pane fade">
<div class="row no-gutters">
<!-- STRENGTHS + WEAKNESSES -->
<div class="col-sm-5 m-auto text-center">
<h6 class="display-4">Strengths</h6>
<hr class="my-2">
<ul class="list-unstyled">
<li>strength #1</li>
<li>strength #2</li>
<li>strength #3</li>
<li>strength #4</li>
</ul>
</div>
<div class="col-sm-5 m-auto text-center">
<h6 class="display-4">Weaknesses</h6>
<hr class="my-2">
<ul class="list-unstyled">
<li>weakness #1</li>
<li>weakness #2</li>
<li>weakness #1</li>
<li>weakness #2</li>
</ul>
</div>
</div>
<div class="col-md-11 p-0 m-auto">
<h6 class="display-4 text-center">Stats</h6>
<hr class="my-2">
<table class="table table-hover border-0">
<tbody>
<!-- STAT BARS -->
<!--
>> each <tr> represents a row
>> the first <td> = stat name
>> the second <td> = stat bar
-->
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
<tr class="d-flex">
<td class="p-0 col-3 col-sm-2 initialism">stat_name</td>
<td class="p-0 col-sm progress my-auto rounded-0">
<i class="progress-bar bg-secondary" style="width:percent%;height:.3em;"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-11 p-0 m-auto">
<h6 class="display-4 text-center">Abilities</h6>
<hr class="my-2">
<table class="table table-hover border-0">
<tbody>
<!-- ABILITIES TABLE -->
<!--
>> each <tr> represents a row
>> the first <td> = font awesome icon
>> the second <td> = ability name
>> the third <td> = ability description
-->
<tr>
<td class="display-4"><span class="fa fa-icon></span></td>
<td class="lead">ability_name</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit libero nec metus finibus pulvinar. Nam non diam mi. Cras quis tempor tellus, dignissim malesuada felis. Nullam lacinia nisi purus, eu varius metus dapibus ut. Sed sed justo lacus. Curabitur tristique velit vel dignissim sodales. Nulla imperdiet metus laoreet scelerisque tincidunt.</td>
</tr>
<tr>
<td class="display-4"><span class="fa fa-icon"></span></td>
<td class="lead">ability_name</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit libero nec metus finibus pulvinar. Nam non diam mi. Cras quis tempor tellus, dignissim malesuada felis. Nullam lacinia nisi purus, eu varius metus dapibus ut. Sed sed justo lacus. Curabitur tristique velit vel dignissim sodales. Nulla imperdiet metus laoreet scelerisque tincidunt.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="LinksTab" class="px-2 tab-pane fade">
<div class="col-md-11 mx-auto">
<h6 class="display-4 text-center">Links</h6>
<a href="#LinksTab" data-toggle="collapse" data-target=".nonfav" aria-expanded="true" style="position:absolute;top:0;right:0;font-size:20px;" class="text-decoration-none text-secondary flex-column">
<span data-toggle="tooltip" title="show favorites" data-placement="left" class="far fa-heart nonfav collapse show" style=""></span>
<span data-toggle="tooltip" title="show all" data-placement="left" class="fa fa-heart nonfav collapse" style=""></span>
</a>
<hr class="my-2">
</div>
<ul class="col-md-11 mx-auto list-unstyled row">
<!-- CONTACTS-STYLE RELATIONSHIP TABLE -->
<!--
>> each <li> represents a single contact card
>> the <a> should link to the profile page of your "link"
>> the <img> contains the avatar of the contact card
>> the <span> contains the name and subtitle of each contact
-->
<!--
There is a special favorites feature where you can
choose to have certain contacts disappear when you
click the heart button on top. To do so, you add
the class "nonfav collapse show" to each <li> that
belongs to a NON-FAVORITE contact card.
-->
<li class="col-12 col-md-6 p-2">
<a href="profile_link" class="flex-row align-items-center text-left p-2 btn btn-outline-secondary bg-faded">
<img src="avatar_image_link" style="height:75px;width:75px;" class="card border-0 rounded-circle mr-2">
<span class="text-secondary">
<span class="lead d-block">name</span>
<i>subtitle</i>
</span>
</a>
</li>
<li class="col-12 col-md-6 p-2">
<a href="profile_link" class="flex-row align-items-center text-left p-2 btn btn-outline-secondary bg-faded">
<img src="avatar_image_link" style="height:75px;width:75px;" class="card border-0 rounded-circle mr-2">
<span class="text-secondary">
<span class="lead d-block">name</span>
<i>subtitle</i>
</span>
</a>
</li>
<li class="col-12 col-md-6 p-2">
<a href="profile_link" class="flex-row align-items-center text-left p-2 btn btn-outline-secondary bg-faded">
<img src="avatar_image_link" style="height:75px;width:75px;" class="card border-0 rounded-circle mr-2">
<span class="text-secondary">
<span class="lead d-block">name</span>
<i>subtitle</i>
</span>
</a>
</li>
<li class="col-12 col-md-6 p-2 nonfav collapse show" style="">
<a href="profile_link" class="flex-row align-items-center text-left p-2 btn btn-outline-secondary bg-faded">
<img src="avatar_image_link" style="height:75px;width:75px;" class="card border-0 rounded-circle mr-2">
<span class="text-secondary">
<span class="lead d-block">name</span>
<i>subtitle</i>
</span>
</a>
</li>
<li class="col-12 col-md-6 p-2 nonfav collapse show" style="">
<a href="profile_link" class="flex-row align-items-center text-left p-2 btn btn-outline-secondary bg-faded">
<img src="avatar_image_link" style="height:75px;width:75px;" class="card border-0 rounded-circle mr-2">
<span class="text-secondary">
<span class="lead d-block">name</span>
<i>subtitle</i>
</span>
</a>
</li>
<li class="col-12 col-md-6 p-2 nonfav collapse show" style="">
<a href="profile_link" class="flex-row align-items-center text-left p-2 btn btn-outline-secondary bg-faded">
<img src="avatar_image_link" style="height:75px;width:75px;" class="card border-0 rounded-circle mr-2">
<span class="text-secondary">
<span class="lead d-block">name</span>
<i>subtitle</i>
</span>
</a>
</li>
</ul>
</div>
<div id="DesignTab" class="px-2 tab-pane fade">
<div class="col-md-11 mx-auto">
<h6 class="display-4 text-center">Design Notes</h6>
<hr class="my-2">
<!-- DESIGN NOTES -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit libero nec metus finibus pulvinar. Nam non diam mi. Cras quis tempor tellus, dignissim malesuada felis. Nullam lacinia nisi purus, eu varius metus dapibus ut. Sed sed justo lacus. Curabitur tristique velit vel dignissim sodales. Nulla imperdiet metus laoreet scelerisque tincidunt.</p>
<p>Sed a feugiat urna. Aenean egestas massa et maximus accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam placerat ante non mi dapibus, id ornare risus tempus. Aliquam dignissim mauris in sodales semper. Sed aliquet laoreet dolor tincidunt varius. Donec aliquet euismod purus, ac viverra purus gravida eu. Pellentesque suscipit mauris sit amet viverra aliquam. Praesent augue ante, egestas in faucibus ut, pellentesque ut sem. Donec lobortis non nisi et hendrerit. Phasellus varius massa eget leo facilisis viverra. Curabitur rhoncus scelerisque diam quis egestas.</p>
<h6 class="mt-2 display-4 text-center">Aesthetics</h6>
<hr class="my-2">
<div class="row">
<div class="col-12 col-sm-9 mb-2">
<!-- MOODBOARD IMAGE -->
<img class="w-100" src="moodboard_image_link" alt="29595132_weVe6paw1biOfDP.jpg">
</div>
<div style="min-height:30px;" class="nav col-12 col-sm-3 flex-wrap w-100 mb-2 justify-content-center">
<!-- COLOR PALETTE -->
<!--
>> each <span> represents a color swatch
>> the style="" contains the background color
>> the title="" contains the tooltip text
-->
<span style="background:#hexcolor;" data-toggle="tooltip" title="#hexcolor" class="col col-sm-12"></span>
<span style="background:#hexcolor;" data-toggle="tooltip" title="#hexcolor" class="col col-sm-12"></span>
<span style="background:#hexcolor;" data-toggle="tooltip" title="#hexcolor" class="col col-sm-12"></span>
<span style="background:#hexcolor;" data-toggle="tooltip" title="#hexcolor" class="col col-sm-12"></span>
<span style="background:#hexcolor;" data-toggle="tooltip" title="#hexcolor" class="col col-sm-12"></span>
<span style="background:#hexcolor;" data-toggle="tooltip" title="#hexcolor" class="col col-sm-12"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8 mx-auto text-right p-0"><a href="https://toyhou.se/9304861.profile-flash-card" class="text-secondary text-decoration-none" data-toggle="tooltip" title="get the code!"></<span class="fas fa-paw small"></span>></a></div>