API tools faq
paste
Advertisement
vladimirpinarum

F2U Screen

vladimirpinarum
Jul 25th, 2021 (edited)
561
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.45 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------------------
  2. SCREEN - Character Profile
  3. Profile by HTMLobster (noll)
  4.  
  5.  
  6. TOS:
  7. Do not remove my credit. You may edit it, however.
  8. You may edit code/frankenstein with others as long as their TOS allows!
  9. Turn off WYSIWYG and turn on Code Editor.
  10. Ask me if you want to redistribute edits. Must be F2U.
  11. ------------------------------------------------------------------>
  12.  
  13. <div class="container" style="max-width:800px;">
  14. <div class="row no-gutters">
  15. <!-- Left column -->
  16. <div class="col-sm-3 order-2 order-sm-1">
  17. <div class="row no-gutters">
  18. <div class="col">
  19. <div class="bg-faded" style="height:202px; border-radius:30px 0 0 0; overflow:hidden;">
  20. <!-- heading -->
  21. <div class="row no-gutters bg-secondary">
  22. <div class="col p-2">
  23. <i class="fas fa-star ml-1 text-white"></i>
  24. </div>
  25. <div class="col p-2 text-right">
  26. <h2 class="text-white mb-0">Basics</h2>
  27. </div>
  28. </div>
  29. <div class="p-2" style="height:157px; overflow:auto;">
  30. <!-- basic info -->
  31. <div class="row no-gutters">
  32. <div class="col">
  33. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">age</span>
  34. </div>
  35. <div class="col text-right">
  36. __ years
  37. </div>
  38. </div>
  39. <div class="row no-gutters mt-2">
  40. <div class="col">
  41. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">gender</span>
  42. </div>
  43. <div class="col text-right">
  44. gender
  45. </div>
  46. </div>
  47. <div class="row no-gutters mt-2">
  48. <div class="col">
  49. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">pronouns</span>
  50. </div>
  51. <div class="col text-right">
  52. __/__
  53. </div>
  54. </div>
  55. <div class="row no-gutters mt-2">
  56. <div class="col">
  57. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">sexuality</span>
  58. </div>
  59. <div class="col text-right">
  60. sexuality
  61. </div>
  62. </div>
  63. <div class="row no-gutters mt-2">
  64. <div class="col">
  65. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">height</span>
  66. </div>
  67. <div class="col text-right">
  68. __ in / __ cm
  69. </div>
  70. </div>
  71. <div class="row no-gutters mt-2">
  72. <div class="col">
  73. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">weight</span>
  74. </div>
  75. <div class="col text-right">
  76. __ lbs / __ kg
  77. </div>
  78. </div>
  79. <div class="row no-gutters mt-2">
  80. <div class="col">
  81. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">job</span>
  82. </div>
  83. <div class="col text-right">
  84. job
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <div class="bg-faded mt-2" style="min-height:300px; border-radius:0 0 0 30px;">
  90. <!-- heading -->
  91. <div class="row no-gutters bg-secondary">
  92. <div class="col p-2">
  93. <h2 class="text-white mb-0">Preferences</h2>
  94. </div>
  95. <div class="col p-2 text-right">
  96. <i class="fas fa-heart ml-1 text-white"></i>
  97. </div>
  98. </div>
  99. <div class="p-2">
  100. <!-- preferences -->
  101. <div style="height:237px; overflow:auto;">
  102. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">likes</span>
  103. <ul class="mt-1">
  104. <li>like</li>
  105. <li>like</li>
  106. <li>like</li>
  107. </ul>
  108. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">dislikes</span>
  109. <ul class="mt-1">
  110. <li>dislike</li>
  111. <li>dislike</li>
  112. <li>dislike</li>
  113. </ul>
  114. <div class="justify-content-between align-items-center">
  115. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">song</span>
  116. title
  117. <!-- song video link -->
  118. <a href="SONG_URL"><i class="fas fa-play fa-lg"></i></a>
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="hidden-sm-up col-auto bg-faded ml-2" style="padding:10px; border-radius:0 30px 30px 0;"></div>
  125. </div>
  126. </div>
  127. <!-- Right column -->
  128. <div class="col ml-sm-2 mb-2 mb-sm-0 order-1">
  129. <div class="row no-gutters">
  130. <div class="hidden-sm-up col-auto bg-faded mr-2" style="padding:10px; border-radius:30px 0 0 30px;"></div>
  131. <div class="col">
  132. <!-- image background -->
  133. <div class="bg-primary order-sm-1" style="height:300px; border-radius:0 30px 0 0; background:url(https://i.imgur.com/HHXCvF2.jpg) center; background-size:cover; overflow:hidden;">
  134. <div class="w-100" style="position:absolute; top:0; height:300px; background:rgba(0,0,0,.25); border-radius:0 30px 0 0;"></div>
  135. <!-- character info -->
  136. <div style="height:300px;">
  137. <div class="h-50 text-white p-2" style="position:relative; z-index:2;">
  138. <!-- name -->
  139. <h1 style="font-size:3em;">Character Name</h1>
  140. </div>
  141. <div class="h-50 align-items-end justify-content-end hidden-xs-down">
  142. <div class="text-white align-items-start p-2" style="position:relative; z-index:2;">
  143. <i class="fas fa-quote-left fa-2x mr-1"></i>
  144. <!-- quote -->
  145. <h1 class="mb-0 text-center" style="font-size:3em; line-height:40px;">Short quote space here...</h1>
  146. <i class="fas fa-quote-right fa-2x ml-1"></i>
  147. </div>
  148. </div>
  149. </div>
  150. <!-- character image -->
  151. <div class="w-100" style="position:absolute; top:0; z-index:1; height:300px; border-radius:0 30px 0 0; background:url(CHAR_IMG) no-repeat; background-size:300px; background-position:right top;">
  152. </div>
  153. </div>
  154. <div class="row no-gutters mt-2">
  155. <div class="col-sm-7 bg-faded mr-sm-2 mb-2 mb-sm-0">
  156. <!-- heading -->
  157. <div class="row no-gutters bg-secondary">
  158. <div class="col p-2">
  159. <h2 class="text-white mb-0">About</h2>
  160. </div>
  161. <div class="col p-2 text-right">
  162. <i class="fas fa-user-alt ml-1 text-white"></i>
  163. </div>
  164. </div>
  165. <div class="p-2">
  166. <div class="text-justify" style="height:148px; overflow:auto;">
  167. <!-- description -->
  168. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget purus ipsum. Suspendisse faucibus urna non blandit euismod. Pellentesque ut magna iaculis, pellentesque turpis sit amet, cursus dolor. Duis tempus ut sapien vel dictum. Ut non lectus sodales tellus convallis sodales. Donec nec nibh eu justo tempor ornare vel vitae ligula. </p>
  169. <p>You can add more lines. It will scroll.</p>
  170. </div>
  171. </div>
  172. </div>
  173. <div class="col-sm-auto col-12" style="width:34px;">
  174. <!-- color palette -->
  175. <div class="row no-gutters">
  176. <div class="col-sm-12 col mb-2 mr-2 mr-sm-0" style="background:#543211; height:34px;">
  177. </div>
  178. <div class="col-sm-12 col mb-2 mr-2 mr-sm-0" style="background:#b89a6d; height:34px;">
  179. </div>
  180. <div class="col-sm-12 col mb-2 mr-2 mr-sm-0" style="background:#d6d6b8; height:34px;">
  181. </div>
  182. <div class="col-sm-12 col mb-2 mr-2 mr-sm-0" style="background:#aabaa9; height:34px;">
  183. </div>
  184. <div class="col-sm-12 col mr-2 mr-sm-0" style="background:#6a9d7e; height:34px;">
  185. </div>
  186. </div>
  187. </div>
  188. <div class="col ml-sm-2">
  189. <div class="bg-faded h-100" style="border-radius:0 0 30px 0;">
  190. <!-- heading -->
  191. <div class="row no-gutters bg-secondary">
  192. <div class="col p-2">
  193. <i class="fas fa-stars text-white"></i>
  194. </div>
  195. <div class="col p-2 text-right">
  196. <h2 class="text-white mb-0">Stats</h2>
  197. </div>
  198. </div>
  199. <div class="p-2">
  200. <!-- stats - change i class to fill differently -->
  201. <div style="height:148px; overflow:auto;">
  202. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Strength</span>
  203. <div class="justify-content-between my-2">
  204. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  205. </div>
  206. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Perception</span>
  207. <div class="justify-content-between my-2">
  208. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  209. </div>
  210. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Endurance</span>
  211. <div class="justify-content-between my-2">
  212. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  213. </div>
  214. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Charisma</span>
  215. <div class="justify-content-between my-2">
  216. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  217. </div>
  218. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Intelligence</span>
  219. <div class="justify-content-between my-2">
  220. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  221. </div>
  222. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Agility</span>
  223. <div class="justify-content-between my-2">
  224. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  225. </div>
  226. <span class="text-uppercase bg-primary text-white font-weight-bold p-1">Luck</span>
  227. <div class="justify-content-between my-2">
  228. <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star-half-alt"></i> <i class="far fa-star"></i> <i class="far fa-star"></i>
  229. </div>
  230. </div>
  231. </div>
  232. </div>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <div class="text-right mt-1">
  240. <a href="https://pixabay.com/" data-toggle="tooltip" title="background from pixabay"><i class="fas fa-image"></i></a> <a href="https://toyhou.se/HTMLobster" data-toggle="tooltip" title="profile by noll"><i class="fas fa-code"></i></a>
  241. </div>
  242. </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!