API tools faq
paste
vladimirpinarum

F2U Pride

vladimirpinarum
Apr 9th, 2021 (edited)
502
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.89 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. PRIDE PROFILE
  3. Profile by HTMLobster (noll)
  4.  
  5.  
  6. To replace the flag colors just locate the default background (or whatever your current is) and paste in the new one you want to use. I included a few flags but you can make any as long as they are just stripes! Note: there is also the <hr> (the divider) background, which will need to be edited to be horizontal (to right) but you can just replace the colors there.
  7.  
  8. Flag replacements
  9. Rainbow (Default): background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);
  10. Lesbian: background:linear-gradient(#d42b00 20%, #fe9955 20%, #fe9955 40%, #ffffff 40%, #ffffff 60%, #d161a3 60%, #d161a3 80%, #a20161 80%, #a20161);
  11. Bisexual: background:linear-gradient(#d60270 40%, #9b4f97 40%, #9b4f97 60%, #0038a7 60%, #0038a7);
  12. Trans: background:linear-gradient(#5bcefa 20%, #f5a8b8 20%, #f5a8b8 40%, #ffffff 40%, #ffffff 60%, #f5a8b8 60%, #f5a8b8 80%, #5bcefa 80%, #5bcefa);
  13. Asexual: background:linear-gradient(#000000 25%, #a3a3a3 25%, #a3a3a3 50%, #ffffff 50%, #ffffff 75%, #81007f 75%, #81007f);
  14. Nonbinary: background:linear-gradient(#fef430 25%, #ffffff 25%, #ffffff 50%, #9c58d1 50%, #9c58d1 75%, #000000 75%, #000000);
  15. Pansexual: background:linear-gradient(#ff228c 33%, #ffd800 33%, #ffd800 67%, #22b1ff 67%, #22b1ff);
  16. Polysexual: background:linear-gradient(#ff1ea8 33%, #37ea8e 33%, #37ea8e 67%, #1fa1ff 67%, #1fa1ff);
  17. Omnisexual: background:linear-gradient(#ff9bcd 20%, #ff54be 20%, #ff54be 40%, #250046 40%, #250046 60%, #665eff 60%, #665eff 80%, #8ca5ff 80%, #8ca5ff);
  18. Aromantic: background:linear-gradient(#3da542 20%, #a7d479 20%, #a7d479 40%, #ffffff 40%, #ffffff 60%, #a9a9a9 60%, #a9a9a9 80%, #000000 80%, #000000);
  19. Agender: background:linear-gradient(#000000 14%, #bcc4c7 14%, #bcc4c7 28%, #ffffff 28%, #ffffff 42%, #b7f684 42%, #b7f684 57%, #ffffff 57%, #ffffff 71%, #bcc4c7 71%, #bcc4c7 85%, #000000 85%, #000000);
  20. Genderfluid: background:linear-gradient(#fe75a1 20%, #ffffff 20%, #ffffff 40%, #be17d6 40%, #be17d6 60%, #000000 60%, #000000 80%, #333ebc 80%, #333ebc);
  21. Genderqueer: background:linear-gradient(#b57edc 33%, #ffffff 33%, #ffffff 67%, #4a8123 67%, #4a8123);
  22. Demiboy: background:linear-gradient(#7f7f7f 14%, #c4c4c4 14%, #c4c4c4 28%, #9ad9eb 28%, #9ad9eb 42%, #ffffff 42%, #ffffff 57%, #9ad9eb 57%, #9ad9eb 71%, #c4c4c4 71%, #c4c4c4 85%, #7f7f7f 85%, #7f7f7f);
  23. Demigirl: background:linear-gradient(#7f7f7f 14%, #c4c4c4 14%, #c4c4c4 28%, #feaec9 28%, #feaec9 42%, #ffffff 42%, #ffffff 57%, #feaec9 57%, #feaec9 71%, #c4c4c4 71%, #c4c4c4 85%, #7f7f7f 85%, #7f7f7f);
  24.  
  25.  
  26. TOS:
  27. Do not remove my credit. You may edit it, however.
  28. You may edit code/frankenstein with others as long as their TOS allows!
  29. Turn off WYSIWYG and turn on Code Editor.
  30. Ask me if you want to redistribute edits. Must be F2U.
  31. ------------------------------------------------------------------>
  32. <div class="container" style="max-width:700px">
  33. <div class="rounded p-3" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  34. <div class="row no-gutters">
  35. <div class="rounded col-auto mr-md-2 p-2 mx-auto mb-2 mb-md-0" style="background:#fbf9f6;">
  36. <div class="rounded p-1" style="height:200px; width:200px; background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  37. <!--- Side icon. 200x200px --->
  38. <div class="rounded p-1" style="height:192px; width:192px; background:#fbf9f6 url('https://via.placeholder.com/200.png');">
  39. </div>
  40. </div>
  41. </div>
  42. <div class="rounded col-md p-2" style="background:#fbf9f6;">
  43. <div class="px-2" style="color:#333;">
  44. <div class="row no-gutters" style="font-size:1.2em;">
  45. <!--- Name --->
  46. <div class="col-sm text-center text-sm-left">Name</div>
  47. <!--- Info --->
  48. <div class="col-sm-auto text-sm-right text-center">age • gender • pronouns</div>
  49. </div>
  50. <!--- Divider --->
  51. <hr class="rounded border-0 mt-1 mb-2 mx-0" style="height:4px; background:linear-gradient(to right, #ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  52. <!--- Description --->
  53. <div style="height:159px; overflow-y:auto;">
  54. <p>Integer pretium consectetur ex, quis tristique eros blandit ac. Curabitur lacus enim, facilisis sed venenatis vitae, elementum in erat. Nam lacus dolor, lobortis sit amet orci nec, aliquet aliquam nulla. Etiam viverra lacus elit, vitae semper turpis hendrerit ac. Nam lobortis massa non fermentum molestie. Sed quis nunc mattis lectus gravida semper. Cras condimentum orci eget leo luctus, ut blandit tellus sagittis. Aliquam eu lectus sed felis accumsan sodales.</p>
  55.  
  56. <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin placerat lacus in lorem faucibus volutpat. Sed eget venenatis metus. Aliquam sem tellus, lacinia vel tincidunt ut, efficitur ut risus. Vivamus in neque ac neque tristique interdum. In ac tellus mauris. Praesent varius auctor orci, vitae pretium justo rhoncus eget.</p>
  57. <!--- Add as many paragraphs as you want. --->
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <!--- Social media links. search for SOC_URL and SOC_TITLE --->
  63. <div class="row no gutters mt-2 px-3 justify-content-around">
  64. <!--- Link 1 --->
  65. <div class="rounded col-md col-3 p-1 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  66. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  67. <!--- Link info --->
  68. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="SOC_URL" data-toggle="tooltip" title="SOC_TITLE"><i class="fab fa-instagram" style="font-size:2em;"></i></a>
  69. </div>
  70. </div>
  71. <!--- Link 2 --->
  72. <div class="rounded col-md col-3 p-1 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  73. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  74. <!--- Link info --->
  75. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="SOC_URL" data-toggle="tooltip" title="SOC_TITLE"><i class="fab fa-twitter" style="font-size:2em;"></i></a>
  76. </div>
  77. </div>
  78. <!--- Link 3 --->
  79. <div class="rounded col-md col-3 p-1 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  80. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  81. <!--- Link info --->
  82. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="SOC_URL" data-toggle="tooltip" title="SOC_TITLE"><i class="fab fa-deviantart" style="font-size:2em;"></i></a>
  83. </div>
  84. </div>
  85. <!--- Link 4 --->
  86. <div class="rounded col-md col-3 p-1 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  87. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  88. <!--- Link info --->
  89. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="SOC_URL" data-toggle="tooltip" title="SOC_TITLE (name#0000)"><i class="fab fa-discord" style="font-size:2em;"></i></a>
  90. </div>
  91. </div>
  92. <!--- Link 5 --->
  93. <div class="rounded col-md col-3 p-1 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  94. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  95. <!--- Link info --->
  96. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="SOC_URL" data-toggle="tooltip" title="SOC_TITLE"><i class="fab fa-patreon" style="font-size:2em;"></i></a>
  97. </div>
  98. </div>
  99. <!--- Link 6 --->
  100. <div class="rounded col-md col-3 p-1 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  101. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  102. <!--- Link info --->
  103. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="SOC_URL" data-toggle="tooltip" title="SOC_TITLE"><i class="fas fa-mug" style="font-size:2em;"></i></a>
  104. </div>
  105. </div>
  106. <!--- Add more links above this line. They will resize to fit. Change i class to change icon. --->
  107. <div class="rounded col-md col-3 p-1 mr-md-0 mr-2 mb-2 mb-md-0" style="background:#fbf9f6;">
  108. <div class="p-1 rounded" style="background:linear-gradient(#ff1e26 17%, #fe941e 17%, #fe941e 34%, #ffff00 34%, #ffff00 52%, #06bd01 52%, #06bd01 68%, #001997 68%, #001997 85%, #750087 85%, #750087);">
  109. <a class="btn w-100" style="color:#ff1e26; background:#fbf9f6;" href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="theme by noll"><i class="fas fa-code" style="font-size:2em;"></i></a>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </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!