LeafJelly

Small Decorative Code - RB Med Theme - Solids - Short

Nov 1st, 2022
324
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.36 KB | None | 0 0
  1. <!----------------------------
  2. Free to Use Small Decorative Code
  3. Red & Blue Med Theme - Short Version
  4. Solid Colors
  5. by LeafJelly
  6.  
  7. Short Version: Mood board ONLY
  8.  
  9. Hex Codes
  10. Background 1: #B5D9FF
  11. Background 2: #F0F5FF
  12. Symbol: #FF5252
  13. Symbol 2: #5E99FF
  14. Font: #3B6FC9
  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. <div class="card col-12 border-0 mt-4 p-2" style="height:280px; min-width:380px; background:#B5D9FF; border-radius:.6em;">
  25. <div class="text-center" >
  26. <!----------Decorations Left Side------------>
  27. <i class="far fa-staff-snake" style="position:absolute; margin:-40px -155px; font-size:60px; transform:rotate(-10deg); color:#FF5252;"></i>
  28. <i class="fas fa-syringe" style="position:absolute; margin:-40px -45px; font-size:45px; transform:rotate(-10deg); color:#5E99FF"></i>
  29. <i class="fas fa-raindrops fa-flip-horizontal" style="position:absolute; margin:20px -60px; font-size:30px;; color:#5E99FF"></i>
  30.  
  31. <!-----------Character Image Must be a Square Image------------->
  32. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/56345531_AWNeZyOaMIRmZQs.png"
  33. class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px; background:#B5D9FF;background-attachment:fixed;">
  34. <!----------Decorations Right Side------------>
  35. <i class="fas fa-syringe" style="position:absolute; margin:-40px -5px; font-size:45px; transform:rotate(-80deg); color:#5E99FF"></i>
  36. <i class="fas fa-raindrops" style="position:absolute; margin:20px 30px; font-size:30px; ; color:#5E99FF"></i>
  37. <i class="far fa-capsules " style="position:absolute; margin:-30px 103px; font-size:40px; transform:rotate(30deg); color:#FF5252"></i>
  38.  
  39.  
  40. </div>
  41.  
  42. <!-----------Content Box------------->
  43. <div class="card col-0 px-1 m-0 text-center" style="height:210px; overflow:auto; font-size:12px; background:#F0F5FF; color:#3B6FC9;">
  44. <p class="my-auto" style="color:#3B6FC9; font-size:13px">
  45. Name · Age · Pro/nouns
  46. <br>Gender · Race/Species · Occupation
  47. </p>
  48. <div class="col-auto m-1 p-0" style="border-bottom:1px solid #B5D9FF; margin:auto"></div>
  49.  
  50.  
  51. <!--------Mood Board Replace the URLS ------------>
  52. <div class="row no-gutters pb-1">
  53. <div class="col-4 pr-1 border-0" style="height:130px">
  54. <div class="h-100" style="background-position:center;background-size:cover;
  55. background-image:url(
  56.  
  57. https://i.pinimg.com/564x/1e/df/cf/1edfcff173d5ba04d96bba3c0cf2f3c6.jpg
  58.  
  59. )"></div>
  60. </div>
  61.  
  62. <div class="col-4 pr-1 border-0" style="height:130px">
  63. <div class="h-100" style="background-position:center;background-size:cover;
  64. background-image:url(
  65.  
  66. https://data.whicdn.com/images/210631387/original.gif
  67.  
  68. )"></div>
  69. </div>
  70.  
  71. <div class="col-4 pr-1 border-0" style="height:130px">
  72. <div class="h-100" style="background-position:center;background-size:cover;
  73. background-image:url(
  74.  
  75. https://blog.kakaocdn.net/dn/bmqYNX/btqHXEubcCc/XCQr6ookJyiMaIVHGLBrr1/img.png
  76.  
  77. )"></div>
  78. </div>
  79. </div>
  80. </div>
  81.  
  82.  
  83.  
  84. </div>
  85. <!---------Decorations at the bottom left--------------->
  86. <i class="fas fa-mortar-pestle" style="position:absolute; margin:-30px -20px; font-size:50px; color:#5E99FF"></i>
  87.  
  88.  
  89. <div class="text-center" >
  90. <!---------Credit do not remove--------------->
  91. <a href="/LeafJelly" title="HTML by LeafJelly" style="color:#5E99FF"></i> <i class="fas fa-plus-large"></i></a>
  92.  
  93. <!---------Decorations at the bottom right--------------->
  94. <i class="far fa-capsules" style="position:absolute; margin:-30px 150px; font-size:50px; transform:rotate(-30deg); color:#FF5252"></i>
  95. </div>
  96. </div>
Advertisement
Add Comment
Please, Sign In to add comment