API tools faq
paste
Advertisement
MCDogWarrior

Cluttered Character Code (Custom)

MCDogWarrior
Jul 31st, 2021 (edited)
582
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.90 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid my-1" style="color:#ffffff;width:1000px;">
  2. <!--Main card-->
  3. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#000;">
  4. <div class="row no-gutters">
  5. <div class="col-2">
  6. <!--Character icon (I reccomend 200x200 or larger)-->
  7. <div class="card rounded-0 border-0 mt-2 ml-2" style="background-image:url( image link here ); background-size:cover; background-position: center; height:145px">
  8. </div>
  9. </div>
  10. <div class="col-5">
  11. <!--Middle box-->
  12. <div class="card bg-faded rounded-0 ml-2 mr-2" style="background-color:#000;height:155px; border:5px solid #A9A8B2;">
  13. <!--Character Name-->
  14. <p style="font-size: 60px; text-align: center; letter-spacing: 2px; font-family: 'arial';" class="mt-4"><strong>NAME</strong></p>
  15. </div>
  16. </div>
  17. <div class="col-5">
  18. <!--Right aesthetic image-->
  19. <div class="card rounded-0 border-0" style="background-image:url( image link here ); background-size:cover; background-position: center; height:155px">
  20. <!--Lines over image-->
  21. <a style="position:absolute; bottom:0px; left:0px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  22. <a style="position:absolute; bottom:0px; left:55px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  23. <a style="position:absolute; bottom:0px; left:110px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  24. <!--* I reccomend changing this icon if you want an even icon in the middle-->
  25. <a style="position:absolute; bottom:0px; left:165px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  26. <!--*-->
  27. <a style="position:absolute; bottom:0px; left:220px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  28. <a style="position:absolute; bottom:0px; left:275px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  29. <a style="position:absolute; bottom:0px; left:330px; font-size:50px;"><i class="fas fa-horizontal-rule"></i> </a>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="row my-2">
  34. <div class="col-4">
  35. <!--Basic info card-->
  36. <div class="card bg-faded rounded-0" style="background-color:#000; border:2px solid #A9A8B2;">
  37. <!--Icon in the background, change size if needed, uses FontAwesome icons-->
  38. <a style="position:absolute; bottom:0px; left:10px; font-size:120px; opacity:0.25; color:#fff;"><i class="fas fa-id-card"></i> </a>
  39. <!--Age-->
  40. <div class="col-12 justify-content-between mt-1" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Age</strong></span> info</div>
  41. <!--Gender-->
  42. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Gender</strong></span> info</div>
  43. <!--Species-->
  44. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Species</strong></span> info</div>
  45. <!--Race-->
  46. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Race</strong></span> info</div>
  47. <!--Orientation-->
  48. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Orientation</strong></span> info</div>
  49. <!--Height-->
  50. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Height</strong></span> info</div>
  51. <!--Role-->
  52. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883"><strong>Role</strong></span> info</div>
  53. <!--Occupation/Career-->
  54. <div class="col-12 justify-content-between" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883"><strong>Occupation</strong></span> info</div>
  55. <br>
  56. <!--Designer-->
  57. <div class="col-12 justify-content-between mb-2" style="text-align: center;font-family: 'arial'; font-size: 15px;"><span style="color:#7A7883;"><strong>Designer</strong></span>
  58. <!--Link-->
  59. <a style="color:#A9A8B2;" href=" link here ">info</a></div>
  60. </div>
  61. </div>
  62. <div class="col-3">
  63. <!--Central Aesthetic image-->
  64. <div class="card rounded-0 border-0" style="background-image:url( image link here ); background-size:cover; background-position: center; height:235px;">
  65. <!--Transparency over image-->
  66. <div class="card bg-faded rounded-0 border-0" style="background-color:rgba(0,0,0,0.65); height:235px">
  67. <!--Quote (change the "mt-1" to a higher number to adjust the position)-->
  68. <p style="font-size: 25px; text-align: center; letter-spacing: 2px; font-family: 'arial';" class="mt-1">" quote here "</p>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="col-5">
  73. <!--Likes box-->
  74. <div class="card bg-faded rounded-0" style="background-color:#000; border:2px solid #A9A8B2">
  75. <!--Icon in bg-->
  76. <a style="position:absolute; bottom:0px; right:10px; font-size:80px; opacity:0.25; color:#fff;"><i class="fas fa-check"></i> </a>
  77. <!--Likes-->
  78. <p style="font-size: 20px; text-align: center; letter-spacing: 2px; font-family: 'arial'; color:#7A7883;" class="mt-1">Likes</p>
  79. <!--List-->
  80. <ul style="list-style-type: circle; font-size: 15px; font-family: 'arial';">
  81. <li>something they like</li>
  82. <li>or something they cherish</li>
  83. <li>or something they enjoy doing</li>
  84. </ul>
  85. </div>
  86. <!--Dislikes box-->
  87. <div class="card bg-faded rounded-0" style="background-color:#000; border:2px solid #A9A8B2">
  88. <!--Icon in bg-->
  89. <a style="position:absolute; bottom:0px; right:10px; font-size:80px; opacity:0.25; color:#fff;"><i class="fas fa-times"></i> </a>
  90. <!--Dislikes-->
  91. <p style="font-size: 20px; text-align: center; letter-spacing: 2px; font-family: 'arial'; color:#7A7883;" class="mt-1">Dislikes</p>
  92. <!--List-->
  93. <ul style="list-style-type: circle; font-size: 15px; font-family: 'arial';">
  94. <li>something they don't like</li>
  95. <li>or something they despise doing</li>
  96. <li>etc etc</li>
  97. </ul>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="row no-gutters">
  102. <div class="col-6">
  103. <!--Personality box-->
  104. <div class="card bg-faded rounded-0 p-1" style="background-color:#000; border:2px solid #A9A8B22">
  105. <!--Personality-->
  106. <p style="font-size: 20px; text-align: center; letter-spacing: 2px; font-family: 'arial'; color:#7A7883;" class="mt-1">Personality</p>
  107. <!--Text box-->
  108. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#000; height:150px; overflow:auto;">
  109. <!--Icon in bg-->
  110. <a style="position:absolute; top:-10px; left:10px; font-size:100px; opacity:0.25; color:#fff;"><i class="fas fa-user"></i> </a>
  111. <!--Words-->
  112. <p style="text-align: justify; font-size: 15px; font-family: 'arial';" class="p-1">Type a whole lotta stuff here. Stuff about the character, how they act, how they feel, demeanor, etc. You know the drill, the box scrolls</p>
  113. <a style="text-align: justify; font-size: 15px; font-family: 'arial';" class="p-1">Oh- and here's another paragraph in case things get detailed. Also I wanna show off the box scrolling cus it's cool and stuff. Filler filler blah blah yadda yadda blah blahdadee blahdadee bloo oh there it goes</p>
  114. </div>
  115. </div>
  116. </div>
  117. <div class="col-6">
  118. <!--Trivia box-->
  119. <div class="card bg-faded rounded-0 ml-2" style="background-color:#000; border:2px solid #A9A8B2">
  120. <!--Trivia-->
  121. <p style="font-size: 25px; text-align: center; letter-spacing: 2px; font-family: 'arial'; color:#7A7883;" class="mt-1">Trivia</p>
  122. <!--Text box-->
  123. <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#000; height:151px; overflow:auto;">
  124. <!--Icon in bg-->
  125. <a style="position:absolute; top:-10px; right:10px; font-size:100px; opacity:0.25; color:#fff;"><i class="fas fa-question"></i> </a>
  126. <!--List-->
  127. <ul style="list-style-type: circle; font-size: 16px; font-family: 'arial';">
  128. <li>this is basically like the box to the left</li>
  129. <li>but it's combined with the likes thing</li>
  130. <li>just type all the stuff ya want</li>
  131. <li>cus the box scrolls</li>
  132. <li>refer to something
  133. <!--Reference link-->
  134. <a style="font-family: 'arial'; color:#A9A8B2;" href=" ref link " id=""><sup>[ref]</sup></span></li>
  135. </div>
  136. </div>
  137. </div>
  138. </div>
  139. </div>
  140. <!--Code credit- DO NOT REMOVE-->
  141. <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
  142. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!