API tools faq
paste
t3ch13-c0l0rs

gadzooks

t3ch13-c0l0rs
Mar 4th, 2023 (edited)
100
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.21 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. good dayyy :3 its 9:38pm on a friday as i type this
  4. roxy won a transgender poll against anne from amphibia and i got bored and was feeling patriotic so i made a code using her as placeholder and an old layout by togo
  5. from the july 2021 coders quarters challenge lol
  6.  
  7. -->
  8.  
  9. <div class="col-md-9 col-sm-12 mx-auto">
  10. <div class="row no-gutters">
  11.  
  12. <!-- sidebar -->
  13.  
  14. <div class="col-md-3 col-sm-12">
  15.  
  16. <!-- pagedoll image thing. i recommend tall transparent images for this 👍 -->
  17. <div class="col-12 px-0 mb-2">
  18. <div class="p-1">
  19. <div style="background-image: url(IMGURLHERE); background-size: cover; min-height: 250px; background-position: top center; background-repeat: no-repeat"></div>
  20. </div>
  21.  
  22. <div class="bg-faded p-2 w-100 h-75 text-primary" style="position: absolute; margin-top: -197px; z-index: -1; box-shadow: 2px 2px;"></div>
  23. </div>
  24.  
  25. <!-- stats -->
  26.  
  27. <div class="col-12 px-0">
  28.  
  29. <!-- name -->
  30. <div class="justify-content-between mb-2">
  31. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  32. <i class="far fa-user text-primary fa-fw"></i>
  33. </div>
  34.  
  35. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  36. <p class="text-body">name surname</p>
  37. </div>
  38. </div>
  39.  
  40. <!-- age -->
  41. <div class="justify-content-between mb-2">
  42. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  43. <i class="far fa-birthday-cake text-primary fa-fw"></i>
  44. </div>
  45.  
  46. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  47. <p class="text-body">#</p>
  48. </div>
  49. </div>
  50.  
  51. <!-- gender -->
  52. <div class="justify-content-between mb-2">
  53. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  54. <i class="far fa-mars-and-venus text-primary fa-fw"></i>
  55. </div>
  56.  
  57. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  58. <p class="text-body">gender</p>
  59. </div>
  60. </div>
  61.  
  62. <!-- prns -->
  63. <div class="justify-content-between mb-2">
  64. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  65. <i class="far fa-message-smile text-primary fa-fw"></i>
  66. </div>
  67.  
  68. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  69. <p class="text-body">prn/prns</p>
  70. </div>
  71. </div>
  72.  
  73. <!-- orientation -->
  74. <div class="justify-content-between mb-2">
  75. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  76. <i class="far fa-venus-mars text-primary fa-fw"></i>
  77. </div>
  78.  
  79. <div class="col p-2 bg-faded text-right text-primary truncate" style="box-shadow: 2px 2px 0px">
  80. <p class="text-body">orient.</p>
  81. </div>
  82. </div>
  83.  
  84. <!-- birthday -->
  85. <div class="justify-content-between mb-2">
  86. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  87. <i class="far fa-calendar-alt text-primary fa-fw"></i>
  88. </div>
  89.  
  90. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  91. <p class="text-body">mm/dd/yy</p>
  92. </div>
  93. </div>
  94.  
  95. <!-- theme, quick explanation on how this works:
  96. youtube urls look like this: https://www.youtube.com/watch?v=RMPX_vgqQnM
  97. we need that last string for this to work.
  98. the last string is the stuff after the watch?v=, so in this case it's the RMPX_vgqQnM
  99. copy and paste that part into the part where it says YTURLHERE.-->
  100. <div class="justify-content-between mb-2">
  101. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  102. <iframe class="flex-fill"
  103. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  104. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  105. allowfullscreen
  106. src="https://www.youtube.com/embed/YTURLHERE">
  107. </iframe>
  108. <i class="far fa-play text-primary fa-fw"></i>
  109. </div>
  110.  
  111. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  112. <p class="text-body">theme name</p>
  113. </div>
  114. </div>
  115.  
  116. <!-- worth -->
  117. <div class="justify-content-between mb-2">
  118. <div class="col-auto p-2 bg-faded mr-1 text-primary" style="box-shadow: 2px 2px 0px">
  119. <i class="far fa-dollar text-primary fa-fw"></i>
  120. </div>
  121.  
  122. <div class="col p-2 bg-faded text-right text-primary" style="box-shadow: 2px 2px 0px">
  123. <p class="text-body">$priceless</p>
  124. </div>
  125. </div>
  126. </div>
  127.  
  128. </div>
  129.  
  130. <!-- the main shit -->
  131.  
  132. <div class="col-md-9 col-sm-12 pl-md-2 pl-sm-0 mt-md-5 mt-sm-0">
  133. <div class="row no-gutters mt-md-2 mt-sm-0">
  134.  
  135. <!-- beeg scrollbox -->
  136.  
  137. <div class="col-12 bg-faded p-2 overflow-auto mb-2 d-block" style="margin-top: 5px; max-height: 300px">
  138.  
  139.  
  140. <!-- title, about -->
  141. <div class="mb-2 p-2 card rounded-0 border-0" style="position: sticky; top: 0">
  142. <p class="mt-1" style="font-size: 25px;">
  143. <span class="bg-primary px-2 display-4 font-weight-bold">A</span> bout
  144. </p>
  145. </div>
  146.  
  147. <!-- write an introduction for your oc -->
  148. <p>
  149. 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.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.
  150. </p>
  151.  
  152. <!-- divider -->
  153.  
  154. <hr>
  155.  
  156. <!-- title, history -->
  157. <div class="mb-2 p-2 card rounded-0 border-0" style="position: sticky; top: 0; z-index: 1">
  158. <p class="mt-1" style="font-size: 25px;">
  159. <span class="bg-primary px-2 display-4 font-weight-bold">H</span> istory
  160. </p>
  161. </div>
  162.  
  163. <!-- write about your oc's childhood. need a paragraph break? <br> is your friend. -->
  164. <div class="col-12 py-1">
  165. <h2>i. Childhood</h2>
  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. <!-- write about your oc's teenage years. -->
  170. <div class="col-12 py-1">
  171. <h2>ii. Adolescence</h2>
  172. 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.
  173. </div>
  174.  
  175. <!-- write about your oc's adult years. -->
  176. <div class="col-12 py-1">
  177. <h2>iii. Adulthood</h2>
  178. 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.
  179. </div>
  180.  
  181. <!-- divider -->
  182. <hr>
  183.  
  184. <!-- title, trivia -->
  185. <div class="mb-2 p-2 card rounded-0 border-0" style="position: sticky; top: 0; z-index: 1">
  186. <p class="mt-1" style="font-size: 25px;">
  187. <span class="bg-primary px-2 display-4 font-weight-bold">T</span> rivia
  188. </p>
  189. </div>
  190.  
  191. <!-- trivia list -->
  192. <div class="col-12 py-1">
  193. <ul class="mb-0">
  194. <li>item 1.</li>
  195. <li>item 2.</li>
  196. <li>item 3.</li>
  197. <li>item 4.
  198. <ul>
  199. <li>sub-item 1.</li>
  200. </ul>
  201. </li>
  202. </ul>
  203. </div>
  204.  
  205. </div>
  206.  
  207. <!-- end of the beeg scrollbox -->
  208.  
  209.  
  210. <div class="col-12">
  211. <div class="row no-gutters">
  212.  
  213. <!-- relationship box -->
  214. <div class="col-md-6 col-sm-12 bg-faded overflow-auto" style="max-height: 255px">
  215.  
  216. <!-- person 1 -->
  217. <div class="p-2">
  218.  
  219. <!-- put oc profile picture here. square/transparent img reccommended -->
  220. <div class="pull-left card border-0 rounded-0 mr-2" style="min-height: 120px; min-width: 120px; background-image: url(IMGURLHERE); background-size: cover; background-position: center top"></div>
  221.  
  222. <!-- put oc name here. place link to their profile here too! -->
  223. <div class="col-auto px-0 text-truncate">
  224. <a href="#" style="font-size: 25px">Name Surname</a>
  225. </div>
  226.  
  227. <!-- progress bar 1. this can say anything tbh i just went w trust since it seemed appropriate -->
  228. <div class="col-auto px-0 mb-1">
  229. <p class="text-center">TRUST</p>
  230. <div class="progress rounded-0">
  231.  
  232. <!-- change the 50% to ur percentage haha -->
  233. <div class="progress-bar" style="width: 50%"></div>
  234. </div>
  235. </div>
  236.  
  237. <!-- percentage bar 2!! honesty -->
  238. <div class="col-auto px-0">
  239. <p class="text-center">HONESTY</p>
  240. <div class="progress rounded-0">
  241.  
  242. <!-- change the 50% to ur percentage haha -->
  243. <div class="progress-bar" style="width: 50%"></div>
  244. </div>
  245. </div>
  246.  
  247. <!-- fas = full / fal = empty -->
  248. <div class="col-12 mt-2 px-0 py-1 text-center text-primary">
  249. <i class="fas fa-heart"></i>
  250. <i class="fas fa-heart"></i>
  251. <i class="fas fa-heart"></i>
  252. <i class="fal fa-heart"></i>
  253. <i class="fal fa-heart"></i>
  254. </div>
  255.  
  256. <!-- write something long here. it does not scroll, it expands -->
  257. <div class="col-12 px-0 card rounded-0 p-2 border-0">
  258. 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. </div>
  259.  
  260. </div>
  261.  
  262. <!-- divider -->
  263. <hr>
  264.  
  265. <!-- person 2 -->
  266. <div class="p-2">
  267.  
  268. <!-- put oc profile picture here -->
  269. <div class="pull-left card border-0 rounded-0 mr-2" style="min-height: 120px; min-width: 120px; background-image: url(IMGURLHERE); background-size: cover; background-position: center top"></div>
  270.  
  271. <!-- put link to oc + name here -->
  272. <div class="col-auto px-0 text-truncate">
  273. <a href="#" style="font-size: 25px">Jake English</a>
  274. </div>
  275.  
  276. <!-- trust bar!!! -->
  277. <div class="col-auto px-0 mb-1">
  278. <p class="text-center">TRUST</p>
  279. <div class="progress rounded-0">
  280.  
  281. <!-- change the 50% to ur percent!! -->
  282. <div class="progress-bar" style="width: 50%"></div>
  283. </div>
  284. </div>
  285.  
  286. <!-- honest bar -->
  287. <div class="col-auto px-0">
  288. <p class="text-center">HONESTY</p>
  289. <div class="progress rounded-0">
  290.  
  291. <!-- change da 50%!!! -->
  292. <div class="progress-bar" style="width: 50%"></div>
  293. </div>
  294. </div>
  295.  
  296. <!-- fas = full / fal = empty -->
  297. <div class="col-12 mt-2 px-0 py-1 text-center text-primary">
  298. <i class="fas fa-heart"></i>
  299. <i class="fas fa-heart"></i>
  300. <i class="fas fa-heart"></i>
  301. <i class="fal fa-heart"></i>
  302. <i class="fal fa-heart"></i>
  303. </div>
  304.  
  305. <!-- write write WRITE!!! -->
  306. <div class="col-12 px-0 card rounded-0 p-2 border-0">
  307. 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. </div>
  308.  
  309. </div>
  310. </div>
  311.  
  312. <!-- flora fauna and all those goodies here -->
  313. <div class="col-md-1 col-sm-12 px-md-1 px-sm-0 py-sm-2 py-md-0">
  314.  
  315. <!-- what flower is ur oc associated with -->
  316. <div class="py-2 bg-faded text-center mb-1 text-primary" style="font-size: 21.2px">
  317. <i class="far fa-flower tooltipster" title="flora"></i>
  318. </div>
  319.  
  320. <!-- what animal is ur oc associated w/ -->
  321. <div class="py-2 bg-faded text-center mb-1 text-primary" style="font-size: 21.2px">
  322. <i class="far fa-paw tooltipster" title="fauna"></i>
  323. </div>
  324.  
  325. <!-- what is your ocs signature item!!! -->
  326. <div class="py-2 bg-faded text-center mb-1 text-primary" style="font-size: 21.2px">
  327. <i class="far fa-backpack tooltipster" title="item"></i>
  328. </div>
  329.  
  330. <!-- what is the feeling associated with ur oc? -->
  331. <div class="py-2 bg-faded text-center mb-1 text-primary" style="font-size: 21.2px">
  332. <i class="far fa-wave-pulse tooltipster" title="feeling"></i>
  333. </div>
  334.  
  335. <!-- what is your oc's element!! -->
  336. <div class="py-2 bg-faded text-center text-primary" style="font-size: 21.2px">
  337. <i class="far fa-sparkles tooltipster" title="element"></i>
  338. </div>
  339. </div>
  340.  
  341. <!-- quote block!!! -->
  342. <div class="col-md-5 col-sm-12 bg-faded p-3">
  343.  
  344. <!-- hidden on mobile cuz i couldnt get it to look good lmfao -->
  345. <div class="p-2 bg-faded hidden-sm-down text-primary pull-left" style="position: absolute; z-index: 1">
  346. <i class="far fa-quote-left"></i>
  347. </div>
  348.  
  349. <!-- put a quote here! keep it short -->
  350. <div class="card bg-faded rounded-0 h-100 p-2 align-items-center">
  351. <p class="m-auto" style="font-size: 15px">quote here lol</p>
  352. </div>
  353.  
  354. <!-- other quotation LOL -->
  355. <div class="justify-content-end text-primary">
  356. <div class="col-auto d-inline-flex p-2 bg-faded mt-n4 hidden-sm-down pull-right" style="z-index: 1; position: absolute;">
  357. <i class="far fa-quote-right"></i>
  358. </div>
  359. </div>
  360.  
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. </div>
  366.  
  367. </div>
  368.  
  369. <!-- ok so thats like the end save for the credits. dont remove those btw its mean -->
  370.  
  371. <div class="justify-content-end">
  372. <a href="/micro-wave" class="tooltipster mx-1" title="code by micro-wave"><i class="fal fa-microwave"></i></a>
  373. <a href="/togo" class="tooltipster ml-1" title="layout by togo"><i class="fal fa-image"></i></a>
  374. </div>
  375. </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!