API tools faq
paste
Advertisement
circlejourney

Untitled

circlejourney
Jan 11th, 2022
112
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 37.20 KB | None | 0 0
raw download clone embed print report
  1. <div class="container card border-0 bg-faded p-4" style="font-size: 10pt; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);">
  2. <div class="row">
  3. <div class="col-lg-3 pr-lg-2 px-0">
  4. <div class="card d-flex flex-column" style="height: 500px;">
  5.  
  6. <div class="card-header flex-grow-1" style="background-image: url(https://via.placeholder.com/400x500); background-size: cover; background-position: center;">
  7. </div>
  8.  
  9. <div class="p-3 d-flex justify-content-between" style="flex-basis: 0;">
  10. <i class="fas fa-quote-left" style="color: teal;"></i>
  11.  
  12. <div class="p-2 text-center">QUOTE GOES HERE. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</div>
  13.  
  14. <i class="fas fa-quote-right" style="color: teal;"></i>
  15. </div>
  16.  
  17. </div>
  18. </div>
  19.  
  20.  
  21. <div class="col-12 col-md-9 d-flex flex-column px-0" style="height: 500px;">
  22.  
  23. <div class="nav nav-tabs border-0 d-flex text-center" style="font-size: 12pt;">
  24.  
  25. <a class="active nav-link flex-grow-1" data-toggle="tab" style="color: teal" href="#tab-1"><i class="fal fa-bookmark"></i> Main info</a>
  26.  
  27. <a class="nav-link flex-grow-1" data-toggle="tab" style="color: teal" href="#tab-2"><i class="fa fa-exclamation-circle"></i> NSFW</a>
  28.  
  29. <a class="nav-link flex-grow-1" data-toggle="tab" style="color: teal" href="#tab-3"><i class="fa fa-file-invoice-dollar"></i> Art tracker</a>
  30.  
  31. </div>
  32.  
  33. <div class="tab-content flex-grow-1 card rounded-0 d-flex flex-column table-responsive" style="border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;">
  34.  
  35. <div class="tab-pane p-4 show active flex-grow-1" id="tab-1">
  36.  
  37. <div class="d-flex flex-column justify-content-center" style="min-height: 100%;">
  38. <div class="row justify-content-center mx-2">
  39. <div class="col-lg-5 list-group list-group-flush">
  40. <div class="list-group-item">
  41. <i class="fas fa-user fa-fw mr-1" style="color:teal;"></i>
  42. name
  43. </div>
  44. <div class="list-group-item">
  45. <i class="fas fa-birthday-cake fa-fw mr-1" style="color:teal;"></i>
  46. age
  47. </div>
  48. <div class="list-group-item">
  49. <i class="fas fa-venus-mars fa-fw mr-1" style="color:teal;"></i>
  50. gender (he/she/they)
  51. <sub>birthsex</sub>
  52. </div>
  53. <div class="list-group-item">
  54. <i class="fas fa-question fa-fw mr-1" style="color:teal;"></i>
  55. <a href="SPECIES LINK" target="_blank" style="color: teal">
  56. species (linked)
  57. </a>
  58. </div>
  59. <div class="list-group-item">
  60. <i class="fas fa-heartbeat fa-fw mr-1" style="color:teal;"></i>
  61. orientation
  62. </div>
  63. <div class="list-group-item">
  64. <i class="fas fa-balance-scale fa-fw mr-1" style="color:teal;"></i>
  65. mbti
  66. </div>
  67. <div class="list-group-item">
  68. <i class="fas fa-volume-up fa-fw mr-1" style="color:teal;"></i>
  69. <a href="LINK" target="_blank" style="color: teal">
  70. song (linked)
  71. </a>
  72. </div>
  73. </div>
  74.  
  75. <div class="col-lg-5 ml-lg-4 list-group list-group-flush">
  76. <div class="list-group-item border-top-0">
  77. <i class="fas fa-comment-dots fa-fw mr-1" style="color:teal;"></i>
  78. nickname/alias
  79. </div>
  80. <div class="list-group-item">
  81. <i class="fas fa-calendar-alt fa-fw mr-1" style="color:teal;"></i>
  82. birthdate
  83. </div>
  84.  
  85. <div class="list-group-item">
  86. <i class="fas fa-ruler fa-fw mr-1" style="color:teal;"></i>
  87. height
  88. </div>
  89.  
  90. <div class="list-group-item">
  91. <i class="fas fa-book fa-fw mr-1" style="color:teal;"></i>
  92. occupation
  93. </div>
  94.  
  95. <div class="list-group-item">
  96. <i class="far fa-heart fa-fw mr-1" style="color:teal;"></i>
  97. relationship
  98. </div>
  99.  
  100. <div class="list-group-item">
  101. <i class="fal fa-dice-d20 mr-1" style="color:teal;"></i>
  102. alignment
  103. </div>
  104.  
  105. <div class="list-group-item">
  106. <i class="fas fa-hands fa-fw mr-1" style="color:teal;"></i>
  107. method obtained
  108. </div>
  109. </div>
  110.  
  111. <div class="w-100 text-center mt-2" style="font-size: 16pt;">adjective &bull; adjective &bull; adjective</div>
  112.  
  113. </div>
  114. </div>
  115.  
  116. </div>
  117.  
  118.  
  119. <div class="tab-pane flex-grow-1" id="tab-2" style="font-size: 9pt;">
  120.  
  121. <div class="row no-gutters">
  122. <!-- PREFERENCES -->
  123. <div class="col-lg-3 p-2">
  124. <div class="card border-0 bg-faded bg-faded h-100 rounded-0 text-muted">
  125. <h5 class="text-center text-uppercase m-2">PREFERENCES</h5>
  126. <ul class="list-group list-group-flush">
  127. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">POSITION:</span> Unknown</p></li>
  128. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">SETTING:</span> Unknown</p></li>
  129. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">TIME:</span> Unknown</p></li>
  130. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">FOREPLAY:</span> Unknown</p></li>
  131. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">TOYS:</span> Unknown</p></li>
  132. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">PET NAMES:</span> Unknown</p></li>
  133. <li class="list-group-item bg-faded px-3 py-2"><p><span class="text-uppercase text-muted">PROTECTION:</span> Unknown</p></li>
  134. </ul>
  135. </div>
  136. </div> <!--middle colum end-->
  137.  
  138.  
  139. <!--LEFT COLUMN (SOFT LIMITS/ HARD LIMITS)-->
  140. <div class="col-lg-3 p-2">
  141. <!--SOFT LIMITS-->
  142. <div class="card border-0 bg-faded h-100 rounded-0 text-muted">
  143. <h5 class="text-center text-uppercase m-2">SOFT LIMITS</h5>
  144. <ul class="list-group list-group-flush">
  145. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  146. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  147. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  148. </ul>
  149. <!--HARD LIMITS-->
  150. <h5 class="text-center text-uppercase m-2">HARD LIMITS</h5>
  151. <ul class="list-group list-group-flush">
  152. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  153. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  154. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  155. </ul>
  156. </div>
  157. </div> <!--left colum end-->
  158.  
  159. <!-- RECEIVING -->
  160. <div class="col-lg-3 p-2">
  161. <div class="card border-0 bg-faded h-100 rounded-0 text-muted">
  162. <h5 class="text-center text-uppercase m-2">ENJOYS RECEIVING</h5>
  163. <ul class="list-group list-group-flush">
  164. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  165. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  166. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  167. </ul>
  168. <h5 class="text-center text-uppercase m-2">ENJOYS GIVING</h5>
  169. <ul class="list-group list-group-flush">
  170. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  171. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  172. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  173. </ul>
  174. </div>
  175. </div> <!--right colum end-->
  176.  
  177. <!--GENERAL KINKS-->
  178. <div class="col-lg-3 p-2">
  179. <div class="card border-0 bg-faded h-100 rounded-0 text-muted">
  180. <h5 class="text-center text-uppercase m-2">GENERAL KINKS/ FETISHES</h5>
  181. <ul class="list-group list-group-flush">
  182. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  183. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  184. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  185. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  186. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  187. <li class="list-group-item bg-faded bg-faded px-3 py-2">Unknown</li>
  188. <li class="list-group-item bg-faded px-3 py-2">Unknown</li>
  189. </ul>
  190. </div>
  191. </div> <!--general kinks end-->
  192.  
  193.  
  194. <!--VOICE-->
  195. <!--NOTE:
  196. To move the marker from left to right, change the percentage (50%) to your desired side. Less than 50% moves the marker closer to the left (first listed trait); more than 50% moves the marker closer to the right (second listed trait).
  197. -->
  198. <div class="col-lg-6 p-2">
  199. <div class="card border-0 bg-faded rounded-0 text-muted">
  200. <h5 class="text-center text-uppercase text-muted mt-2">VOICE</h5>
  201.  
  202. <div class="list-group list-group-flush">
  203. <div class="list-group-item bg-faded bg-faded row m-0 pt-0">
  204.  
  205. <!--VOLUME-->
  206. <div class="col-lg-6">
  207. <!--VOLUME-->
  208. <h6 class="text-center text-uppercase text-muted mb-1 mt-3">VOLUME</h6>
  209. <p class="text-truncate text-uppercase text-muted mb-1">
  210. Quiet
  211. <span class="pull-right">Loud</span>
  212. </p>
  213. <div class="progress rounded-0 bg-muted">
  214. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  215. </div>
  216. </div>
  217. <!--volume end-->
  218.  
  219.  
  220.  
  221. <!--MOANS AND GROANS-->
  222. <div class="col-lg-6">
  223. <h6 class="text-center text-uppercase text-muted mb-1 mt-3">MOANS AND GROANS</h6>
  224. <p class="text-truncate text-uppercase text-muted mb-1">
  225. Never
  226. <span class="pull-right">Often</span>
  227. </p>
  228. <div class="progress rounded-0 bg-muted">
  229. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  230. </div>
  231. <!--moans and groans end-->
  232. </div>
  233.  
  234. </div>
  235.  
  236. <div class="list-group-item bg-faded bg-faded row m-0 pt-0">
  237.  
  238. <!--WHIMPERS AND WHINES-->
  239. <div class="col-lg-6">
  240. <h6 class="text-center text-uppercase text-muted mt-3 mb-1">WHIMPERS AND WHINES</h6>
  241. <p class="text-truncate text-uppercase text-muted mb-1">
  242. Never
  243. <span class="pull-right">Often</span>
  244. </p>
  245. <div class="progress rounded-0 bg-muted">
  246. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  247. </div>
  248. </div>
  249. <!--whimpers and whines end-->
  250.  
  251.  
  252.  
  253. <!--BEGS AND PLEADS-->
  254. <div class="col-lg-6">
  255. <h6 class="text-center text-uppercase text-muted mt-3 mb-1">BEGS AND PLEADS</h6>
  256. <p class="text-truncate text-uppercase text-muted mb-1">
  257. Never
  258. <span class="pull-right">Often</span>
  259. </p>
  260. <div class="progress rounded-0 bg-muted">
  261. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  262. </div>
  263. </div>
  264. <!--begs and pleads end-->
  265.  
  266. </div> <!--left column end-->
  267.  
  268. <!--RIGHT COLUMN-->
  269. <div class="list-group-item bg-faded bg-faded row m-0 pt-0">
  270.  
  271. <!--CURSES AND SWEARS-->
  272. <div class="col-lg-6">
  273. <h6 class="text-center text-uppercase text-muted mb-1 mt-3">CURSES AND SWEARS</h6>
  274. <p class="text-truncate text-uppercase text-muted mb-1">
  275. Never
  276. <span class="pull-right">Often</span>
  277. </p>
  278. <div class="progress rounded-0 bg-muted">
  279. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  280. </div>
  281. </div>
  282. <!--curses and swears end-->
  283.  
  284.  
  285.  
  286. <!--DIRTY TALK (FREQUENCY)-->
  287. <div class="col-lg-6">
  288. <h6 class="text-center text-uppercase text-muted mt-3 mb-1">DIRTY TALK (FREQUENCY)</h6>
  289. <p class="text-truncate text-uppercase text-muted mb-1">
  290. Never
  291. <span class="pull-right">Often</span>
  292. </p>
  293. <div class="progress rounded-0 bg-muted">
  294. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  295. </div>
  296. </div>
  297. <!--dirty talk (frequency) end-->
  298.  
  299. </div>
  300.  
  301.  
  302. <div class="list-group-item bg-faded bg-faded row m-0 pt-0">
  303. <!--DIRTY TALK (CONTENT)-->
  304. <div class="col-lg-6">
  305. <h6 class="text-center text-uppercase text-muted mt-3 mb-1">DIRTY TALK (CONTENT)</h6>
  306. <p class="text-truncate text-uppercase text-muted mb-1">
  307. Sensual
  308. <span class="pull-right">Vulgar</span>
  309. </p>
  310. <div class="progress rounded-0 bg-muted">
  311. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  312. </div>
  313. <!--dirty talk (content) end-->
  314.  
  315. </div>
  316.  
  317. </div>
  318. </div>
  319.  
  320. </div>
  321. </div> <!--voice end-->
  322.  
  323.  
  324. <!--EXPERIENCE-->
  325. <!--NOTE:
  326. To move the marker from left to right, change the percentage (50%) to your desired side. Less than 50% moves the marker closer to the left (first listed trait); more than 50% moves the marker closer to the right (second listed trait).
  327. -->
  328. <div class="col-lg-3 p-2">
  329. <div class="card border-0 bg-faded rounded-0 text-muted h-100">
  330. <h5 class="text-center text-uppercase text-muted mt-2">EXPERIENCE</h5>
  331.  
  332. <div class="list-group list-group-flush">
  333.  
  334. <!--PARTNERS-->
  335. <div class="list-group-item bg-faded bg-faded d-block">
  336. <h6 class="text-center text-uppercase text-muted mb-1">PARTNERS</h6>
  337. <p class="text-truncate text-uppercase text-muted mb-1">
  338. Virgin
  339. <span class="pull-right">Several</span>
  340. </p>
  341. <div class="progress rounded-0 bg-muted">
  342. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  343. </div>
  344. </div>
  345. <!--partners end-->
  346.  
  347. <!--TOYS-->
  348.  
  349. <div class="list-group-item bg-faded bg-faded d-block">
  350.  
  351. <h6 class="text-center text-uppercase text-muted mb-1">TOYS</h6>
  352. <p class="text-truncate text-uppercase text-muted mb-1">
  353. Never Used
  354. <span class="pull-right">Uses/ Owns several</span>
  355. </p>
  356. <div class="progress rounded-0 bg-muted">
  357. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  358. </div>
  359. </div>
  360. <!--toys end-->
  361.  
  362. <!--POSITIONS-->
  363.  
  364. <div class="list-group-item bg-faded bg-faded d-block">
  365. <h6 class="text-center text-uppercase text-muted mb-1">POSITIONS</h6>
  366. <p class="text-truncate text-uppercase text-muted mb-1">
  367. None
  368. <span class="pull-right">Every position thinkable</span>
  369. </p>
  370. <div class="progress rounded-0 bg-muted">
  371. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  372. </div>
  373. </div>
  374. <!--positions end-->
  375.  
  376. <!--LOCATIONS-->
  377.  
  378. <div class="list-group-item bg-faded bg-faded d-block">
  379. <h6 class="text-center text-uppercase text-muted mb-1">LOCATIONS</h6>
  380. <p class="text-truncate text-uppercase text-muted mb-1">
  381. One place only
  382. <span class="pull-right">Anywhere and everywhere</span>
  383. </p>
  384. <div class="progress rounded-0 bg-muted">
  385. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  386. </div>
  387. </div>
  388. <!--locations end-->
  389. </div>
  390. </div>
  391. </div> <!--experience end-->
  392.  
  393.  
  394. <!--SENSITIVITY-->
  395. <!--NOTE:
  396. To move the marker from left to right, change the percentage (50%) to your desired side. Less than 50% moves the marker closer to the left (first listed trait); more than 50% moves the marker closer to the right (second listed trait).
  397. -->
  398. <div class="col-lg-3 p-2">
  399. <div class="card border-0 h-100 bg-faded rounded-0 text-muted">
  400. <h5 class="text-center text-uppercase text-muted mt-2">SENSITIVITY</h5>
  401. <div class="list-group list-group-flush">
  402. <!--PLEASURE-->
  403. <div class="list-group-item bg-faded bg-faded d-block">
  404. <h6 class="text-center text-uppercase text-muted mb-1">PLEASURE</h6>
  405. <p class="text-truncate text-uppercase text-muted mb-1">
  406. Receptive
  407. <span class="pull-right">Unreceptive</span>
  408. </p>
  409. <div class="progress rounded-0 bg-muted">
  410. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  411. </div>
  412. </div>
  413. <!--pleasure end-->
  414.  
  415.  
  416.  
  417. <!--PAIN-->
  418. <div class="list-group-item bg-faded bg-faded d-block">
  419. <h6 class="text-center text-uppercase text-muted mb-1">PAIN</h6>
  420. <p class="text-truncate text-uppercase text-muted mb-1">
  421. Receptive
  422. <span class="pull-right">Unreceptive</span>
  423. </p>
  424. <div class="progress rounded-0 bg-muted">
  425. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  426. </div>
  427. </div>
  428. <!--pain end-->
  429.  
  430.  
  431.  
  432. <!--TOUCH-->
  433. <div class="list-group-item bg-faded bg-faded d-block">
  434. <h6 class="text-center text-uppercase text-muted mb-1">TOUCH</h6>
  435. <p class="text-truncate text-uppercase text-muted mb-1">
  436. Receptive
  437. <span class="pull-right">Unreceptive</span>
  438. </p>
  439. <div class="progress rounded-0 bg-muted">
  440. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  441. </div>
  442. </div>
  443. <!--touch end-->
  444.  
  445.  
  446.  
  447. <!--SOUNDS-->
  448. <div class="list-group-item bg-faded bg-faded d-block">
  449. <h6 class="text-center text-uppercase text-muted mb-1">SOUNDS</h6>
  450. <p class="text-truncate text-uppercase text-muted mb-1">
  451. Receptive
  452. <span class="pull-right">Unreceptive</span>
  453. </p>
  454. <div class="progress rounded-0 bg-muted">
  455. <div class="progress-bar card-primary" style="width:50%; height:10px; background:none; border-right:8px solid teal;"></div>
  456. </div>
  457. </div>
  458. <!--sounds end-->
  459.  
  460. </div>
  461. </div>
  462. </div><!--sensitivity end-->
  463.  
  464. </div>
  465. </div>
  466.  
  467.  
  468. <div class="tab-pane p-4 flex-grow-1" id="tab-3">
  469.  
  470. <!-- START ART TRACKER TABLE -->
  471. <div class="d-flex flex-column justify-content-between" style="min-height: 100%;">
  472. <div class="border-0 mb-0">
  473.  
  474. <div class="list-group list-group-flush">
  475.  
  476. <div class="list-group-item row no-gutters bg-faded border-0 p-2">
  477. <div class="col-md-2 col pl-2 text-center text-uppercase">Date</div>
  478. <div class="col px-1 text-center text-uppercase">Type</div>
  479. <div class="col px-1 text-center text-uppercase">Artist</div>
  480. <div class="col-md-2 col pr-1 text-center text-uppercase">Value</div>
  481. </div>
  482.  
  483. <div class="list-group-item row no-gutters py-2 border-0 mt-3">
  484. <div class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  485. xxx/xx/xx
  486. </div>
  487. <div class="col text-center px-1 py-1">
  488. commission/gift/trade
  489. </div>
  490. <div class="col-12 p-0 hidden-md-up" style="height:0px;"></div>
  491. <div class="col pl-md-1 text-md-center pl-3 pr-1 py-1">
  492. <a href="ARTIST LINK" target="_blank" target="_blank" style="color: teal">artist name (link)</a>
  493. </div>
  494. <div class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  495. $xxx or n/a
  496. </div>
  497. </div>
  498.  
  499. <div class="list-group-item row no-gutters py-2">
  500. <div class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  501. xxx/xx/xx
  502. </div>
  503. <div class="col text-center px-1 py-1">
  504. commission/gift/trade
  505. </div>
  506. <div class="col-12 p-0 hidden-md-up" style="height:0px;"></div>
  507. <div class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  508. <a href="ARTIST LINK" target="_blank" style="color: teal">artist name (link)</a>
  509. </div>
  510. <div class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  511. $xxx or n/a
  512. </div>
  513. </div>
  514.  
  515. <div class="list-group-item row no-gutters py-2">
  516. <div class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  517. xxx/xx/xx
  518. </div>
  519. <div class="col text-center px-1 py-1">
  520. commission/gift/trade
  521. </div>
  522. <div class="col-12 p-0 hidden-md-up" style="height:0px;"></div>
  523. <div class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  524. <a href="ARTIST LINK" style="color: teal">artist name (link)</a>
  525. </div>
  526. <div class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  527. $xxx or n/a
  528. </div>
  529. </div>
  530.  
  531. <div class="list-group-item row no-gutters py-2">
  532. <div class="col-md-2 col text-md-center pl-md-2 pl-3 py-1">
  533. xxx/xx/xx
  534. </div>
  535. <div class="col text-center px-1 py-1">
  536. commission/gift/trade
  537. </div>
  538. <div class="col-12 p-0 hidden-md-up" style="height:0px;"></div>
  539. <div class="col text-md-center pl-md-1 pl-3 pr-1 py-1">
  540. <a href="ARTIST LINK" target="_blank" style="color: teal">artist name (link)</a>
  541. </div>
  542. <div class="col-md-2 col-auto text-center pr-md-2 pr-3 py-1">
  543. $xxx or n/a
  544. </div>
  545. </div>
  546. </div>
  547. </div><!-- END ART TRACKER TABLE -->
  548.  
  549. <div class="row row no-gutters" style="font-size: 14pt;">
  550. <div class="col-md text-md-right text-center text-uppercase pt-2 pb-md-2 pb-0">Total Value <i class="fas fa-angle-double-right hidden-sm-down" style="color: teal;"></i></div>
  551. <div class="col-md-2 pr-1 text-center text-uppercase pt-md-2 pt-0 pb-2">
  552. $xxx
  553. </div>
  554. </div>
  555. </div>
  556.  
  557. </div>
  558.  
  559. </div>
  560. </div>
  561. </div>
  562.  
  563. <div class="mt-2" id="credit" style="font-size: 9pt; text-align: right; opacity: 0.5">
  564. <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-" style="position: absolute; right: 5px;">
  565. <i class="fa fa-code"></i> Theme by Circlejourney
  566. </a>
  567. </div>
  568. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!