API tools faq
paste
Advertisement
hanyus

f2u - wonderland

hanyus
Oct 3rd, 2021
952
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.24 KB | None | 0 0
raw download clone embed print report
  1. <!-- FIND AND REPLACE - USE CTRL+F ON TH.CIRCLEJOURNEY.NET TO CHANGE COLOURS
  2.  
  3. TEXT: #000000
  4. BACKGROUND: #E8E8E8
  5. MAIN ACCENT (eg on the 2 main buttons/likes and dislikes): #f66078
  6. SECONDARY ACCENT (progress bars, 'highlighting' the main info): #ECCDD2
  7.  
  8. -->
  9.  
  10.  
  11.  
  12. <div class="container p-2" style="max-width:500px; background-color:#E8E8E8; font-family:courier new; border:3px solid black; color:#000000">
  13.  
  14. <div class="card p-3 text-justify" style="background-color:#f66078; margin-top:-30px; margin-left:-15px; border-radius:2em; border:4px solid black; max-width:300px; font-size:18px">NAME</div>
  15. <div class="row p-3">
  16. <!-- MAIN IMAGE -->
  17. <div class="card col-sm-5" style="background:url(MAIN IMAGE LINK); background-size:cover; background-position:center; border-radius:2em; height:150px; border:4px solid black"></div>
  18. <div class="container col-sm-7">
  19.  
  20. <!-- BASIC INFO -->
  21.  
  22. <div class="container my-3">
  23. <span><div class="card border-0" style="background-color:#ECCDD2; height:10px">
  24. <span style="position:relative; top:-10px">NAME: <span class="pull-right">CHOI MIYOUNG</span></span>
  25. </div></span></div>
  26.  
  27. <div class="container my-3">
  28. <span><div class="card border-0" style="background-color:#ECCDD2; height:10px">
  29. <span style="position:relative; top:-10px">AGE: <span class="pull-right">23</span></span>
  30. </div></span></div>
  31.  
  32. <div class="container my-3">
  33. <span><div class="card border-0" style="background-color:#ECCDD2; height:10px">
  34. <span style="position:relative; top:-10px">PRONOUNS: <span class="pull-right">she/her</span></span>
  35. </div></span></div>
  36.  
  37. <div class="container my-3">
  38. <span><div class="card border-0" style="background-color:#ECCDD2; height:10px">
  39. <span style="position:relative; top:-10px">ETHNICITY: <span class="pull-right">korean/american</span></span>
  40. </div></span></div>
  41.  
  42. <div class="container my-3">
  43. <span><div class="card border-0" style="background-color:#ECCDD2; height:10px">
  44. <span style="position:relative; top:-10px">SEXUALITY: <span class="pull-right">bisexual</span></span>
  45. </div></span></div>
  46.  
  47. </div>
  48. </div>
  49. <div class="row p-3">
  50. <div class="col-sm-7">
  51.  
  52. <!-- STATISTICS -->
  53.  
  54. <div class="row">
  55. <div class="col-sm-4" style="position:relative; top:-5px">INTELLECT</div>
  56. <div class="col-sm-8"> <div class="progress bg-grey" style="height:10px; background-color: rgba(0,0,0,.110)">
  57. <!-- change the 50% to whatever suits your character's personality best!! -->
  58. <div class="progress-bar" style="width: 50%; background-color:#ECCDD2"></div></div></div>
  59. </div>
  60.  
  61. <div class="row">
  62. <div class="col-sm-4" style="position:relative; top:-5px">EMPATHY</div>
  63. <div class="col-sm-8"> <div class="progress bg-grey" style="height:10px; background-color: rgba(0,0,0,.110)">
  64. <!-- change the 50% to whatever suits your character's personality best!! -->
  65. <div class="progress-bar" style="width: 50%; background-color:#ECCDD2"></div></div></div>
  66. </div>
  67.  
  68. <div class="row">
  69. <div class="col-sm-4" style="position:relative; top:-5px">CHARISMA</div>
  70. <div class="col-sm-8"> <div class="progress bg-grey" style="height:10px; background-color: rgba(0,0,0,.110)">
  71. <!-- change the 50% to whatever suits your character's personality best!! -->
  72. <div class="progress-bar" style="width: 50%; background-color:#ECCDD2"></div></div></div>
  73. </div>
  74.  
  75. <div class="row">
  76. <div class="col-sm-4" style="position:relative; top:-5px">HUMOUR</div>
  77. <div class="col-sm-8"> <div class="progress bg-grey" style="height:10px; background-color: rgba(0,0,0,.110)">
  78. <!-- change the 50% to whatever suits your character's personality best!! -->
  79. <div class="progress-bar" style="width: 50%; background-color:#ECCDD2"></div></div></div>
  80. </div>
  81.  
  82. <div class="row">
  83. <div class="col-sm-4" style="position:relative; top:-5px">PATIENCE</div>
  84. <div class="col-sm-8"> <div class="progress bg-grey" style="height:10px; background-color: rgba(0,0,0,.110)">
  85. <!-- change the 50% to whatever suits your character's personality best!! -->
  86. <div class="progress-bar" style="width: 50%; background-color:#ECCDD2"></div></div></div>
  87. </div>
  88.  
  89. <div class="row">
  90. <div class="col-sm-4" style="position:relative; top:-5px">CONFIDENCE</div>
  91. <div class="col-sm-8"> <div class="progress bg-grey" style="height:10px; background-color: rgba(0,0,0,.110)">
  92. <!-- change the 50% to whatever suits your character's personality best!! -->
  93. <div class="progress-bar" style="width: 50%; background-color:#ECCDD2"></div></div></div>
  94. </div>
  95.  
  96. </div>
  97. <div class="col-sm-5">
  98.  
  99. <!-- LIKES/DISLIKES -->
  100.  
  101. <ul class="fa-ul">
  102. <li><span class="fa-li"><i class="fas fa-heart" style="color:#f66078"></i></span>like</li>
  103. <li><span class="fa-li"><i class="fas fa-heart" style="color:#f66078"></i></span>like</li>
  104. <li><span class="fa-li"><i class="fas fa-heart" style="color:#f66078"></i></span>like</li>
  105. <li><span class="fa-li"><i class="fas fa-heart-broken" style="color:#f66078"></i></span>dislike</li>
  106. <li><span class="fa-li"><i class="fas fa-heart-broken" style="color:#f66078"></i></span>dislike</li>
  107.  
  108. </ul>
  109. </div>
  110. </div>
  111. <span><div class="card border-0 pull-right" style="background-color:#ECCDD2; height:10px; width:400px; border-radius:2rem">
  112. <span style="position:relative; top:-10px; font-size:18px" class="justify-content-end">STORY:</span>
  113. </div></span>
  114.  
  115. <!-- STORY -->
  116.  
  117. <div class="container p-3">
  118. <p>story here! this doesn't scroll. add as much content as you'd like!</p>
  119. <p>another paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  120. </div>
  121.  
  122. <div class="container mb-5">
  123. <!-- copypaste from here to RELATIONSHIP END to add more relationships! -->
  124. <div class="row my-3">
  125. <div class="col-sm-7">
  126. <span><div class="card border-0 pull-right" style="background-color:#ECCDD2; height:10px; width:200px; border-radius:2rem; position:relative; top:10px">
  127. <span style="position:relative; top:-10px; font-size:18px" class="justify-content-end"><a href="CHAR LINK" style="color:#000000">NAME</a></span>
  128. </div></span>
  129. <div class="container mt-4" style="height:120px; overflow:auto">relationship description! this scrolls but looks best short ^^</div>
  130. </div>
  131. <!-- CHAR IMAGE -->
  132. <div class="col-sm-5 card" style="background:url(CHAR IMAGE URL); height:150px; background-size:cover; border:4px solid black; border-radius:2em; background-position:center"></div>
  133. </div>
  134. <!-- RELATIONSHIP END -->
  135. <!-- copypaste from here to RELATIONSHIP END to add more relationships! -->
  136. <div class="row my-3">
  137. <div class="col-sm-7">
  138. <span><div class="card border-0 pull-right" style="background-color:#ECCDD2; height:10px; width:200px; border-radius:2rem; position:relative; top:10px">
  139. <span style="position:relative; top:-10px; font-size:18px" class="justify-content-end"><a href="CHAR LINK" style="color:#000000">NAME</a></span>
  140. </div></span>
  141. <div class="container mt-4" style="height:120px; overflow:auto">relationship description! this scrolls but looks best short ^^</div>
  142. </div>
  143. <!-- CHAR IMAGE -->
  144. <div class="col-sm-5 card" style="background:url(CHAR IMAGE URL); height:150px; background-size:cover; border:4px solid black; border-radius:2em; background-position:center"></div>
  145. </div>
  146. <!-- RELATIONSHIP END -->
  147. </div>
  148. <!-- CREDIT - PLEASE DONT REMOVE!!! -->
  149. <a href="/hanyu" class="pull-right card p-3" style="background-color:#f66078; margin-top:-25px; margin-right:-15px; border-radius:2em; border:4px solid black; max-height:50px; line-height:10px; color:#000000">code by hanyu</a>
  150. </div>
  151.  
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!