API tools faq
paste
laenavesse

CR CHART V. CR CARDS WITH AFFECTION BARS

laenavesse
Jul 17th, 2025 (edited)
17
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.69 KB | None | 0 0
raw download clone embed print report
  1. CR CHART V. CR CARDS WITH AFFECTION BARS
  2. Directions: https://efryndiel.dreamwidth.org/10599.html
  3. Credit to Laena @ efryndiel.dreamwidth.org
  4.  
  5. <!-- ACTIVE CHARACTERS -->
  6. <raw-code>
  7. <div style="margin: 50px auto; max-width: 700px; display: flex; flex-direction: column; gap: 30px;">
  8.  
  9. <!-- CARD 1 START -->
  10. <div style="width: 100%; display: flex; flex-direction: row;">
  11. <div style="width: 100px; height: 100px; margin: 20px 0px; z-index: 2; "><img src="USERICON" style="border: 8px solid #c2baa0;"></div>
  12. <div style="min-height: 150px; width: 100%; background-color: #f4f3ef; border: 8px solid #c2baa0; margin-left: -18px; box-shadow: #d5d5d5 1px 2px 3px 0px; z-index: 1;">
  13. <span style="display: block; margin: 15px 5px 0 40px; font-family: georgia, serif; font-size: 23px; color: #423e31; text-transform: uppercase; line-height: 0.9em; text-shadow: 2px 2px 4px #999999;">CHARACTER NAME</span>
  14. <hr style="margin: 10px auto;">
  15. <span style="float: right; font-family: georgia, serif; font-size: 19px; color: #5b5748; line-height:0.8em; padding: 0 10px 0 10px;">» » » <i>JOURNAL</i></span>
  16. <div align="justify" style="padding: 30px 10px 20px 40px; font-family: calibri, sans-serif; font-size: 15px; color: #2b250f; line-height: 1.2em;">BLURB BLURB REMEMBER TO USE <BR /> FOR LINE BREAKS</div>
  17. </div>
  18. <div style="margin-top: 20px; width: 200px; display: flex; flex-flow: column wrap; gap: 10px; text-align: left; font-family: palatino, serif; font-size: 15px; color: #423e31; text-transform: uppercase; line-height: 1.125em;">
  19.  
  20. <!-- BARS START: YOU CAN ADD AND REMOVE JUST C/P THE DIV CODE -->
  21. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">AFFECTION</div>
  22. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 80%, #f4f3ef 80%); padding-left: 5px;">TRUST</div>
  23. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 75%, #f4f3ef 75%); padding-left: 5px;">SUPPORT</div>
  24. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">STRENGTH</div>
  25. <!-- BARS END -->
  26.  
  27. </div>
  28. </div>
  29. <!-- CARD END -->
  30.  
  31. <!-- CARD 2 START -->
  32. <div style="width: 100%; display: flex; flex-direction: row;">
  33. <div style="width: 100px; height: 100px; margin: 20px 0px; z-index: 2; "><img src="USERICON" style="border: 8px solid #c2baa0;"></div>
  34. <div style="min-height: 150px; width: 100%; background-color: #f4f3ef; border: 8px solid #c2baa0; margin-left: -18px; box-shadow: #d5d5d5 1px 2px 3px 0px; z-index: 1;">
  35. <span style="display: block; margin: 15px 5px 0 40px; font-family: georgia, serif; font-size: 23px; color: #423e31; text-transform: uppercase; line-height: 0.9em; text-shadow: 2px 2px 4px #999999;">CHARACTER NAME</span>
  36. <hr style="margin: 10px auto;">
  37. <span style="float: right; font-family: georgia, serif; font-size: 19px; color: #5b5748; line-height:0.8em; padding: 0 10px 0 10px;">» » » <i>JOURNAL</i></span>
  38. <div align="justify" style="padding: 30px 10px 20px 40px; font-family: calibri, sans-serif; font-size: 15px; color: #2b250f; line-height: 1.2em;">BLURB BLURB REMEMBER TO USE <BR /> FOR LINE BREAKS</div>
  39. </div>
  40. <div style="margin-top: 20px; width: 200px; display: flex; flex-flow: column wrap; gap: 10px; text-align: left; font-family: palatino, serif; font-size: 15px; color: #423e31; text-transform: uppercase; line-height: 1.125em;">
  41.  
  42. <!-- BARS START: YOU CAN ADD AND REMOVE JUST C/P THE DIV CODE -->
  43. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">AFFECTION</div>
  44. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 80%, #f4f3ef 80%); padding-left: 5px;">TRUST</div>
  45. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 75%, #f4f3ef 75%); padding-left: 5px;">SUPPORT</div>
  46. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">STRENGTH</div>
  47. <!-- BARS END -->
  48.  
  49. </div>
  50. </div>
  51. <!-- CARD END -->
  52.  
  53. <!-- CARD 3 START -->
  54. <div style="width: 100%; display: flex; flex-direction: row;">
  55. <div style="width: 100px; height: 100px; margin: 20px 0px; z-index: 2; "><img src="USERICON" style="border: 8px solid #c2baa0;"></div>
  56. <div style="min-height: 150px; width: 100%; background-color: #f4f3ef; border: 8px solid #c2baa0; margin-left: -18px; box-shadow: #d5d5d5 1px 2px 3px 0px; z-index: 1;">
  57. <span style="display: block; margin: 15px 5px 0 40px; font-family: georgia, serif; font-size: 23px; color: #423e31; text-transform: uppercase; line-height: 0.9em; text-shadow: 2px 2px 4px #999999;">CHARACTER NAME</span>
  58. <hr style="margin: 10px auto;">
  59. <span style="float: right; font-family: georgia, serif; font-size: 19px; color: #5b5748; line-height:0.8em; padding: 0 10px 0 10px;">» » » <i>JOURNAL</i></span>
  60. <div align="justify" style="padding: 30px 10px 20px 40px; font-family: calibri, sans-serif; font-size: 15px; color: #2b250f; line-height: 1.2em;">BLURB BLURB REMEMBER TO USE <BR /> FOR LINE BREAKS</div>
  61. </div>
  62. <div style="margin-top: 20px; width: 200px; display: flex; flex-flow: column wrap; gap: 10px; text-align: left; font-family: palatino, serif; font-size: 15px; color: #423e31; text-transform: uppercase; line-height: 1.125em;">
  63.  
  64. <!-- BARS START: YOU CAN ADD AND REMOVE JUST C/P THE DIV CODE -->
  65. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">AFFECTION</div>
  66. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 80%, #f4f3ef 80%); padding-left: 5px;">TRUST</div>
  67. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 75%, #f4f3ef 75%); padding-left: 5px;">SUPPORT</div>
  68. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">STRENGTH</div>
  69. <!-- BARS END -->
  70.  
  71. </div>
  72. </div>
  73. <!-- CARD END -->
  74. </div>
  75.  
  76. <!-- DROPPED CHARACTERS -->
  77. <details> <!-- IF WANT TO HAVE SECTION ALWAYS DISPLAYED CHANGE TO: details open -->
  78. <summary style="width: 100%; text-align: center; font-family: palatino, serif; color: #423e31; font-size: 18pt; text-transform: uppercase;"><b><u>DROPPED</u></b></summary>
  79. <raw-code>
  80. <div style="margin: 30px auto; max-width: 700px; display: flex; flex-direction: column; gap: 30px; filter: grayscale(80%);">
  81.  
  82. <!-- CARD 1 START -->
  83. <div style="width: 100%; display: flex; flex-direction: row;">
  84. <div style="width: 100px; height: 100px; margin: 20px 0px; z-index: 2; "><img src="USERICON" style="border: 8px solid #c2baa0;"></div>
  85. <div style="min-height: 150px; width: 100%; background-color: #f4f3ef; border: 8px solid #c2baa0; margin-left: -18px; box-shadow: #d5d5d5 1px 2px 3px 0px; z-index: 1;">
  86. <span style="display: block; margin: 15px 5px 0 40px; font-family: georgia, serif; font-size: 23px; color: #423e31; text-transform: uppercase; line-height: 0.9em; text-shadow: 2px 2px 4px #999999;">CHARACTER NAME</span>
  87. <hr style="margin: 10px auto;">
  88. <span style="float: right; font-family: georgia, serif; font-size: 19px; color: #5b5748; line-height:0.8em; padding: 0 10px 0 10px;">» » » <i>JOURNAL</i></span>
  89. <div align="justify" style="padding: 30px 10px 20px 40px; font-family: calibri, sans-serif; font-size: 15px; color: #2b250f; line-height: 1.2em;">BLURB BLURB REMEMBER TO USE <BR /> FOR LINE BREAKS</div>
  90. </div>
  91. <div style="margin-top: 20px; width: 200px; display: flex; flex-flow: column wrap; gap: 10px; text-align: left; font-family: palatino, serif; font-size: 15px; color: #423e31; text-transform: uppercase; line-height: 1.125em;">
  92.  
  93. <!-- BARS START: YOU CAN ADD AND REMOVE JUST C/P THE DIV CODE -->
  94. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">AFFECTION</div>
  95. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 80%, #f4f3ef 80%); padding-left: 5px;">TRUST</div>
  96. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 75%, #f4f3ef 75%); padding-left: 5px;">SUPPORT</div>
  97. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">STRENGTH</div>
  98. <!-- BARS END -->
  99.  
  100. </div>
  101. </div>
  102. <!-- CARD END -->
  103.  
  104. <!-- CARD 2 START -->
  105. <div style="width: 100%; display: flex; flex-direction: row;">
  106. <div style="width: 100px; height: 100px; margin: 20px 0px; z-index: 2; "><img src="USERICON" style="border: 8px solid #c2baa0;"></div>
  107. <div style="min-height: 150px; width: 100%; background-color: #f4f3ef; border: 8px solid #c2baa0; margin-left: -18px; box-shadow: #d5d5d5 1px 2px 3px 0px; z-index: 1;">
  108. <span style="display: block; margin: 15px 5px 0 40px; font-family: georgia, serif; font-size: 23px; color: #423e31; text-transform: uppercase; line-height: 0.9em; text-shadow: 2px 2px 4px #999999;">CHARACTER NAME</span>
  109. <hr style="margin: 10px auto;">
  110. <span style="float: right; font-family: georgia, serif; font-size: 19px; color: #5b5748; line-height:0.8em; padding: 0 10px 0 10px;">» » » <i>JOURNAL</i></span>
  111. <div align="justify" style="padding: 30px 10px 20px 40px; font-family: calibri, sans-serif; font-size: 15px; color: #2b250f; line-height: 1.2em;">BLURB BLURB REMEMBER TO USE <BR /> FOR LINE BREAKS</div>
  112. </div>
  113. <div style="margin-top: 20px; width: 200px; display: flex; flex-flow: column wrap; gap: 10px; text-align: left; font-family: palatino, serif; font-size: 15px; color: #423e31; text-transform: uppercase; line-height: 1.125em;">
  114.  
  115. <!-- BARS START: YOU CAN ADD AND REMOVE JUST C/P THE DIV CODE -->
  116. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">AFFECTION</div>
  117. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 80%, #f4f3ef 80%); padding-left: 5px;">TRUST</div>
  118. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 75%, #f4f3ef 75%); padding-left: 5px;">SUPPORT</div>
  119. <div style="width: 130px; height: 20px; border: 2px solid #d4ccb5; box-shadow: #d5d5d5 1px 2px 3px 0px; background: linear-gradient(90deg, #d4ccb5 100%, #f4f3ef 100%); padding-left: 5px;">STRENGTH</div>
  120. <!-- BARS END -->
  121.  
  122. </div>
  123. </div>
  124. <!-- CARD END -->
  125.  
  126. </details>
  127. </div>
  128. </raw-code>
  129.  
  130. <div style="margin: 20px auto auto; width: 100%; text-align: center;"><font style="font-family: trebuchet ms, sans-serif; font-size: 9pt;"><a href="https://efryndiel.dreamwidth.org/10599.html" style="color: #804024; text-decoration: none;">code</a> by <a href="https://efryndiel.dreamwidth.org" style="color: #804024; text-decoration: none;">efrynidel</a></div>
  131.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!