API tools faq
paste
t3ch13-c0l0rs

elsewhere

t3ch13-c0l0rs
Apr 28th, 2023
331
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.54 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. welcome to This Code.
  3. -->
  4.  
  5. <div class="col-md-8 col-lg-6 col-sm-12 mx-auto">
  6.  
  7. <div class="bg-faded">
  8. <div class="row no-gutters p-2">
  9.  
  10. <!-- profile picture, keep it square -->
  11. <div class="col card border-0 rounded-0 p-2 ml-md-n5 mt-md-n5 m-sm-0 h-100">
  12. <img src="IMGURLHERE">
  13. </div>
  14.  
  15. <!-- name and title -->
  16. <div class="col-md-12 col-lg-9 col-sm-12 pl-md-1 pl-sm-0">
  17. <div class="card rounded-0 border-0 p-2 text-monospace text-muted">
  18. <div class="justify-content-between">
  19. NAME SURNAME
  20. <p class="font-italic faded">title here...</p></div>
  21. </div>
  22.  
  23.  
  24. <!-- basic info -->
  25. <div class="col-12 text-monospace p-0">
  26. <div class="row no-gutters">
  27.  
  28. <!-- nickname -->
  29. <div class="col-md-6 col-sm-12 p-1 px-2">
  30. <div class="justify-content-between text-muted">
  31. <span class="faded text-uppercase">nickname:</span>
  32. <span class="text-right">nami</span>
  33. </div>
  34. </div>
  35.  
  36. <!-- age -->
  37. <div class="col-md-6 col-sm-12 p-1 px-2">
  38. <div class="justify-content-between text-muted">
  39. <span class="faded text-uppercase">age:</span>
  40. <span class="text-right">#</span>
  41. </div>
  42. </div>
  43.  
  44. <!-- gender -->
  45. <div class="col-md-6 col-sm-12 p-1 px-2">
  46. <div class="justify-content-between text-muted">
  47. <span class="faded text-uppercase">gender:</span>
  48. <span class="text-right">null</span>
  49. </div>
  50. </div>
  51.  
  52. <!-- pronouns -->
  53. <div class="col-md-6 col-sm-12 p-1 px-2">
  54. <div class="justify-content-between text-muted">
  55. <span class="faded text-uppercase">PRNS:</span>
  56. <span class="text-right">any/all</span>
  57. </div>
  58. </div>
  59.  
  60. <!-- birthday -->
  61. <div class="col-md-6 col-sm-12 p-1 px-2">
  62. <div class="justify-content-between text-muted">
  63. <span class="faded text-uppercase">BIRTHDAY:</span>
  64. <span class="text-right">mm/dd/yy</span>
  65. </div>
  66. </div>
  67.  
  68. <!-- species -->
  69. <div class="col-md-6 col-sm-12 p-1 px-2">
  70. <div class="justify-content-between text-muted">
  71. <span class="faded text-uppercase">SPECIES:</span>
  72. <span class="text-right">animal</span>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78.  
  79. </div>
  80.  
  81. <!-- quote divider thing idk -->
  82. <div class="card p-2 rounded-0 border-secondary border text-muted text-monospace" style="border-left: none; border-right: none">
  83. <div class="justify-content-between">
  84. <div class="col-auto text-left"><i class="far fa-quote-left"></i></div>
  85. <div class="col text-center text-uppercase">PUT THE QUOTE HERE..</div>
  86. <div class="col-auto text-right mt-auto"><i class="far fa-quote-right"></i></div>
  87. </div>
  88. </div>
  89.  
  90.  
  91. <!-- about -->
  92. <div class="row no-gutters p-2">
  93. <div class="col-md-7 col-sm-12">
  94. <div class="card rounded-0 p-2 text-muted text-monospace">
  95. <p>
  96. <i class="far fa-horse"></i>
  97. <span class="mt-2">ABOUT</span>
  98. </p>
  99. </div>
  100.  
  101. <!-- write an introduction on your character here -->
  102. <div class="p-2 text-justify">
  103. <p>
  104. 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.
  105. </p>
  106.  
  107. <p>
  108. 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.
  109. </p>
  110. </div>
  111. </div>
  112.  
  113. <!-- side image -->
  114. <div class="col p-2 card border-0 rounded-0 mr-md-n5 ml-md-4 m-sm-0" style="max-height: 400px; position: sticky; top: 0">
  115. <div class="h-100 w-100" style="background-image: url(IMGURHERE); background-size: cover"></div>
  116. </div>
  117. </div>
  118.  
  119.  
  120. <!-- storytime -->
  121. <div class="p-2">
  122. <div class="col-12 card p-2 rounded-0 text-muted text-monospace mb-1">
  123. <p>
  124. <i class="far fa-book"></i>
  125. STORY
  126. </p>
  127. </div>
  128.  
  129. <div class="row no-gutters text-justify mb-2">
  130.  
  131. <!-- first part -->
  132. <div class="col-1 card rounded-0 border-0" style="font-size: 18px">
  133. <i class="fas fa-baby mx-auto sticky-top mt-2 text-muted tooltipster" title="Childhood"></i>
  134. </div>
  135.  
  136. <!-- write about childhood here -->
  137. <div class="col px-md-2 pl-sm-0">
  138. <p>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.</p>
  139. <p>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.</p>
  140. </div>
  141. </div>
  142.  
  143. <!-- second part -->
  144.  
  145. <div class="row no-gutters text-justify flex-row-reverse mb-2">
  146. <div class="col-1 card rounded-0 border-0" style="font-size: 18px">
  147. <i class="fas fa-child mx-auto sticky-top mt-2 text-muted tooltipster" title="Adolescence"></i>
  148. </div>
  149. <div class="col px-md-2 pl-sm-0">
  150.  
  151. <!-- write about teenagehood here -->
  152. <p>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.</p>
  153. <p>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.</p>
  154. </div>
  155. </div>
  156.  
  157.  
  158. <!-- third part -->
  159. <div class="row no-gutters text-justify mb-2">
  160. <div class="col-1 card rounded-0 border-0" style="font-size: 18px">
  161. <i class="fas fa-person mx-auto sticky-top mt-2 text-muted tooltipster" title="Adulthood"></i>
  162. </div>
  163.  
  164. <!-- write about adulthood here -->
  165. <div class="col px-md-2 pl-sm-0">
  166. <p>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.</p>
  167. <p>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.</p>
  168. </div>
  169. </div>
  170.  
  171. <!-- add more parts above this line if u wanna-->
  172. </div>
  173.  
  174. <!-- quote div again -->
  175.  
  176. <div class="card p-2 rounded-0 border-secondary border text-muted text-monospace mb-2" style="border-left: none; border-right: none">
  177. <div class="justify-content-between">
  178. <div class="col-auto text-left"><i class="far fa-quote-left"></i></div>
  179. <div class="col text-center text-uppercase">IT CAN BE AS LONG AS YOU WANT...</div>
  180. <div class="col-auto text-right mt-auto"><i class="far fa-quote-right"></i></div>
  181. </div>
  182. </div>
  183.  
  184.  
  185. <!-- moodboard part -->
  186. <div class="row">
  187.  
  188. <!-- first one -->
  189. <div class="col-md-4 col-sm-12 card p-2 rounded-0 border-0">
  190. <div style="height: 159px; background-image: url(IMGURLHERE); background-size: cover;"></div>
  191. </div>
  192.  
  193. <div class="col-md-4 col-sm-12"></div>
  194.  
  195. <!-- second one -->
  196. <div class="col-md-4 col-sm-12 card p-2 rounded-0 border-0">
  197. <div style="height: 159px; background-image: url(IMGURLHERE); background-size: cover;"></div>
  198. </div>
  199.  
  200. <!-- row 2 -->
  201.  
  202. <div class="col col-sm-12"></div>
  203.  
  204. <!-- third one-->
  205. <div class="col-md-5 col-sm-12 card p-2 rounded-0 border-0 mx-auto mb-md-n5 mt-md-n5 my-sm-0" style="z-index: 1; position: relative">
  206. <div style="height: 202px; background-image: url(IMGURLHERE); background-size: cover;"></div>
  207. </div>
  208.  
  209. <div class="col col-sm-12"></div>
  210.  
  211.  
  212. <!-- row 3 -->
  213.  
  214. <!-- fourth one -->
  215. <div class="col-md-4 col-sm-12 card p-2 rounded-0 border-0">
  216. <div style="height: 159px; background-image: url(IMGURLHERE); background-size: cover;"></div>
  217. </div>
  218.  
  219. <div class="col-md-4 col-sm-12"></div>
  220.  
  221. <!-- fifth one -->
  222. <div class="col-md-4 col-sm-12 card p-2 rounded-0 border-0">
  223. <div style="height: 159px; background-image: url(IMGURLHERE); background-size: cover;"></div>
  224. </div>
  225.  
  226. <!-- end -->
  227. </div>
  228.  
  229.  
  230. <!-- i loved these quote dividers can u tell-->
  231. <div class="card p-2 rounded-0 border-secondary border text-muted text-monospace mt-2" style="border-left: none; border-right: none">
  232. <div class="justify-content-between">
  233. <div class="col-auto text-left"><i class="far fa-quote-left"></i></div>
  234.  
  235. <div class="col text-center text-uppercase">I GENUINELY DONT KNOW WHAT TO PUT HERE. HELP</div>
  236.  
  237. <div class="col-auto text-right mt-auto"><i class="far fa-quote-right"></i></div>
  238. </div>
  239. </div>
  240.  
  241. <!-- likes and dislikes and pos-neu-neg traits -->
  242. <div class="row no-gutters p-2">
  243.  
  244. <!-- row 1 -->
  245.  
  246. <!-- likes -->
  247. <div class="col-md-6 col-sm-12 px-2 mb-2">
  248. <div class="card p-2 rounded-0 text-muted text-monospace">
  249. <p>
  250. <i class="far fa-thumbs-up"></i>
  251. LIKES
  252. </p>
  253. </div>
  254.  
  255. <!-- list -->
  256. <ul class="fa-ul py-2 mb-0">
  257. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>like</li>
  258. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>like</li>
  259. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>like</li>
  260. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>like</li>
  261. </ul>
  262. </div>
  263.  
  264. <!-- dislikes -->
  265. <div class="col-md-6 col-sm-12 px-2 mb-2">
  266. <div class="card p-2 rounded-0 text-muted text-monospace">
  267. <p>
  268. <i class="far fa-thumbs-down"></i>
  269. DISLIKES
  270. </p>
  271. </div>
  272.  
  273. <!-- list -->
  274. <ul class="fa-ul py-2 mb-0">
  275. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>dislike</li>
  276. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>dislike</li>
  277. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>dislike</li>
  278. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>dislike</li>
  279. </ul>
  280.  
  281. </div>
  282.  
  283. <!-- row 2 -->
  284.  
  285. <!-- good traits -->
  286. <div class="col-md-4 col-sm-12 px-2">
  287. <div class="card p-2 rounded-0 text-muted text-monospace">
  288. <p>
  289. <i class="far fa-arrow-up"></i>
  290. POSITIVES
  291. </p>
  292. </div>
  293.  
  294. <!-- list -->
  295. <ul class="fa-ul py-2 mb-0">
  296. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>positive trait</li>
  297. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>positive trait</li>
  298. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>positive trait</li>
  299. <li><span class="fa-li"><i class="fas fa-circle-check"></i></span>positive trait</li>
  300. </ul>
  301.  
  302. </div>
  303.  
  304. <!-- ok traits -->
  305. <div class="col-md-4 col-sm-12 px-2">
  306. <div class="card p-2 rounded-0 text-muted text-monospace">
  307. <p>
  308. <i class="far fa-left-right"></i>
  309. NEUTRALS
  310. </p>
  311. </div>
  312.  
  313. <!-- list -->
  314. <ul class="fa-ul py-2 mb-0">
  315. <li><span class="fa-li"><i class="fas fa-circle-stop"></i></span>neutral trait</li>
  316. <li><span class="fa-li"><i class="fas fa-circle-stop"></i></span>neutral trait</li>
  317. <li><span class="fa-li"><i class="fas fa-circle-stop"></i></span>neutral trait</li>
  318. <li><span class="fa-li"><i class="fas fa-circle-stop"></i></span>neutral trait</li>
  319. </ul>
  320.  
  321. </div>
  322.  
  323.  
  324. <!-- neg traits -->
  325. <div class="col-md-4 col-sm-12 px-2">
  326. <div class="card p-2 rounded-0 text-muted text-monospace">
  327. <p>
  328. <i class="far fa-arrow-down"></i>
  329. NEGATIVES
  330. </p>
  331. </div>
  332.  
  333. <!-- list -->
  334. <ul class="fa-ul py-2 mb-0">
  335. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>negative trait</li>
  336. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>negative trait</li>
  337. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>negative trait</li>
  338. <li><span class="fa-li"><i class="fas fa-circle-xmark"></i></span>negative trait</li>
  339. </ul>
  340.  
  341. </div>
  342. </div>
  343.  
  344. <!-- ok last quote divider i swear -->
  345.  
  346. <div class="card p-2 rounded-0 border-secondary border text-muted text-monospace" style="border-left: none; border-right: none">
  347. <div class="justify-content-between">
  348. <div class="col-auto text-left"><i class="far fa-quote-left"></i></div>
  349.  
  350. <!-- WRITEE -->
  351. <div class="col text-center text-uppercase">stream batmeats by rotteen? idk</div>
  352.  
  353. <div class="col-auto text-right mt-auto"><i class="far fa-quote-right"></i></div>
  354. </div>
  355. </div>
  356.  
  357. <!-- RELATIONSHIP 1 -->
  358. <div class="p-2">
  359. <div class="col-12 p-0 mb-2">
  360. <div class="row">
  361.  
  362. <!-- pfp, keep square!!! -->
  363. <div class="col p-2 card border-0 rounded-0 ml-md-n2 ml-sm-0">
  364. <img src="imgurlhere">
  365. </div>
  366.  
  367. <!-- right part -->
  368. <div class="col-md-9 col-sm-12">
  369.  
  370. <div class="card p-2 border-0 rounded-0 mb-1">
  371. <div class="justify-content-between">
  372. <!-- put oc link where the # is -->
  373. <a href="#" class="text-muted text-monospace">NAME SURNAME</a>
  374.  
  375. <!-- put the relation between the 2 here-->
  376. <i class="far fa-handshake fa-fw my-auto text-muted tooltipster" title="relationship here"></i>
  377. </div>
  378. </div>
  379.  
  380. <!-- progress bars -->
  381. <div class="row no-gutters">
  382.  
  383. <!-- pbar 1 Why did i have "moldavian ssr" on my clipboard (trust) -->
  384. <div class="col-md-6 col-sm-12 text-center pr-1 pr-sm-0">
  385. <p class="text-monospace small text-muted">trust</p>
  386.  
  387. <div class="progress rounded-0 card border-0">
  388.  
  389. <!-- change the width percentage to change the bar -->
  390. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  391. </div>
  392. </div>
  393.  
  394. <!-- pbar 2: honesty -->
  395. <div class="col-md-6 col-sm-12 text-center pl-md-1 pl-sm-0">
  396. <p class="text-monospace small text-muted">honesty</p>
  397.  
  398. <div class="progress rounded-0 card border-0">
  399.  
  400. <!-- change width percentage to change bar -->
  401. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  402. </div>
  403. </div>
  404.  
  405. <!-- pbar 3: affection -->
  406. <div class="col-md-6 col-sm-12 text-center pr-1 pr-sm-0">
  407. <p class="text-monospace small text-muted">affection</p>
  408.  
  409. <div class="progress rounded-0 card border-0">
  410.  
  411. <!-- width percent to change bar -->
  412. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  413. </div>
  414. </div>
  415.  
  416. <!-- pbar 4: loyalty -->
  417. <div class="col-md-6 col-sm-12 text-center pl-md-1 pl-sm-0">
  418. <p class="text-monospace small text-muted">loyalty</p>
  419.  
  420. <div class="progress rounded-0 card border-0">
  421.  
  422. <!-- width percent -->
  423. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  424. </div>
  425. </div>
  426.  
  427.  
  428. <!-- pbar 5: communication -->
  429. <div class="col-md-6 col-sm-12 text-center pr-1 pr-sm-0">
  430. <p class="text-monospace small text-muted">communication</p>
  431.  
  432. <div class="progress rounded-0 card border-0">
  433.  
  434. <!-- width percent -->
  435. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  436. </div>
  437. </div>
  438.  
  439. <!-- pbar 6: understanding -->
  440. <div class="col-md-6 col-sm-12 text-center pl-md-1 pl-sm-0">
  441. <p class="text-monospace small text-muted">understanding</p>
  442.  
  443. <div class="progress rounded-0 card border-0">
  444. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449.  
  450. <!-- end of the progress bars -->
  451.  
  452. </div>
  453.  
  454. <!-- just write some stuff about them -->
  455. <div class="col-12 card border-0 rounded-0 p-2 mt-2 mx-auto text-justify">
  456. 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. Does not scroll dont put 2 much
  457. </div>
  458. </div>
  459.  
  460. <!-- person 2 -->
  461. <div class="col-12 p-0">
  462. <div class="row">
  463.  
  464. <!-- pfp -->
  465. <div class="col p-2 card border-0 rounded-0 ml-md-n2 ml-sm-0">
  466. <img src="imgurlhere">
  467. </div>
  468.  
  469. <!-- cuz im mr. right siiide -->
  470. <div class="col-md-9 col-sm-12">
  471. <div class="card p-2 border-0 rounded-0 mb-1">
  472. <div class="justify-content-between">
  473.  
  474. <!-- put url where the # is -->
  475. <a href="#" class="text-muted text-monospace">NAME SURNAME</a>
  476.  
  477. <!-- relationship here -->
  478. <i class="far fa-handshake fa-fw my-auto text-muted tooltipster" title="friends"></i>
  479. </div>
  480. </div>
  481.  
  482. <!-- progress bars -->
  483. <div class="row no-gutters">
  484.  
  485. <!-- progress bar 2 -->
  486. <div class="col-md-6 col-sm-12 text-center pr-1 pr-sm-0">
  487. <p class="text-monospace small text-muted">trust</p>
  488.  
  489. <div class="progress rounded-0 card border-0">
  490.  
  491. <!-- width percent -->
  492. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  493. </div>
  494. </div>
  495.  
  496.  
  497. <!-- progress bar 2 -->
  498. <div class="col-md-6 col-sm-12 text-center pl-md-1 pl-sm-0">
  499. <p class="text-monospace small text-muted">honesty</p>
  500.  
  501. <div class="progress rounded-0 card border-0">
  502.  
  503. <!-- width percent -->
  504. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  505. </div>
  506. </div>
  507.  
  508.  
  509. <!-- progress bar 3 -->
  510. <div class="col-md-6 col-sm-12 text-center pr-1 pr-sm-0">
  511. <p class="text-monospace small text-muted">affection</p>
  512.  
  513. <div class="progress rounded-0 card border-0">
  514.  
  515. <!-- width percent -->
  516. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  517. </div>
  518. </div>
  519.  
  520.  
  521. <!-- progress bar 4 -->
  522. <div class="col-md-6 col-sm-12 text-center pl-md-1 pl-sm-0">
  523. <p class="text-monospace small text-muted">loyalty</p>
  524.  
  525. <div class="progress rounded-0 card border-0">
  526.  
  527. <!-- width percent -->
  528. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  529. </div>
  530. </div>
  531.  
  532.  
  533. <!-- progress bar 5 -->
  534. <div class="col-md-6 col-sm-12 text-center pr-1 pr-sm-0">
  535. <p class="text-monospace small text-muted">communication</p>
  536.  
  537. <div class="progress rounded-0 card border-0">
  538.  
  539. <!-- width percent -->
  540. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  541. </div>
  542. </div>
  543.  
  544.  
  545. <!-- progress bar 6 -->
  546. <div class="col-md-6 col-sm-12 text-center pl-md-1 pl-sm-0">
  547. <p class="text-monospace small text-muted">understanding</p>
  548.  
  549. <div class="progress rounded-0 card border-0">
  550.  
  551. <!-- width percent -->
  552. <div class="progress-bar rounded-0" style="width: 50%; max-height: 12px"></div>
  553. </div>
  554. </div>
  555. </div>
  556. </div>
  557.  
  558. <!-- end of progress bars -->
  559.  
  560. </div>
  561.  
  562. <!-- write abt them here -->
  563. <div class="col-12 card border-0 rounded-0 p-2 mt-2 mx-auto text-justify">
  564. 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. Does not scroll dont put 2 much
  565. </div>
  566. </div>
  567.  
  568. <!-- put more above this line -->
  569. </div>
  570.  
  571. <!-- i lied this is the last quote -->
  572.  
  573. <div class="card p-2 rounded-0 border-secondary border text-muted text-monospace" style="border-left: none; border-right: none">
  574. <div class="justify-content-between">
  575. <div class="col-auto text-left"><i class="far fa-quote-left"></i></div>
  576.  
  577. <!-- write here -->
  578. <div class="col text-center text-uppercase">DONT WE LOVE ALL OF THESE TEXTS?</div>
  579.  
  580. <div class="col-auto text-right mt-auto"><i class="far fa-quote-right"></i></div>
  581. </div>
  582. </div>
  583.  
  584. <!-- end of code DONT REMOVE THE CREDIIIT -->
  585.  
  586. </div>
  587.  
  588. <div class="text-right"><a href="/micro-wave"><i class="far fa-microwave"></i></a></div>
  589.  
  590. </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!