API tools faq
paste
Advertisement
Guest User

Eeeee

a guest
Jul 30th, 2021
480
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.43 KB | None | 0 0
raw download clone embed print report
  1. <!--F2U - ATLANTIS
  2.  
  3. use th.circlejourney.net for easy live editing!
  4. FIND + REPLACE
  5.  
  6. PALETTE BOXES (FROM TOP TO BOTTOM):
  7.  
  8. #f0ebe8
  9. #d7ccc6
  10. #b16a4a
  11. #74443a
  12. #9ebbbf
  13.  
  14.  
  15. -->
  16.  
  17. <div class="container" style="max-width:1000px; font-weight:lighter; color:black">
  18. <div class="row">
  19.  
  20. <div class="col-sm-4">
  21. <div class="container bg-primary mb-3 pl-2 bg-white" style="border-radius:100px 0px 0px 0px; height:270px; border:0.5px solid black">
  22. <!-- CHARACTER NAME + BASIC INFO-->
  23. <div class="container p-2 pl-4 text-center" style="font-size:30px; border-bottom:1px solid black;">NAME HERE</div>
  24. <div class="container mt-3 ml-2" style="height:175px">
  25. <div class="row">
  26. <div class="col-7" style="font-weight:normal">AGE</div>
  27. <div class="col-5">content</div>
  28. <div class="col-7" style="font-weight:normal">GENDER</div>
  29. <div class="col-5">content</div>
  30. <div class="col-7" style="font-weight:normal">PRONOUNS</div>
  31. <div class="col-5">content</div>
  32. <div class="col-7" style="font-weight:normal">SEXUALITY</div>
  33. <div class="col-5">content</div>
  34. <div class="col-7" style="font-weight:normal">AFFILIATION</div>
  35. <div class="col-5">content</div>
  36. <div class="col-7" style="font-weight:normal">OCCUPATION</div>
  37. <div class="col-5">content</div>
  38. <div class="col-7" style="font-weight:normal">R . STATUS</div>
  39. <div class="col-5">content</div>
  40. </div>
  41. </div>
  42. </div>
  43. <div class="container bg-white p-0 mb-2" style="height:450px; border:1px solid black">
  44. <!-- STATS - these scroll, so feel free to add more! -->
  45. <div class="container pt-2" style="font-size:30px; border-bottom:1px solid black">STATS</div>
  46. <div class="container pt-3">
  47. <div class="row" style="max-height:380px; overflow:auto">
  48.  
  49. <div class="col-sm-4 my-1">INTELLECT</div>
  50. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  51. <!-- change the 50% to whatever percentage suits your character best!-->
  52. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  53.  
  54. <div class="col-sm-4 my-1">HUMOUR</div>
  55. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  56. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  57.  
  58. <div class="col-sm-4 my-1">SOCIALISING</div>
  59. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  60. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  61.  
  62. <div class="col-sm-4 my-1">EMPATHY</div>
  63. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  64. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  65.  
  66. <div class="col-sm-4 my-1">HONESTY</div>
  67. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  68. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  69.  
  70. <div class="col-sm-4 my-1">CONFIDENCE</div>
  71. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  72. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  73.  
  74. <div class="col-sm-4 my-1">OBSERVATION</div>
  75. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  76. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  77.  
  78. <div class="col-sm-4 my-1">STRENGTH</div>
  79. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  80. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  81.  
  82. <div class="col-sm-4 my-1">ENDURANCE</div>
  83. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  84. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  85.  
  86. <div class="col-sm-4 my-1">DAMAGE</div>
  87. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  88. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  89.  
  90. <div class="col-sm-4 my-1">DEFENSE</div>
  91. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  92. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  93.  
  94. <div class="col-sm-4 my-1">VERSATILITY</div>
  95. <div class="col-sm-8 my-1"> <div class="progress bg-grey rounded-0 mt-2" style="height:5px; background-color: rgba(0,0,0,.110)">
  96. <div class="progress-bar bg-dark" style="width: 50%;"></div></div></div>
  97.  
  98.  
  99.  
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104.  
  105. <div class="col-sm-8">
  106. <!--MAIN IMAGE - put your url in the quotation marks where it says 'IMG LINK'! the blue background will go away once the image is there-->
  107. <div class="container mb-3 p-0 bg-primary" style="height:450px;https://f2.toyhou.se/file/f2-toyhou-se/images/37777375_1NisBZuS8caVVqd.jpg; background-position:center; background-size:cover">
  108.  
  109. <a data-toggle="collapse" href="#story" style="position:absolute; right:14px; top:10px; font-size:30px; color:white"><i class="fas fa-stars"></i></a>
  110. <div class="collapse active sh bg-white p-0" id="story">
  111. <div class="container" style="height:450px; color:black; border:1px solid black">
  112. <!--MAIN STORY SECTION-->
  113. <div class="container pt-2" style="font-size:30px; border-bottom:1px solid black">STORY <a data-toggle="collapse" href="#story"><i class="fas fa-arrow-left pull-right mt-1" style="color:black"></i></a></div>
  114. <div class="container pt-2" style="max-height:375px; overflow:auto">
  115. <p>paragraph</p>
  116. <p>another paragraph</p>
  117. <p>another paragraph! this scrolls so add as much as you like</p>
  118. <div class="container mb-3" style="font-size:20px; border-bottom:1px solid black">SUBHEADING - feel free 2 delete this lol</div>
  119. <p>more paragraphs yahoo</p>
  120.  
  121. </div>
  122. </div>
  123. </div>
  124.  
  125.  
  126. </div>
  127. <div class="row">
  128. <div class="col-sm-6">
  129. <div class="container bg-white p-0 mb-2" style="height:270px; border:1px solid black">
  130. <!-- TRIVIA / DESIGN NOTES -->
  131. <div class="container pt-2" style="font-size:30px; border-bottom:1px solid black">TRIVIA</div>
  132. <ul class="pt-2 pr-1" style="max-height:215px; overflow:auto">
  133. <li>1 thing</li>
  134. <li>2 thing</li>
  135. <li>3 thing</li>
  136. <li>this scrolls! add as much info as you want!</li>
  137.  
  138. </ul>
  139. </div>
  140. </div>
  141. <div class="col-sm-1 p-0">
  142. <div class="container p-0 mb-2" style="height:270px">
  143. <div class="card rounded-0 border-0 mb-2" style="background-color:#f0ebe8; height:48px"></div>
  144. <div class="card rounded-0 border-0 mb-2" style="background-color:#d7ccc6; height:48px"></div>
  145. <div class="card rounded-0 border-0 mb-2" style="background-color:#b16a4a; height:48px"></div>
  146. <div class="card rounded-0 border-0 mb-2" style="background-color:#74443a; height:48px"></div>
  147. <div class="card rounded-0 border-0" style="background-color:#9ebbbf; height:48px"></div>
  148. </div>
  149. </div>
  150. <div class="col-sm-5">
  151. <div class="container bg-white p-0" style="height:270px; border-radius:0px 0px 100px 0px; border:1px solid black">
  152. <!--PLAYLIST SECTION - paste song/playlist links where it says "song/playlist link" respectively-->
  153. <div class="container pt-2" style="font-size:30px; border-bottom:1px solid black">PLAYLIST <a href="playlist link"><i class="fas fa-compact-disc fa-spin pull-right mt-2" style="color:black"></i></a></div>
  154. <div class="container mt-2">
  155. <!--MAIN SONG SECTION - this doesn't scroll and won't expand as you type because either way looked kinda funky... so try and keep it to about 7/8 songs max!-->
  156. <a href="song link" style="color:black"><i class="fas fa-play mr-2 mb-2" style="font-size:12px"></i>song - artist</a><br>
  157. <a href="song link" style="color:black"><i class="fas fa-play mr-2 mb-2" style="font-size:12px"></i>song - artist</a><br>
  158. <a href="song link" style="color:black"><i class="fas fa-play mr-2 mb-2" style="font-size:12px"></i>song - artist</a><br>
  159.  
  160. </div>
  161. </div>
  162. </div>
  163. </div>
  164. </div>
  165.  
  166. </div>
  167. <!--CREDITS - DONT TOUCH PLS-->
  168. <a href="hanyu" class="pull-right" style="font-size:12px">code by hanyu</a>
  169. </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!