API tools faq
paste
t3ch13-c0l0rs

new way out

t3ch13-c0l0rs
Nov 7th, 2023 (edited)
194
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.33 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. good morning, hope this suffices. its for coders quarters ^_^
  3. -->
  4.  
  5. <div class="col-lg-6 col-md-10 col-sm-12 mx-auto">
  6.  
  7. <div class="bg-faded card rounded-0 p-2 border-bottom-0">
  8. <div class="row no-gutters">
  9.  
  10. <!-- icon -->
  11. <div class="col-md-4 col-sm-12 card rounded-0 mt-md-n5 ml-md-n5 p-5" style="background-image: url(URLHERE); min-height: 160px; background-size: cover; background-repeat: no-repeat"></div>
  12.  
  13. <!-- stuff -->
  14. <div class="col text-center align-items-center justify-content-center">
  15.  
  16. <div class="text-center">
  17.  
  18. <!-- name -->
  19. <div class="text-muted font-weight-bold" style="font-size: 18pt">FULL NAME</div>
  20.  
  21. <!-- some traits -->
  22. <div style="font-size: 12px">
  23. trait •
  24. trait •
  25. trait
  26. </div>
  27.  
  28. </div>
  29.  
  30. </div>
  31.  
  32. <!-- basics -->
  33. <div class="col-md-4 col-sm-12 card rounded-0 mt-md-n5 mr-n5 p-3" style="height: 160px;">
  34.  
  35. <div class="my-auto">
  36.  
  37. <!-- nickname -->
  38. <div class="justify-content-between mb-1">
  39. <i class="fas fa-comment text-muted fa-fx" style="font-size: 18px"></i>
  40.  
  41. nickname
  42. </div>
  43.  
  44. <!-- gender -->
  45. <div class="justify-content-between mb-1">
  46. <i class="fas fa-venus-mars text-muted fa-fx" style="font-size: 18px"></i>
  47.  
  48. gender
  49. </div>
  50.  
  51. <!-- pronouns -->
  52. <div class="justify-content-between mb-1">
  53. <i class="fas fa-id-card text-muted" style="font-size: 18px"></i>
  54.  
  55. prn/prns
  56. </div>
  57.  
  58. <!-- birthday -->
  59. <div class="justify-content-between mb-1">
  60. <i class="fas fa-calendar-alt text-muted" style="font-size: 18px"></i>
  61.  
  62. birth/date
  63. </div>
  64.  
  65. <!-- age -->
  66. <div class="justify-content-between">
  67. <i class="fas fa-cake text-muted" style="font-size: 18px"></i>
  68.  
  69. age
  70. </div>
  71.  
  72. </div>
  73. </div>
  74.  
  75. </div>
  76. </div>
  77.  
  78. <!-- quote -->
  79. <div class="text-muted my-2">
  80. <div class="row">
  81. <i class="fas fa-quote-left"></i>
  82.  
  83. <div class="col text-center"> quote goes here, can be as long as you want. i'm just doing stuff to test it.</div>
  84.  
  85. <i class="fas fa-quote-right mt-auto"></i>
  86. </div>
  87. </div>
  88.  
  89. <!-- most of the stuff -->
  90. <div class="row no-gutters">
  91.  
  92. <div class="col-lg-8 col-sm-12">
  93.  
  94. <!-- actual tab buttons -->
  95. <div class="col p-0">
  96. <ul class="nav nav-tabs">
  97.  
  98. <li class="nav-item">
  99. <a href="#one" data-toggle="tab" class="nav-link active mx-1" style="border-radius: 0px">1.</a>
  100. </li>
  101. <li class="nav-item">
  102. <a href="#two" data-toggle="tab" class="nav-link mr-1" style="border-radius: 0px">2.</a>
  103. </li>
  104. <li class="nav-item">
  105. <a href="#three" data-toggle="tab" class="nav-link" style="border-radius: 0px">3.</a>
  106. </li>
  107.  
  108. </ul>
  109. </div>
  110.  
  111. <!-- stuff u gotta worry abt -->
  112. <div class="tab-content">
  113.  
  114. <!-- personality -->
  115. <div class="tab-pane active show" id="one">
  116.  
  117. <div class="col bg-faded p-2 card rounded-0 border-top-0">
  118.  
  119. <!-- write an overview -->
  120. <div class="card border-0 rounded-0 overflow-auto p-2 text-justify" style="max-height: 140px;">
  121. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  122. </div>
  123.  
  124. <!-- likes, scrolls horizontally -->
  125. <div class="row no-gutters mt-2">
  126. <div class="col-auto font-weight-bold px-2 text-muted">likes</div>
  127. <div class="col overflow-auto" style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </div>
  128. </div>
  129.  
  130. <!-- dislikes, scrolls horizontally -->
  131. <div class="row no-gutters mb-2 flex-row-reverse">
  132. <div class="col-auto font-weight-bold text-muted px-2">dislikes</div>
  133. <div class="col overflow-auto" style="white-space: nowrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. </div>
  134. </div>
  135.  
  136. <!-- title -->
  137. <div class="row no-gutters">
  138. <div class="px-2 card col-auto border-0 rounded-0 text-muted font-weight-bold mb-n4" style="font-size: 18pt;">PERSONALITY</div>
  139. </div>
  140.  
  141. </div>
  142.  
  143. </div>
  144.  
  145. <!-- backstory -->
  146. <div class="tab-pane" id="two">
  147.  
  148. <div class="col bg-faded p-2 card rounded-0 border-top-0">
  149.  
  150. <!-- part 1 -->
  151. <div class="col-12 bg-faded p-0 text-muted font-weight-bold" style="position: sticky; top: 0; z-index: 1; font-size: 18px">CHILDHOOD
  152. <i class="fas fa-balloons "></i></div>
  153. <div class="card border-0 rounded-0 p-2 text-justify mb-2">
  154. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  155. </div>
  156.  
  157. <!-- part 2 -->
  158. <div class="col-12 bg-faded p-0 text-muted font-weight-bold text-right" style="position: sticky; top: 0; z-index: 1; font-size: 18px"><i class="fas fa-bicycle "></i> ADOLESCENCE</div>
  159. <div class="card border-0 rounded-0 p-2 text-justify mb-2">
  160. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  161. </div>
  162.  
  163. <!-- part 3 -->
  164. <div class="col-12 bg-faded p-0 text-muted font-weight-bold" style="position: sticky; top: 0; z-index: 1; font-size: 18px"> <i class="fas fa-graduation-cap "></i> ADULTHOOD</div>
  165. <div class="card border-0 rounded-0 p-2 text-justify mb-2">
  166. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  167. </div>
  168.  
  169. <!-- add more above this line -->
  170.  
  171. <!-- title -->
  172. <div class="row no-gutters">
  173. <div class="px-2 card col-auto border-0 rounded-0 text-muted font-weight-bold mb-n4" style="font-size: 18pt;">BACKSTORY</div>
  174. </div>
  175.  
  176. </div>
  177.  
  178. </div>
  179.  
  180. <!-- design -->
  181. <div class="tab-pane" id="three">
  182.  
  183. <div class="col bg-faded p-2 card rounded-0 border-top-0">
  184.  
  185. <div class="col-12 bg-faded p-0 text-muted font-weight-bold" style="position: sticky; top: 0; z-index: 1; font-size: 18px">DESIGN
  186. <i class="fas fa-clothes-hanger "></i></div>
  187.  
  188. <!-- reference sheet -->
  189. <div class="card rounded-0 p-2 justify-content-end" style="background-image: url(URLHERE); height: 180px; background-size: cover; background-repeat: no-repeat;">
  190.  
  191. <!-- art credit -->
  192. <a href="#artist" class="text-white tooltipster" title="art by artist"><i class="fas fa-paintbrush"></i></a>
  193. </div>
  194.  
  195. <!-- palette -->
  196. <div class="justify-content-between px-2 my-2">
  197.  
  198. <i class="fas fa-square tooltipster" title="#ff0054" style="color: #ff0054"></i>
  199.  
  200. <i class="fas fa-square tooltipster" title="#fff5f9" style="color: #fff5f9"></i>
  201.  
  202. <i class="fas fa-square tooltipster" title="#f94555" style="color: #f94555"></i>
  203.  
  204. <i class="fas fa-square tooltipster" title="#ff8847" style="color: #ff8847"></i>
  205.  
  206. <i class="fas fa-square tooltipster" title="#ffd947" style="color: #ffd947"></i>
  207.  
  208. <i class="fas fa-square tooltipster" title="#53ff47" style="color: #53ff47"></i>
  209.  
  210. <i class="fas fa-square tooltipster" title="#47daff" style="color: #47daff"></i>
  211.  
  212. <i class="fas fa-square tooltipster" title="#474dff" style="color: #474dff"></i>
  213.  
  214. <i class="fas fa-square tooltipster" title="#bb00ff" style="color: #bb00ff"></i>
  215.  
  216. <i class="fas fa-square tooltipster" title="#ff47ca" style="color: #ff47ca"></i>
  217.  
  218. </div>
  219.  
  220. <!-- border divider thing -->
  221. <div class="my-1 bg-secondary" style="height: 1px"></div>
  222.  
  223. <!-- design notes -->
  224. <ul class="fa-ul px-0 mb-2">
  225. <li><span class="fa-li text-muted"><i class="fas fa-times"></i></span> design</li>
  226. <li><span class="fa-li text-muted"><i class="fas fa-times"></i></span> notes</li>
  227. <li><span class="fa-li text-muted"><i class="fas fa-times"></i></span> go</li>
  228. <li><span class="fa-li text-muted"><i class="fas fa-times"></i></span> here</li>
  229. <li><span class="fa-li text-info"><i class="fas fa-times"></i></span> on important ones change text-muted to text-info!</li>
  230. </ul>
  231.  
  232. <!-- subtitle -->
  233. <div class="col-12 bg-faded p-0 text-muted font-weight-bold" style="position: sticky; top: 0; z-index: 1; font-size: 18px">TRIVIA
  234. <i class="fas fa-exclamation-square"></i></div>
  235.  
  236. <!-- border divider thing -->
  237. <div class="my-1 bg-secondary" style="height: 1px"></div>
  238.  
  239. <!-- list -->
  240. <ul class="fa-ul px-0 mb-2">
  241. <li><span class="fa-li text-muted"><i class="fas fa-caret-right"></i></span> trivia</li>
  242. <li><span class="fa-li text-muted"><i class="fas fa-caret-right"></i></span> notes</li>
  243. <li><span class="fa-li text-muted"><i class="fas fa-caret-right"></i></span> go</li>
  244. <li><span class="fa-li text-muted"><i class="fas fa-caret-right"></i></span> here</li>
  245. <li><span class="fa-li text-muted"><i class="fas fa-caret-right"></i></span> :3c</li>
  246. <li><span class="fa-li text-muted"><i class="fas fa-caret-right"></i></span> yaaay</li>
  247. </ul>
  248.  
  249.  
  250.  
  251. <!-- title -->
  252. <div class="row no-gutters">
  253. <div class="px-2 card col-auto border-0 rounded-0 text-muted font-weight-bold mb-n4" style="font-size: 18pt;">DESIGN & TRIVIA</div>
  254. </div>
  255.  
  256. </div>
  257.  
  258. </div>
  259.  
  260. </div>
  261.  
  262. </div>
  263.  
  264. <!-- pagedoll -->
  265. <div class="col hidden-md-down" style="background-image: url(URLHERE); background-size: cover; height: 260px; position: sticky; top: 0"></div>
  266.  
  267. </div>
  268.  
  269. <!-- playilist -->
  270. <div class="text-muted my-4">
  271.  
  272. <div id="playlist" class="carousel slide">
  273.  
  274. <div class="row">
  275.  
  276. <div class="col-auto"><a data-slide="prev" href="#playlist" class="text-muted"><i class="fas fa-backward"></i></a></div>
  277.  
  278. <div class="carousel-inner col">
  279.  
  280. <!-- song 1 -->
  281. <div class="carousel-item active">
  282. <div class="row no-gutters">
  283.  
  284. <!-- song title -->
  285. <div class="col text-right">song title</div>
  286.  
  287. <!-- play button, put the last part of the string in the URLHERE bit -->
  288. <div class="col-auto text-center px-2"><iframe class="flex-fill"
  289. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  290. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  291. allowfullscreen
  292. src="https://www.youtube.com/embed/URLHERE">
  293. </iframe>
  294. <span style="font-family: times new roman">(►)</span></div>
  295.  
  296. <!-- artist -->
  297. <div class="col">artist</div>
  298. </div>
  299. </div>
  300.  
  301. <!-- song 2 -->
  302. <div class="carousel-item">
  303. <div class="row no-gutters">
  304.  
  305. <div class="col text-right">song title</div>
  306.  
  307. <!-- play button, put last part of the youtube video string in the URLHERE part -->
  308. <div class="col-auto text-center px-2"><iframe class="flex-fill"
  309. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  310. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  311. allowfullscreen
  312. src="https://www.youtube.com/embed/URLHERE">
  313. </iframe>
  314. <span style="font-family: times new roman">(►)</span></div>
  315.  
  316. <div class="col">artist</div>
  317. </div>
  318. </div>
  319.  
  320. <!-- add more above this line -->
  321.  
  322. </div>
  323.  
  324. <div class="col-auto"><a data-slide="next" href="#playlist" class="text-muted"><i class="fas fa-forward"></i></a></div>
  325.  
  326. </div>
  327.  
  328. </div>
  329. </div>
  330.  
  331.  
  332. <!-- relationships -->
  333. <div class="row no-gutters">
  334.  
  335. <!-- r1 -->
  336. <div class="col-md-4 col-sm-12 pl-md-1 mb-1">
  337. <div class="col-12 card rounded-0 bg-faded p-2">
  338.  
  339. <!-- pfp -->
  340. <div class="card rounded-0 border-0 mb-1" style="height: 140px; background-image: url(URLHERE); background-size: cover;"></div>
  341.  
  342. <!-- character link -->
  343. <a href="#" class="text-muted font-weight-bold text-center" style="line-height: 100%">NAME</a>
  344. <!-- relationship -->
  345. <div class="small text-center">relationship</div>
  346.  
  347. <!-- fas = full
  348. fal = empty -->
  349. <div class="text-center text-muted">
  350. <i class="fas fa-heart"></i>
  351. <i class="fas fa-heart"></i>
  352. <i class="fas fa-heart"></i>
  353. <i class="fal fa-heart"></i>
  354. <i class="fal fa-heart"></i>
  355. </div>
  356. </div>
  357. </div>
  358.  
  359. <!-- r2 -->
  360. <div class="col-md-4 col-sm-12 px-md-1 mb-1">
  361. <div class="col-12 card rounded-0 bg-faded p-2">
  362.  
  363. <!-- pfp -->
  364. <div class="card rounded-0 border-0 mb-1" style="height: 140px; background-image: url(URLHERE); background-size: cover;"></div>
  365.  
  366. <!-- character link -->
  367. <a href="#" class="text-muted font-weight-bold text-center" style="line-height: 100%">NAME</a>
  368.  
  369. <!-- rship -->
  370. <div class="small text-center">relationship</div>
  371.  
  372. <!-- fas = full / fal = empty -->
  373. <div class="text-center text-muted">
  374. <i class="fas fa-heart"></i>
  375. <i class="fas fa-heart"></i>
  376. <i class="fas fa-heart"></i>
  377. <i class="fal fa-heart"></i>
  378. <i class="fal fa-heart"></i>
  379. </div>
  380. </div>
  381. </div>
  382.  
  383. <!-- r3 -->
  384. <div class="col-md-4 col-sm-12 pr-md-1 mb-1">
  385. <div class="col-12 card rounded-0 bg-faded p-2">
  386.  
  387. <!-- pfp -->
  388. <div class="card rounded-0 border-0 mb-1" style="height: 140px; background-image: url(URLHERE); background-size: cover;"></div>
  389.  
  390. <!-- character link -->
  391. <a href="#" class="text-muted font-weight-bold text-center" style="line-height: 100%">NAME</a>
  392.  
  393. <!-- rship -->
  394. <div class="small text-center">relationship</div>
  395.  
  396. <!-- fas = full / fal = empty -->
  397. <div class="text-center text-muted">
  398. <i class="fas fa-heart"></i>
  399. <i class="fas fa-heart"></i>
  400. <i class="fas fa-heart"></i>
  401. <i class="fal fa-heart"></i>
  402. <i class="fal fa-heart"></i>
  403. </div>
  404. </div>
  405. </div>
  406.  
  407. </div>
  408.  
  409. <!-- crediiiits -->
  410.  
  411. <div class="text-center">
  412. <a class="text-muted tooltipster" title="code by micro-wave" href="https://toyhou.se/micro-wave"><i class="fas fa-microwave"></i></a>
  413. <a class="text-muted tooltipster" title="icon by name" href="#icon"><i class="fas fa-users-rectangle"></i></a>
  414. <a class="text-muted tooltipster" title="pagedoll by name" href="#pagedoll"><i class="fas fa-person"></i></a>
  415. </div>
  416. </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!