API tools faq
paste
MCDogWarrior

roleplay character [Bootstrap]

MCDogWarrior
Oct 24th, 2021 (edited)
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.14 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid" style="max-width:1000px;">
  2. <!-- Main card (dark bg & primary outline) -->
  3. <div class="card bg-dark rounded-0 card-outline-primary" style="height:500px; border-width:3px; border-top-left-radius:20px; border-top-right-radius:20px;">
  4. <!-- background image at top -->
  5. <div class="card rounded-0 border-0" style="background-image:url( bglink ); background-size:cover; background-position: center; height:150px; width:964px; border-top-left-radius:20px; border-top-right-radius:20px;">
  6. </div>
  7. <!-- seperator under image -->
  8. <div class="card bg-primary rounded-0 border-0" style="height:3px;">
  9. </div>
  10. <!-- left trapezoid -->
  11. <div class="card bg-primary rounded-0 border-0 float-left ml-2" style="width:500px; height:50px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 90%,0% 0%,10% 100%,100% 100%); margin-bottom:-50px">
  12. </div>
  13. <!-- right trapezoid -->
  14. <div class="card bg-primary rounded-0 border-0 float-right mr-2" style="width:500px; height:50px; clip-path:polygon(100% 0%,0% 0%,0% 0%,0% 0%,0% 50%,0% 100%,90% 100%); margin-bottom:-50px; position:absolute; top:153px; right:0px;">
  15. </div>
  16. <!-- character icon (& outline) -->
  17. <img src=" imglink " class="card mx-auto rounded-circle card-outline-secondary" style="height:200px; width:200px; border-width:5px; margin-top:-140px"></img>
  18. <!-- character name pill -->
  19. <p class="card bg-secondary border-0 mx-auto" style="min-height:30px; width:200px; font-size:18px; margin-top:-20px; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px; text-align:center">character name</p>
  20.  
  21. <div class="row no-gutters">
  22. <!-- Subjects block -->
  23. <div class="col-4 p-1 mt-2">
  24. <div class="card bg-secondary rounded-0 border-0 p-2" style="height:255px; border-top-left-radius:20px;">
  25. <!-- header block -->
  26. <div class="card bg-dark rounded-0 border-0 p-1 mb-2" style="height:40px; border-top-left-radius:20px;">
  27. <!-- header text -->
  28. <p class="my-auto text-primary" style="font-size:19px; text-align:center">- Subjects -</p>
  29. </div>
  30. <div class="row" style="overflow-y:auto">
  31. <!-- positives list -->
  32. <div class="col-6">
  33. <p style="font-size:15px">
  34. <i class="fas fa-check-circle text-success"></i> Long & detailed <br>
  35. <i class="fas fa-check-circle text-success"></i> Crossovers <br>
  36. <i class="fas fa-check-circle text-success"></i> Sensitive subjects <br>
  37. <i class="fas fa-check-circle text-success"></i> Not serious <br>
  38. <i class="fas fa-check-circle text-success"></i> Artwork permitted<br>
  39. </p>
  40. </div>
  41. <!-- negatives list -->
  42. <div class="col-6">
  43. <p style="font-size:15px">
  44. <i class="fas fa-times-circle text-danger"></i> Speedy <br>
  45. <i class="fas fa-times-circle text-danger"></i> Offensive subjects <br>
  46. <i class="fas fa-times-circle text-danger"></i> Fully serious <br>
  47. <i class="fas fa-times-circle text-danger"></i> Out-of-story experiences <br>
  48. </p>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53.  
  54. <!-- Shipping block -->
  55. <div class="col-4 p-1 mt-2">
  56. <div class="card bg-secondary rounded-0 border-0 p-2" style="height:255px;">
  57. <!-- header block -->
  58. <div class="card bg-dark rounded-0 border-0 p-1 mb-2" style="height:40px;">
  59. <!-- header text -->
  60. <p class="my-auto text-primary" style="font-size:19px; text-align:center">- Shipping -</p>
  61. </div>
  62. <div class="row" style="overflow-y:auto">
  63. <!-- positives list -->
  64. <div class="col-6">
  65. <p style="font-size:15px">
  66. <i class="fas fa-check-circle text-success"></i> Pre-established <br>
  67. <i class="fas fa-check-circle text-success"></i> Fast-moving <br>
  68. <i class="fas fa-check-circle text-success"></i> w/ Real significant other <br>
  69. <i class="fas fa-check-circle text-success"></i> Jokingly <br>
  70. <i class="fas fa-check-circle text-success"></i> Romantically only<br>
  71. </p>
  72. </div>
  73. <!-- negatives list -->
  74. <div class="col-6">
  75. <p style="font-size:15px">
  76. <i class="fas fa-times-circle text-danger"></i> Out of nowhere <br>
  77. <i class="fas fa-times-circle text-danger"></i> Slow-moving <br>
  78. <i class="fas fa-times-circle text-danger"></i> With anyone <br>
  79. <i class="fas fa-times-circle text-danger"></i> With friends/ aquaintences <br>
  80. <i class="fas fa-times-circle text-danger"></i> All serious <br>
  81. <i class="fas fa-times-circle text-danger"></i> Explicit <br>
  82. </p>
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87.  
  88. <!-- Violence block -->
  89. <div class="col-4 p-1 mt-2">
  90. <div class="card bg-secondary rounded-0 border-0 p-2" style="height:255px; border-top-right-radius:20px;">
  91. <!-- header block -->
  92. <div class="card bg-dark rounded-0 border-0 p-1 mb-2" style="height:40px; border-top-right-radius:20px;">
  93. <!-- header text -->
  94. <p class="my-auto text-primary" style="font-size:19px; text-align:center">- Violence -</p>
  95. </div>
  96. <div class="row" style="overflow-y:auto">
  97. <!-- positives list -->
  98. <div class="col-6">
  99. <p style="font-size:15px">
  100. <i class="fas fa-check-circle text-success"></i> Sudden <br>
  101. <i class="fas fa-check-circle text-success"></i> Built up <br>
  102. <i class="fas fa-check-circle text-success"></i> Light violence <br>
  103. <i class="fas fa-check-circle text-success"></i> Quick<br>
  104. <i class="fas fa-check-circle text-success"></i> Character gets hurt<br>
  105. <i class="fas fa-check-circle text-success"></i> Character hurts others<br>
  106. </p>
  107. </div>
  108. <!-- negatives list -->
  109. <div class="col-6">
  110. <p style="font-size:15px">
  111. <i class="fas fa-times-circle text-danger"></i> No violence ever <br>
  112. <i class="fas fa-times-circle text-danger"></i> Detailed & gorey <br>
  113. <i class="fas fa-times-circle text-danger"></i> Long-lasting <br>
  114. </p>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </div>
  121. <!-- credit (DO NOT REMOVE/ALTER) -->
  122. <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
  123. </div>
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!