API tools faq
paste
lowkeywicked

Freebie - User Mood

lowkeywicked
Jul 29th, 2025
612
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.33 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid my-md-5" style="max-width: 1550px;">
  2. <div class="row no-gutters"><div class="col-lg-10">
  3. <div class="row no-gutters">
  4. <div class="col-12 mb-3">
  5. <div class="bg-primary px-3 py-2"><div class="row no-gutters align-items-center"><div class="col-auto"><h2 class="text-white text-uppercase mb-0" style="letter-spacing: 1.5px; font-size: 28px;">
  6. <!-- MAIN TITLE -------- YOUR NAME --------------------->
  7. Your Name
  8. </h2></div><div class="col px-2"></div><div class="col-auto"><h2 class="text-white mb-0">
  9. <!-- MAIN TITLE -------- FONT AWESOME ICON --------------------->
  10. <i class="fa-solid fa-stars" /></h2>
  11.  
  12. </div></div></div></div>
  13. <div class="col-lg-5 col-md-6 mb-3 pr-md-3">
  14. <!-- LARGE FOCAL IMAGE ---------------------------------->
  15. <div style="background-image: url('IMG_URL');
  16. background-size:cover; background-position:center; background-repeat: no-repeat; min-height: 600px;" class="h-100"></div>
  17. </div>
  18. <div class="col-lg-7 col-md-6 mb-3"><div class="card bg-faded border-0 px-2 pb-3 mb-3">
  19. <div class="d-block d-md-flex flex-column"><div style="flex: 0 0 280px; min-height: 0px; overflow-y: auto;" class="px-3 pt-3 pb-1">
  20.  
  21. <!-- TOP CONTENT BOX --------------------------------->
  22. <p class="text-primary text-uppercase text-center" style="font-weight: 500; letter-spacing: 1.5px;">
  23. gender . age . adjective
  24. </p>
  25.  
  26. <p>Fruitcake powder tiramisu lemon drops dragée jelly-o gummi bears gingerbread. Oat cake jelly carrot cake bear claw cheesecake sesame snaps pudding icing. Sweet brownie sugar plum topping cheesecake lemon drops. Sweet roll oat cake dessert pie croissant cotton candy. Sweet jelly jelly biscuit caramels. Candy sweet roll sweet roll cookie jelly beans muffin icing oat cake. </p>
  27.  
  28. <p>Dragée shortbread pie soufflé sesame snaps gummi bears. Candy apple pie tart fruitcake powder chupa chups jelly beans. Sweet biscuit pudding marzipan jelly pudding jujubes donut. Shortbread croissant gingerbread powder cotton candy dragée macaroon. Fruitcake marzipan shortbread chupa chups dragée danish bear claw chocolate bar cheesecake. Dessert pie pie bear claw cotton candy candy canes tiramisu.</p>
  29.  
  30. </div></div></div>
  31. <!-- NAVIGATION BUTTONS --------------------------------->
  32. <ul class="nav text-uppercase row no-gutters mx-n2 mb-2" style="letter-spacing:.5px;">
  33. <li class="nav-item bg-faded col mx-2">
  34. <a class="nav-link active btn btn-outline-primary border-0 rounded-0 text-uppercase px-1 py-2" style="font-weight: 500;"
  35. data-toggle="tab" href="#ONE">
  36. Notes
  37. </a>
  38. </li>
  39.  
  40. <li class="nav-item bg-faded col mx-2">
  41. <a class="nav-link btn btn-outline-primary border-0 rounded-0 text-uppercase px-1 py-2" style="font-weight: 500;"
  42. data-toggle="tab" href="#TWO">
  43. Likes
  44. </a>
  45. </li>
  46.  
  47. <li class="nav-item bg-faded col mx-2">
  48. <a class="nav-link btn btn-outline-primary border-0 rounded-0 text-uppercase px-1 py-2" style="font-weight: 500;"
  49. data-toggle="tab" href="#THREE">
  50. Art
  51. </a>
  52. </li>
  53.  
  54. <li class="nav-item bg-faded col mx-2">
  55. <a class="nav-link btn btn-outline-primary border-0 rounded-0 text-uppercase px-1 py-2" style="font-weight: 500;"
  56. data-toggle="tab" href="#FOUR">
  57. Featured
  58. </a>
  59. </li>
  60. </ul>
  61.  
  62.  
  63. <div class="card bg-faded border-0 tab-content">
  64. <!------------------------------------ FIRST TAB ------------------------------------------------------------->
  65. <div class="px-2 pb-3 tab-pane active show" data-toggle="tab" id="ONE">
  66. <div class="px-3 pt-3 pb-0">
  67. <div class="row no-gutters align-items-center"><div class="col-auto">
  68. <h2 class="text-primary text-uppercase mb-0" style="letter-spacing: 1.5px;">Notes</h2>
  69. </div><div class="col px-2"></div><div class="col-auto"><h2 class="text-primary mb-0">
  70. <i class="fa-solid fa-thumbtack" /></h2>
  71. </div></div>
  72. </div><div class="d-block d-md-flex flex-column"><div style="flex: 0 0 205px; min-height: 0px; overflow-y: auto;" class="px-3 pt-3 pb-1">
  73. <ul class="pl-4 mb-n2">
  74. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  75. <li class="mb-2">Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra.</li>
  76. <li class="mb-2">Donec non dui id augue pellentesque aliquam et eget felis.</li>
  77. <li class="mb-2">Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum.</li>
  78. </ul>
  79. </div></div>
  80. </div>
  81. <!------------------------------------ SECOND TAB ------------------------------------------------------------->
  82. <div class="px-2 pb-3 tab-pane" data-toggle="tab" id="TWO">
  83. <div class="px-3 pt-3 pb-0">
  84. <div class="row no-gutters align-items-center"><div class="col-auto">
  85. <h2 class="text-primary text-uppercase mb-0" style="letter-spacing: 1.5px;">Preferences</h2>
  86. </div><div class="col px-2"></div><div class="col-auto"><h2 class="text-primary mb-0">
  87. <i class="fa-solid fa-list" /></h2>
  88. </div></div>
  89. </div><div class="d-block d-md-flex flex-column"><div style="flex: 0 0 205px; min-height: 0px; overflow-y: auto;" class="px-3 pt-3 pb-1">
  90. <div class="row">
  91. <div class="col-lg-4 col-6 mb-md-0 mb-3">
  92. <p class="mb-2" style="font-weight: 500; letter-spacing: 1px;"><i class="fal fa-heart-pulse" />
  93. Interests</p>
  94. <ul class="mb-0 pl-4">
  95. <li class="mb-2">content</li>
  96. <li class="mb-2">content</li>
  97. <li class="mb-2">content</li>
  98. <li class="mb-2">content</li>
  99. <li class="mb-2">content</li>
  100. </ul>
  101. </div>
  102. <div class="col-lg-4 col-6 mb-md-0 mb-3">
  103. <p class="mb-2" style="font-weight: 500; letter-spacing: 1px;"><i class="fal fa-heart-crack" />
  104. No Thanks</p>
  105. <ul class="mb-0 pl-4">
  106. <li class="mb-2">content</li>
  107. <li class="mb-2">content</li>
  108. <li class="mb-2">content</li>
  109. <li class="mb-2">content</li>
  110. <li class="mb-2">content</li>
  111. </ul>
  112. </div>
  113. <div class="col-lg-4">
  114. <p class="mb-2" style="font-weight: 500; letter-spacing: 1px;"><i class="fal fa-icons" />
  115. Hobbies</p>
  116. <ul class="mb-0 pl-4">
  117. <li class="mb-2">content</li>
  118. <li class="mb-2">content</li>
  119. <li class="mb-2">content</li>
  120. <li class="mb-2">content</li>
  121. <li class="mb-2">content</li>
  122. </ul>
  123. </div>
  124. </div>
  125. </div></div>
  126. </div>
  127. <!------------------------------------ THIRD TAB ------------------------------------------------------------->
  128. <div class="px-2 pb-3 tab-pane" data-toggle="tab" id="THREE">
  129. <div class="px-3 pt-3 pb-0">
  130. <div class="row no-gutters align-items-center"><div class="col-auto">
  131. <h2 class="text-primary text-uppercase mb-0" style="letter-spacing: 1.5px;">Commissions</h2>
  132. </div><div class="col px-2"></div><div class="col-auto"><h2 class="text-primary mb-0">
  133. <i class="fa-solid fa-pencil-paintbrush" /></h2>
  134. </div></div>
  135. </div><div class="d-block d-md-flex flex-column"><div style="flex: 0 0 205px; min-height: 0px; overflow-y: auto;" class="px-3 pt-3 pb-1">
  136. <div class="row">
  137. <!-------- comm status ------------->
  138. <div class="col-md-6 mb-3">
  139. <div class="justify-content-between">
  140. <span class="muted-title">commissions</span>
  141. <span>closed</span>
  142. </div><hr class="my-1" style="border:none; height: 1px; background: #343a40; opacity: .125;">
  143.  
  144. <div class="justify-content-between">
  145. <span class="muted-title">trades</span>
  146. <span>closed</span>
  147. </div><hr class="my-1" style="border:none; height: 1px; background: #343a40; opacity: .125;">
  148.  
  149. <div class="justify-content-between">
  150. <span class="muted-title">requests</span>
  151. <span>closed</span>
  152. </div>
  153. </div>
  154. <!-------- comm links ------------->
  155. <div class="col-md-6 mb-3">
  156. <a href="LINK_HERE" class="btn btn-secondary rounded-0 btn-block btn-sm m-1">T.o.S.</a>
  157. <a href="LINK_HERE" class="btn btn-secondary rounded-0 btn-block btn-sm m-1">Prices</a>
  158. <a href="LINK_HERE" class="btn btn-secondary rounded-0 btn-block btn-sm m-1">Queue</a>
  159. </div>
  160. </div>
  161.  
  162. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ornare interdum massa, dignissim commodo ipsum dapibus et. Nullam venenatis nunc a tortor consequat, sed efficitur risus bibendum. Integer rhoncus cursus interdum.</p>
  163.  
  164. </div></div>
  165. </div>
  166. <!------------------------------------ FOURTH TAB ------------------------------------------------------------->
  167. <div class="px-2 pb-3 tab-pane" data-toggle="tab" id="FOUR">
  168. <div class="px-3 pt-3 pb-0">
  169. <div class="row no-gutters align-items-center"><div class="col-auto">
  170. <h2 class="text-primary text-uppercase mb-0" style="letter-spacing: 1.5px;">Featured</h2>
  171. </div><div class="col px-2"></div><div class="col-auto"><h2 class="text-primary mb-0">
  172. <i class="fa-solid fa-users" /></h2>
  173. </div></div>
  174. </div><div class="d-block d-md-flex flex-column"><div style="flex: 0 0 205px; min-height: 0px; overflow-y: auto;" class="px-3 pt-3 pb-1">
  175. <div class="row mb-md-0 mb-n3">
  176.  
  177. <!------------------- CHARACTER -------------------------------------->
  178. <div class="col-md-3 col-6 text-center mb-md-0 mb-3">
  179. <img src="IMG_URL"
  180. class="d-block mx-auto mb-1" style="max-height: 150px;">
  181.  
  182. <a href="CHARACTER_LINK" style="font-weight: 500; letter-spacing: .5px;" target="_BLANK">
  183. Character Name</a>
  184. </div>
  185.  
  186. <!------------------- CHARACTER -------------------------------------->
  187. <div class="col-md-3 col-6 text-center mb-md-0 mb-3">
  188. <img src="IMG_URL"
  189. class="d-block mx-auto mb-1" style="max-height: 150px;">
  190.  
  191. <a href="CHARACTER_LINK" style="font-weight: 500; letter-spacing: .5px;" target="_BLANK">
  192. Character Name</a>
  193. </div>
  194.  
  195. <!------------------- CHARACTER -------------------------------------->
  196. <div class="col-md-3 col-6 text-center mb-md-0 mb-3">
  197. <img src="IMG_URL"
  198. class="d-block mx-auto mb-1" style="max-height: 150px;">
  199.  
  200. <a href="CHARACTER_LINK" style="font-weight: 500; letter-spacing: .5px;" target="_BLANK">
  201. Character Name</a>
  202. </div>
  203. <!---------
  204. ---------- CHARACTER -------------------------------------->
  205. <div class="col-md-3 col-6 text-center mb-md-0 mb-3">
  206. <img src="IMG_URL"
  207. class="d-block mx-auto mb-1" style="max-height: 150px;">
  208.  
  209. <a href="CHARACTER_LINK" style="font-weight: 500; letter-spacing: .5px;" target="_BLANK">
  210. Character Name</a>
  211. </div>
  212.  
  213. </div>
  214. </div></div></div>
  215. </div>
  216. </div>
  217. <div class="col-12">
  218. <div class="row no-gutters mx-n2 mb-md-n3" style="letter-spacing: .5px;">
  219. <!-- LINKS HERE --- can be social media links or links to whatever you want -- you can add/remove links they will space themselves -->
  220. <div class="col px-2 mb-3">
  221. <a href="LINK_HERE" class="btn btn-primary btn-block rounded-0 text-uppercase text-white" style="font-weight: 500;">
  222. link</a>
  223. </div>
  224. <div class="col px-2 mb-3">
  225. <a href="LINK_HERE" class="btn btn-primary btn-block rounded-0 text-uppercase text-white" style="font-weight: 500;">
  226. link</a>
  227. </div>
  228. <div class="col px-2 mb-3">
  229. <a href="LINK_HERE" class="btn btn-primary btn-block rounded-0 text-uppercase text-white" style="font-weight: 500;">
  230. link</a>
  231. </div>
  232. <div class="col px-2 mb-3">
  233. <a href="LINK_HERE" class="btn btn-primary btn-block rounded-0 text-uppercase text-white" style="font-weight: 500;">
  234. link</a>
  235. </div>
  236. <!-- CODING CREDIT ------ leave this --------------->
  237. <div class="col px-2 mb-3">
  238. <a href="/pinky" class="btn btn-primary btn-block rounded-0 text-uppercase text-white" style="font-weight: 500;">
  239. HTML</a>
  240. </div>
  241. </div>
  242. </div>
  243. </div></div>
  244. <!-- MOOD IMAGES -- image will scale with screen -- focus will be in the center of the image --->
  245. <div class="col-lg-2 pl-lg-3 mb-n2"><div class="h-100 w-100 d-flex flex-md-column flex-row justify-content-md-between justify-content-center">
  246.  
  247. <div style="background-image: url('IMG_URL');
  248. background-size:cover; background-position:center;" class="flex-grow-1 mb-2"><div style="height: 200px;" class="hidden-lg-up"></div></div>
  249.  
  250. <div style="background-image: url('IMG_URL');
  251. background-size:cover; background-position:center;" class="flex-grow-1 mb-2"><div style="height: 200px;" class="hidden-lg-up"></div></div>
  252.  
  253. <div style="background-image: url('IMG_URL');
  254. background-size:cover; background-position:center;" class="flex-grow-1 mb-2"><div style="height: 200px;" class="hidden-lg-up"></div></div>
  255.  
  256. </div></div>
  257. </div>
  258. </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!