API tools faq
paste
MCDogWarrior

Aesthetic Character re

MCDogWarrior
Nov 22nd, 2021 (edited)
549
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.07 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid" style="width:950px; color:#fff">
  2. <!-- Main card -->
  3. <div class="card p-1 border-0" style="background-color:#0c0021; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;">
  4. <div class="row no-gutters">
  5. <div class="col-3 p-1">
  6. <!-- Left image 1 -->
  7. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-top-left-radius:15px;">
  8. </div>
  9. <!-- Left image 2 -->
  10. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px;" class="mt-2" >
  11. </div>
  12. <!-- Left image 3 -->
  13. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-bottom-left-radius:15px;" class="mt-2" >
  14. </div>
  15. </div>
  16.  
  17. <div class="col-6 p-1">
  18. <!--Top card (top header/char name) -->
  19. <div class="card p-3 border-0 rounded-0" style="background-color:#110c52;">
  20. <!-- Top header/Char name -->
  21. <p class="col-12 justify-content-between" style="text-align: center; font-size: 25px;"><i class="fas fa-sun my-auto"></i> <b>CHARACTER NAME</b> <i class="fas fa-sun my-auto"></p>
  22. </div>
  23. <!-- Quote card -->
  24. <div class="card p-2 border-0 rounded-0 mt-1" style="background-color:#130941;">
  25. <!-- Quote -->
  26. <p style="text-align: center; font-size:16px; color:#02a1f5">"random, probably aesthetic quote goes here"</p>
  27. </div>
  28. <!-- Small divider -->
  29. <div class="card border-0 rounded-0 my-1" style="background-color:#0f2367; height:1px">
  30. </div>
  31. <!-- Details card -->
  32. <div class="card bg-faded p-2 border-0 rounded-0" style="background-color:#110c52;">
  33. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Age</b>
  34. <!-- Age -->
  35. <i style="color:#02a1f5">info</i></span></div>
  36. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Gender</b>
  37. <!-- Gender -->
  38. <i style="color:#02a1f5">info</i></div>
  39. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Species</b>
  40. <!-- Species -->
  41. <i style="color:#02a1f5">info</i></div>
  42. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Occupation</b>
  43. <!-- Occupation -->
  44. <i style="color:#02a1f5">info</i></div>
  45. <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><b>Role</b>
  46. <!-- Role -->
  47. <i style="color:#02a1f5">info</i></div>
  48. </div>
  49.  
  50. <!-- Pallette card (background) -->
  51. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; min-height:60px; max-width:500px; border-top:2px solid #0f2367; border-bottom:2px solid #0f2367;" class="card my-1 p-1 rounded-0" >
  52. <!-- Top divider -->
  53. <div class="card border-0 rounded-0 my-1" style="background-color:#e90fbc; height:3px">
  54. </div>
  55. <div class="row no-gutters">
  56. <div class="col-2">
  57. <!-- Color 1 (change hex code) -->
  58. <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#340177; max-height:100px;">
  59. </div>
  60. </div>
  61. <div class="col-2">
  62. <!-- Color 2 -->
  63. <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#5303c6; max-height:100px;">
  64. </div>
  65. </div>
  66. <div class="col-2">
  67. <!-- Color 3 -->
  68. <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#7303ff; max-height:100px;">
  69. </div>
  70. </div>
  71. <div class="col-2">
  72. <!-- Color 4 -->
  73. <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#9805ff; max-height:100px;">
  74. </div>
  75. </div>
  76. <div class="col-2">
  77. <!-- Color 5 -->
  78. <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#b906ff; max-height:100px;">
  79. </div>
  80. </div>
  81. <div class="col-2">
  82. <!-- Color 6 -->
  83. <div class="card rounded-0 p-3 bg-faded my-1" style="background-color:#fd50fd; max-height:100px;"></div>
  84. </div>
  85. </div>
  86. <!-- Bottom divider -->
  87. <div class="card border-0 rounded-0 my-1" style="background-color:#e90fbc; height:3px">
  88. </div>
  89. </div>
  90.  
  91. <!-- Text box -->
  92. <div class="card mt-2 p-3 rounded-0 border-0" style="background-color:#110c52; height:280px; overflow:auto;">
  93. <!-- Header -->
  94. <a style="text-align: left; font-size: 18px;">
  95. <!-- Icon -->
  96. <i class="far fa-sun"></i>
  97. <!-- Header -->
  98. <b>Header</b></a>
  99. <!-- Text -->
  100. <div class="ml-2 my-1" style="border-top:1px solid #02a1f5; width:350px"></div>
  101. <p>basically text goes here and stuff. it's basically exactly like the old one but it looks a lot better I think. box scrolls and all that. also if you need to add another header, then you can. I wouldn't see the need for another header personally, since this code is really small. you can choose to if you want- you're using it not me. well I could use it if I wanted to but I might not honestly. it's like reading a book you wrote. you know how it goes so there's no point in using it. okay terrible analogy. I have no use for the code myself but maybe you do. </p>
  102. </div>
  103. <!-- Small divider -->
  104. <div class="card border-0 rounded-0 my-1" style="background-color:#0f2367; height:1px">
  105. </div>
  106.  
  107. <!-- Music player -->
  108. <p>
  109. <div align="center"><audio controls="" style="background-color:#02a1f5; padding:3px; border-radius:40px; width:445px; height:35px; border-top-right-radius:15px; border-top-left-radius:15px;">
  110. <source src=" AUDIOLINK "><br></audio></p>
  111. <!-- Song details -->
  112. <p style="font-size:10px; margin-top:-5px; color:#02a1f5">Song title - Arist name</p>
  113. </div>
  114. </div>
  115.  
  116. <div class="col-3 p-1">
  117. <!-- Right image 1 -->
  118. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-top-right-radius:15px;">
  119. </div>
  120. <!-- Right image 2 -->
  121. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px;" class="mt-2" >
  122. </div>
  123. <!-- Right image 3 -->
  124. <div style="background: url( IMGLINK ); background-repeat: no-repeat; background-size:cover; background-position: center; height:220px; width:220px; border-bottom-right-radius:15px;" class="mt-2" >
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. <div class="col-12 justify-content-between" style="text-align: center; font-size: 10px; margin-top:-2px;">
  130. <!-- Image credit -->
  131. <a style="color:#02a1f5;" href=" LINK ">Image credit</a>
  132. <!-- Code credit (do not remove/alter) -->
  133. <a style="color:#02a1f5;" href="https://toyhou.se/MCDogResource">Code by MCDogWarrior</a></span>
  134. </div>
  135. </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!