Advertisement
LeafJelly

2000s Web User Profile - Pink - All Placeholder Images

Dec 4th, 2022 (edited)
2,133
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.53 KB | None | 0 0
  1. <!-----------------------------------------
  2. Free to Use User Profile Code
  3. Pink Theme - All Placeholder
  4. By LeafJelly
  5.  
  6. Background: #FFF
  7. Font: #e871b1
  8. Font Accent: #f557ac
  9. Button BG: #fef3f9
  10.  
  11. Sources for great 2000s profile decorations
  12. Eye strain and blood warning for these websites! They don't filter mature content.
  13. https://gifcity.carrd.co/
  14.  
  15. Rules
  16. 1. DO NOT REMOVE credits
  17. 2. DO NOT redistribute purchased codes
  18. 3. Turn off WYSIWYG before using my HTML codes and while editing, it'll break otherwise
  19. 4. You can modify and frankestein my codes with credit to all the source codes, and only if the other coders allow it.
  20. 5. You may NOT redistribute frankesteined codes under your own name, claiming it as your own work. Copy and pasting parts of my code without credit is theft, and takes advantage of my work that's provided for free.
  21. 6.You're allowed to heavily modify my codes, as long as credit to me stays on the page. If the credit breaks, feel free to write it in somewhere instead or at the bottom.
  22. -------------------------------------------->
  23. <div class="col-12 col-lg-8 m-auto">
  24.  
  25. <!-------------- Border ---------------------------------
  26. change the first p-2 from 0-5 to change the thickness
  27. --------------------------------------------------------->
  28. <div class="col-12 rounded-0 p-1" style="font-family:times new roman; color:#FFF; font-size:.9em; background: linear-gradient(to bottom right, #ffa8d4, #FFFFFF, #ffa8d4, #FFFFFF, #ffa8d4);">
  29.  
  30. <!-----Background--------
  31. Replace the URL with a pattern BG
  32. ------------------------->
  33. <div class="card rounded-0 px-0" style="background: url(
  34.  
  35. https://gifcity.carrd.co/assets/images/gallery70/f6d1454d.gif?v=d32b0bb8
  36.  
  37. ) center; color:#e871b1;">
  38.  
  39. <!----- Top Banner -----------------------------
  40. it repeats itself horizontally, Replace the URL
  41. --------------------------------------------------->
  42. <div class="col-12 m-0 p-3"
  43. style="background:url(
  44.  
  45. https://gifcity.carrd.co/assets/images/gallery46/e9bf9bf9.png?v=d32b0bb8
  46.  
  47. ) top; background-repeat: repeat-x;"></div>
  48.  
  49. <!--------------Content Box --------------------->
  50. <div class="col-12 col-lg-11 my-5 p-1 p-lg-5 mx-auto row"><div class="col-12 p-1"><div class="card rounded-0 p-1" style="background:#FFF"><div class="row no-gutters text-center mx-auto">
  51. <!-----------HEADER---------->
  52. <p class="text-uppercase mx-2" style="font-size:2.2em;font-weight:700; color:#f557ac">
  53. <!---Left Side Img Decoration--->
  54. <img src="https://via.placeholder.com/20x20">
  55. <img src="https://via.placeholder.com/20x20">
  56.  
  57. username or more decor
  58.  
  59. <!---Right Side Img Decoration--->
  60. <img src="https://via.placeholder.com/20x20">
  61. <img src="https://via.placeholder.com/20x20">
  62. </p>
  63. </div></div></div>
  64.  
  65. <div class="col-12 col-lg-9 p-0 row no-gutters">
  66. <!----------Left Side------------>
  67. <div class="col-12 col-lg-4 p-1">
  68. <div class="card rounded-0 p-1 text-center h-100" style="background:#FFF">
  69. <!-----Divider Replace the URL-------->
  70. <img src="https://via.placeholder.com/150x20" class="mx-auto">
  71.  
  72. <!--------Avatar Replace the URL------->
  73. <div class="square mx-auto my-1"
  74. style="background:url(
  75.  
  76. https://via.placeholder.com/200
  77.  
  78. ) center; background-size:cover; height:100px; width:100px; float:left"></div>
  79.  
  80. <!-----Divider Replace the URL-------->
  81. <img src="https://via.placeholder.com/150x20" class="mx-auto mb-2">
  82.  
  83. <span>
  84. Name/Nicknames
  85. </span>
  86. <p><img src="https://via.placeholder.com/20x20">
  87. Pronouns . Age . Gender
  88. <img src="https://via.placeholder.com/20x20">
  89. </p>
  90.  
  91. <a href="URL_HERE" class="btn rounded p-1 my-auto" style="color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  92. Twitter </a>
  93. <a href="URL_HERE" class="btn rounded p-1 my-auto" style="color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  94. Instagram </a>
  95. <a href="URL_HERE" class="btn rounded p-1 my-auto" style="color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  96. Youtube </a>
  97. <a href="URL_HERE" class="btn rounded p-1 my-auto" style="color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  98. ArtFight </a>
  99. <a href="URL_HERE" class="btn rounded p-1 my-auto" style="color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  100. Tumblr </a>
  101. <a href="URL_HERE" class="btn rounded p-1 my-auto" style="color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  102. Carrd </a>
  103. </div>
  104. </div>
  105.  
  106. <!----------Middle------------>
  107. <div class="col-12 col-lg-8 p-1"><div class="card rounded-0 p-1 text-center" style="background:#FFF">
  108. <!-----Blinkies-------->
  109. <p>
  110. <img src="https://via.placeholder.com/150x20">
  111. <img src="https://via.placeholder.com/150x20">
  112. <img src="https://via.placeholder.com/150x20">
  113. <img src="https://via.placeholder.com/150x20">
  114. <!------ Copy and place above here for more ------>
  115. </p>
  116.  
  117. <!----- Title -------->
  118. <p class="text-uppercase mx-2 text-center" style="font-size:1.4em;font-weight:700; color:#f557ac">
  119. ABOUT ME
  120. </p>
  121. <!-----Divider Replace the URL-------->
  122. <img src="
  123.  
  124. https://via.placeholder.com/400x20
  125.  
  126. " width="100%" class="mx-auto mb-1">
  127. <!------- Info it scrolls ------->
  128. <div class="px-1" style="height:200px; overflow:auto;">
  129. <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>
  130.  
  131. <!-----Friends Section-------->
  132. <p class="text-uppercase m-0 text-center" style="font-size:1.4em;font-weight:700; color:#f557ac">
  133. Friends
  134. </p>
  135. <!-----Divider Replace the URL-------->
  136. <img src="https://gifcity.carrd.co/assets/images/gallery48/fa02f5f0.gif?v=d32b0bb8" class="mx-auto">
  137. <p>List user names here with @username @ username
  138. </p>
  139. </div></div>
  140.  
  141.  
  142.  
  143. <div class="row no-gutters">
  144. <!-----------Art Status section------------>
  145. <div class="col-12 col-md-6 col-lg-6 p-1">
  146. <div class="card rounded-0 my-1 h-100" style="background:#FFF">
  147. <!----- Title -------->
  148. <p class="text-uppercase mx-2 text-center" style="font-size:1.4em;font-weight:700; color:#f557ac">
  149. <img src="https://via.placeholder.com/20">
  150. Art
  151. <img src="https://via.placeholder.com/20">
  152. </p>
  153.  
  154. <!-----Divider Replace the URL-------->
  155. <img src="
  156.  
  157. https://via.placeholder.com/300x20
  158.  
  159. " width="100%" class="mx-auto mb-1">
  160. <!------- Info------->
  161. <div class="px-2 my-auto">
  162. <div class="justify-content-between">
  163. <p>Commissions</p>
  164. <a href="URL_HERE" ><i style="color:#f557ac">Open</i></a>
  165. </div>
  166.  
  167. <div class="justify-content-between">
  168. <p>Trades</p>
  169. <i class="text-right">Closed</i>
  170. </div>
  171.  
  172. <div class="justify-content-between">
  173. <p>Requests</p>
  174. <i class="text-right">Closed</i>
  175. </div>
  176. </div></div></div>
  177.  
  178. <!-----------Trade Status section------------>
  179. <div class="col-12 col-md-6 col-lg-6 p-1">
  180. <div class="card rounded-0 my-1 text-center h-100" style="background:#FFF">
  181. <!----- Title -------->
  182. <p class="text-uppercase mx-2 text-center" style="font-size:1.4em;font-weight:700; color:#f557ac">
  183. <img src="https://via.placeholder.com/20x20">
  184. Trade
  185. <img src="https://via.placeholder.com/20x20">
  186. </p>
  187. <!-----Divider Replace the URL-------->
  188. <img src="
  189.  
  190. https://via.placeholder.com/300x20
  191.  
  192. " width="100%" class="mx-auto mb-1">
  193.  
  194. <!------- Buttons------->
  195. <div class="px-2 px-lg-3 text-uppercase">
  196. <a href="URL_HERE" class="btn btn-block rounded py-1" style="font-size:.9em;color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  197. Trades</a>
  198. <a href="URL_HERE" class="btn btn-block rounded my-1 py-1" style="font-size:.9em;color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  199. Sales</a>
  200. <a href="URL_HERE" class="btn btn-block rounded py-1" style="font-size:.9em;color:#f557ac; background:#fef3f9; border:1px solid #f557ac">
  201. Prefrences</a>
  202.  
  203. </div></div></div></div></div>
  204.  
  205. <!--------------- STAMPS ------------------------------
  206. Replace the URLS with img urls/addresses
  207. You can add as many stamps as you want!
  208. Remove this if you don't want it, or put something else in the <p>
  209. ------------------------------------------------------->
  210. <div class="col-12 col-lg-12 p-1">
  211. <div class="card rounded-0 p-1 text-center h-100" style="background:#FFF">
  212. <p>
  213. <img src="https://via.placeholder.com/100x55">
  214. <img src="https://via.placeholder.com/100x55">
  215. <img src="https://via.placeholder.com/100x55">
  216. <img src="https://via.placeholder.com/100x55">
  217. <img src="https://via.placeholder.com/100x55">
  218. <img src="https://via.placeholder.com/100x55">
  219. <!-----Copy and Paste above here for more stamps------>
  220. </p>
  221. </div></div>
  222. </div>
  223.  
  224. <!---------- Feautred Characters ------------>
  225. <div class="col-12 col-lg-3 py-1 px-1"><div class="card rounded-0 p-0 text-center" style="background:#FFF">
  226. <!-----Top Banner Fake Windows--------
  227. Replace the URL with a pattern to change the fake windows appears
  228. ------------------------------------->
  229. <div class="card-info mb-1"
  230. style="background: url(
  231.  
  232. https://gifcity.carrd.co/assets/images/gallery70/1fc3ac01.gif?v=d32b0bb8
  233.  
  234. ) center;">
  235.  
  236. <div class="row pull-right mr-1 pt-1">
  237. <div class="card px-1 py-2 mr-1" style="background:#f557ac;color:#FFF;"><i class="fa fa-minus fa-xs"></i></div>
  238. <div class="card px-1 py-2 mr-1" style="background:#f557ac;color:#FFF;"><i class="fa fa-window-restore fa-xs"></i></div>
  239. <div class="card px-1 py-2" style="background:#e871b1;color:#FFF;"><i class="fa fa-times fa-xs"></i></div>
  240. </div>
  241. <!-------Title----------->
  242. <p class="text-uppercase mx-2 text-left my-1" style="font-size:1em;font-weight:700; color:#f557ac">
  243. Featured
  244. </p>
  245. </div>
  246.  
  247. <div class="col-12 row no-gutters py-1 px-0 mx-auto">
  248. <!--------Character 1 ------->
  249. <div class="col-6 col-md-3 col-lg-12 mx-auto my-1">
  250. <!-------Icon------>
  251. <div class="square mx-auto" style="background:url(
  252.  
  253. https://via.placeholder.com/100
  254.  
  255. ) center;background-size:cover; height:100px; width:100px;"></div>
  256.  
  257. <!------ Link -------
  258. Delete the line of img src= if you don't want the little pixel decorations next to the name
  259. -------------------->
  260. <a href="URL_HERE" title="Character Name" class="text-uppercase tooltipster" style="color:#f557ac">
  261. <img src="https://via.placeholder.com/20">
  262. Name
  263. <img src="https://via.placeholder.com/20">
  264. </a></div>
  265.  
  266. <!--------Character 2 ------->
  267. <div class="col-6 col-md-3 col-lg-12 mx-auto my-1">
  268. <!-------Icon------>
  269. <div class="square mx-auto" style="background:url(
  270.  
  271. https://via.placeholder.com/100
  272.  
  273. ) center;background-size:cover; height:100px; width:100px;"></div>
  274.  
  275. <!------ Link -------
  276. Delete the line of img src= if you don't want the little pixel decorations next to the name
  277. -------------------->
  278. <a href="URL_HERE" title="Character Name" class="text-uppercase tooltipster" style="color:#f557ac">
  279. <img src="https://via.placeholder.com/20">
  280. Name
  281. <img src="https://via.placeholder.com/20">
  282. </a></div>
  283.  
  284. <!--------Character 3 ------->
  285. <div class="col-6 col-md-3 col-lg-12 mx-auto my-1">
  286. <!-------Icon------>
  287. <div class="square mx-auto" style="background:url(
  288.  
  289. https://via.placeholder.com/100
  290.  
  291. ) center;background-size:cover; height:100px; width:100px;"></div>
  292.  
  293. <!------ Link -------
  294. Delete the line of img src= if you don't want the little pixel decorations next to the name
  295. -------------------->
  296. <a href="URL_HERE" title="Character Name" class="text-uppercase tooltipster" style="color:#f557ac">
  297. <img src="https://via.placeholder.com/20">
  298. Name
  299. <img src="https://via.placeholder.com/20">
  300. </a></div>
  301.  
  302. <!------- Copy and Paste Above here for more Characters ------------->
  303. </div></div>
  304.  
  305. <!-----------------Small Page doll---------------------->
  306. <div class="col-12 text-center m-1">
  307. <p><img src="
  308.  
  309. https://via.placeholder.com/80
  310.  
  311. " style="max-height:150px;"></p>
  312. </div></div></div>
  313.  
  314. <!-----Bottom Banner, it repeats itself horizontally, Replace the URL-------->
  315. <div class="col-12 m-0 p-3"
  316. style="background:url(
  317.  
  318. https://gifcity.carrd.co/assets/images/gallery46/3f95c264.gif?v=d32b0bb8
  319.  
  320. ) bottom; background-repeat: repeat-x;"></div>
  321.  
  322. </div>
  323. </div>
  324.  
  325. <!--------CREDIT DO NOT REMOVE----------->
  326. <div class="text-center mt-1">
  327. <a href="/LeafJelly"> <i class="fa-solid fa-code text-dark fa-sm tooltipster" title="Code by LeafJelly"></i></a>
  328. </div>
  329.  
  330. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement