API tools faq
paste
lowkeywicked

Freebie - Comm 03

lowkeywicked
Apr 26th, 2020 (edited)
4,945
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.18 KB | None | 0 0
raw download clone embed print report
  1. <div class="card border-0 py-4" style="margin: -22px;"><div class="container px-0" style="max-width: 1000px;">
  2. <!------- TOP HEADER TITLE ----------------------->
  3. <div class="p-2 bg-primary text-white rounded mb-2">
  4. <h1 class="text-uppercase text-center mb-0" style="font-size: 2em; letter-spacing: 1.5px">Main Title Here</h1>
  5. </div>
  6.  
  7. <!----- TOP MISC CONTENT SECTION ------------->
  8. <div class="card card-block card-outline-primary bg-faded mb-4" style="border-width: 2px; border-style:dashed;">
  9. <p class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at tellus sodales, sodales libero quis, maximus tellus. Ut sed pulvinar nisi. Phasellus eu massa leo. Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim. Cras eget magna vestibulum, varius tellus euismod, semper metus. Suspendisse potenti. Praesent eu enim ut risus rutrum pharetra. Quisque tempus tortor vel nunc malesuada pretium. Praesent eu mollis augue.</p>
  10.  
  11. <!-------------- ROW OF BUTTONS ------------------------------------------>
  12. <div class="row no-gutters justify-content-center mt-3">
  13. <div class="col px-1">
  14. <a href="LINK_HERE" target="_BLANK" class="btn btn-primary btn-block mb-2">
  15. <i class="fas fa-info-circle fa-fw mr-1" />ToS</a>
  16. </div>
  17. <div class="col px-1">
  18. <a href="LINK_HERE" target="_BLANK" class="btn btn-primary btn-block mb-2">
  19. <i class="fas fa-image fa-fw mr-1" />Gallery</a>
  20. </div>
  21. <div class="col px-1">
  22. <a href="LINK_HERE" target="_BLANK" class="btn btn-primary btn-block mb-2">
  23. <i class="fas fa-list fa-fw mr-1" />Work List</a>
  24. </div>
  25. <div class="col px-1">
  26. <a href="LINK_HERE" target="_BLANK" class="btn btn-primary btn-block mb-2">
  27. <i class="fas fa-star fa-fw mr-1" />Misc Link</a>
  28. </div>
  29. </div>
  30. </div>
  31.  
  32. <!----------- EXAMPLES SECTION ------------------------------------------------>
  33. <h1 class="mb-1 text-primary text-uppercase" style="font-size: 2em; letter-spacing: 2px;">
  34. <i class="fas fa-stars fa-fw" /> Options
  35. </h1>
  36. <!-- for examples, prev images will resize/crop based on screen size -- focus will be in the TOP CENTER of the image -->
  37. <div class="card card-block card-outline-primary bg-faded mb-4" style="border-width: 2px; border-style:dashed;">
  38. <div class="row">
  39. <!------------------ STYLE ---------------------------------------------------->
  40. <div class="col-md-6 mb-2">
  41. <h2 class="text-uppercase text-center" style="letter-spacing:1px;">Style Name</h2>
  42.  
  43. <div style="background-image: url('IMG_URL');
  44. max-width: 300px; height: 300px; background-size: cover; background-position: top center;"
  45. class="d-block mx-auto mb-2" ></div>
  46.  
  47. <p class="text-center"><b>Samples</b>
  48. <br>
  49. <a href="SAMPLE_1" target="_blank"><i class="fas fa-square fa-fw" /></a>
  50. <a href="SAMPLE_2" target="_blank"><i class="fas fa-square fa-fw" /></a>
  51. <a href="SAMPLE_3" target="_blank"><i class="fas fa-square fa-fw" /></a>
  52. </p>
  53.  
  54. <p class="mb-3">Write a short description here.
  55.  
  56. <ul class="mb-0">
  57. <li class="mb-2"><b>Headshot</b> - $xx </li>
  58. <li class="mb-2"><b>Half Body</b> - $xx </li>
  59. <li class="mb-2"><b>Full body</b> - $xx </li>
  60. <li class="mb-2"><b>Chibi</b> - $xx </li>
  61. </ul>
  62. </div>
  63.  
  64. <!------------------ STYLE ---------------------------------------------------->
  65. <div class="col-md-6 mb-2">
  66. <h2 class="text-uppercase text-center" style="letter-spacing:1px;">Style Name</h2>
  67.  
  68. <div style="background-image: url('IMG_URL');
  69. max-width: 300px; height: 300px; background-size: cover; background-position: top center;"
  70. class="d-block mx-auto mb-2" ></div>
  71.  
  72. <p class="text-center"><b>Samples</b>
  73. <br>
  74. <a href="SAMPLE_1" target="_blank"><i class="fas fa-square fa-fw" /></a>
  75. <a href="SAMPLE_2" target="_blank"><i class="fas fa-square fa-fw" /></a>
  76. <a href="SAMPLE_3" target="_blank"><i class="fas fa-square fa-fw" /></a>
  77. </p>
  78.  
  79. <p class="mb-3">Write a short description here.
  80.  
  81. <ul class="mb-0">
  82. <li class="mb-2"><b>Headshot</b> - $xx </li>
  83. <li class="mb-2"><b>Half Body</b> - $xx </li>
  84. <li class="mb-2"><b>Full body</b> - $xx </li>
  85. <li class="mb-2"><b>Chibi</b> - $xx </li>
  86. </ul>
  87. </div>
  88.  
  89. <!------------------ STYLE ---------------------------------------------------->
  90. <div class="col-md-6 mb-2">
  91. <h2 class="text-uppercase text-center" style="letter-spacing:1px;">Style Name</h2>
  92.  
  93. <div style="background-image: url('IMG_URL');
  94. max-width: 300px; height: 300px; background-size: cover; background-position: top center;"
  95. class="d-block mx-auto mb-2" ></div>
  96.  
  97. <p class="text-center"><b>Samples</b>
  98. <br>
  99. <a href="SAMPLE_1" target="_blank"><i class="fas fa-square fa-fw" /></a>
  100. <a href="SAMPLE_2" target="_blank"><i class="fas fa-square fa-fw" /></a>
  101. <a href="SAMPLE_3" target="_blank"><i class="fas fa-square fa-fw" /></a>
  102. </p>
  103.  
  104. <p class="mb-3">Write a short description here.
  105.  
  106. <ul class="mb-0">
  107. <li class="mb-2"><b>Headshot</b> - $xx </li>
  108. <li class="mb-2"><b>Half Body</b> - $xx </li>
  109. <li class="mb-2"><b>Full body</b> - $xx </li>
  110. <li class="mb-2"><b>Chibi</b> - $xx </li>
  111. </ul>
  112. </div>
  113.  
  114. <!------------------ STYLE ---------------------------------------------------->
  115. <div class="col-md-6 mb-2">
  116. <h2 class="text-uppercase text-center" style="letter-spacing:1px;">Style Name</h2>
  117.  
  118. <div style="background-image: url('IMG_URL');
  119. max-width: 300px; height: 300px; background-size: cover; background-position: top center;"
  120. class="d-block mx-auto mb-2" ></div>
  121.  
  122. <p class="text-center"><b>Samples</b>
  123. <br>
  124. <a href="SAMPLE_1" target="_blank"><i class="fas fa-square fa-fw" /></a>
  125. <a href="SAMPLE_2" target="_blank"><i class="fas fa-square fa-fw" /></a>
  126. <a href="SAMPLE_3" target="_blank"><i class="fas fa-square fa-fw" /></a>
  127. </p>
  128.  
  129. <p class="mb-3">Write a short description here.
  130.  
  131. <ul class="mb-0">
  132. <li class="mb-2"><b>Headshot</b> - $xx </li>
  133. <li class="mb-2"><b>Half Body</b> - $xx </li>
  134. <li class="mb-2"><b>Full body</b> - $xx </li>
  135. <li class="mb-2"><b>Chibi</b> - $xx </li>
  136. </ul>
  137. </div>
  138. </div>
  139. </div>
  140.  
  141. <!----------- DETAILS SECTION ------------------------------------------------>
  142. <h1 class="mb-1 text-primary text-uppercase" style="font-size: 2em; letter-spacing: 2px;">
  143. <i class="fas fa-list-alt fa-fw" /> Details
  144. </h1>
  145. <div class="card card-block card-outline-primary bg-faded mb-4" style="border-width: 2px; border-style:dashed;">
  146. <div class="row mt-2">
  147. <!----- Rules ---------------------->
  148. <div class="col-12 mb-2">
  149. <h2 class="text-uppercase text-center" style="letter-spacing:1px;"><i class="fas fa-info-circle mr-1"/> Rules</h2>
  150.  
  151. <ol class="mb-0">
  152. <li class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  153. <li class="mb-3">Donec at tellus sodales, sodales libero quis, maximus tellus.</li>
  154. <li class="mb-3">Ut sed pulvinar nisi.</li>
  155. <li class="mb-3">Phasellus eu massa leo.</li>
  156. <li class="mb-3">Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim.</li>
  157. </ol>
  158. </div>
  159.  
  160. <!----- Strengths ---------------------->
  161. <div class="col-md-6 mb-2">
  162. <h2 class="text-uppercase text-center" style="letter-spacing:1px;"><i class="fas fa-plus mr-1"/> Strengths</h2>
  163.  
  164. <ul class="mb-0">
  165. <li class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  166. <li class="mb-3">Donec at tellus sodales, sodales libero quis, maximus tellus.</li>
  167. <li class="mb-3">Ut sed pulvinar nisi.</li>
  168. <li class="mb-3">Phasellus eu massa leo.</li>
  169. <li class="mb-3">Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim.</li>
  170. </ul>
  171. </div>
  172.  
  173. <!----- Won't Draw ---------------------->
  174. <div class="col-md-6 mb-2">
  175. <h2 class="text-uppercase text-center" style="letter-spacing:1px;"><i class="fas fa-times mr-1"/> Won't Draw</h2>
  176.  
  177. <ul class="mb-0">
  178. <li class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  179. <li class="mb-3">Donec at tellus sodales, sodales libero quis, maximus tellus.</li>
  180. <li class="mb-3">Ut sed pulvinar nisi.</li>
  181. <li class="mb-3">Phasellus eu massa leo.</li>
  182. <li class="mb-3">Praesent metus erat, hendrerit accumsan sagittis et, auctor id enim.</li>
  183. </ul>
  184. </div>
  185. </div>
  186. </div>
  187.  
  188. <!----------- ORDER SECTION ------------------------------------------------>
  189. <h1 class="mb-1 text-primary text-uppercase" style="font-size: 2em; letter-spacing: 2px;">
  190. <i class="fas fa-envelope fa-fw" /> Order
  191. </h1>
  192. <div class="card card-block card-outline-primary bg-faded mb-4" style="border-width: 2px; border-style:dashed;">
  193. <p>Put your order details here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sm pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo.</p>
  194.  
  195. <!------------------- make an order form here ----------------------------------------->
  196. <h2 class="text-uppercase mt-3" style="letter-spacing:1px;">Form</h2>
  197. <blockquote class="small">
  198. <p><b>Name:</b> ---</p>
  199. <p><b>Comm type:</b> ---</p>
  200. <p><b>Refs:</b> ----</p>
  201. <p><b>Etc:</b> (put whatever you commission form is here)</p>
  202. </blockquote>
  203. </div>
  204.  
  205. <!------------ LEAVE CREDIT -------------------------->
  206. <p class="text-right small">HTML by @Pinky</p>
  207.  
  208. </div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!