Advertisement
LeafJelly

Small Decorative Code - Pink Pills Theme - IMG BG - Short

Nov 1st, 2022
336
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.20 KB | None | 0 0
  1. <!----------------------------
  2. Free to Use Small Decorative Code
  3. Pink Pills Theme - Short Version
  4. Image/Pattern Background
  5. by LeafJelly
  6.  
  7. Short Version: Mood board ONLY
  8.  
  9. Hex Codes
  10. Background 1: #FFE8F0
  11. Background 2: #FFCFE0
  12. Symbol: #FF9EC1
  13. Symbol 2: #FFB8D1
  14. Font: #E7506E
  15.  
  16. Customization
  17. fas - is the symbol weight s=solid r=regular l-light t=thin d=duotone
  18. fa-symbol changes what the symbol is using the names found here https://fontawesome.com/ search for the symbols you want here adn replace the name with it.
  19. transform:rotate(#deg) - Rotates Symbols
  20. margin: #px #px - changes the positon of the symbol in Y X order. -Y moves up -X moves left. +Y moves down +X moves right.
  21. ---------------------------->
  22. <div class="container col-md-8 col-lg-3 my-4 p-1">
  23.  
  24. <!-----Background Image Replace the URL----------->
  25. <div class="card col-12 border-0 mt-4 p-2" style="height:280px; min-width:380px; background:#FFE8F0; border-radius:.6em;
  26. background:url(https://64.media.tumblr.com/9e8634dc4d6a625479ec19244e5b0f2a/tumblr_inline_mrhsdtQFhm1qz4rgp.jpg) center">
  27.  
  28. <div class="text-center" >
  29. <!----------Decorations Left Side------------>
  30. <i class="far fa-bandage" style="position:absolute; margin:-30px -155px; font-size:50px; transform:rotate(-35deg); color:#FF9EC1;"></i>
  31. <i class="fas fa-syringe" style="position:absolute; margin:-40px -45px; font-size:45px; transform:rotate(-10deg); color:#FF9EC1"></i>
  32. <i class="fas fa-tablets" style="position:absolute; margin:30px -110px; font-size:30px;transform:rotate(70deg); color:#FFB8D1"></i>
  33. <i class="fas fa-pills" style="position:absolute; margin:20px -60px; font-size:30px;transform:rotate(40deg); color:#FFB8D1"></i>
  34.  
  35. <!-----------Background Image & Character Image Must be a Square Image------------->
  36. <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/18229448?1664662989"
  37.  
  38. class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px; background:#FFE8F0;
  39. background:url(https://64.media.tumblr.com/9e8634dc4d6a625479ec19244e5b0f2a/tumblr_inline_mrhsdtQFhm1qz4rgp.jpg) fixed">
  40. <!----------Decorations Right Side------------>
  41. <i class="fas fa-syringe" style="position:absolute; margin:-40px -5px; font-size:45px; transform:rotate(-80deg); color:#FF9EC1"></i>
  42. <i class="far fa-capsules" style="position:absolute; margin:20px 30px; font-size:30px;transform:rotate(-40deg); color:#FFB8D1"></i>
  43. <i class="far fa-capsules" style="position:absolute; margin:30px 80px; font-size:30px;transform:rotate(40deg); color:#FFB8D1"></i>
  44. <i class="far fa-bandage " style="position:absolute; margin:-25px 103px; font-size:40px; transform:rotate(35deg); color:#FF9EC1"></i>
  45.  
  46.  
  47. </div>
  48.  
  49. <!-----------Content Box------------->
  50. <div class="card col-0 px-1 m-0 text-center" style="height:210px; overflow:auto; font-size:12px; background:#FFF5F8; color:#E7506E;">
  51. <p class="my-auto" style="color:#E7506E; font-size:13px">
  52. Name · Age · Pro/nouns
  53. <br>Gender · Race/Species · Occupation
  54. </p>
  55. <div class="col-auto m-1 p-0" style="border-bottom:1px solid #FFE8F0; margin:auto"></div>
  56.  
  57.  
  58. <!--------Mood Board Replace the URLS ------------>
  59. <div class="row no-gutters pb-1">
  60. <div class="col-4 pr-1 border-0" style="height:130px">
  61. <div class="h-100" style="background-position:center;background-size:cover;
  62. background-image:url(
  63.  
  64. https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT7yy2bXeE1Tbm1wtp_nM49kgzVBTpm3YmuGBwtwEwuegQtKskQuE5m1JUSGs649ekwyOo&usqp=CAU
  65.  
  66. )"></div>
  67. </div>
  68.  
  69. <div class="col-4 pr-1 border-0" style="height:130px">
  70. <div class="h-100" style="background-position:center;background-size:cover;
  71. background-image:url(
  72.  
  73. https://i.pinimg.com/originals/6f/bf/12/6fbf12413ba140e1caf7f3921059e9b2.jpg
  74.  
  75. )"></div>
  76. </div>
  77.  
  78. <div class="col-4 pr-1 border-0" style="height:130px">
  79. <div class="h-100" style="background-position:center;background-size:cover;
  80. background-image:url(
  81.  
  82. https://i.pinimg.com/736x/22/4c/b4/224cb42f5769c7ab9702b6b3623da985--glitter-pills-pastel-colours.jpg
  83.  
  84. )"></div>
  85. </div>
  86. </div>
  87. </div>
  88.  
  89.  
  90.  
  91. </div>
  92. <!---------Decorations at the bottom left--------------->
  93. <i class="fas fa-tablets fa-flip-horizontal" style="position:absolute; margin:-30px -20px; font-size:50px; color:#FFB8D1"></i>
  94. <i class="far fa-capsules" style="position:absolute; margin:-10px 50px; font-size:40px; transform:rotate(-50deg); color:#FFB8D1"></i>
  95.  
  96. <div class="text-center" >
  97. <!---------Credit do not remove--------------->
  98. <a href="/LeafJelly" title="HTML by LeafJelly" style="color:#FFB8D1"></i> <i class="fas fa-plus-large"></i></a>
  99.  
  100. <!---------Decorations at the bottom right--------------->
  101. <i class="far fa-bandage" style="position:absolute; margin:-20px 150px; font-size:35px; transform:rotate(-30deg); color:#FF9EC1"></i>
  102. </div>
  103. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement