API tools faq
paste
t3ch13-c0l0rs

smooth

t3ch13-c0l0rs
Feb 4th, 2023
161
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.30 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. good afternoon!
  3. i'm back with a code for the quarters, i think i'll probably try flip as well..
  4. anyways, the main accent color in this is #782798
  5. cmd/ctrl + f to quickly change all of them!
  6. -->
  7.  
  8. <div class="col-md-8 col-sm-12 mx-auto">
  9. <div class="row no-gutters">
  10.  
  11. <div class="col-md-5 col-sm-12 pr-md-1 pr-sm-0">
  12. <!-- side image -->
  13. <div class="h-100 w-100 justify-content-end align-items-end px-2 py-1"
  14. style="
  15. background-image: url(IMGURLHERE);
  16. background-size:cover; background-position: center;">
  17. <!-- link the artist of the image here! -->
  18. <a href="/link_here" style="color: #782798"><i class="fas fa-images"></i></a>
  19. </div>
  20. </div>
  21.  
  22. <!-- the column with all the actual stuff lmfao -->
  23.  
  24. <div class="col-md-7 col-sm-12">
  25. <div class="row no-gutters">
  26. <div class="col-12 p-2 bg-faded mb-1">
  27. <div class="col-12 p-0">
  28.  
  29. <!-- name -->
  30. <p class="font-italic m-0 justify-content-between display-4 d-flex m-1" style="color: #782798">Lorem Ipsum</p>
  31. <hr class="m-0 mb-1" style="border-width: 1px; border-style: solid; background-color: rgba(0,0,0,0); color: #782798">
  32.  
  33. <!-- average stats -->
  34. <div class="row no-gutters mb-1">
  35.  
  36. <!-- name -->
  37. <div class="col-md-6 col-sm-12 mb-1 mt-1">
  38. <div class="justify-content-between">
  39. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">name</div>
  40.  
  41. <div class="col justify-content-end">full name</div>
  42. </div>
  43. </div>
  44.  
  45.  
  46. <!-- age -->
  47. <div class="col-md-6 col-sm-12 mb-1 mt-md-1 mt-sm-0">
  48. <div class="justify-content-between">
  49. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">age</div>
  50.  
  51. <div class="col justify-content-end">number</div>
  52. </div>
  53. </div>
  54.  
  55.  
  56. <!-- gender -->
  57. <div class="col-md-6 col-sm-12 mb-1">
  58. <div class="justify-content-between">
  59. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">gender</div>
  60.  
  61. <div class="col justify-content-end">gender</div>
  62. </div>
  63. </div>
  64.  
  65.  
  66. <!-- pronouns -->
  67. <div class="col-md-6 col-sm-12 mb-1">
  68. <div class="justify-content-between">
  69. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">pronouns</div>
  70.  
  71. <div class="col justify-content-end">prn/prn</div>
  72. </div>
  73. </div>
  74.  
  75.  
  76. <!-- species -->
  77. <div class="col-md-6 col-sm-12 mb-1">
  78. <div class="justify-content-between">
  79. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">species</div>
  80.  
  81. <div class="col justify-content-end">species</div>
  82. </div>
  83. </div>
  84.  
  85.  
  86. <!-- birthday -->
  87. <div class="col-md-6 col-sm-12 mb-1">
  88. <div class="justify-content-between">
  89. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">birthday</div>
  90.  
  91. <div class="col justify-content-end">dd/mm/yy</div>
  92. </div>
  93. </div>
  94.  
  95.  
  96. <!-- worth -->
  97. <div class="col-md-6 col-sm-12 mb-1">
  98. <div class="justify-content-between">
  99. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">worth</div>
  100.  
  101. <div class="col justify-content-end">maurney</div>
  102. </div>
  103. </div>
  104.  
  105.  
  106. <!-- obtained via -->
  107. <div class="col-md-6 col-sm-12 mb-1">
  108. <div class="justify-content-between">
  109. <div class="col-auto d-flex px-2 align-items-center text-white" style="background-color: #782798">obtained</div>
  110.  
  111. <div class="col justify-content-end">ota/free/$</div>
  112. </div>
  113. </div>
  114.  
  115. </div>
  116.  
  117. <!-- end of the stats -->
  118.  
  119. <hr class="m-0 mb-1" style="border-color: #782798">
  120. </div>
  121. </div>
  122.  
  123. <!-- tabbed content YAYYY -->
  124.  
  125. <div class="col-12 p-0">
  126. <div class="tab-content" id="tabber">
  127.  
  128. <!-- tab 1: about -->
  129. <div class="tab-pane fade active show" id="abt">
  130. <div class="row no-gutters">
  131. <div class="col-md-7 pr-md-1 pr-sm-0 mb-1">
  132. <div class="col-12 bg-faded py-2 px-1 h-100">
  133. <p class="font-italic card border-0 rounded-0 px-2 py-1 mb-1" style="color: #782798; font-size: 25px">ABOUT</p>
  134.  
  135. <!-- write them paragraphs!!! -->
  136. <div class="card border-0 rounded-0 p-2 overflow-auto" style="max-height: 100px">
  137. <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>
  138.  
  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. </div>
  143.  
  144. <!-- its the image -->
  145.  
  146. <div class="col-md-5 mb-1">
  147. <!-- i love my brine shrimp pals they r my friends -->
  148. <div class="col-12 bg-faded p-2 h-100"
  149. style="background-image: url(IMGURLHERE);
  150. background-size: cover; background-position: center">
  151.  
  152. <div class="p-5 h-100 justify-content-center align-items-center" style="border: 1px solid white; mix-blend-mode: luminosity">
  153. <!-- go to fontawesome.com to get another icon for this lol -->
  154. <i class="fas fa-cards fa-2x text-white"></i>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160.  
  161.  
  162. <!-- tab 2: story -->
  163. <div class="tab-pane fade" id="stry">
  164. <div class="row no-gutters">
  165. <div class="col-md-7 pr-md-1 pr-sm-0 mb-1">
  166. <div class="col-12 bg-faded py-2 px-1 h-100 overflow-auto" style="max-height: 165.5px">
  167.  
  168. <!-- childhood -->
  169. <p class="font-italic card border-0 rounded-0 px-2 py-1 mb-1" style="color: #782798; font-size: 25px; top: 0; position: sticky">CHILDHOOD</p>
  170.  
  171. <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>
  172.  
  173. <!-- teenage years -->
  174. <p class="font-italic card border-0 rounded-0 px-2 py-1 mb-1" style="color: #782798; font-size: 25px; top: 0; position: sticky">TEENAGE YEARS</p>
  175.  
  176. <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>
  177.  
  178. <!-- adulthood -->
  179. <p class="font-italic card border-0 rounded-0 px-2 py-1 mb-1" style="color: #782798; font-size: 25px; top: 0; position: sticky">ADULTHOOD</p>
  180.  
  181. <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>
  182. </div>
  183. </div>
  184.  
  185. <!-- now its quote time -->
  186.  
  187. <div class="col-md-5 mb-1">
  188. <div class="col-12 bg-faded p-2 h-100">
  189. <blockquote class="font-italic text-muted mb-0 h-100 align-items-center" style="font-weight: 100;">
  190. <!-- ps dont remove the span it keeps everything from going whack LOL -->
  191. <span>
  192. <i class="fal fa-quote-left"></i>
  193. An Awesome Quote Goes Here
  194. <i class="fal fa-quote-right"></i>
  195. </span>
  196. </blockquote>
  197. </div>
  198. </div>
  199. </div>
  200. </div>
  201.  
  202. <!-- tab 3: moodboard -->
  203. <div class="tab-pane fade" id="mdbrd">
  204. <div class="row no-gutters">
  205. <div class="col-md-7 mb-1">
  206. <div class="row no-gutters">
  207.  
  208. <!-- image one -->
  209. <div class="col-12 py-4" style="
  210. background-image: url(IMGURLHERE);
  211. background-size: cover; background-position: center">
  212. </div>
  213.  
  214. <!-- image two -->
  215. <div class="col-md-6 col-sm-12 py-5" style="
  216. background-image: url(IMGURLHERE);
  217. background-size: cover; background-position: center">
  218. </div>
  219.  
  220. <!-- image three -->
  221. <div class="col-md-6 col-sm-12 py-5" style="
  222. background-image: url(IMG URL HERE);
  223. background-size: cover; background-position: center">
  224. </div>
  225.  
  226. <!-- image four -->
  227. <div class="col-12 py-4" style="
  228. background-image: url(IMGURLHERE);
  229. background-size: cover; background-position: center;">
  230. </div>
  231.  
  232. <!-- end of tiny images -->
  233. </div>
  234. </div>
  235.  
  236. <!-- one big image -->
  237. <div class="col-md-5 mb-1">
  238. <div class="col-12 h-100 py-5" style="
  239. background-image: url(IMGURLHERE);
  240. background-size: cover; background-position: center">
  241.  
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246.  
  247. <!-- tab four: relationships -->
  248. <div class="tab-pane fade" id="rships">
  249. <div id="rships2" class="carousel slide w-100" data-ride="carousel">
  250. <div class="carousel-inner">
  251.  
  252. <!-- using carousels again hara? yeah ive changed anyways guy 1 -->
  253. <div class="carousel-item active">
  254. <div class="row no-gutters">
  255. <div class="col-md-7 pr-md-1 pr-sm-0 mb-1">
  256. <div class="col-12 bg-faded p-2 mb-1">
  257. <div class="row no-gutters">
  258.  
  259. <!-- good feelings! fas = full, fal = empty -->
  260. <div class="col-6 text-left">
  261. <i class="fas fa-heart"></i>
  262. <i class="fas fa-heart"></i>
  263. <i class="fas fa-heart"></i>
  264. <i class="fal fa-heart"></i>
  265. <i class="fal fa-heart"></i>
  266. </div>
  267.  
  268. <!-- bad feelings )^: fas = full, fal = empty -->
  269. <div class="col-6 text-right">
  270. <i class="fal fa-heart-broken"></i>
  271. <i class="fal fa-heart-broken"></i>
  272. <i class="fas fa-heart-broken"></i>
  273. <i class="fas fa-heart-broken"></i>
  274. <i class="fas fa-heart-broken"></i>
  275. </div>
  276. </div>
  277. </div>
  278.  
  279. <!-- write more! this is just a paragraph -->
  280. <div class="col-12 overflow-auto p-2 bg-faded" style="max-height: 125px">
  281. 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.
  282. </div>
  283. </div>
  284.  
  285. <div class="col-md-5 mb-1">
  286. <!-- put profile picture here!! -->
  287. <div class="col-12 bg-faded p-2 h-100" style="
  288. background-image: url(IMGURLHERE);
  289. background-size: cover; background-position: center">
  290.  
  291. <!-- put character link here :3 -->
  292. <a class="p-5 h-100 justify-content-center align-items-center text-white" href="/link_here" style="border: 1px solid white; mix-blend-mode: luminosity; text-decoration: none">
  293. <i class="fas fa-scythe fa-2x"></i>
  294. </a>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299.  
  300. <!-- guy 2 -->
  301.  
  302. <div class="carousel-item">
  303. <div class="row no-gutters">
  304. <div class="col-md-7 pr-md-1 pr-sm-0 mb-1">
  305. <div class="col-12 bg-faded p-2 mb-1">
  306. <div class="row no-gutters">
  307.  
  308. <!-- good feels! -->
  309. <div class="col-6 text-left">
  310. <i class="fas fa-heart"></i>
  311. <i class="fas fa-heart"></i>
  312. <i class="fas fa-heart"></i>
  313. <i class="fal fa-heart"></i>
  314. <i class="fal fa-heart"></i>
  315. </div>
  316.  
  317. <!-- bad feels )^: -->
  318. <div class="col-6 text-right">
  319. <i class="fal fa-heart-broken"></i>
  320. <i class="fal fa-heart-broken"></i>
  321. <i class="fas fa-heart-broken"></i>
  322. <i class="fas fa-heart-broken"></i>
  323. <i class="fas fa-heart-broken"></i>
  324. </div>
  325. </div>
  326. </div>
  327.  
  328. <!-- paragraph :3 -->
  329. <div class="col-12 overflow-auto p-2 bg-faded" style="max-height: 125px">
  330. 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.
  331. </div>
  332. </div>
  333.  
  334. <!-- picture -->
  335. <div class="col-md-5 mb-1">
  336.  
  337. <!-- put picture here!! -->
  338. <div class="col-12 bg-faded p-2 h-100" style="
  339. background-image: url(IMGURLHERE);
  340. background-size: cover; background-position: center">
  341.  
  342. <!-- put link here :3 -->
  343. <a class="p-5 h-100 justify-content-center align-items-center text-white" href="/link_here" style="border: 1px solid white; mix-blend-mode: luminosity; text-decoration: none">
  344.  
  345. <!-- you can change this by going to fontawesome.com -->
  346. <i class="fas fa-scythe fa-2x"></i>
  347. </a>
  348. </div>
  349. </div>
  350. </div>
  351. </div>
  352.  
  353. <!-- guy 3 -->
  354. <div class="carousel-item">
  355. <div class="row no-gutters">
  356. <div class="col-md-7 pr-md-1 pr-sm-0 mb-1">
  357. <div class="col-12 bg-faded p-2 mb-1">
  358. <div class="row no-gutters">
  359.  
  360. <!-- good feels -->
  361. <div class="col-6 text-left">
  362. <i class="fas fa-heart"></i>
  363. <i class="fas fa-heart"></i>
  364. <i class="fas fa-heart"></i>
  365. <i class="fal fa-heart"></i>
  366. <i class="fal fa-heart"></i>
  367. </div>
  368.  
  369. <!-- bad feels -->
  370. <div class="col-6 text-right">
  371. <i class="fal fa-heart-broken"></i>
  372. <i class="fal fa-heart-broken"></i>
  373. <i class="fas fa-heart-broken"></i>
  374. <i class="fas fa-heart-broken"></i>
  375. <i class="fas fa-heart-broken"></i>
  376. </div>
  377. </div>
  378. </div>
  379.  
  380. <!-- the dreaded paragraph -->
  381. <div class="col-12 overflow-auto p-2 bg-faded" style="max-height: 125px">
  382. 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.
  383. </div>
  384. </div>
  385.  
  386. <!-- da IMG! -->
  387. <div class="col-md-5 mb-1">
  388.  
  389. <!-- ok put it here -->
  390. <div class="col-12 bg-faded p-2 h-100" style="
  391. background-image: url(IMGURLHERE);
  392. background-size: cover; background-position: center">
  393.  
  394. <!-- and the link to the profile here! -->
  395. <a class="p-5 h-100 justify-content-center align-items-center text-white" href="/link_here" style="border: 1px solid white; mix-blend-mode: luminosity; text-decoration: none">
  396.  
  397. <!-- change this via fontawesome.com -->
  398. <i class="fas fa-scythe fa-2x"></i>
  399. </a>
  400. </div>
  401. </div>
  402. </div>
  403. </div>
  404.  
  405. </div>
  406.  
  407. <!-- i definitely did not rip these from my previous code no siree -->
  408. <a class="carousel-control-prev" href="#rships2" role="button" data-slide="prev">
  409. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  410. <span class="sr-only">prev.</span>
  411. </a>
  412.  
  413.  
  414. <a class="carousel-control-next" href="#rships2" role="button" data-slide="next">
  415. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  416. <span class="sr-only">next</span>
  417. </a>
  418. </div>
  419. </div>
  420.  
  421. </div>
  422. </div>
  423. </div>
  424.  
  425. <!-- tabs -->
  426. <ul class="nav nav-pills justify-content-between" style="overflow: hidden">
  427. <li class="nav-item col p-0" style="background-color: #782798">
  428. <a class="nav-link btn-outline-warning active flex-fill btn border-0 tooltipster" title="about" style="mix-blend-mode: luminosity; border-radius: 0px;" data-toggle="tab" href="#abt">
  429. <i class="fas fa-user"></i>
  430. </a>
  431. </li>
  432. <li class="nav-item col p-0" style="background-color: #782798">
  433. <a class="nav-link btn-outline-warning flex-fill btn border-0 tooltipster" title="story" style="mix-blend-mode: luminosity; border-radius: 0px" data-toggle="tab" href="#stry">
  434. <i class="fas fa-book"></i>
  435. </a>
  436. </li>
  437.  
  438. <li class="nav-item col p-0" style="background-color: #782798">
  439. <a class="nav-link flex-fill btn btn-outline-warning border-0 tooltipster" title="moodboard" style="mix-blend-mode: luminosity; border-radius: 0px" data-toggle="tab" href="#mdbrd">
  440. <i class="fas fa-image"></i>
  441. </a>
  442. </li>
  443.  
  444. <li class="nav-item col p-0" style="background-color: #782798">
  445. <a class="nav-link flex-fill btn btn-outline-warning border-0 tooltipster" title="relationships" style="mix-blend-mode: luminosity; border-radius: 0px" data-toggle="tab" href="#rships">
  446. <i class="fas fa-handshake"></i>
  447. </a>
  448. </li>
  449. </ul>
  450. </div>
  451.  
  452. <!-- ok dont remove the credits thx byeeee -->
  453.  
  454. </div>
  455.  
  456. <a href="/micro-wave" data-toggle="tooltip" title="code by micro-wave" style="color: #782798"><i class="fas fa-microwave"></i></a>
  457. <a href="/togo" data-toggle="tooltip" title="layout by togo" style="color: #782798"><i class="fas fa-table-layout"></i></a>
  458. </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!