API tools faq
paste
lullahbye

veil (tabs)

lullahbye
Dec 23rd, 2020 (edited)
2,047
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.72 KB | None | 0 0
raw download clone embed print report
  1. <!---
  2.  
  3. ========================================================
  4.  
  5. code by Lullah
  6. colors used:
  7. > bg-light (bootstrap) (border) (text in important box)
  8. > bg-faded (profile content box)
  9. > bg-secondary (hr)
  10.  
  11. > bg-danger (important box in design tab)
  12.  
  13. You may...
  14. > Edit this code to oblivion!
  15. > Recycle parts for your own use!
  16.  
  17. You may not...
  18. > Remove my watermark!
  19.  
  20. ========================================================
  21.  
  22. --->
  23.  
  24. <div class="container" style="max-width:950px;">
  25. <div class="rounded p-1 bg-faded" style=";">
  26. <div class="row no-gutters" style="font-size:0.9em;">
  27.  
  28. <div class="col-md-4 p-1">
  29.  
  30. <!----SIDEBAR BACKGROUND IMAGE---->
  31. <!----note that if your background image is too dark, you may need to change the text color---->
  32. <!----this is a bootstrap solution to that (works on all themes); please add text-light to the class="" section of the div element right below! i.e class="rounded px-3 py-2 d-flex text-light"---->
  33. <div class="rounded px-3 py-2 d-flex"
  34. style="height:500px;
  35.  
  36. background-image:url(URL);
  37.  
  38. overflow:auto;background-repeat:no-repeat;background-attachment:fixed;box-shadow: inset 0 0 0 1000px rgba(255,255,255,.3);">
  39.  
  40. <div class="m-auto">
  41. <!----NAME---->
  42. <div class="text-center" style="font-size:1.8em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">Canary</div>
  43. <!----AVATAR IMAGE---->
  44. <div class="rounded-circle mx-auto"
  45. style="height:165px;width:165px;
  46.  
  47. background-image:url(https://placeholder.com/250);
  48.  
  49. background-size:cover;"></div>
  50.  
  51. <!----TRAITx3---->
  52. <div class="text-center mt-1" style="font-size:0.85em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  53. trait / trait / trait</div>
  54.  
  55. <!----NAVIGATION BUTTONS---->
  56. <ul class="nav flex-column" style=";">
  57. <li class="mt-2 nav-item card text-uppercase rounded-0 border-0" style="height:30px;letter-spacing:0.5px;">
  58. <a class="m-auto nav-link active" style="color:#;" href="#profile" data-toggle="tab">About</a></li>
  59. <li class="mt-1 nav-item card text-uppercase rounded-0 border-0" style="height:30px;letter-spacing:0.5px;">
  60. <a class="m-auto nav-link" style="color:#;" href="#notes" data-toggle="tab">Design Notes</a></li>
  61. <li class="mt-1 nav-item card text-uppercase rounded-0 border-0" style="height:30px;letter-spacing:0.5px;">
  62. <a class="m-auto nav-link" style="color:#;" href="#relationships" data-toggle="tab">Relationships</a></li>
  63. <li class="mt-1 nav-item card text-uppercase rounded-0 border-0" style="height:30px;letter-spacing:0.5px;">
  64. <a class="m-auto nav-link" style="color:#;" href="#moodboard" data-toggle="tab">Moodboard</a></li>
  65. </ul>
  66. </div>
  67. </div>
  68.  
  69. </div>
  70.  
  71. <div class="col-md-8 p-1">
  72. <div class="tab-content bg-faded rounded px-3 py-2" style="height:500px;overflow:auto;">
  73.  
  74. <!----PROFILE TAB---->
  75. <div class="tab-pane fade active show" id="profile">
  76. <!----PROFILE---->
  77. <div style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">Profile</div><hr class="my-1 bg-secondary">
  78. <div class="row" style=";">
  79. <!----PROFILE CONTENT---->
  80. <div class="col-md-6">
  81. <div class="justify-content-between">
  82. <span>Name</span>
  83. <span>Info</span></div>
  84. <div class="justify-content-between">
  85. <span>Nickname</span>
  86. <span>Info</span></div>
  87. <div class="justify-content-between">
  88. <span>Age</span>
  89. <span>Info</span></div>
  90. <div class="justify-content-between">
  91. <span>Pronouns</span>
  92. <span>Info</span></div>
  93. </div>
  94. <div class="col-md-6">
  95. <div class="justify-content-between">
  96. <span>Height</span>
  97. <span>Info</span></div>
  98. <div class="justify-content-between">
  99. <span>Species</span>
  100. <span>Info</span></div>
  101. <div class="justify-content-between">
  102. <span>Occupation</span>
  103. <span>Info</span></div>
  104. <div class="justify-content-between">
  105. <span>Voice</span>
  106. <span><a href="">Info</a></span></div>
  107. </div>
  108.  
  109. </div>
  110.  
  111. <!----SUMMARY---->
  112. <div class="mt-2" style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">Summary</div><hr class="my-1 bg-secondary">
  113. <div class="row" style=";">
  114. <div class="col-md-6">
  115. <div class="justify-content-between">
  116. <span>Fitness</span>
  117. <span><i class="fas fa-circle fa-xs"></i>
  118. <i class="fas fa-circle fa-xs"></i>
  119. <i class="fas fa-circle fa-xs"></i>
  120. <i class="far fa-circle fa-xs"></i>
  121. <i class="far fa-circle fa-xs"></i></span></div>
  122. <div class="justify-content-between">
  123. <span>Patience</span>
  124. <span><i class="fas fa-circle fa-xs"></i>
  125. <i class="fas fa-circle fa-xs"></i>
  126. <i class="fas fa-circle fa-xs"></i>
  127. <i class="far fa-circle fa-xs"></i>
  128. <i class="far fa-circle fa-xs"></i></span></div>
  129. <div class="justify-content-between">
  130. <span>Moral</span>
  131. <span><i class="fas fa-circle fa-xs"></i>
  132. <i class="fas fa-circle fa-xs"></i>
  133. <i class="fas fa-circle fa-xs"></i>
  134. <i class="far fa-circle fa-xs"></i>
  135. <i class="far fa-circle fa-xs"></i></span></div>
  136. </div>
  137. <div class="col-md-6">
  138. <div class="justify-content-between">
  139. <span>Intelligence</span>
  140. <span><i class="fas fa-circle fa-xs"></i>
  141. <i class="fas fa-circle fa-xs"></i>
  142. <i class="fas fa-circle fa-xs"></i>
  143. <i class="far fa-circle fa-xs"></i>
  144. <i class="far fa-circle fa-xs"></i></span></div>
  145. <div class="justify-content-between">
  146. <span>Perception</span>
  147. <span><i class="fas fa-circle fa-xs"></i>
  148. <i class="fas fa-circle fa-xs"></i>
  149. <i class="fas fa-circle fa-xs"></i>
  150. <i class="far fa-circle fa-xs"></i>
  151. <i class="far fa-circle fa-xs"></i></span></div>
  152. <div class="justify-content-between">
  153. <span>Charisma</span>
  154. <span><i class="fas fa-circle fa-xs"></i>
  155. <i class="fas fa-circle fa-xs"></i>
  156. <i class="fas fa-circle fa-xs"></i>
  157. <i class="far fa-circle fa-xs"></i>
  158. <i class="far fa-circle fa-xs"></i></span></div>
  159. </div>
  160. </div>
  161. <div class="mt-1" style="">
  162. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  163. </div>
  164.  
  165. <!----PREFERENCES---->
  166. <div class="mt-2" style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">Preferences</div><hr class="my-1 bg-secondary">
  167. <div class="row">
  168. <!----LIKES---->
  169. <div class="col-md-6">
  170. <div style="font-size:1.2em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">Likes</div>
  171. <ul>
  172. <li>one</li>
  173. <li>one</li>
  174. <li>one</li>
  175. </ul>
  176. </div>
  177. <!----DISLIKES---->
  178. <div class="col-md-6">
  179. <div style="font-size:1.2em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">Dislikes</div>
  180. <ul>
  181. <li>one</li>
  182. <li>one</li>
  183. <li>one</li>
  184. </ul>
  185. </div>
  186. </div>
  187.  
  188. </div>
  189.  
  190. <!----DESIGN NOTES TAB---->
  191. <div class="tab-pane fade" id="notes">
  192. <div class="bg-danger text-light rounded px-3 py-2">
  193.  
  194. <div class="text-center" style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  195. <i class="fas fa-exclamation-triangle mx-1"></i>IMPORTANT<i class="fas fa-exclamation-triangle mx-1"></i>
  196. </div><hr class="my-1">
  197. <!----IMPORTANT DESCRIPTION or summary of what to pay attention to---->
  198. <div>General important notes, followed by important bullet points (note that unlike everything else in this code, this box doesn't scroll and instead expands when you write more into it):
  199. <ul class="mb-1" style=";">
  200. <li>one</li>
  201. <li>one</li>
  202. <li>one</li>
  203. </ul>
  204. </div>
  205.  
  206. </div>
  207.  
  208. <!----you don't have to use everything in here; you can just use text or just bullet points!---->
  209. <!----ITEM 1---->
  210. <!----ITEM 1 NAME---->
  211. <div class="mt-2" style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  212. Item 1</div><hr class="my-1 bg-secondary">
  213. <div class="row no-gutters">
  214. <div class="col-8" style="height:170px;overflow:auto;">
  215. <!----ITEM 1 DESCRIPTION---->
  216. <div>Text description, followed by important bullet points:
  217. <ul class="mb-0">
  218. <li>one</li>
  219. <li>pne</li>
  220. <li>one</li>
  221. </ul></div>
  222. </div>
  223. <div class="col-4 pl-md-2">
  224. <!----ITEM 1 IMAGE---->
  225. <div class="rounded" style="height:170px;
  226.  
  227. background-image:url(https://placeholder.com/250);
  228.  
  229. background-size:cover;background-position:center;"></div>
  230. </div>
  231. </div>
  232.  
  233. <!----ITEM 2---->
  234. <!----ITEM 2 NAME---->
  235. <div class="mt-2" style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  236. Item 2</div><hr class="my-1 bg-secondary">
  237. <div class="row no-gutters">
  238. <div class="col-8" style="height:170px;overflow:auto;">
  239. <!----ITEM 2 DESC---->
  240. <div>Text description, followed by important bullet points:
  241. <ul class="mb-0">
  242. <li>one</li>
  243. <li>pne</li>
  244. <li>one</li>
  245. </ul></div>
  246. </div>
  247. <div class="col-4 pl-md-2">
  248. <!----ITEM 2 IMAGE---->
  249. <div class="rounded" style="height:170px;
  250.  
  251. background-image:url(https://placeholder.com/250);
  252.  
  253. background-size:cover;background-position:center;"></div>
  254. </div>
  255. </div>
  256.  
  257. <!----ITEM 3---->
  258. <!----ITEM 3 NAME---->
  259. <div class="mt-2" style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  260. Item 3</div><hr class="my-1 bg-secondary">
  261. <div class="row no-gutters">
  262. <div class="col-8" style="height:170px;overflow:auto;">
  263. <!----ITEM 3 DESC---->
  264. <div>Text description, followed by important bullet points:
  265. <ul class="mb-0">
  266. <li>one</li>
  267. <li>pne</li>
  268. <li>one</li>
  269. </ul></div>
  270. </div>
  271. <div class="col-4 pl-md-2">
  272. <!----ITEM 3 IMAGE---->
  273. <div class="rounded" style="height:170px;
  274.  
  275. background-image:url(https://placeholder.com/250);
  276.  
  277. background-size:cover;background-position:center;"></div>
  278. </div>
  279. </div>
  280.  
  281. <!----ADD MORE ABOVE HERE---->
  282. <!----coder note: this useless-looking bit is used to space the content so that when it scrolls it still has a blank space beneath the above content!---->
  283. <div class="mt-2"></div>
  284.  
  285. </div>
  286.  
  287. <!---RELATIONSHIP TAB---->
  288. <div class="tab-pane fade" id="relationships">
  289. <div class="row no-gutters">
  290.  
  291. <!----CHARACTER 1---->
  292. <div class="col-8" style="height:175px;overflow:auto;">
  293. <!----NAME---->
  294. <div style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  295. <a href="#LINK">Name</a>
  296. ("Nickname") or (Status)</div><hr class="my-1 bg-secondary">
  297. <!----HEARTS---->
  298. <div class="" style="font-size:1em;">
  299. <i class="fas fa-heart fa-xs"></i>
  300. <i class="fas fa-heart fa-xs"></i>
  301. <i class="fas fa-heart fa-xs"></i>
  302. <i class="far fa-heart fa-xs"></i>
  303. <i class="far fa-heart fa-xs"></i>
  304. </div>
  305. <!----DESCRIPTION---->
  306. <div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  307. </div>
  308. <div class="col-4 pl-md-2">
  309. <!----CHARACTER 1 ICON---->
  310. <div class="rounded" style="height:175px;
  311.  
  312. background-image:url(https://placeholder.com/250);
  313.  
  314. background-position:center;background-size:cover;"></div>
  315. </div>
  316.  
  317. <!----CHARACTER 2---->
  318. <div class="col-8 mt-2" style="height:175px;overflow:auto;">
  319. <!----NAME---->
  320. <div style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  321. <a href="#LINK">Name</a>
  322. ("Nickname") or (Status)</div><hr class="my-1 bg-secondary">
  323. <!----HEARTS---->
  324. <div class="" style="font-size:1em;">
  325. <i class="fas fa-heart fa-xs"></i>
  326. <i class="far fa-heart fa-xs"></i>
  327. <i class="far fa-heart fa-xs"></i>
  328. <i class="far fa-heart fa-xs"></i>
  329. <i class="far fa-heart fa-xs"></i>
  330. </div>
  331. <!----DESCRIPTION---->
  332. <div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  333. </div>
  334. <div class="col-4 pl-md-2 mt-2">
  335. <!----CHARACTER 2 ICON---->
  336. <div class="rounded" style="height:175px;
  337.  
  338. background-image:url(https://placeholder.com/250);
  339.  
  340. background-position:center;background-size:cover;"></div>
  341. </div>
  342.  
  343. <!----CHARACTER 3---->
  344. <div class="col-8 mt-2" style="height:175px;overflow:auto;">
  345. <!----NAME---->
  346. <div style="font-size:1.6em;font-weight:lighter;font-variant:small-caps;letter-spacing:0.5px;">
  347. <a href="#LINK">Name</a>
  348. ("Nickname") or (Status)</div><hr class="my-1 bg-secondary">
  349. <!----HEARTS---->
  350. <div class="" style="font-size:1em;">
  351. <i class="fas fa-heart fa-xs"></i>
  352. <i class="fas fa-heart fa-xs"></i>
  353. <i class="fas fa-heart fa-xs"></i>
  354. <i class="far fa-heart fa-xs"></i>
  355. <i class="far fa-heart fa-xs"></i>
  356. </div>
  357. <!----DESCRIPTION---->
  358. <div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  359. </div>
  360. <div class="col-4 pl-md-2 mt-2">
  361. <!----CHARACTER 3 ICON---->
  362. <div class="rounded" style="height:175px;
  363.  
  364. background-image:url(https://placeholder.com/250);
  365.  
  366. background-position:center;background-size:cover;"></div>
  367. </div>
  368.  
  369. <!----ADD MORE ABOVE HERE---->
  370. </div>
  371. <!----coder note: this useless-looking bit is used to space the content so that when it scrolls it still has a blank space beneath the above content!---->
  372. <div class="mt-2"></div>
  373. </div>
  374.  
  375. <!---MOODBOARD TAB---->
  376. <div class="tab-pane fade" id="moodboard">
  377.  
  378. <div class="row no-gutters">
  379. <!---IMAGE 1--->
  380. <div class="col-4 mt-2"><div class="rounded" style="height:232px;
  381.  
  382. background-image:url(https://placeholder.com/250);
  383.  
  384. background-size:cover;background-position:center;"></div></div>
  385. <!---IMAGE 2--->
  386. <div class="col-4 px-1 mt-2"><div class="rounded" style="height:232px;
  387.  
  388. background-image:url(https://placeholder.com/250);
  389.  
  390. background-size:cover;background-position:center;"></div></div>
  391. <!---IMAGE 3--->
  392. <div class="col-4 mt-2"><div class="rounded" style="height:232px;
  393.  
  394. background-image:url(https://placeholder.com/250);
  395.  
  396. background-size:cover;background-position:center;"></div></div>
  397.  
  398. <!---IMAGE 4--->
  399. <div class="col-4 mt-1"><div class="rounded" style="height:232px;
  400.  
  401. background-image:url(https://placeholder.com/250);
  402.  
  403. background-size:cover;background-position:center;"></div></div>
  404. <!---IMAGE 5--->
  405. <div class="col-4 px-1 mt-1"><div class="rounded" style="height:232px;
  406.  
  407. background-image:url(https://placeholder.com/250);
  408.  
  409. background-size:cover;background-position:center;"></div></div>
  410. <!---IMAGE 6--->
  411. <div class="col-4 mt-1"><div class="rounded" style="height:232px;
  412.  
  413. background-image:url(https://placeholder.com/250);
  414.  
  415. background-size:cover;background-position:center;"></div></div>
  416. </div>
  417.  
  418. </div>
  419.  
  420. </div>
  421. </div>
  422.  
  423. </div>
  424. </div>
  425. <!----credit pls dont remove thx---->
  426. <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>
  427. </div>
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!