API tools faq
paste
Advertisement
ooter

[F] Commission 001

ooter
Sep 24th, 2017
894
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.78 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------
  2.  
  3. FREE TO USE COMMISSION LAYOUT!
  4. MOBILE FRIENDLY! ♥
  5. Works in Bulletins and Forums!
  6.  
  7. The image example I used is 380 x 500
  8. The Green is #c7e77a
  9.  
  10. Enjoy!!
  11.  
  12.  
  13. ------------------------------->
  14. <div class="container-fluid">
  15.     <div class="row">
  16.         <div class="col-sm-12">
  17.             <!-------->
  18.             <div class="container-fluid">
  19.                 <div class="row">
  20.                     <div class="col-sm-6">
  21.                         <!----
  22.  
  23. -----------------
  24.  
  25. COMMISSIONS
  26.  
  27. ----------------->
  28.                         <div class="ui-accordion card" style="border:1px solid #c7e77a; margin-bottom:10px;">
  29.  
  30.                             <h2 class="card card-header display-5" style="background:#c7e77a; color:#fff; text-transform:uppercase;">Commission types</h2>
  31.                             <div class="ui-accordion-content card-block" style="height:550px;">
  32.                                 <div class="container-fluid">
  33.                                     <div class="row">
  34.                                         <div class="col-sm-6">
  35.                                             <!---
  36. --------------------------------------------------------------------------------------------
  37.  
  38.                                      EXAMPLE IMAGE
  39.  
  40. --------------------------------------------------------------------------------------------><img src="https://orig00.deviantart.net/bad8/f/2017/267/9/7/ph_by_jaydenth-dbogfqk.png" class="fr-fic fr-dib rounded" width="281" height="377">
  41.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-top:10px; margin-bottom:10px; text-align:center;">ALL CHARACTERS BELONG TO THEIR RESPECTFUL OWNERS</div>
  42.                                         </div>
  43.                                         <div class="col-sm-6">
  44.                                             <!----
  45.  
  46. -----------------
  47.  
  48. OPTION RIGHT
  49.  
  50. ----------------->
  51.                                             <!-----OPTION------->
  52.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>HEADSHOTS : $5</strong></div>
  53.                                             <!-----OPTION------->
  54.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>HALF BODY : $10</strong></div>
  55.                                             <!-----OPTION------->
  56.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>THIGH UP : $15</strong></div>
  57.                                             <!-----OPTION------->
  58.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>FULL BODY : $20</strong></div>
  59.                                             <!-----OPTION------->
  60.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>SKETCHPAGE : $25</strong></div>
  61.                                             <!-----OPTION------->
  62.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>CUSTOM : $30</strong></div>
  63.                                             <!-----OPTION------->
  64.                                             <div class="card card-block" style="border:1px dashed #5cb85c;background-color: #c7e77a; margin-bottom:10px;"><strong>ICONS : N/A</strong></div>
  65.                                         </div>
  66.                                     </div>
  67.                                 </div>
  68.                             </div>
  69.                         </div>
  70.                     </div>
  71.                     <!---
  72. --------------------------------------------------------------------------------------------
  73.  
  74.                                 TERMS - DOS & DON'TS
  75.  
  76. -------------------------------------------------------------------------------------------->
  77.                     <div class="col-sm-6">
  78.                         <div class="ui-accordion card" style="border:1px solid #c7e77a; margin-bottom:10px;">
  79.  
  80.                             <h2 class="card card-header display-5" style="background:#c7e77a; color:#fff; text-transform:uppercase;">DO&#39;S &amp; DON&#39;TS</h2>
  81.                             <div class="ui-accordion-content card-block" style="height:230px;">
  82.                                 <div class="container-fluid">
  83.                                     <div class="row">
  84.                                         <div class="col-sm-6" style="text-align: center;">
  85.                                             <div class="btn btn-success" style="width:100%;">DO</div>
  86.                                             <br>
  87.                                             <br>ITEM
  88.                                             <br>ITEM
  89.                                             <br>ITEM
  90.                                             <br>ITEM
  91.                                             <br>ITEM
  92.                                             <br>ITEM</div>
  93.                                         <div class="col-sm-6" style="text-align: center;">
  94.                                             <div class="btn btn-danger" style="width:100%;">DON&#39;T</div>
  95.                                             <br>
  96.                                             <br>ITEM
  97.                                             <br>ITEM
  98.                                             <br>ITEM
  99.                                             <br>ITEM
  100.                                             <br>ITEM
  101.                                             <br>ITEM</div>
  102.                                     </div>
  103.                                 </div>
  104.                             </div>
  105.                         </div>
  106.                         <!----
  107. ------------------------------------------------------------------------------>
  108.                         <div class="ui-accordion card" style="border:1px solid #c7e77a;">
  109.  
  110.                             <h2 class="card card-header display-5" style="background:#c7e77a; color:#fff; text-transform:uppercase;">queue</h2>
  111.                             <div class="ui-accordion-content card-block" style="height:260px;">
  112.                                 <!---
  113. --------------------------------------------------------------------------------------------
  114.  
  115.                                       QUEUE
  116.  
  117. -------------------------------------------------------------------------------------------->
  118.  
  119.                                 <table style="width: 100%; border: none; margin-left: calc(0%);">
  120.                                     <tbody>
  121.                                         <tr>
  122.                                             <td style="width: 19.6615%;">@Unknown</td>
  123.                                             <td style="width: 80.1948%;">
  124.                                                 <!---
  125. -------------------
  126.  
  127. PROGRESS BAR - CHANGE WIDTH:60% TO ANYTHING BETWEEN 0% TO 100%
  128. TO CHANGE THE BAR COLOUR, CHANGE THE WARNING IN BG-WARNING TO
  129. ANY OF THE COLOURS HERE
  130. http://toyhou.se/1099931.coding-snippet-goldmine#4059265
  131.  
  132. DEFAULT AND SECONDARY DO NOT WORK!
  133.  
  134. --------------------->
  135.                                                 <div class="progress">
  136.                                                     <div class="progress-bar progress-bar-striped bg-warning" style="width:60%;">AWAITING CONFIRMATION</div>
  137.                                                 </div>
  138.                                             </td>
  139.                                         </tr>
  140.                                         <tr>
  141.                                             <td style="width: 19.6615%;">@Unknown</td>
  142.                                             <td style="width: 80.1948%;">
  143.                                                 <!---
  144. -------------------
  145.  
  146. PROGRESS BAR
  147.  
  148. --------------------->
  149.                                                 <div class="progress">
  150.                                                     <div class="progress-bar progress-bar-striped bg-success" style="width:100%;">DONE</div>
  151.                                                 </div>
  152.                                             </td>
  153.                                         </tr>
  154.                                         <tr>
  155.                                             <td style="width: 19.6615%;">@Unknown</td>
  156.                                             <td style="width: 80.1948%;">
  157.                                                 <div class="progress">
  158.                                                     <div class="progress-bar progress-bar-striped bg-success" style="width:80%;">CLEANING</div>
  159.                                                 </div>
  160.                                             </td>
  161.                                         </tr>
  162.                                         <tr>
  163.                                             <td style="width: 19.6615%;">@Unknown</td>
  164.                                             <td style="width: 80.1948%;">
  165.                                                 <!---
  166. -------------------
  167.  
  168. PROGRESS BAR
  169.  
  170. --------------------->
  171.                                                 <div class="progress">
  172.                                                     <div class="progress-bar progress-bar-striped bg-success" style="width:60%;">COLORING</div>
  173.                                                 </div>
  174.                                             </td>
  175.                                         </tr>
  176.                                         <tr>
  177.                                             <td style="width: 19.6615%;">@Unknown</td>
  178.                                             <td style="width: 80.1948%;">
  179.                                                 <!---
  180. -------------------
  181.  
  182. PROGRESS BAR
  183.  
  184. --------------------->
  185.                                                 <div class="progress">
  186.                                                     <div class="progress-bar progress-bar-striped bg-success" style="width:50%;">LINING</div>
  187.                                                 </div>
  188.                                             </td>
  189.                                         </tr>
  190.                                         <tr>
  191.                                             <td style="width: 19.6615%;">@Unknown</td>
  192.                                             <td style="width: 80.1948%;">
  193.                                                 <!---
  194. -------------------
  195.  
  196. PROGRESS BAR
  197.  
  198. --------------------->
  199.                                                 <div class="progress">
  200.                                                     <div class="progress-bar progress-bar-striped bg-danger" style="width:10%;">UNPAID</div>
  201.                                                 </div>
  202.                                             </td>
  203.                                         </tr>
  204.                                     </tbody>
  205.                                 </table>
  206.                             </div>
  207.                         </div>
  208.                     </div>
  209.                 </div>
  210.             </div>
  211.             <!-------->
  212.         </div>
  213.     </div>
  214. </div><!---
  215. -------------------
  216.  
  217. CREDIT - DO NOT REMOVE!
  218.  
  219. --------------------->
  220.  
  221. <p style="margin-right: 35px; margin-top:-10px; font-size: 9pt; text-transform: uppercase; text-align: right;">html by @Jayden</p>
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!