<!---------------------------------------------------------------
THANK YOU SO MUCH FOR USING MY CODE!
-
(ㅅ´ ˘ `)♡ ｡ ⊹˚.⋆ ૮ ・ﻌ・ა
--------------------------------------------------------------->
<!-------------------------- NOTES ---------------------------
Handy ref. sites:
- https://cssgradient.io/ - namely for gradient bgs and alike
- https://colordesigner.io/gradient-generator - gradients (palettes) + other fun stuff
- https://fontawesome.com/search - icons
Type ctrl+f to locate and replace the color of any of the item below.
- border color: #4b3789
- background color: #16051d
- header & icons color: #ccadff
- button border color: #7544C7
- text color: #e2afff
- accent / value color: #8292f2
- button header bg: #250a2c
- art links: #91a4ff
--------------------------------------------------------------->
<div class="container card md-4 p-1" style="background-color: #4b3789; max-width:1000px;">
<div class="row no-gutters justify-content-center" style="background-color: #16051d">
<div class="col-sm-12" style="max-width:1000px;">
<!------------------------------------------------
HEADER
------------------------------------------------->
<h2 class="text-uppercase text-center p-3" style="color:#ccadff;">
<i class="far fa-star fa-fade"></i>
NAME'S WORTH TRACKER
<i class="far fa-star fa-fade"></i>
</h2>
<!------------------------------------------------
IMG / ICON
------------------------------------------------->
<img src="https://cdn.discordapp.com/attachments/570747785339469826/1185126907361099837/christmas.gif" style="width:auto ; height:200px" class="d-block mx-auto p-6 mb-3">
<!------------------------------------------------
LAST UPDATED
&
TOTAL VALUE
------------------------------------------------->
<h4 class="text-center text-uppercase">
<div style="text-align:center">
<span class="btn btn-outline" style="font-weight: bold; color:#e2afff; border:4px #7544C7 double;">
Last Updated:
XX/XX/XXXX
<br>
Total Value:
<font style="color:#8292f2">$000 USD</font>
</span>
</div>
</h4>
<div class="col-md p-2 tab-content card border-0 rounded" style="background-color: #16051d">
<!------------------------------------------------
NAV
------------------------------------------------->
<div class="mb-0">
<ul class="nav row no-gutters">
<li class="col nav-item;" style="background:#9c89bb">
<a href="#personal" data-toggle="tab" class="nav-link btn p-2 btn-outline-warning border-0 rounded-0 active rounded-0" style="box-shadow:none; mix-blend-mode:luminosity" title="Personal Art">
<i class="fas fa-solid fa-paintbrush fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item;" style="background:#9c89bb">
<a href="#paid" data-toggle="tab" class="nav-link btn p-2 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity" title="Commissions">
<i class="fa-regular fa-money-bill fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item;" style="background:#9c89bb">
<a href="#gift" data-toggle="tab" class="nav-link btn p-2 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity" title="Gifted Art">
<i class="fa-regular fa-gift fa-lg" style="color:#fff;"></i>
</a>
</li>
<li class="col nav-item;" style="background:#9c89bb">
<a href="#trade" data-toggle="tab" class="nav-link btn p-2 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity" title="Trades (non-artfight)">
<i class="fa-solid fa-rotate fa-lg" style="color:#fff;"></i>
</a>
</li>
</ul>
</div>
<!------
COPY AND PASTE FROM ABOVE TO CREATE ANOTHER BUTTON
<li class="col nav-item;" style="background:#9c89bb">
<a href="#" data-toggle="tab" class="nav-link btn p-2 btn-outline-warning border-0 rounded-0" style="box-shadow:none; mix-blend-mode:luminosity" title="#">
<i class="fa-solid fa-book fa-lg" style="color:#fff;"></i>
</a>
</li>
---------->
<!------------CONTENT STARTS HERE --------------->
<div class="tab-content">
<!------------------------------------------------
PERSONAL ART
------------------------------------------------->
<div class="tab-pane fade active show text-center responsive mb-1 py-2" id="personal">
<div class="btn btn-lg btn-block p-3" style="background-color: #250a2c; color:#e2afff; border:4px #7544C7 double; letter-spacing:2px; font-family:'Theano Didot';">
PERSONAL ART
</div>
<!---- HEADER ---->
<div class="pt-2">
<div class="card font-weight-bold text-uppercase" style="background:#9c89bb">
<div class="row align-items-center">
<div class="col">
DATE
</div>
<div class="col">
TYPE
</div>
<div class="col">
VALUE
</div>
</div>
</div>
</div>
<!---- TABLE INFO ---->
<div class="card-body pt-2" style="color:#e2afff; height:300px; overflow-y: auto">
<table class="table-striped table-hover" style="width:100%; border-color:transparent">
<tr class="font-weight-bold text-uppercase">
<!-- 1st art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 2nd art -->
<tr>
<td>MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 3rd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 4th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 5th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 6th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 7th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 1st art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 2nd art -->
<tr>
<td>MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 3rd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 4th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 5th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 6th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 7th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 8th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 9th art -->
<tr>
<td>MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
<!-- 10th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type / Link here</a></td>
<td>$00</td>
</tr>
</table>
</div>
<!---- TABLE ENDS ---->
<!---- TOTAL STARTS ---->
<div class="pt-2 text-light text-uppercase text-center" style="width:100%;">
<h6 class="card" style="background:#9c89bb"><b>TOTAL</b></h6>
<p style="">$00</p>
</div>
<!---- TOTAL ENDS ---->
</div>
<!------------------------------------------------
COMMISSIONED ART
------------------------------------------------->
<div class="tab-pane fade text-center responsive mb-1 py-2" id="paid">
<div class="btn btn-lg btn-block p-3" style="background-color: #250a2c; color:#e2afff; border:4px #7544C7 double; letter-spacing:2px; font-family:'Theano Didot';">
COMMISSIONED ART
</div>
<!---- HEADER ---->
<div class="pt-2">
<div class="card font-weight-bold text-uppercase" style="background:#9c89bb">
<div class="row align-items-center">
<div class="col">
DATE
</div>
<div class="col">
TYPE
</div>
<div class="col">
FROM
</div>
<div class="col">
VALUE
</div>
</div>
</div>
</div>
<!-- TABLE STARTS -->
<div class="card-body pt-2" style="color:#e2afff; height:300px; overflow-y: auto">
<table class="table-striped table-hover" style="width:100%; border-color:transparent">
<tr class="font-weight-bold text-uppercase">
<!-- 1st art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td>@User</td>
<td>$00</td>
</tr>
<!-- 2nd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td>@User</td>
<td>$00</td>
</tr>
<!-- 3rd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td>@User</td>
<td>$00</td>
</tr>
<!-- 4th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td>@User</td>
<td>$00</td>
</tr>
<!-- 5th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td>@User</td>
<td>$00</td>
</tr>
<!-- 6th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td>@User</td>
<td>$00</td>
</tr>
<!-- 7th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td><a href="#">User</a></td>
<td>$00</td>
</tr>
<!-- 8th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td><a href="#">User</a></td>
<td>$00</td>
</tr>
<!-- 9th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td><a href="#">User</a></td>
<td>$00</td>
</tr>
<!-- 10th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type </a></td>
<td><a href="#">User</a></td>
<td>$00</td>
</tr>
</table>
</div>
<!---- TABLE ENDS ---->
<!---- TOTAL STARTS ---->
<div class="pt-2 text-light text-uppercase text-center" style="width:100%;">
<h6 class="card" style="background:#9c89bb"><b>TOTAL</b></h6>
<p style="">$00</p>
</div>
<!---- TOTAL ENDS ---->
</div>
<!------------------------------------------------
GIFT ART
------------------------------------------------->
<div class="tab-pane fade text-center responsive mb-1 py-2" id="gift">
<div class="btn btn-lg btn-block p-3" style="background-color: #250a2c; color:#e2afff; border:4px #7544C7 double; letter-spacing:2px; font-family:'Theano Didot';">
GIFTED ART
</div>
<!---- HEADER ---->
<div class="pt-2">
<div class="card font-weight-bold text-uppercase" style="background:#9c89bb">
<div class="row align-items-center">
<div class="col">
DATE
</div>
<div class="col">
TYPE
</div>
<div class="col">
FROM
</div>
<div class="col">
GIVEN BY
</div>
</div>
</div>
</div>
<!---- TABLE INFO ---->
<div class="card-body pt-2" style="color:#e2afff; height:300px; overflow-y: auto">
<table class="table-striped table-hover" style="width:100%; border-color:transparent">
<tr class="font-weight-bold text-uppercase">
<!-- 1st art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td>User</td>
</tr>
<!-- 2nd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td>User</td>
</tr>
<!-- 3rd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td>User</td>
</tr>
<!-- 4th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td>User</td>
</tr>
<!-- 5th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td>User</td>
</tr>
<!-- 6th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td>User</td>
</tr>
<!-- table auto scrolls if you feel the need to add more in the future-->
</table>
</div>
<!---- TABLE ENDS ---->
<!---- TOTAL STARTS ---->
<div class="pt-2 text-light text-uppercase text-center" style="width:100%;">
<h6 class="card" style="background:#9c89bb"><b>TOTAL OF GIFTED ART</b></h6>
<p style="">00</p>
</div>
<!---- TOTAL ENDS ---->
</div>
<!------------------------------------------------
ART TRADES
------------------------------------------------->
<div class="tab-pane fade text-center responsive mb-1 py-2" id="trade">
<div class="btn btn-lg btn-block p-3" style="background-color: #250a2c; color:#e2afff; border:4px #7544C7 double; letter-spacing:2px; font-family:'Theano Didot';">
TRADED ART
</div>
<!---- HEADER ---->
<div class="pt-2">
<div class="card font-weight-bold text-uppercase" style="background:#9c89bb">
<div class="row align-items-center">
<div class="col">
DATE
</div>
<div class="col">
TYPE
</div>
<div class="col">
FROM
</div>
<div class="col">
CHARA
</div>
</div>
</div>
</div>
<!---- TABLE INFO ---->
<div class="card-body pt-2" style="color:#e2afff; height:300px; overflow-y: auto">
<table class="table-striped table-hover" style="width:100%; border-color:transparent">
<tr class="font-weight-bold text-uppercase">
<!-- 1st art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 2nd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 3rd art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 4th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 5th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>@User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 6th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>@User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 7th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>@User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
<!-- 8th art -->
<tr>
<td> MM/DD/'YY </td>
<td><a style="color: #91a4ff" href="#"> Art Type</a></td>
<td>@User_here</td>
<td><a style="color: #91a4ff" href="#"> Chara Name</a></td><!-- art you drew as part of the trade -->
</tr>
</table>
</div>
<!---- TABLE ENDS ---->
<!---- TOTAL STARTS ---->
<div class="pt-2 text-uppercase text-center" style="width:100%;">
<h6 class="card" style="background:#9c89bb">TOTAL OF TRADED ART</h6>
<p style="">00</p>
</div>
<!---- TOTAL ENDS ---->
</div>
<!---- CODE CREDIT --->
<a href="https://toyhou.se/arachmantis" target="_blank" class="pull-right">
<span class="fa-stack fa-1x">
<i class="fas fa-folder fa-stack-2x" style="color:#9c89bb"></i>
<i class="fa-thin fa-spider fa-stack-1x fa-inverse" style="font-size: 25px;"></i>
</span>
</a>
