API tools faq
paste
Advertisement
Guest User

02. Rainbow

a guest
Nov 26th, 2022
207
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.27 KB | None | 0 0
raw download clone embed print report
  1. <!------------------------------------------------
  2. 02. Rainbow
  3.  
  4. Code by dashyowo on Toyhouse.
  5. Make sure to read my Terms of Service before using!
  6. Thank you for using and have fun!
  7. ------------------------------------------------->
  8.  
  9. <!--- START --->
  10.  
  11. <div class="my-lg-5 mx-auto" style="font-weight:500; font-size:.75em; color:#000; letter-spacing:.25px; line-height:10px;  max-width:500px">
  12.  
  13. <!--- FIRST BAR --->
  14. <div class="card d-block rounded-0 p-1" style="height:25px; border:2px solid #D5EDF9; background-color:#DFEFFF">
  15. <div class="justify-content-between">
  16. <p style="color:#77A5B4">
  17. toyhou.se/username
  18. </p>
  19. <p style="color:#77A5B4"><span style="text-decoration:underline">L</span>ogout<i class="fa-light fa-pipe mr-1 ml-1"></i><span style="text-decoration:underline">H</span>elp</p>
  20. </div>
  21. </div>
  22. <!------------->
  23.  
  24. <!--- SECOND BAR --->
  25. <div class="card d-block rounded-0 p-1" style="border:2px solid #D4D6D3; border-top-width:0px; background-color:#DBDBDB">
  26. <p style="color:#FFF"><span style="text-decoration:underline">H</span>ome<i class="fa-light fa-pipe mr-1 ml-1"></i><span style="text-decoration:underline">F</span>riends<i class="fa-light fa-pipe mr-1 ml-1"></i><span style="text-decoration:underline">B</span>log<i class="fa-light fa-pipe mr-1 ml-1"></i><span style="text-decoration:underline">S</span>earch</p>
  27. </div>
  28. <!------------->
  29.  
  30. <!--- THIRD BAR (MAIN BLOCK) --->
  31.  
  32. <div class="card d-block rounded-0 p-1" style="border:2px solid #EBEBEB; background-color:#FEFEFE">
  33.  
  34. <!--- FIRST ROW --->
  35.  
  36. <div class="row no-gutters">
  37.  
  38. <!--- FIRST COLUMN --->
  39.  
  40. <div class="col-4 py-1" style="align-content: center; text-align:center">
  41.  
  42. <!--- NAME --->
  43. <p class="mt-2" style="color:#939393; font-style:italic; font-weight:bold; text-transform:uppercase; font-size:2em">
  44. Name
  45. <i class="fa-solid fa-exclamation ml-1" style="color:#A2E07D"></i>
  46. </p>
  47. <!------------->
  48.  
  49. <!--- INFORMATION --->
  50. <p class="mt-2 mb-0" style="color:#B495C1; text-transform:uppercase">
  51. They/them
  52. <i class="fa-solid fa-sparkles mr-1 ml-1"></i>
  53. Minor/Adult
  54. </p>
  55. <p class="mb-0" style="color:#B495C1"><span class="mr-1" style="text-transform:uppercase">
  56. Nationality
  57. </span>
  58. Personality type
  59. </p>
  60. <p class="mb-3" style="color:#DBDBDB">
  61. text here text here text here
  62. </p>
  63. <!------------->
  64.  
  65. <!--- SOCIAL MEDIA LINKS --->
  66. <a href="LINK_HERE"><i class="fa fa-user fa-lg fa-fw tooltipster" style="color:#A2E07D;" title="Carrd"></i></a>
  67. <a href="LINK_HERE"><i class="fa-brands fa-lg fa-instagram fa-fw tooltipster" style="color:#A2E07D" title="Instagram"></i></a>
  68. <a href="LINK_HERE"><i class="fa-brands fa-lg fa-deviantart fa-fw tooltipster" style="color:#A2E07D" title="DeviantART"></i></a>
  69. <a href="LINK_HERE"><i class="fa-brands fa-lg fa-youtube fa-fw tooltipster" style="color:#A2E07D" title="YouTube"></i></a>
  70. <!------------->
  71.  
  72. </div>
  73.  
  74. <!------------->
  75.  
  76. <!--- SECOND COLUMN (IMAGE)--->
  77. <div class="col-4 py-1 px-2">
  78. <img src="https://i.imgur.com/ET97Ejh.png" style="width:150px; height:150px; object-fit:cover"/>
  79. </div>
  80. <!------------------------------------------------
  81. Copy and paste the link of your desired image inside: src="LINK GOES HERE"
  82. ------------------------------------------------->
  83. <!------------->
  84.  
  85. <!--- THIRD COLUMN (DiS&LiKES COLUMN) --->
  86.  
  87. <div class="col-4 py-1">
  88. <p class="mt-2" align="center" style="font-size:2em; font-weight:bold"><span style="color:#F0CDD4; font-style:italic">DiS&</span><span style="color:#939393">LiKES</span></p>
  89.  
  90. <!--- YAYY <3 SECTION --->
  91. <p class="mt-2 mb-2" style="color:#E5DEC4"><span class="mr-1" style="color:#939393; text-transform:uppercase; font-weight:bold">Yayy <3</span>
  92. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  93. </p>
  94. <!------------->
  95.  
  96. <!--- EWW SECTION --->
  97. <p align="right" style="color:#B4C4BA"><span class="mr-1" style="color:#939393; text-transform:uppercase; font-weight:bold">EWW</span>
  98. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  99. </p>
  100. </div>
  101. <!------------->
  102.  
  103. </div>
  104.  
  105. <!------------->
  106.  
  107. <!--- SECOND ROW (IMAGES ROW)--->
  108. <div class="row" style="justify-content: center">
  109. <div class="column mt-3 m-1">
  110. <img src="https://i.imgur.com/OjLBfT7.jpg" style="height:50px; width:50px">
  111. </div>
  112. <div class="column mt-3 m-1">
  113. <img src="https://i.imgur.com/I30TmZb.jpg" style="height:50px; width:50px">
  114. </div>
  115. <div class="column mt-3 m-1">
  116. <img src="https://i.imgur.com/G02oyRC.png" style="height:50px; width:50px">
  117. </div>
  118. <div class="column mt-3 m-1">
  119. <img src="https://i.imgur.com/1YYYThA.jpg" style="height:50px; width:50px">
  120. </div>
  121. <div class="column mt-3 m-1">
  122. <img src="https://i.imgur.com/85ooI8j.png" style="height:50px; width:50px">
  123. </div>
  124. <div class="column mt-3 m-1">
  125. <img src="https://i.imgur.com/5OSCamx.png" style="height:50px; width:50px">
  126. </div>
  127. </div>
  128. <!------------->
  129.  
  130. <!--- THIRD ROW --->
  131.  
  132. <div class="row no-gutters mt-3">
  133.  
  134. <!--- FIRST COLUMN--->
  135. <div class="col-7 px-1">
  136.  
  137. <!--- B4 U FOLLOW SECTION --->
  138. <p align="center" style="font-size:2em; font-weight:bold; text-transform:uppercase"><span class="mr-1" style="color:#E9DC98; font-style:italic">B4 U</span><span style="color:#939393">Follow</span></p>
  139. <p style="color:#91A3A5">
  140. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  141. </p>
  142. <!------------->
  143.  
  144. <!--- DON'T FOLLOW IF SECITON --->
  145. <p class="mt-1" align="center" style="font-size:2em; font-weight:bold"><span class="mr-1" style="color:#C9EFB4; font-style:italic; text-transform:uppercase">Don't</span><span class="mr-1" style="color:#939393">Follow</span><span style="color:#C9EFB4; text-transform:uppercase">If</span></p>
  146. <p style="color:#E4D9DD">
  147. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  148. </p>
  149. </div>
  150. <!------------->
  151.  
  152. <!--- SECOND COLUMN (IMAGE) --->
  153. <div class="col-5">
  154. <img src="https://i.imgur.com/7xO3e94.jpg" style="height:130px; width:200px; object-fit:cover">
  155. </div>
  156. <!------------->
  157.  
  158. </div>
  159.  
  160. <!------------->
  161.  
  162. <!--- FOURTH ROW --->
  163.  
  164. <div class="row no-gutters mt-3 mb-1">
  165.  
  166. <!--- FIRST COLUMN (IMAGE) --->
  167. <div class="col-4 px-1">
  168. <img src="https://i.imgur.com/MW96BWR.jpg" style="height:150px; width:150px; object-fit:cover">
  169. </div>
  170. <!------------->
  171.  
  172. <!--- SECOND COLUMN (ANILIST COLUMN) --->
  173. <div class="col-4 px-1 mt-3">
  174. <p align="center" style="font-size:2em; font-weight:bold; color:#939393">ANi<span style="color:#8CEDC4">LiST</span></p>
  175. <div class="card d-block rounded-0 mt-4 p-1" style="color:#939393; border:2px solid #C3CCCB; background-color:#FEFEFE">
  176. <p><span style="background:#E6E6E6">
  177. Main fandoms go here.
  178. </span>
  179. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  180. </p>
  181. </div>
  182. </div>
  183. <!------------->
  184.  
  185. <!--- THIRD COLUMN (STANLIST COLUMN) --->
  186.  
  187. <div class="col-4 px-1 mt-3">
  188.  
  189. <!--- ULTS!? SECTION --->
  190. <p align="center" style="font-size:2em; font-weight:bold; color:#B495C1">STAN<span style="color:#939393">LiST</span></p>
  191. <p style="color:#939393"><span style="font-style:italic; text-transform:uppercase">Ults<i class="fa-solid fa-question" style="font-style:italic"></i><i class="fa-solid fa-exclamation mr-1" style="font-style:italic"></i></span>
  192. <span class="mr-1" style="font-weight:400">
  193. text here
  194. </span>
  195. <span class="mr-1">
  196. text here
  197. </span>
  198. <span class="mr-1" style="font-weight:400">
  199. text here
  200. </span>
  201. text here
  202. </span>
  203. </p>
  204. <!------------->
  205.  
  206. <!--- STAN SECTION --->
  207. <div class="card d-block rounded-0 mt-3 p-1" style="color:#939393; border:2px solid #EFF3B6; background-color:#FFFBE8">
  208. <p>Stan</p>
  209. </div>
  210. <div class="card d-block rounded-0 p-1" style="color:#939393; font-weight:400; border:2px solid #EFF3B6; border-top-width:0px; background-color:#FEFEFE">
  211. <p>
  212. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel.
  213. </p>
  214. </div>
  215. <!------------->
  216.  
  217. </div>
  218. </div>
  219.  
  220. <!------------->
  221.  
  222. </div>
  223.  
  224. <!------------->
  225.  
  226. <!--- CREDITS (DO NOT DELETE) --->
  227. <div class="faded small text-right">
  228. <a href="https://toyhou.se/19019211.02-rainbow"><i class="fas fa-code text-muted fa-xs fa-fw tooltipster" title="Code by dashyowo"></i></a>
  229. </div>
  230. <!------------->
  231.  
  232. </div>
  233.  
  234. <!--- END --->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!