API tools faq
paste
t3ch13-c0l0rs

serpentine

t3ch13-c0l0rs
Jan 22nd, 2022 (edited)
136
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.78 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. GM EVERYONE!!!!!!!!!!!!! i made a new code for fun.........
  4. to change the blue accent you have to find the hue-rotates i did... theyre currently set at 120 but play around for different colors :-)
  5. this is ALL IN GREYSCALE!!!! u cannot add color sorry i tried
  6. to replace da imgs find the backgorund-image: url() and change whatever is in the parenthesis.... yass
  7. I HOPE U LIKE THIS CODE!!!!!!! i really liked making it
  8.  
  9. -->
  10.  
  11. <div class="col-12 mx-auto">
  12.  
  13. <!-- code start -->
  14.  
  15. <div class="col-md-8 col-sm-12 mx-auto">
  16.  
  17.  
  18. <div class="row no-gutters">
  19.  
  20. <!-- img div -->
  21.  
  22. <div class="col-12 p-1 mb-2" style="
  23. background-image: url(https://images.unsplash.com/photo-1582351172725-9ea33d3e7d82?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
  24. filter: brightness(75%) grayscale(100%) sepia(100%) hue-rotate(120deg) saturate(200%) contrast(1.2); mix-blend-mode: lighten;
  25. color: white; font-weight: 700; max-width: 39.57em">
  26.  
  27. <div class="justify-content-between">
  28.  
  29. <!-- text -->
  30.  
  31. <em style="mix-blend-mode: screen; color: yellow;">NAME . AGE . PRONOUNS</em>
  32.  
  33. <!-- fun icons! -->
  34.  
  35. <em><i class="fal fa-terminal"></i> <i class="fal fa-snake"></i> <i class="fal fa-snowflake"></i></em>
  36.  
  37. </div>
  38.  
  39. </div>
  40.  
  41. <!-- end of img/header div -->
  42.  
  43.  
  44.  
  45. <div class="p-1 col-md-5 col-sm-12 mr-2 mb-1" style="background-image: url(https://images.unsplash.com/photo-1513703167344-a234b7758525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80); filter: brightness(60%) grayscale(100%) contrast(1.5); max-width: 19em; max-width: 15em; z-index: -5">
  46.  
  47. <div style="filter: brightness(100%) sepia(50%) hue-rotate(120deg) grayscale(0%);">
  48.  
  49. <!-- pfp -->
  50.  
  51. <div style="background-image: url(https://i.imgur.com/6ulKJgO.png); height: 15em; background-size: cover; z-index: 5; filter: brightness(100%) grayscale(0%) contrast(1); position: static; z-index: 5"></div>
  52. </div>
  53.  
  54. </div>
  55.  
  56. <!-- end of pfp -->
  57.  
  58. <div class="p-1 col-md-8 col-sm-12 mb-1" style="background-image: url(https://images.unsplash.com/photo-1513703167344-a234b7758525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80); filter: brightness(70%) grayscale(100%) contrast(1.5); max-width: 24em; max-height: 15.6em; overflow: scroll">
  59.  
  60. <!-- about me -->
  61.  
  62. <div class="col-12 p-1 mb-1" style="background-color: rgba(0, 0, 0, 0.5); color: white; filter: brightness(140%) grayscale(0%) contrast(100%); text-align: center; font-weight: 700; font-size: 18px">
  63.  
  64. ABOUT ME
  65.  
  66. </div>
  67.  
  68. <!-- text -->
  69.  
  70. <div class="col-12 p-1" style="background-color: rgba(0, 0, 0, 0.5); color: white; filter: brightness(140%) grayscale(0%) contrast(100%); text-align: center;">
  71.  
  72. <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. 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>
  73.  
  74. </div>
  75.  
  76. </div>
  77.  
  78. <!-- end of about me -->
  79.  
  80. <div class="p-1 col-md-4 col-sm-12 mr-2 mb-1" style="background-image: url(https://images.unsplash.com/photo-1513703167344-a234b7758525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80); filter: brightness(70%) grayscale(100%) contrast(1.5); max-width: 15em; ">
  81.  
  82. <!-- social link -->
  83.  
  84. <div class="col-12 p-2" style="background-color: rgba(0, 0, 0, 0.5); color: white; filter: brightness(140%) grayscale(0%) contrast(100%)">
  85.  
  86. <div class="justify-content-between">
  87.  
  88. <!-- TWITTER link -->
  89.  
  90. <a class="text-light" href="https://twitter.com" target=_blank style="font-size: 16px">
  91. <i class="fab fa-twitter"></i>
  92. </a>
  93.  
  94. <!-- insta link -->
  95.  
  96. <a class="text-light" href="/insta" target=_blank style="font-size: 16px">
  97. <i class="fab fa-instagram "></i>
  98. </a>
  99.  
  100. <!-- carrd link -->
  101.  
  102. <a class="text-light" href="/carrd" target=_blank style="font-size: 16px">
  103. <i class="fal fa-id-card"></i>
  104. </a>
  105.  
  106.  
  107.  
  108. <!-- real end of links, if u wanna add more just copy n paste this:
  109.  
  110. <a href="/url" target=_blank style="font-size: 16px">
  111. <i class="fal fa-question"></i>
  112. </a>
  113.  
  114. i'd cap it at 5.
  115. -->
  116.  
  117. </div>
  118.  
  119. </div>
  120.  
  121. </div>
  122.  
  123. <!-- end of liinks -->
  124.  
  125. <div class="p-1 col-md-10 col-sm-12 mb-1 mr-5" style="background-image: url(https://images.unsplash.com/photo-1513703167344-a234b7758525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80); filter: brightness(70%) grayscale(100%) sepia(100%) hue-rotate(120deg) contrast(1.5) ; max-width: 24em; max-height: 14em; overflow: scroll">
  126.  
  127. <!-- COOL audio player -->
  128.  
  129. <div class="col-12 p-2" style="background-color: rgba(0, 0, 0, 0.5); color: white; font-weight: 100; height: 100%; font-size: 18px">
  130.  
  131. <div class="justify-content-between">
  132.  
  133. <!-- why do i use these in every one of my codes anyways uh replace "N1RXcIXrHx0" with the last part of your youtube audio aka the "XmCQQopIh6I" in https://www.youtube.com/watch?v=XmCQQopIh6I -->
  134.  
  135. <span><iframe class="flex-fill"
  136. style="height: 1em; width: 1em; opacity: .01; position: absolute; margin-top: 6px; z-index: 1" frameborder="0"
  137. allow="encrypted-media; gyroscope; picture-in-picture; accelerometer"
  138. allowfullscreen
  139. src="https://www.youtube.com/embed/N1RXcIXrHx0"></iframe>
  140.  
  141. <i class="fal fa-play"></i>
  142.  
  143. <!-- song name -->
  144.  
  145. <em>SERPENTINE - RHODE STRIXMAN</em>
  146.  
  147. </span>
  148.  
  149. <!-- COOL and FUN icon -->
  150.  
  151. <em><i class="fal fa-deer"></i></em>
  152.  
  153. </div>
  154.  
  155. <!-- end of audio thing lol -->
  156.  
  157. </div>
  158.  
  159. </div>
  160.  
  161. <!-- request stats -->
  162.  
  163. <div class="p-1 col-md-1 col-sm-12 mr-2 mb-1" style="background-image: url(https://images.unsplash.com/photo-1513703167344-a234b7758525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80); filter: brightness(70%) grayscale(100%) contrast(1.5); max-width: 15em;">
  164.  
  165. <div class="col-12 p-2" style="background-color: rgba(0, 0, 0, 0.5); color: white; filter: brightness(140%) grayscale(0%) contrast(100%); text-align: center; font-size: 20px">
  166.  
  167. <!-- trades -->
  168.  
  169. <span data-toggle="tooltip" title="trades: open"><i class="fal fa-arrow-right-arrow-left"></i></span>
  170.  
  171. <br>
  172.  
  173. <!-- requests!!!! -->
  174.  
  175. <span data-toggle="tooltip" title="requests: closed"><i class="fal fa-gift"></i></span>
  176.  
  177. <br>
  178.  
  179. <!-- commissions -->
  180.  
  181. <span data-toggle="tooltip" title="commissions: open"><i class="fal fa-dollar"></i></span>
  182.  
  183. <!-- roleplays -->
  184.  
  185. <br>
  186.  
  187. <span data-toggle="tooltip" title="roleplays: open"><i class="fal fa-dice-d20"></i></span>
  188.  
  189.  
  190. <!-- end of status -->
  191.  
  192. </div>
  193.  
  194. </div>
  195.  
  196. <!-- friends + characters -->
  197.  
  198. <div class="p-1 col-md-11 col-sm-12" style="background-image: url(https://images.unsplash.com/photo-1513703167344-a234b7758525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80); filter: brightness(70%) grayscale(100%) contrast(1.5); max-width: 35.2em; max-height: 15.6em;">
  199.  
  200. <div class="col-12">
  201.  
  202. <!-- tab headers -->
  203.  
  204. <ul class="nav nav-tabs border-0">
  205.  
  206. <li class="nav-item mr-1">
  207.  
  208. <a class="nav-link active show border-0 btn-outline-primary" data-toggle="tab" style="border-radius: 0; max-height: 1.5em; font-size: 12px; padding: .05em 1em; background-color: rgba(0, 0, 0, 0.5); color: white; font-weight: 800; letter-spacing: .04em" href="#friends"> friends </a>
  209.  
  210. </li>
  211.  
  212. <li class="nav-item">
  213.  
  214. <a class="nav-link show border-0" data-toggle="tab" style="border-radius: 0; max-height: 1.5em; font-size: 12px; padding: .05em 1em; background-color: rgba(0, 0, 0, 0.5); color: white; font-weight: 800; letter-spacing: .04em" href="#characters"> characters </a>
  215.  
  216. </li>
  217.  
  218.  
  219. </ul>
  220.  
  221. </div>
  222.  
  223. <!-- tab header end -->
  224.  
  225. <div class="col-12 p-4" style="background-color: rgba(0, 0, 0, 0.5); color: white; filter: brightness(140%) grayscale(0%) contrast(100%); max-height: 14em; overflow: scroll">
  226.  
  227. <div class="tab-content">
  228.  
  229. <!-- friends -->
  230.  
  231. <div class="tab-pane fade active show" id="friends">
  232.  
  233. <div class="row no-gutters">
  234.  
  235. <!-- friend 1 -->
  236.  
  237. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  238. <a href="friendname">
  239. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/FWhQYjc/Psalms-artwork.jpg); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  240.  
  241. </div>
  242.  
  243. FRIEND NAME</a>
  244. </div>
  245.  
  246. <!-- friend 2 -->
  247.  
  248. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  249. <a href="friendname">
  250. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/qD71w1b/B-SIDE-U-2015-cover.png); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  251.  
  252. </div>
  253.  
  254. FRIEND NAME</a>
  255. </div>
  256.  
  257. <!-- friend 3 -->
  258.  
  259. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  260. <a href="friendname">
  261. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/LgsHsyn/Download-kureihii.jpg); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  262.  
  263. </div>
  264.  
  265. FRIEND NAME</a>
  266. </div>
  267.  
  268. <!-- friend 4 -->
  269.  
  270. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  271. <a href="friendname">
  272. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://pbs.twimg.com/media/EjdebAMVoAAn2ke?format=jpg&name=large); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  273.  
  274. </div>
  275.  
  276. FRIEND NAME</a>
  277. </div>
  278.  
  279. <!-- friend 5 -->
  280.  
  281. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  282. <a href="friendname">
  283. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/4Yb2xZQ/Ffforceee27-1.png); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  284.  
  285. </div>
  286.  
  287. FRIEND NAME</a>
  288. </div>
  289.  
  290. <!-- friend 6 -->
  291.  
  292. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  293. <a href="friendname">
  294. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/fpTxFhB/Download-spring.jpg); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  295.  
  296. </div>
  297.  
  298. FRIEND NAME</a>
  299. </div>
  300.  
  301.  
  302. <!-- copy n paste above this line for friends.. im gonna mention that the whole box scrolls and not just the black one
  303.  
  304. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  305. <a href="friendname">
  306. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(img url); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  307.  
  308. </div>
  309.  
  310. FRIEND NAME</a>
  311. </div>
  312. -->
  313.  
  314. </div>
  315.  
  316. </div>
  317.  
  318. <!-- characters -->
  319.  
  320. <div class="tab-pane fade" id="characters">
  321.  
  322. <div class="row no-gutters">
  323.  
  324. <!-- character 1 -->
  325.  
  326. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  327. <a href="friendname">
  328. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/FWhQYjc/Psalms-artwork.jpg); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  329.  
  330. </div>
  331.  
  332. CHARACTER NAME</a>
  333. </div>
  334.  
  335. <!-- character 2 -->
  336.  
  337. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  338. <a href="friendname">
  339. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/qD71w1b/B-SIDE-U-2015-cover.png); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  340.  
  341. </div>
  342.  
  343. CHARACTER NAME</a>
  344. </div>
  345.  
  346. <!-- character 3 -->
  347.  
  348. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  349. <a href="friendname">
  350. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/LgsHsyn/Download-kureihii.jpg); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  351.  
  352. </div>
  353.  
  354. CHARACTER NAME</a>
  355. </div>
  356.  
  357. <!-- character 4 -->
  358.  
  359. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  360. <a href="friendname">
  361. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://pbs.twimg.com/media/EjdebAMVoAAn2ke?format=jpg&name=large); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  362.  
  363. </div>
  364.  
  365. CHARACTER NAME</a>
  366. </div>
  367.  
  368. <!-- character 5 -->
  369.  
  370. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  371. <a href="friendname">
  372. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/4Yb2xZQ/Ffforceee27-1.png); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  373.  
  374. </div>
  375.  
  376. CHARACTER NAME</a>
  377. </div>
  378.  
  379. <!-- character 6 -->
  380.  
  381. <div class="col-md-4 col-sm-6 mb-2" style="text-align: center">
  382. <a href="friendname">
  383. <div class="rounded-circle mb-1 ml-3 btn-outline-primary" style="background-image: url(https://i.ibb.co/fpTxFhB/Download-spring.jpg); border: 2px dashed; height: 8em; width: 8em; background-size: cover; transition-duration: .3s">
  384.  
  385. </div>
  386.  
  387. CHARACTER NAME</a>
  388. </div>
  389.  
  390. </div>
  391.  
  392.  
  393. </div>
  394.  
  395. <!-- tabs end -->
  396.  
  397. </div>
  398.  
  399. </div>
  400.  
  401. </div>
  402.  
  403. <!-- DA LAST BOX -->
  404.  
  405. <div class="col-12 p-1 mt-1" style="
  406. background-image: url(https://images.unsplash.com/photo-1582351172725-9ea33d3e7d82?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
  407. filter: brightness(75%) grayscale(100%) sepia(100%) hue-rotate(120deg) saturate(200%) contrast(1.2); mix-blend-mode: lighten;
  408. color: white; font-weight: 700; max-width: 39.57em">
  409.  
  410. <div class="justify-content-between">
  411.  
  412. <!-- code credit DONT REMOVE PLKEASE -->
  413.  
  414. <em>
  415. <a href="/micro-wave" data-toggle="tooltip" data-original-title="code by micro-wave" title="code by micro-wave"><i class="fal fa-face-awesome"></i></a>
  416. </em>
  417.  
  418. <!-- ur little quote thing -->
  419.  
  420. <em>A LITTLE CATCHPHRASE...</em>
  421.  
  422.  
  423. </div>
  424.  
  425. </div>
  426.  
  427. <!-- end of rows... -->
  428.  
  429. </div>
  430.  
  431. </div>
  432.  
  433. <!-- code END! yass -->
  434.  
  435. </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!