lowkeywicked

Comm Tracker

Aug 27th, 2021 (edited)
3,378
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.48 KB | None | 1 0
  1. <div class="container" style="font-family: helvetica, verdana, sans-serif; font-size: 10pt; letter-spacing: .25px; max-width: 850px;">
  2. <div class="card bg-faded p-2 border-0" style="border-radius: 16px;"><div class="card border-0 modal-open" style="border-radius: 16px;">
  3. <table class="table table-striped border-0 mb-0">
  4. <!-- header row ------------->
  5. <tr class="row no-gutters hidden-sm-down">
  6. <th class="col-md-2 col pl-2 text-center text-uppercase">Date</th>
  7. <th class="col px-1 text-center text-uppercase">Artist</th>
  8. <th class="col-md-2 col px-1 text-center text-uppercase">Image</th>
  9. <th class="col px-1 text-center text-uppercase">Type</th>
  10. <th class="col-md-2 col pr-1 text-center text-uppercase">Value</th>
  11. </tr>
  12.  
  13. <!-- START NEW ROW ---------------------------------------------------->
  14. <tr class="row no-gutters py-2">
  15. <td class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  16. <!-- date here ------------->
  17. ##/##/##
  18. </td>
  19. <td class="col text-center px-1 py-1">
  20. <!-- link artist credit here ------------->
  21. <a href="ARTIST_LINK">artist name</a>
  22. </td>
  23. <td class="col-md-2 col text-md-center text-right pl-1 pr-md-1 pr-3 py-1">
  24. <!-- link to image here ------------->
  25. <a href="IMAGE_LINK" target="_BLANK"><i class="fas fa-image fa-fw" style="font-size: 1.5em;" /></a>
  26. </td>
  27. <td class="col-12 p-0 hidden-md-up" style="height: 0px;"></td>
  28. <td class="col pl-md-1 text-md-center pl-3 pr-1 py-1">
  29. <!-- how image was obtained --- commission, trade, gift, picrew, etc ------------->
  30. Adopt Purchase
  31.  
  32. <!-- optional tooltip for extra comments -- just erase if you dont need it ------------->
  33. <i title="Write extra comments here such as commission type, what you traded, event art was obtained from, etc any notes you may have"
  34. class="fas fa-info-circle fa-fw tooltipster" ></i>
  35. </td>
  36. <td class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  37. <!-- value of image -- dollar amount or N/A for trades, gifts, dollmakers, etc ------------->
  38. $150
  39. </td>
  40. </tr> <!-- end row -->
  41.  
  42. <!-- START NEW ROW ---------------------------------------------------->
  43. <tr class="row no-gutters py-2">
  44. <td class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  45. <!-- date here ------------->
  46. ##/##/##
  47. </td>
  48. <td class="col text-center px-1 py-1">
  49. <!-- link artist credit here ------------->
  50. <a href="ARTIST_LINK">artist name</a>
  51. </td>
  52. <td class="col-md-2 col text-md-center text-right pl-1 pr-md-1 pr-3 py-1">
  53. <!-- link to image here ------------->
  54. <a href="IMAGE_LINK" target="_BLANK"><i class="fas fa-image fa-fw" style="font-size: 1.5em;" /></a>
  55. </td>
  56. <td class="col-12 p-0 hidden-md-up" style="height: 0px;"></td>
  57. <td class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  58. <!-- how image was obtained --- commission, trade, gift, picrew, etc ------------->
  59. Commission
  60.  
  61. <!-- optional tooltip for extra comments -- just erase if you dont need it ------------->
  62. <i title="Write extra comments here such as commission type, what you traded, event art was obtained from, etc any notes you may have"
  63. class="fas fa-info-circle fa-fw tooltipster" ></i>
  64. </td>
  65. <td class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  66. <!-- value of image -- dollar amount or N/A for trades, gifts, dollmakers, etc ------------->
  67. $100
  68. </td>
  69. </tr> <!-- end row -->
  70.  
  71. <!-- START NEW ROW ---------------------------------------------------->
  72. <tr class="row no-gutters py-2">
  73. <td class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  74. <!-- date here ------------->
  75. ##/##/##
  76. </td>
  77. <td class="col text-center px-1 py-1">
  78. <!-- link artist credit here ------------->
  79. <a href="ARTIST_LINK">artist name</a>
  80. </td>
  81. <td class="col-md-2 col text-md-center text-right pl-1 pr-md-1 pr-3 py-1">
  82. <!-- link to image here ------------->
  83. <a href="IMAGE_LINK" target="_BLANK"><i class="fas fa-image fa-fw" style="font-size: 1.5em;" /></a>
  84. </td>
  85. <td class="col-12 p-0 hidden-md-up" style="height: 0px;"></td>
  86. <td class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  87. <!-- how image was obtained --- commission, trade, gift, picrew, etc ------------->
  88. Trade
  89.  
  90. <!-- optional tooltip for extra comments -- just erase if you dont need it ------------->
  91. <i title="Write extra comments here such as commission type, what you traded, event art was obtained from, etc any notes you may have"
  92. class="fas fa-info-circle fa-fw tooltipster" ></i>
  93. </td>
  94. <td class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  95. <!-- value of image -- dollar amount or N/A for trades, gifts, dollmakers, etc ------------->
  96. $100
  97. </td>
  98. </tr> <!-- end row -->
  99.  
  100. <!-- START NEW ROW ---------------------------------------------------->
  101. <tr class="row no-gutters py-2">
  102. <td class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  103. <!-- date here ------------->
  104. ##/##/##
  105. </td>
  106. <td class="col text-center px-1 py-1">
  107. <!-- link artist credit here ------------->
  108. <a href="ARTIST_LINK">artist name</a>
  109. </td>
  110. <td class="col-md-2 col text-md-center text-right pl-1 pr-md-1 pr-3 py-1">
  111. <!-- link to image here ------------->
  112. <a href="IMAGE_LINK" target="_BLANK"><i class="fas fa-image fa-fw" style="font-size: 1.5em;" /></a>
  113. </td>
  114. <td class="col-12 p-0 hidden-md-up" style="height: 0px;"></td>
  115. <td class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  116. <!-- how image was obtained --- commission, trade, gift, picrew, etc ------------->
  117. Gift
  118.  
  119. <!-- optional tooltip for extra comments -- just erase if you dont need it ------------->
  120. <i title="Write extra comments here such as commission type, what you traded, event art was obtained from, etc any notes you may have"
  121. class="fas fa-info-circle fa-fw tooltipster" ></i>
  122. </td>
  123. <td class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  124. <!-- value of image -- dollar amount or N/A for trades, gifts, dollmakers, etc ------------->
  125. $100
  126. </td>
  127. </tr> <!-- end row -->
  128.  
  129. <!-- START NEW ROW ---------------------------------------------------->
  130. <tr class="row no-gutters py-2">
  131. <td class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  132. <!-- date here ------------->
  133. ##/##/##
  134. </td>
  135. <td class="col text-center px-1 py-1">
  136. <!-- link artist credit here ------------->
  137. <a href="ARTIST_LINK">artist name</a>
  138. </td>
  139. <td class="col-md-2 col text-md-center text-right pl-1 pr-md-1 pr-3 py-1">
  140. <!-- link to image here ------------->
  141. <a href="IMAGE_LINK" target="_BLANK"><i class="fas fa-image fa-fw" style="font-size: 1.5em;" /></a>
  142. </td>
  143. <td class="col-12 p-0 hidden-md-up" style="height: 0px;"></td>
  144. <td class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  145. <!-- how image was obtained --- commission, trade, gift, picrew, etc ------------->
  146. Picrew
  147.  
  148. <!-- optional tooltip for extra comments -- just erase if you dont need it ------------->
  149. <i title="Write extra comments here such as commission type, what you traded, event art was obtained from, etc any notes you may have"
  150. class="fas fa-info-circle fa-fw tooltipster" ></i>
  151. </td>
  152. <td class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  153. <!-- value of image -- dollar amount or N/A for trades, gifts, dollmakers, etc ------------->
  154. $100
  155. </td>
  156. </tr> <!-- end row -->
  157.  
  158. <!-- START NEW ROW ---------------------------------------------------->
  159. <tr class="row no-gutters py-2">
  160. <td class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  161. <!-- date here ------------->
  162. ##/##/##
  163. </td>
  164. <td class="col text-center px-1 py-1">
  165. <!-- link artist credit here ------------->
  166. <a href="ARTIST_LINK">artist name</a>
  167. </td>
  168. <td class="col-md-2 col text-md-center text-right pl-1 pr-md-1 pr-3 py-1">
  169. <!-- link to image here ------------->
  170. <a href="IMAGE_LINK" target="_BLANK"><i class="fas fa-image fa-fw" style="font-size: 1.5em;" /></a>
  171. </td>
  172. <td class="col-12 p-0 hidden-md-up" style="height: 0px;"></td>
  173. <td class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  174. <!-- how image was obtained --- commission, trade, gift, picrew, etc ------------->
  175. Commission
  176.  
  177. <!-- optional tooltip for extra comments -- just erase if you dont need it ------------->
  178. <i title="Write extra comments here such as commission type, what you traded, event art was obtained from, etc any notes you may have"
  179. class="fas fa-info-circle fa-fw tooltipster" ></i>
  180. </td>
  181. <td class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  182. <!-- value of image -- dollar amount or N/A for trades, gifts, dollmakers, etc ------------->
  183. $100
  184. </td>
  185. </tr> <!-- end row -->
  186.  
  187. <!-- footer row ------------->
  188. <tr class="row no-gutters">
  189. <th class="col-md text-md-right text-center text-uppercase pt-2 pb-md-2 pb-0" colspan="4">Total Value <i class="fas fa-angle-double-right hidden-sm-down" /></th>
  190. <th class="col-md-2 pr-1 text-center text-uppercase pt-md-2 pt-0 pb-2">
  191. <!-- write total value of character here --->
  192. $650
  193. </th>
  194. </tr>
  195.  
  196. </table><!-- end table -->
  197. </div></div>
  198. <p class="mt-2 small text-right faded">HTML by @Pinky</p>
  199. </div>
Add Comment
Please, Sign In to add comment