API tools faq
paste
Advertisement
lullahbye

character wardrobe (clickable moodboard)

lullahbye
Jan 7th, 2021 (edited)
391
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.59 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. ========================================================
  4.  
  5. code by Lullah
  6. colors used:
  7. > bg-primary (bootstrap) (header, hr)
  8. > btn-primary (bootstrap) (carousel corner buttons)
  9. > badge-primary (bootstrap) (key items)
  10. > btn-default (bootstrap) (clickable links on each moodboard photo)
  11.  
  12. NOTE:
  13. > Everyone's style of proportions is different; if you want to change the height of the
  14. carousels to match your drawing/art better, please CTRL+F and replace these heights:
  15. > max-height:552px (left and right columns)
  16. > height: 552px (all the carousel images)
  17. > And as always, everything in this code is completely optional! Edit it to suit your needs!
  18.  
  19. You may...
  20. > Edit this code to oblivion!
  21. > Recycle parts for your own use!
  22.  
  23. You may not...
  24. > Remove my watermark!
  25.  
  26. ========================================================
  27.  
  28. --->
  29.  
  30. <div class="container" style="max-width:850px;font-size:0.9em;">
  31. <div class="rounded bg-primary px-2 py-1 text-center text-white" style="font-size:1.2em;letter-spacing:1px;;">
  32. <div>
  33. <!--- TITLE --->
  34. <i class="fas fa-dove"></i>Canary's Wardrobe</div>
  35. </div>
  36.  
  37. <div class="row no-gutters">
  38. <!--- DESCRIPTIVE (LEFT) COLUMN --->
  39. <!--- this entire box scrolls after you've hit a certain height! --->
  40. <div class="col-md-4 mt-1" style="max-height:552px;;overflow:auto;">
  41.  
  42. <div class="bg-faded rounded px-2 py-1">
  43. <!--- PHYSICAL INFORMATION --->
  44. <div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Physical Information</div><hr class="bg-primary mb-0 mt-1">
  45. <div style=";">
  46. <!--- PHYSICAL INFORMATION CONTENT --->
  47. <div class="justify-content-between mt-1">
  48. <span>Height</span>
  49. <span>165cm</span>
  50. </div>
  51. <div class="justify-content-between mt-1">
  52. <span>Weight</span>
  53. <span>55kg</span>
  54. </div>
  55. <div class="justify-content-between mt-1">
  56. <span>Body Type</span>
  57. <span>Slim</span>
  58. </div>
  59. <!--- ADD MORE ABOVE HERE --->
  60. </div>
  61. </div>
  62.  
  63. <div class="bg-faded rounded px-2 py-1 mt-1">
  64. <!--- STYLE PREFERENCE --->
  65. <div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Style Preference</div><hr class="bg-primary mb-0 mt-1">
  66. <div style=";">
  67. <!--- STYLE PREFERENCE CONTENT --->
  68. <!--- Key items --->
  69. <!--- these take up a lot of space so keep that in mind! --->
  70. <div>Key Items</div>
  71. <div style="font-size:1.25em;">
  72. <span class="badge badge-primary badge-pill">item 1</span>
  73. <span class="badge badge-primary badge-pill">item 2</span>
  74. <span class="badge badge-primary badge-pill">item 3</span>
  75. <span class="badge badge-primary badge-pill">item 4</span>
  76. </div>
  77. <!--- LIKES --->
  78. <div class="mt-1">Likes</div>
  79. <ul class="m-0">
  80. <li>one</li>
  81. <li>one</li>
  82. <li>one</li>
  83. </ul>
  84. <!--- DISLIKES --->
  85. <div class="mt-1">Dislikes</div>
  86. <ul class="m-0">
  87. <li>one</li>
  88. <li>one</li>
  89. <li>one</li>
  90. </ul>
  91. </div></div>
  92.  
  93. <div class="bg-faded rounded px-2 py-1 mt-1">
  94. <!--- COLOR SCHEME --->
  95. <div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Color Scheme</div><hr class="bg-primary mb-0 mt-1">
  96. <div class="row no-gutters mt-1">
  97. <!--- COLOR SCHEME BARS --->
  98. <!--- the first and last col should always be rounded-left and rounded-right!! --->
  99. <!--- copy and paste the divs with plain col classes! it'll automatically adjust itself! --->
  100. <div class="col rounded-left" style="height:40px;background-color:#fff;"></div>
  101. <div class="col" style="height:40px;background-color:#c9c9c9;"></div>
  102. <div class="col" style="height:40px;background-color:#7f7f7f;"></div>
  103. <div class="col" style="height:40px;background-color:#262626;"></div>
  104. <div class="col rounded-right" style="height:40px;background-color:#000;"></div>
  105. <!--- add more above here! --->
  106. </div>
  107. </div>
  108.  
  109. <div class="bg-faded rounded px-2 py-1 mt-1">
  110. <!--- NOTES --->
  111. <div style="font-size:1.1em;letter-spacing:0.5px;font-weight:lighter;">Notes</div><hr class="bg-primary mb-0 mt-1">
  112. <div style=";">
  113. <!--- NOTES CONTENT --->
  114. <ul class="m-0">
  115. <li>one</li>
  116. <li>one</li>
  117. <li>one</li>
  118. </ul>
  119. </div>
  120. </div>
  121.  
  122. </div>
  123.  
  124. <!--- CAROUSEL (MIDDLE) COLUMN) --->
  125. <div class="col-md-4 mt-1 px-md-1">
  126. <div id="outfit-carousel" class="carousel slide" data-ride="carousel">
  127.  
  128. <!--- CAROUSEL --->
  129. <!--- please don't write too much on the buttons, they will break! --->
  130. <div class="carousel-inner">
  131. <!--- FIRST CAROUSEL --->
  132. <div class="carousel-item active">
  133. <!--- FOCAL IMAGE --->
  134. <div class="rounded" style="height:552px;
  135.  
  136. background-image:url(https://via.placeholder.com/550);
  137.  
  138. background-size:cover;background-position:center;"></div>
  139. <div class="" style="position:absolute;bottom:5px;right:5px;opacity:90%;"><a class="btn btn-primary px-4 py-1" data-toggle="tooltip" style="max-width:100%;overflow:auto;"
  140.  
  141. title="add additional notes here!"
  142. href="#url">
  143. main outfit</a>
  144. </div>
  145. </div>
  146.  
  147. <!--- SECOND CAROUSEL --->
  148. <div class="carousel-item">
  149. <!--- FOCAL IMAGE --->
  150. <div class="rounded" style="height:552px;
  151.  
  152. background-image:url(https://via.placeholder.com/550);
  153.  
  154. background-size:cover;background-position:center;"></div>
  155. <div class="" style="position:absolute;bottom:5px;right:5px;opacity:90%;"><a class="btn btn-primary px-4 py-1" data-toggle="tooltip" style="max-width:100%;overflow:auto;"
  156.  
  157. title="add additional notes here!"
  158. href="#URL">
  159. secondary outfit</a>
  160. </div>
  161. </div>
  162.  
  163. <!--- THIRD CAROUSEL --->
  164. <div class="carousel-item">
  165. <!--- FOCAL IMAGE --->
  166. <div class="rounded" style="height:552px;
  167.  
  168. background-image:url(https://via.placeholder.com/550);
  169.  
  170. background-size:cover;background-position:center;"></div>
  171. <div class="" style="position:absolute;bottom:5px;right:5px;opacity:90%;"><a class="btn btn-primary px-4 py-1" data-toggle="tooltip" style="max-width:100%;overflow:auto;"
  172.  
  173. title="add additional notes here!"
  174. href="#URL">
  175. tertiary outfit</a>
  176. </div>
  177. </div>
  178.  
  179. <!--- add more above here! --->
  180. </div>
  181.  
  182. <!--- carousel controls! don't touch! --->
  183. <a class="carousel-control-prev" href="#outfit-carousel" role="button" data-slide="prev">
  184. <span class="carousel-control-prev-icon"></span>
  185. </a>
  186. <a class="carousel-control-next" href="#outfit-carousel" role="button" data-slide="next">
  187. <span class="carousel-control-next-icon"></span>
  188. </a>
  189. </div>
  190. </div>
  191.  
  192. <!--- MOODBOARD (RIGHT) COLUMN --->
  193. <!--- this entire box scrolls after you've hit a certain height! --->
  194. <div class="col-md-4 mt-1" style="max-height:552px;overflow:auto;">
  195. <div class="row no-gutters">
  196. <!--- MOODBOARD / OUTFIT INSPOS --->
  197. <div class="col-6">
  198. <!--- IMAGE --->
  199. <div class="rounded" style="height:135px;
  200.  
  201. background-image:url(https://via.placeholder.com/150);
  202.  
  203. background-size:cover;background-position:center;"></div>
  204. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  205. href="#URL"><i class="fas fa-share"></i></a></div>
  206. </div>
  207. <div class="col-6 pl-1">
  208. <!--- IMAGE --->
  209. <div class="rounded" style="height:135px;
  210.  
  211. background-image:url(https://via.placeholder.com/150);background-size:cover;
  212.  
  213. background-position:center;"></div>
  214. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  215. href="#URL"><i class="fas fa-share"></i></a></div>
  216. </div>
  217. <div class="col-6 mt-1">
  218. <!--- IMAGE --->
  219. <div class="rounded" style="height:135px;
  220.  
  221. background-image:url(https://via.placeholder.com/150);
  222.  
  223. background-size:cover;background-position:center;"></div>
  224. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  225. href="#URL"><i class="fas fa-share"></i></a></div>
  226. </div>
  227. <div class="col-6 pl-1 mt-1">
  228. <!--- IMAGE --->
  229. <div class="rounded" style="height:135px;
  230.  
  231. background-image:url(https://via.placeholder.com/150);
  232.  
  233. background-size:cover;background-position:center;"></div>
  234. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  235. href="#URL"><i class="fas fa-share"></i></a></div>
  236. </div>
  237. <div class="col-6 mt-1">
  238. <!--- IMAGE --->
  239. <div class="rounded" style="height:135px;
  240.  
  241. background-image:url(https://via.placeholder.com/150);
  242.  
  243. background-size:cover;background-position:center;"></div>
  244. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  245. href="#URL"><i class="fas fa-share"></i></a></div>
  246. </div>
  247. <div class="col-6 pl-1 mt-1">
  248. <!--- IMAGE --->
  249. <div class="rounded" style="height:135px;
  250.  
  251. background-image:url(https://via.placeholder.com/150);
  252.  
  253. background-size:cover;background-position:center;"></div>
  254. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  255. href="#URL"><i class="fas fa-share"></i></a></div>
  256. </div>
  257. <div class="col-6 mt-1">
  258. <!--- IMAGE --->
  259. <div class="rounded" style="height:135px;
  260.  
  261. background-image:url(https://via.placeholder.com/150);
  262.  
  263. background-size:cover;background-position:center;"></div>
  264. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  265. href="#URL"><i class="fas fa-share"></i></a></div>
  266. </div>
  267. <div class="col-6 pl-1 mt-1">
  268. <!--- IMAGE --->
  269. <div class="rounded" style="height:135px;
  270.  
  271. background-image:url(https://via.placeholder.com/150);
  272.  
  273. background-size:cover;background-position:center;"></div>
  274. <div style="position:absolute;bottom:0px;right:0px;"><a class="btn btn-default px-2 py-1"
  275. href="#URL"><i class="fas fa-share"></i></a></div>
  276. </div>
  277. <!--- ADD MORE IMAGES ABOVE HERE!! --->
  278. </div>
  279. </div>
  280. </div>
  281.  
  282. <!--- credits dont touch pls thx --->
  283. <div class="text-right" style="font-size:0.9em"><a class="tooltipster" title="code by lullah" href="lullah"><i class="fas fa-paw"></i></a></div>
  284. </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!