Advertisement
LeafJelly

Small Decorative Code - Toxic Science Theme - Solids - Short

Nov 2nd, 2022
243
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.55 KB | None | 0 0
  1. <!----------------------------
  2. Free to Use Small Decorative Code
  3. Toxic Theme - Short Version
  4. Solid Colors
  5. by LeafJelly
  6.  
  7. Short Version: Mood board ONLY
  8.  
  9. Hex Codes
  10. Background 1: #8417F6
  11. Background 2: #9CCF4C
  12. Symbol: #A6D955
  13. Symbol 2: #DE1AF6
  14. Font: #3C008E
  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:#8417F6; border-radius:.6em;">
  25. <div class="text-center" >
  26. <!----------Decorations Left Side------------>
  27. <i class="far fa-flask" style="position:absolute; margin:-45px -155px; font-size:60px; transform:rotate(-25deg); color:#A6D955;"></i>
  28. <i class="fas fa-vial" style="position:absolute; margin:-40px -45px; font-size:45px; transform:rotate(-10deg); color:#A6D955"></i>
  29. <i class="fas fa-raindrops" style="position:absolute; margin:20px -60px; font-size:30px;; color:#A6D955"></i>
  30.  
  31. <!-----------Character Image Must be a Square Image------------->
  32. <img src="https://cdn.discordapp.com/attachments/395263691085316096/1035760970850631710/packimp_by_cbts004_crop.png"
  33. class="rounded-circle p-2 mb-1" style="height:120px; width:120px; margin-top:-50px; background:#8417F6;background-attachment:fixed;">
  34. <!----------Decorations Right Side------------>
  35. <i class="fas fa-vial" style="position:absolute; margin:-40px -5px; font-size:45px; transform:rotate(-80deg); color:#A6D955"></i>
  36. <i class="fas fa-raindrops" style="position:absolute; margin:20px 30px; font-size:30px; ; color:#A6D955"></i>
  37. <i class="fas fa-vial" style="position:absolute; margin:-40px 100px; font-size:60px; transform:rotate(-5deg); color:#A6D955"></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:#9CCF4C; color:#3C008E;">
  44. <p class="my-auto" style="color:#3C008E; 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 #8417F6; 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://directorsblog.nih.gov/wp-content/uploads/2016/12/neurons.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://www.ifam.fraunhofer.de/en/technologies/vuv-radiation-optimizes-silicone-properties-at-the-surface/jcr:content/stage/stageParsys/stage_slide_copy/image.img.jpg/1638879313096/silikonmodifikation-buehne.jpg
  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://www.atcc.org/-/media/images/atcc/390x180/ra-0650_390x180.png?h=180&iar=0&w=390&rev=092cdf51323e4902a7ebcde40aa9d326&hash=420D16A78C9CE3BA58E62ED01206D078
  76.  
  77. )"></div>
  78. </div>
  79. </div>
  80. </div>
  81.  
  82.  
  83.  
  84. </div>
  85. <!---------Decorations at the bottom left--------------->
  86. <i class="far fa-biohazard" style="position:absolute; margin:-30px -20px; font-size:50px; color:#DE1AF6"></i>
  87.  
  88.  
  89. <div class="text-center" >
  90. <!---------Credit do not remove--------------->
  91. <a href="/LeafJelly" title="HTML by LeafJelly" style="color:#8417F6"></i> <i class="fas fa-radiation"></i></a>
  92.  
  93. <!---------Decorations at the bottom right--------------->
  94. <i class="far fa-biohazard" style="position:absolute; margin:-30px 150px; font-size:50px; color:#DE1AF6"></i>
  95. </div>
  96. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement