API tools faq
paste
t3ch13-c0l0rs

false disposition

t3ch13-c0l0rs
Jan 7th, 2023 (edited)
306
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.82 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. HYELLO ITS HARA BACK AT IT AGAIN WITH THE WHITE VANS
  4.  
  5. accent color: #a3a3a3
  6.  
  7. have a good day ^_^
  8.  
  9. -->
  10.  
  11. <div class="col-md-10 col-sm-12 mx-auto p-0">
  12. <div class="row no-gutters">
  13.  
  14. <!-- row 1 -->
  15.  
  16. <!-- wow thats a lot of intro things -->
  17.  
  18. <div class="col-md-8 col-sm-12 px-2 mb-2">
  19. <blockquote class="bg-faded" style="color: #a3a3a3; border-color: #a3a3a3">
  20.  
  21. <!-- quote -->
  22. <p class="font-italic">Can't you hear, and you hear the thunder?</p>
  23. </blockquote>
  24.  
  25. <div class="row no-gutters">
  26.  
  27. <!-- thing 1 -->
  28. <div class="col-md-4 col-sm-12 px-2 mb-2">
  29. <div class="justify-content-between">
  30.  
  31. <p class="font-weight-bold text-muted mb-0">name:</p>
  32.  
  33. <!-- put name here -->
  34. <p class="mb-0">normal</p>
  35.  
  36. </div>
  37. </div>
  38.  
  39. <!-- thing 2 -->
  40. <div class="col-md-4 col-sm-12 px-2 mb-2">
  41. <div class="justify-content-between">
  42.  
  43. <p class="font-weight-bold text-muted mb-0">age:</p>
  44.  
  45. <!-- put age here -->
  46. <p class="mb-0">normal</p>
  47.  
  48. </div>
  49. </div>
  50.  
  51. <!-- thing 3 -->
  52. <div class="col-md-4 col-sm-12 px-2 mb-2">
  53. <div class="justify-content-between">
  54.  
  55. <p class="font-weight-bold text-muted mb-0">gender:</p>
  56.  
  57. <!-- put gender here -->
  58. <p class="mb-0">normal</p>
  59.  
  60. </div>
  61. </div>
  62.  
  63. <!-- thing 4 -->
  64. <div class="col-md-4 col-sm-12 px-2 mb-2">
  65. <div class="justify-content-between">
  66.  
  67. <p class="font-weight-bold text-muted mb-0">prns:</p>
  68.  
  69. <!-- put pronouns here Sorry for making a nor/mal joke i had to -->
  70. <p class="mb-0">nor/mal</p>
  71.  
  72. </div>
  73. </div>
  74.  
  75. <!-- thing 5 -->
  76. <div class="col-md-4 col-sm-12 px-2 mb-2">
  77. <div class="justify-content-between">
  78.  
  79. <p class="font-weight-bold text-muted mb-0">species:</p>
  80.  
  81. <!-- put species here -->
  82. <p class="mb-0">normal</p>
  83.  
  84. </div>
  85. </div>
  86.  
  87. <!-- thing 6 -->
  88. <div class="col-md-4 col-sm-12 px-2 mb-2">
  89. <div class="justify-content-between">
  90.  
  91. <p class="font-weight-bold text-muted mb-0">race:</p>
  92.  
  93. <!-- put race here -->
  94. <p class="mb-0">not putting normal</p>
  95.  
  96. </div>
  97. </div>
  98.  
  99. <!-- thing 7 -->
  100. <div class="col-md-4 col-sm-12 px-2 mb-2">
  101. <div class="justify-content-between">
  102.  
  103. <p class="font-weight-bold text-muted mb-0">sexuality:</p>
  104.  
  105. <!-- put sexuality here -->
  106. <p class="mb-0">normal</p>
  107.  
  108. </div>
  109. </div>
  110.  
  111. <!-- thing 8 -->
  112. <div class="col-md-4 col-sm-12 px-2 mb-2">
  113. <div class="justify-content-between">
  114.  
  115. <p class="font-weight-bold text-muted mb-0">r. status:</p>
  116.  
  117. <!-- put relationship status here -->
  118. <p class="mb-0">normal</p>
  119.  
  120. </div>
  121. </div>
  122.  
  123. <!-- thing 9 -->
  124. <div class="col-md-4 col-sm-12 px-2 mb-2">
  125. <div class="justify-content-between">
  126.  
  127. <p class="font-weight-bold text-muted mb-0">occupation:</p>
  128.  
  129. <!-- put job here -->
  130. <p class="mb-0">normal</p>
  131.  
  132. </div>
  133. </div>
  134.  
  135. <!-- thing 10 -->
  136. <div class="col-md-4 col-sm-12 px-2 mb-2">
  137. <div class="justify-content-between">
  138.  
  139. <p class="font-weight-bold text-muted mb-0">height:</p>
  140.  
  141. <!-- put height here -->
  142. <p class="mb-0">normal</p>
  143.  
  144. </div>
  145. </div>
  146.  
  147. <!-- thing 11 -->
  148. <div class="col-md-4 col-sm-12 px-2 mb-2">
  149. <div class="justify-content-between">
  150.  
  151. <p class="font-weight-bold text-muted mb-0">weight:</p>
  152.  
  153. <!-- put weight here -->
  154. <p class="mb-0">normal</p>
  155.  
  156. </div>
  157. </div>
  158.  
  159. <!-- thing 12 -->
  160. <div class="col-md-4 col-sm-12 px-2 mb-2">
  161. <div class="justify-content-between">
  162.  
  163. <p class="font-weight-bold text-muted mb-0">birthday:</p>
  164.  
  165. <!-- put birthdate here -->
  166. <p class="mb-0">no/rm/al</p>
  167.  
  168. </div>
  169. </div>
  170.  
  171. <!-- thing 13 -->
  172. <div class="col-md-4 col-sm-12 px-2 mb-2">
  173. <div class="justify-content-between">
  174.  
  175. <p class="font-weight-bold text-muted mb-0">alignment:</p>
  176.  
  177. <!-- put alignment here (like the chaotic lawful neutral stuff) -->
  178. <p class="mb-0">normal</p>
  179.  
  180. </div>
  181. </div>
  182.  
  183. <!-- thing 14 -->
  184. <div class="col-md-4 col-sm-12 px-2 mb-2">
  185. <div class="justify-content-between">
  186.  
  187. <p class="font-weight-bold text-muted mb-0">mbti:</p>
  188.  
  189. <!-- put mbti here -->
  190. <p class="mb-0">nrml</p>
  191.  
  192. </div>
  193. </div>
  194.  
  195. <!-- thing 15 -->
  196. <div class="col-md-4 col-sm-12 px-2 mb-2">
  197. <div class="justify-content-between">
  198.  
  199. <p class="font-weight-bold text-muted mb-0">zodiac:</p>
  200.  
  201. <!-- put zodiac here -->
  202. <p class="mb-0">normal</p>
  203.  
  204. </div>
  205. </div>
  206.  
  207. <!-- thing 16 -->
  208. <div class="col-md-4 col-sm-12 px-2 mb-2">
  209. <div class="justify-content-between">
  210.  
  211. <p class="font-weight-bold text-muted mb-0">religion:</p>
  212.  
  213. <!-- put religion here -->
  214. <p class="mb-0">normal</p>
  215.  
  216. </div>
  217. </div>
  218.  
  219. <!-- thing 17 -->
  220. <div class="col-md-4 col-sm-12 px-2 mb-2">
  221. <div class="justify-content-between">
  222.  
  223. <p class="font-weight-bold text-muted mb-0">residence:</p>
  224.  
  225. <!-- put town/country here -->
  226. <p class="mb-0">normal</p>
  227.  
  228. </div>
  229. </div>
  230.  
  231. <!-- thing 18 -->
  232. <div class="col-md-4 col-sm-12 px-2 mb-2">
  233. <div class="justify-content-between">
  234.  
  235. <p class="font-weight-bold text-muted mb-0">nationality:</p>
  236.  
  237. <!-- put nationality here -->
  238. <p class="mb-0">normal</p>
  239.  
  240. </div>
  241. </div>
  242.  
  243. <!-- thing 19 -->
  244. <div class="col-md-4 col-sm-12 px-2 mb-2">
  245. <div class="justify-content-between">
  246.  
  247. <p class="font-weight-bold text-muted mb-0">theme:</p>
  248.  
  249. <!-- put theme song here -->
  250. <a class="mb-0" href="#playlist" style="color: #a3a3a3">normal</a>
  251.  
  252. </div>
  253. </div>
  254.  
  255. <!-- thing 20 -->
  256. <div class="col-md-4 col-sm-12 px-2 mb-2">
  257. <div class="justify-content-between">
  258.  
  259. <p class="font-weight-bold text-muted mb-0">voice claim:</p>
  260.  
  261. <!-- put voice claim here -->
  262. <a class="mb-0" href="#vc" style="color: #a3a3a3">normal</a>
  263.  
  264. </div>
  265. </div>
  266.  
  267. <!-- thing 21 -->
  268. <div class="col-md-4 col-sm-12 px-2 mb-2">
  269. <div class="justify-content-between">
  270.  
  271. <p class="font-weight-bold text-muted mb-0">pinterest:</p>
  272.  
  273. <!-- put pinterest board here -->
  274. <a class="mb-0" href="#pin" style="color: #a3a3a3">normal</a>
  275.  
  276. </div>
  277. </div>
  278.  
  279. </div>
  280.  
  281. <!-- end of all the things -->
  282.  
  283. </div>
  284.  
  285. <!-- big block -->
  286.  
  287. <div class="col-md-4 col-sm-12 p-0 mb-2">
  288. <div class="w-100 h-100 justify-content-center align-items-center py-5" style="background-color: #a3a3a3">
  289.  
  290. <!-- y can change this fontawesome icon with the power of fontawesome.com!!!!!!! just get yr thing and replace camera with the icon name -->
  291. <i class="fas fa-camera fa-2x"></i>
  292.  
  293. </div>
  294. </div>
  295.  
  296. <!-- row 2 -->
  297.  
  298. <!-- big block 2 -->
  299. <div class="col-md-4 col-sm-12 p-0 mb-3">
  300. <div class="w-100 h-100 justify-content-center align-items-center py-5 " style="background-color: #a3a3a3">
  301.  
  302. <!-- y can change the icon with fontawesome.com -->
  303. <i class="fas fa-flower fa-2x"></i>
  304.  
  305. </div>
  306. </div>
  307.  
  308.  
  309. <!-- giant flipping moodboard -->
  310. <div class="col-md-8 col-sm-12 pl-md-1 pl-sm-0 mb-3">
  311.  
  312. <!-- ok first thing is like a quote i guess. bug also has bg img. change https://images.unsplash.com/photo-1462524500090-89443873e2b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80 to your image but keep in the parenthesis -->
  313. <blockquote class="mb-1" style="background-image: url(https://images.unsplash.com/photo-1462524500090-89443873e2b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80); background-position: center; border-color: #a3a3a3;">
  314.  
  315. <!-- change :3 to some text idk -->
  316. <p class="font-italic mb-0" style="mix-blend-mode:screen; color: #a3a3a3; text-align: right">:3</p>
  317. </blockquote>
  318.  
  319. <!-- ok bottom part -->
  320.  
  321. <div class="row no-gutters">
  322.  
  323. <div class="col-md-4 col-sm-12 pr-md-1 mb-1">
  324.  
  325. <!-- change https://images.unsplash.com/photo-1575657676403-dfb0261751c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c3VtbWVyJTIwZGF5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60 to your img -->
  326. <div class="col-12 p-5 mb-1" style="background-image: url(https://images.unsplash.com/photo-1575657676403-dfb0261751c8?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8c3VtbWVyJTIwZGF5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60); background-position: center; background-size: cover"></div>
  327.  
  328. <div class="col-12 p-0 justify-content-between overflow-hidden">
  329.  
  330. <!-- change https://images.unsplash.com/photo-1579148632886-56bca563cabc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHN1bW1lciUyMGRheXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60 to your img -->
  331. <div class="p-5 col-md-auto col-sm-12" style="background-image: url(https://images.unsplash.com/photo-1579148632886-56bca563cabc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHN1bW1lciUyMGRheXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=900&q=60); background-position: center; background-size: cover"></div>
  332.  
  333. <!-- change https://images.unsplash.com/photo-1562562219-2829c589d392?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 to your img -->
  334. <div class="col-md-auto col-sm-12 p-0">
  335. <div class="p-5" style="background-image: url(https://images.unsplash.com/photo-1562562219-2829c589d392?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80); background-position: center; background-size: cover;"></div>
  336. </div>
  337.  
  338. </div>
  339.  
  340.  
  341. </div>
  342.  
  343. <!-- change https://images.unsplash.com/photo-1523899702182-0151098added?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80 to your img -->
  344. <div class="col-md-2 col-sm-12 p-0 mb-1" style="background-image: url(https://images.unsplash.com/photo-1523899702182-0151098added?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80); background-position: center; background-size: cover">
  345. </div>
  346.  
  347. <div class="col-md-6 col-sm-12 pl-md-1 mb-1">
  348. <!-- change https://images.unsplash.com/photo-1523799662085-cc75743a22e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80 to your img -->
  349. <div class="col-12 p-5 h-100" style="background-image: url(https://images.unsplash.com/photo-1523799662085-cc75743a22e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1548&q=80); background-position: center; background-size: cover"></div>
  350. </div>
  351.  
  352.  
  353. <!-- palette -->
  354. <div class="col-12 p-0">
  355. <div class="row no-gutters">
  356.  
  357. <!-- change #fff to your color -->
  358. <div class="col-md p-2" style="background-color: #fff"></div>
  359.  
  360. <!-- change #bfbfbf to your color -->
  361. <div class="col-md p-2" style="background-color: #BFBFBF"></div>
  362.  
  363. <!-- change #808080 to your color -->
  364. <div class="col-md p-2" style="background-color: #808080"></div>
  365.  
  366. <!-- change #404040 to your color -->
  367. <div class="col-md p-2" style="background-color: #404040"></div>
  368.  
  369. <!-- change #000 to your color -->
  370. <div class="col-md p-2" style="background-color: #000"></div>
  371.  
  372. <!-- you can add more above this line
  373. copy and paste this: <div class="col-md p-2" style="background-color: #a3a3a3"></div>
  374. -->
  375. </div>
  376. </div>
  377.  
  378. </div>
  379.  
  380. <!-- end of row 2 -->
  381.  
  382. </div>
  383.  
  384. <!-- row 3 -->
  385.  
  386. <div class="col-12 p-0">
  387. <div id="rships" class="carousel slide w-100" data-ride="carousel">
  388. <div class="carousel-inner">
  389.  
  390. <!-- aint no way hara did a carousel Hi yes that was part of the challenge. -->
  391.  
  392. <div class="carousel-item active">
  393. <div class="col-md-9 p-0 col-sm-12 mx-auto">
  394. <div class="row no-gutters">
  395.  
  396. <!-- img + the hearts -->
  397. <div class="col-md-auto col-sm-12 align-items-center justify-content-center">
  398. <p style="text-align: center; color: #a3a3a3">
  399.  
  400. <!-- change https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg to yr img i recommend square stuff-->
  401. <img class="p-1" src="https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg" style="border: 1px solid #a3a3a3; max-height: 150px; max-width: 150px">
  402. <br>
  403.  
  404. <!-- its The Hearts.
  405. fal = empty
  406. fas = full
  407. use this to change them -->
  408. <span style="font-size: 12px">
  409. <i class="fas fa-heart"></i>
  410. <i class="fas fa-heart"></i>
  411. <i class="fas fa-heart"></i>
  412. <i class="fal fa-heart"></i>
  413. <i class="fal fa-heart"></i>
  414. </span>
  415. </p>
  416. </div>
  417.  
  418. <!-- right side -->
  419.  
  420. <div class="col-md pl-md-2">
  421. <blockquote class="bg-faded w-100 mb-1" style="border-color: #a3a3a3">
  422.  
  423. <!-- oc name and link to their profile -->
  424. <a href="#oc" style="color: #a3a3a3; font-family: courier new">Ebony Darkness Dementia Ravenway</a>
  425. </blockquote>
  426.  
  427. <div class="bg-faded col-12 p-2 mb-1">
  428.  
  429. <!-- its the classic "write a paragraph about em". oh ps it expands and doesnt scroll -->
  430. 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.
  431. </div>
  432.  
  433. <!-- end of that -->
  434.  
  435. <div class="row no-gutters mb-1">
  436.  
  437. <div class="col-md-3 col-sm-12 pr-1">
  438. <div class="bg-faded p-1">
  439.  
  440. <!-- name of stat 1 cuz i couldnt think of any -->
  441. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 1</p>
  442. <hr class="mb-1 mt-0">
  443.  
  444. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  445. <!-- y gotta change the width to your percentage. -->
  446. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  447. </div>
  448.  
  449. </div>
  450. </div>
  451.  
  452.  
  453. <!-- stat 2 -->
  454. <div class="col-md-3 col-sm-12">
  455. <div class="bg-faded p-1">
  456.  
  457. <!-- stat 2 name -->
  458. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 2</p>
  459. <hr class="mb-1 mt-0">
  460.  
  461. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  462.  
  463. <!-- change percentage in width -->
  464. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  465. </div>
  466.  
  467. </div>
  468. </div>
  469.  
  470. <!-- stat 3 -->
  471.  
  472. <div class="col-md-3 col-sm-12 pl-1">
  473. <div class="bg-faded p-1">
  474.  
  475. <!-- stat 3 name -->
  476. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 3</p>
  477. <hr class="mb-1 mt-0">
  478.  
  479. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  480.  
  481. <!-- change width percentage -->
  482. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  483. </div>
  484.  
  485. </div>
  486. </div>
  487.  
  488. <!-- stat 4 -->
  489.  
  490. <div class="col-md-3 col-sm-12 pl-1">
  491. <div class="bg-faded p-1">
  492.  
  493. <!-- stat 4 name -->
  494. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 4</p>
  495. <hr class="mb-1 mt-0">
  496.  
  497. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  498.  
  499. <!-- change width percentage -->
  500. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  501. </div>
  502.  
  503. </div>
  504. </div>
  505.  
  506. </div>
  507.  
  508. <!-- end of the stats -->
  509.  
  510. <blockquote class="bg-faded w-100 mb-1" style="border-color: #a3a3a3; border-left: 0px solid #a3a3a3; border-right: .25rem solid #a3a3a3">
  511. <a class="font-italic" style="color: #a3a3a3; font-family: courier new">
  512. <i class="fal fa-quote-left"></i>
  513.  
  514. <!-- quote -->
  515. Don't leave me behind again, cool guy!
  516. </a>
  517. </blockquote>
  518.  
  519. </div>
  520.  
  521. <!-- end of person 1 -->
  522.  
  523. </div>
  524.  
  525. </div>
  526. </div>
  527.  
  528. <!-- person 2 -->
  529.  
  530. <div class="carousel-item">
  531. <div class="col-md-9 p-0 col-sm-12 mx-auto">
  532. <div class="row no-gutters">
  533.  
  534. <!-- left side -->
  535.  
  536. <div class="col-md-auto col-sm-12 align-items-center justify-content-center">
  537. <p style="text-align:center; color: #a3a3a3">
  538.  
  539. <!-- change https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg to yr img -->
  540. <img class="p-1" src="https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg" style="border: 1px solid #a3a3a3; max-height: 150px; max-width: 150px">
  541. <br>
  542.  
  543. <!-- fas = full; fal = empty -->
  544. <span style="font-size: 12px">
  545. <i class="fas fa-heart"></i>
  546. <i class="fas fa-heart"></i>
  547. <i class="fas fa-heart"></i>
  548. <i class="fal fa-heart"></i>
  549. <i class="fal fa-heart"></i>
  550. </span>
  551. </p>
  552. </div>
  553.  
  554. <!-- right side -->
  555.  
  556. <div class="col-md pl-md-2">
  557. <blockquote class="bg-faded w-100 mb-1" style="border-color: #a3a3a3">
  558.  
  559. <!-- name + link to oc -->
  560. <a href="#oc" style="color: #a3a3a3; font-family: courier new">Ebony Darkness Dementia Ravenway</a>
  561. </blockquote>
  562.  
  563. <!-- paragraph -->
  564. <div class="bg-faded col-12 p-2 mb-1">
  565. 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.
  566. </div>
  567.  
  568. <!-- stats -->
  569. <div class="row no-gutters mb-1">
  570.  
  571. <!-- stat 1 -->
  572. <div class="col-md-3 col-sm-12 pr-1">
  573. <div class="bg-faded p-1">
  574.  
  575. <!-- stat 1 name -->
  576. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 1</p>
  577. <hr class="mb-1 mt-0">
  578.  
  579. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  580.  
  581. <!-- change width percentage -->
  582. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  583. </div>
  584.  
  585. </div>
  586. </div>
  587.  
  588. <!-- stat 2 -->
  589.  
  590. <div class="col-md-3 col-sm-12">
  591. <div class="bg-faded p-1">
  592.  
  593. <!-- stat 2 name -->
  594. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 2</p>
  595. <hr class="mb-1 mt-0">
  596.  
  597. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  598.  
  599. <!-- change width percentage -->
  600. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  601. </div>
  602.  
  603. </div>
  604. </div>
  605.  
  606. <!-- stat 3 -->
  607.  
  608. <div class="col-md-3 col-sm-12 pl-1">
  609. <div class="bg-faded p-1">
  610.  
  611. <!-- stat 3 name -->
  612. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 3</p>
  613. <hr class="mb-1 mt-0">
  614.  
  615. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  616.  
  617. <!-- change width percentage -->
  618. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  619. </div>
  620.  
  621. </div>
  622. </div>
  623.  
  624. <!-- stat 4 -->
  625.  
  626. <div class="col-md-3 col-sm-12 pl-1">
  627. <div class="bg-faded p-1">
  628.  
  629. <!-- stat 4 name -->
  630. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 4</p>
  631. <hr class="mb-1 mt-0">
  632.  
  633. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  634.  
  635. <!-- change width percentage -->
  636. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  637. </div>
  638.  
  639. </div>
  640. </div>
  641.  
  642. </div>
  643.  
  644. <!-- end of the stats -->
  645.  
  646. <blockquote class="bg-faded w-100 mb-1" style="border-color: #a3a3a3; border-left: 0px solid #a3a3a3; border-right: .25rem solid #a3a3a3">
  647. <a class="font-italic" style="color: #a3a3a3; font-family: courier new">
  648. <i class="fal fa-quote-left"></i>
  649.  
  650. <!-- quote -->
  651. Don't leave me behind again, cool guy!
  652. </a>
  653. </blockquote>
  654.  
  655. </div>
  656.  
  657. <!-- end of person 2 -->
  658.  
  659.  
  660. </div>
  661.  
  662. </div>
  663. </div>
  664.  
  665. <!-- person 3 -->
  666.  
  667. <div class="carousel-item">
  668. <div class="col-md-9 p-0 col-sm-12 mx-auto">
  669. <div class="row no-gutters">
  670.  
  671. <!-- left side -->
  672.  
  673. <div class="col-md-auto col-sm-12 align-items-center justify-content-center">
  674. <p style="text-align:center; color: #a3a3a3">
  675.  
  676. <!-- replace https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg w ur img -->
  677. <img class="p-1" src="https://mentoring.medschl.cam.ac.uk/files/2016/06/blank-profile-picture-250px.jpg" style="border: 1px solid #a3a3a3; max-height: 150px; max-width: 150px">
  678. <br>
  679.  
  680. <!-- fas = full; fal = empty -->
  681. <span style="font-size: 12px">
  682. <i class="fas fa-heart"></i>
  683. <i class="fas fa-heart"></i>
  684. <i class="fas fa-heart"></i>
  685. <i class="fal fa-heart"></i>
  686. <i class="fal fa-heart"></i>
  687. </span>
  688. </p>
  689. </div>
  690.  
  691. <!-- right side -->
  692.  
  693. <div class="col-md pl-md-2">
  694. <blockquote class="bg-faded w-100 mb-1" style="border-color: #a3a3a3">
  695.  
  696. <!-- name + link -->
  697. <a href="#oc" style="color: #a3a3a3; font-family: courier new">Ebony Darkness Dementia Ravenway</a>
  698. </blockquote>
  699.  
  700.  
  701. <!-- paragraph -->
  702. <div class="bg-faded col-12 p-2 mb-1">
  703. 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.
  704. </div>
  705.  
  706.  
  707. <!-- stats -->
  708. <div class="row no-gutters mb-1">
  709.  
  710. <!-- stat 1 -->
  711.  
  712. <div class="col-md-3 col-sm-12 pr-1">
  713. <div class="bg-faded p-1">
  714.  
  715. <!-- stat 1 name -->
  716. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 1</p>
  717. <hr class="mb-1 mt-0">
  718.  
  719. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  720. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  721. </div>
  722.  
  723. </div>
  724. </div>
  725.  
  726. <!-- stat 2 -->
  727.  
  728. <div class="col-md-3 col-sm-12">
  729. <div class="bg-faded p-1">
  730.  
  731. <!-- stat 2 name -->
  732. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 2</p>
  733. <hr class="mb-1 mt-0">
  734.  
  735. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  736.  
  737. <!-- change width percentage -->
  738. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  739. </div>
  740.  
  741. </div>
  742. </div>
  743.  
  744. <!-- stat 3 -->
  745.  
  746. <div class="col-md-3 col-sm-12 pl-1">
  747. <div class="bg-faded p-1">
  748.  
  749. <!-- stat 3 name -->
  750. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 3</p>
  751. <hr class="mb-1 mt-0">
  752.  
  753. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  754.  
  755. <!-- change width percentage -->
  756. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  757. </div>
  758.  
  759. </div>
  760. </div>
  761.  
  762. <!-- stat 4 -->
  763.  
  764. <div class="col-md-3 col-sm-12 pl-1">
  765. <div class="bg-faded p-1">
  766.  
  767. <!-- stat 4 name -->
  768. <p class="mb-0" style="text-align:center; font-family: courier new">STAT 4</p>
  769. <hr class="mb-1 mt-0">
  770.  
  771. <div class="progress rounded-0 card border-0" style="max-height:7px;">
  772.  
  773. <!-- change width percentage -->
  774. <div class="progress-bar rounded-0" style="width:50%;background-color:#a3a3a3;"></div>
  775. </div>
  776.  
  777. </div>
  778. </div>
  779.  
  780. <!-- end of stats -->
  781.  
  782. </div>
  783.  
  784. <!-- quote -->
  785. <blockquote class="bg-faded w-100 mb-1" style="border-color: #a3a3a3; border-left: 0px solid #a3a3a3; border-right: .25rem solid #a3a3a3">
  786. <a class="font-italic" style="color: #a3a3a3; font-family: courier new">
  787. <i class="fal fa-quote-left"></i>
  788.  
  789. <!-- actual quote -->
  790. Don't leave me behind again, cool guy!
  791. </a>
  792. </blockquote>
  793.  
  794. </div>
  795.  
  796.  
  797. </div>
  798.  
  799. </div>
  800. </div>
  801.  
  802. <!-- y can add more above this line if y really want to, though i'd recommend knowing what yr doing first. also dont copy n paste the first one if y do so -->
  803.  
  804. </div>
  805.  
  806. <!-- controls -->
  807. <a class="carousel-control-prev" href="#rships" role="button" data-slide="prev">
  808. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  809. <span class="sr-only">prev.</span>
  810. </a>
  811.  
  812.  
  813. <a class="carousel-control-next" href="#rships" role="button" data-slide="next">
  814. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  815. <span class="sr-only">next</span>
  816. </a>
  817. </div>
  818. </div>
  819.  
  820. <!-- end -->
  821.  
  822. </div>
  823.  
  824. <p style="text-align:center">
  825. <a href="/micro-wave" data-toggle="tooltip" title="code by micro-wave" style="color: #a3a3a3"><i class="fas fa-microwave"></i></a>
  826. </p>
  827. </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!