API tools faq
paste
artbymaxm

[F2U] OFF-KILTER - Tiled BG

artbymaxm
Nov 14th, 2022 (edited)
594
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 20.13 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME: OFF-KILTER - FULL BG by artbymaxm
  4.  
  5. TOS: (see full here: https://bit.ly/artbymaxm-tos)
  6.  
  7. > TURN WYSIWIG OFF IN SETTINGS AND TURN ON CODE EDITOR BEFORE USING THIS THEME!
  8. > DO NOT REMOVE THE CREDIT AND DO NOT REDISTRIBUTE
  9. > Use Circlejourney (https://th.circlejourney.net/) to see the changes you make in real time.
  10. > I've done my best to make this easy to understand and edit, but if you have any questions (that Google isn't answering), feel free to message me!
  11.  
  12. DONATE: https://ko-fi.com/artbymaxm
  13.  
  14. ///
  15.  
  16. Use CTRL+H to replace the following colors:
  17. Background: #000
  18. Main text: #fff
  19. Main accent: #cc0000
  20. Borders: #540000
  21.  
  22. This code may look odd with some CSS. To fix it, add the following to the CSS for the character:
  23.  
  24. .character-profile {
  25. max-width: 100%!important;
  26. }
  27.  
  28. body, p, td {
  29. font-family: Georgia, serif!important;
  30. font-size: 0.93em!important; /* experiment with the size as needed */
  31. }
  32.  
  33. It's not the cleanest fix, so feel free to edit it as needed!
  34.  
  35. -->
  36.  
  37. <!-- BACKGROUND - remove fully if using CSS -->
  38.  
  39. <!-- TILED BACKGROUND - the #000 before the url will only show if your bg image has transparency -->
  40. <div style="position: absolute; top: 0; bottom: 0; left:0; width: 100%; z-index: -1; background: #000 url(https://cdn.discordapp.com/attachments/900782479085027348/1021062937156259881/bg.png); background-repeat: repeat-xy; background-position: fixed;">
  41. </div>
  42.  
  43. <!-- END BACKGROUND -->
  44.  
  45. <!-- NAME OR TITLE -->
  46. <div class="container mx-auto mb-4">
  47. <div class="col-md-4 justify-content-center" style="font-family: Georgia, serif; z-index: 10; transform: rotate(-3deg); background-color: #000; border-style: solid; border-width: 2px; border-color: #540000;">
  48. <h1 class="mt-2 text-uppercase" style="color: #fff;">
  49. n<i>a</i>me or ti<i>t</i>le 
  50. <i class="fa-solid fa-xs fa-skull" style="color: #cc0000;"></i>
  51. </h1>
  52. </div>
  53.  
  54. <!-- START ROW 1/BASIC INFO -->
  55. <div class="row justify-content-center">
  56.  
  57. <!-- IMAGE 1 -->
  58. <div style="z-index: 9; transform: rotate(3deg); width: 250px; height: 350px; background-color: #000; background-image: url(URL); background-size: cover; background-position: center; border-style: solid; border-width: 2px; border-color: #540000;">
  59. <a href="URL" style="color: #cc0000; position: absolute; right: 5px; bottom: 1px;" data-toggle="tooltip" title="art by SOURCE">
  60. <i class="fa-regular fa-image"></i>
  61. </a>
  62. </div>
  63.  
  64. <div class="col-md-7 ml-3 p-2" style="font-family: Georgia, serif; transform: rotate(-1deg); max-height: 350px; overflow: auto; background-color: #000; border-style: solid; border-width: 2px; border-color: #540000;">
  65.  
  66. <div class="col-md-4 mx-auto mt-1" style="background-color: #000;">
  67. <h3 class="text-center font-weight-bold" style="color: #cc0000;">B<i>A</i>SIC INF<i>O</i></h3>
  68. </div>
  69. <div style="border-top:2px solid #540000; flex-grow:1; margin:-20px 25px 25px;">
  70. </div>
  71.  
  72. <div class="row mb-3 mx-auto">
  73.  
  74. <div class="col-md-6">
  75. <p><b style="color: #cc0000; font-family: Georgia, serif;">NAME:</b>
  76. <span class="pull-right" style="color: #fff;">content</span><br />
  77.  
  78. <b style="color: #cc0000; font-family: Georgia, serif;">AGE:</b>
  79. <span class="pull-right" style="color: #fff;">content</span><br />
  80.  
  81. <b style="color: #cc0000; font-family: Georgia, serif;">PRONOUNS:</b>
  82. <span class="pull-right" style="color: #fff;">content</span><br />
  83.  
  84. </p>
  85. </div>
  86.  
  87. <!-- STATS: feel free to change dependng on your oc! also you can change the symbols depending on your oc using fontawesome icons. just use fa-solid for filled in and fa-regular for empty. -->
  88. <div class="col-md-6">
  89. <p><b style="color: #cc0000; font-family: Georgia, serif;">POWER:</b>
  90. <span class="pull-right" style="color: #fff;">
  91. <i class="fa-solid fa-skull fa-xs"></i>
  92. <i class="fa-solid fa-skull fa-xs"></i>
  93. <i class="fa-solid fa-skull fa-xs"></i>
  94. <i class="fa-solid fa-skull fa-xs"></i>
  95. <i class="fa-regular fa-skull fa-xs"></i>
  96. </span><br />
  97.  
  98. <b style="color: #cc0000; font-family: Georgia, serif;">STABILITY:</b>
  99. <span class="pull-right" style="color: #fff;">
  100. <i class="fa-solid fa-skull fa-xs"></i>
  101. <i class="fa-solid fa-skull fa-xs"></i>
  102. <i class="fa-regular fa-skull fa-xs"></i>
  103. <i class="fa-regular fa-skull fa-xs"></i>
  104. <i class="fa-regular fa-skull fa-xs"></i>
  105. </span><br />
  106.  
  107. <b style="color: #cc0000; font-family: Georgia, serif;">RECKLESSNESS:</b>
  108. <span class="pull-right" style="color: #fff;">
  109. <i class="fa-solid fa-skull fa-xs"></i>
  110. <i class="fa-solid fa-skull fa-xs"></i>
  111. <i class="fa-solid fa-skull fa-xs"></i>
  112. <i class="fa-solid fa-skull fa-xs"></i>
  113. <i class="fa-solid fa-skull fa-xs"></i>
  114. </span><br />
  115. </p>
  116. </div>
  117.  
  118. </div>
  119.  
  120. <!-- DESIGN INFO -->
  121. <div class="col-md-4 mx-auto mt-1" style="background-color: #000;">
  122. <h3 class="text-center font-weight-bold" style="color: #cc0000;">DE<i>S</i>IG<i>N</i></h3>
  123. </div>
  124. <div style="border-top:2px solid #540000;flex-grow:1;margin:-20px 25px 25px;">
  125. </div>
  126.  
  127. <!-- PALETTE - change the background color -->
  128. <div class="row p-1 mb-3 no-gutters">
  129. <div class="col mx-1" style="background-color: #D2C5CA; height:20px;"></div>
  130. <div class="col mx-1" style="background-color: #CA824E; height:20px;"></div>
  131. <div class="col mx-1" style="background-color: #DB2230; height:20px;"></div>
  132. <div class="col mx-1" style="background-color: #A51212; height:20px;"></div>
  133. <div class="col mx-1" style="background-color: #0B0B0C; height:20px;"></div>
  134. </div>
  135.  
  136. <!-- EXTRA INFO -->
  137. <div class="row mb-3 mx-auto mb-3">
  138.  
  139. <div class="col-md-7">
  140. <p><b style="color: #cc0000; font-family: Georgia, serif;">SPECIES:</b>
  141. <span class="pull-right" style="color: #fff;">content</span><br />
  142.  
  143. <b style="color: #cc0000; font-family: Georgia, serif;">HEIGHT:</b>
  144. <span class="pull-right" style="color: #fff;">content</span><br />
  145.  
  146. <b style="color: #cc0000; font-family: Georgia, serif;">VOICE:</b>
  147. <span class="pull-right" style="color: #fff;"><a href="URL" style="color: #fff; text-decoration: underline;">link</a></span><br /><br />
  148.  
  149. <b style="color: #cc0000; font-family: Georgia, serif;">NOTES:</b><br />
  150. <span style="color: #fff;">content here blah blah blah<br />
  151. new line content<br />
  152. content thats more than one line wow woah yahoo heehee just say anything you want</span>
  153. </p>
  154. </div>
  155.  
  156. <div class="col-md-5" style="height: 300px; background-color: #000; background-image: url(https://images.unsplash.com/photo-1494249465471-5655b7878482); background-size: cover; background-position: center;">
  157.  
  158. </div>
  159.  
  160. </div>
  161. <!-- EXTRA INFO END -->
  162.  
  163.  
  164. <div class="col-md-4 mx-auto mt-1" style="background-color: #000;">
  165. <h3 class="text-center font-weight-bold" style="color: #cc0000;">MO<i>O</i>DBO<i>A</i>RD</h3>
  166. </div>
  167. <div style="border-top:2px solid #540000;flex-grow:1;margin:-20px 25px 25px;">
  168. </div>
  169.  
  170. <!-- MOODBOARD - copy+paste this to add more rows -->
  171. <div class="row mb-3 mx-auto">
  172.  
  173. <div class="col-md m-1" style="height: 150px; background-color: #000; background-image: url(URL; background-size: cover; background-position: center;">
  174. <a href="URL" style="color: #cc0000; position: absolute; right: 5px; bottom: 1px;" data-toggle="tooltip" title="SOURCE">
  175. <i class="fa-regular fa-image"></i>
  176. </a>
  177. </div>
  178.  
  179. <div class="col-md m-1" style="height: 150px; background-color: #000; background-image: url(URL); background-size: cover; background-position: center;">
  180. <a href="URL" style="color: #cc0000; position: absolute; right: 5px; bottom: 1px;" data-toggle="tooltip" title="SOURCE">
  181. <i class="fa-regular fa-image"></i>
  182. </a>
  183. </div>
  184.  
  185. <div class="col-md m-1" style="height: 150px; background-color: #000; background-image: url(URL); background-size: cover; background-position: center; border-style: solid; border-width: 2px; border-color: #000;">
  186. <a href="URL" style="color: #cc0000; position: absolute; right: 5px; bottom: 1px;" data-toggle="tooltip" title="SOURCE">
  187. <i class="fa-regular fa-image"></i>
  188. </a>
  189. </div>
  190.  
  191. </div>
  192. <!-- MOODBOARD END -->
  193. </div>
  194.  
  195. </div>
  196.  
  197. <!-- QUOTE -->
  198. <div class="col-md-5 text-center pull-right" style="font-family: Georgia, serif; z-index: 10; transform: rotate(3deg); margin-top: -5px; background-color: #000; border-style: solid; border-width: 2px; border-color: #540000;">
  199. <h4 class="mt-2 text-uppercase" style="color: #fff;">
  200. <i class="fa-solid fa-xs fa-quote-left mr-1" style="color: #cc0000;"></i>
  201. quote here, not too long
  202. <i class="fa-solid fa-xs fa-quote-right ml-1" style="color: #cc0000;"></i>
  203. </h4>
  204. </div>
  205.  
  206. <!-- ANOTHER QUOTE -->
  207. <div class="m-2"> </div>
  208.  
  209. <div class="col-md-6 mx-auto text-center m-4" style="font-family: Georgia, serif; z-index: 10; transform: rotate(-deg); border-style: solid; border-width: 2px; background-color: #000; border-color: #540000;">
  210. <h4 class="mt-2 text-uppercase" style="color: #fff;">
  211. <i class="fa-solid fa-xs fa-quote-left mr-1" style="color: #cc0000;"></i>
  212. another quote here, it can be a bit longer
  213. <i class="fa-solid fa-xs fa-quote-right ml-1" style="color: #cc0000;"></i>
  214. </h4>
  215. </div>
  216.  
  217. <!-- START ROW 2/ADDITIONAL INFO -->
  218. <div class="row justify-content-center">
  219.  
  220. <div class="col-md-7 p-2 mr-4" style="font-family: Georgia, serif; transform: rotate(-1deg); background-color: #000; border-style: solid; border-width: 2px; border-color: #540000; max-height: 500px; overflow: auto;">
  221.  
  222. <div class="col-md-3 mx-auto mt-1" style="background-color: #000;">
  223. <h3 class="text-center font-weight-bold" style="color: #cc0000;">ST<i>O</i>RY</h3>
  224. </div>
  225. <div style="border-top:2px solid #540000;flex-grow:1;margin:-20px 25px 25px;">
  226. </div>
  227.  
  228. <div class="card; p-1 m-3" style="font-family: Georgia, serif; color: #fff;">
  229. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum gravida arcu. Integer posuere elit quam, a dapibus felis sollicitudin ut. Donec sed turpis a ex facilisis dapibus. Quisque eu mattis tellus. Fusce lacus ipsum, condimentum ac facilisis vitae, eleifend eget ipsum. Quisque molestie, lectus sed facilisis feugiat, nisl lorem porta ipsum, sit amet viverra erat nisl nec nunc. Suspendisse potenti. Aliquam id maximus dui, ac venenatis ante. Nulla eu mauris neque. Donec in sapien sollicitudin, convallis velit eu, consequat nunc.</p>
  230. </div>
  231.  
  232. <div class="col-md-4 mx-auto mt-1" style="background-color: #000;">
  233. <h3 class="text-center font-weight-bold" style="color: #cc0000;">PE<i>R</i>SON<i>A</i>LITY</h3>
  234. </div>
  235. <div style="border-top:2px solid #540000;flex-grow:1;margin:-20px 25px 25px;">
  236. </div>
  237.  
  238. <!-- LIKES AND DISLIKES -->
  239. <div class="row mx-auto justify-content-center">
  240.  
  241. <div class="col-md-5 p-2 text-center mx-3" style="border-style: solid; border-width: 2px; border-color: #540000; color: #fff">
  242. <h3 style="color: #cc0000;">L<i>I</i>KE<i>S</i>:</h3>
  243. <ul class="fa-ul text-left">
  244. <li><span class="fa-li"><i class="fa-solid fa-xs fa-heart" style="color: #cc0000;"></i></span>
  245. like
  246. </li>
  247.  
  248. <li><span class="fa-li"><i class="fa-solid fa-xs fa-heart" style="color: #cc0000;"></i></span>
  249. like
  250. </li>
  251.  
  252. <li><span class="fa-li"><i class="fa-solid fa-xs fa-heart" style="color: #cc0000;"></i></span>
  253. like
  254. </li>
  255. </ul>
  256. </div>
  257.  
  258. <div class="col-md-5 p-2 text-center mx-3" style="border-style: solid; border-width: 2px; border-color: #540000; color: #fff">
  259. <h3 style="color: #cc0000;">D<i>I</i>SLIK<i>E</i>S:</h3>
  260. <ul class="fa-ul text-left">
  261. <li><span class="fa-li"><i class="fa-solid fa-xs fa-heart-broken" style="color: #cc0000;"></i></span>
  262. dislike
  263. </li>
  264.  
  265. <li><span class="fa-li"><i class="fa-solid fa-xs fa-heart-broken" style="color: #cc0000;"></i></span>
  266. dislike
  267. </li>
  268.  
  269. <li><span class="fa-li"><i class="fa-solid fa-xs fa-heart-broken" style="color: #cc0000;"></i></span>
  270. dislike
  271. </li>
  272. </ul>
  273. </div>
  274. </div>
  275.  
  276. <div class="card; p-1 m-3" style="font-family: Georgia, serif; color: #fff;">
  277. <p>Phasellus posuere sodales arcu, quis vulputate elit mattis eu. Cras tempus ultrices dolor ac placerat. Mauris id neque nec risus commodo porta quis ac tortor. Aenean posuere, lectus sed fermentum interdum, quam risus maximus erat, sit amet porta quam elit ac arcu. Morbi pulvinar nulla iaculis ipsum interdum maximus. Aliquam pretium iaculis tortor in mollis. Cras lorem urna, tincidunt in dui in, facilisis feugiat elit. Vestibulum sit amet convallis risus. Vestibulum lacinia lectus erat, in lobortis ligula mattis vitae. Donec pulvinar metus id fermentum porttitor. Donec facilisis et nunc nec consequat.</p>
  278. </div>
  279.  
  280. <!-- RELATIONSHIPS -->
  281. <div class="col-md-5 mx-auto mt-1" style="background-color: #000;">
  282. <h3 class="text-center font-weight-bold" style="color: #cc0000;">REL<i>A</i>TION<i>S</i>HIP<i>S</i></h3>
  283. </div>
  284. <div style="border-top:2px solid #540000;flex-grow:1;margin:-20px 25px 25px;">
  285. </div>
  286.  
  287. <!-- CHARACTER - copy and paste this chunk to add more -->
  288. <div class="row no-gutters p-1 m-3">
  289. <div class="col-md-3 my-1">
  290. <img src="https://via.placeholder.com/100" style=" transform: rotate(1deg); max-height: 100px; max-width: 100px; border-style: solid; border-width: 2px; border-color: #540000;">
  291. </div>
  292. <div class="col-md-9 mx-auto">
  293. <h3 style="color: #cc0000;">
  294. <a href="" style="color: #cc0000; text-decoration: underline;">NAME HERE</a> —
  295. <!-- RELATIONSHIP LEVEL - change the symbols as you wish -->
  296. <i class="fa-solid fa-skull fa-xs"></i>
  297. <i class="fa-solid fa-skull fa-xs"></i>
  298. <i class="fa-solid fa-skull fa-xs"></i>
  299. <i class="fa-solid fa-skull fa-xs"></i>
  300. <i class="fa-regular fa-skull fa-xs"></i>
  301. </h3>
  302. <p class="m-1" style="color: #fff;">
  303. Maecenas condimentum dui in justo ullamcorper, eget porta ante rhoncus. Vivamus sit amet turpis gravida, molestie risus in, bibendum dolor. Nam sagittis risus sed nulla finibus tincidunt id nec nibh. Ut sed dictum metus, et sagittis felis. Quisque nec dui sit amet est rhoncus convallis sed ut libero. Nam iaculis magna quis quam dapibus rutrum. Ut rhoncus imperdiet magna, euismod suscipit ante. Etiam blandit erat eu purus eleifend, vitae congue elit blandit. Integer at ipsum sit amet justo faucibus viverra non sed mi.
  304. </p>
  305. </div>
  306. </div>
  307. <!-- END CHARACTER -->
  308.  
  309. <!-- CHARACTER - copy and paste this chunk to add more -->
  310. <div class="row no-gutters p-1 m-3">
  311. <div class="col-md-3 my-1">
  312. <img src="https://via.placeholder.com/100" style=" transform: rotate(1deg); max-height: 100px; max-width: 100px; border-style: solid; border-width: 2px; border-color: #540000;">
  313. </div>
  314. <div class="col-md-9 mx-auto">
  315. <h3 style="color: #cc0000;">
  316. <a href="" style="color: #cc0000; text-decoration: underline;">NAME HERE</a> —
  317. <!-- RELATIONSHIP LEVEL - change the symbols as you wish -->
  318. <i class="fa-solid fa-skull fa-xs"></i>
  319. <i class="fa-solid fa-skull fa-xs"></i>
  320. <i class="fa-solid fa-skull fa-xs"></i>
  321. <i class="fa-solid fa-skull fa-xs"></i>
  322. <i class="fa-regular fa-skull fa-xs"></i>
  323. </h3>
  324. <p class="m-1" style="color: #fff;">
  325. Maecenas condimentum dui in justo ullamcorper, eget porta ante rhoncus. Vivamus sit amet turpis gravida, molestie risus in, bibendum dolor. Nam sagittis risus sed nulla finibus tincidunt id nec nibh. Ut sed dictum metus, et sagittis felis. Quisque nec dui sit amet est rhoncus convallis sed ut libero. Nam iaculis magna quis quam dapibus rutrum. Ut rhoncus imperdiet magna, euismod suscipit ante. Etiam blandit erat eu purus eleifend, vitae congue elit blandit. Integer at ipsum sit amet justo faucibus viverra non sed mi.
  326. </p>
  327. </div>
  328. </div>
  329. <!-- END CHARACTER -->
  330. <!-- END RELATIONSHIPS -->
  331. </div>
  332. <!-- END COLUMN -->
  333.  
  334. <!-- IMAGE 2 -->
  335. <div class="col-md-4 p-3" style="z-index: 9; height: 500px; transform: rotate(1deg); background-color: #000; background-image: url(URL); background-size: cover; background-position: center; border-style: solid; border-width: 2px; border-color: #540000;">
  336. <a href="URLHERE" style="color: #cc0000; position: absolute; right: 5px; bottom: 1px;" data-toggle="tooltip" title="art by SOURCE">
  337. <i class="fa-regular fa-image"></i>
  338. </a>
  339. </div>
  340.  
  341. </div>
  342. <!-- END ROW -->
  343.  
  344. <div class="col-md-7 mx-auto text-center m-4" style="font-family: Georgia, serif; z-index: 9; transform: rotate(1deg); border-style: solid; border-width: 2px; background-color: #000; border-color: #540000; color: #fff;">
  345. <h4 class="mt-2" style="color: #fff;">
  346.  
  347. <a class="btn py-1 px-2">
  348. <!-- This uses YT and plays while on the page! Simply replace "VIDEOID" with the code after "watch?v=" in a regular YT url -->
  349.  
  350. <iframe allowfullscreen class="m-auto" frameborder="0" style="height:45px; width:45px; opacity:0.001; position:absolute; z-index:1000;" src="https://www.youtube.com/embed/VIDEOID?controls=0"></iframe>
  351. <i class="fa-solid fa-compact-disc fa-lg" style="color: #cc0000;"></i>
  352. </a>
  353.  
  354. ARTIST - Song
  355. </h4>
  356. </div>
  357.  
  358. <!-- CREDIT - you can move it, but don't remove it! -->
  359. <div class="col-1 pull-right text-center" style="z-index: 10; transform: rotate(-2deg); margin-top: -2.5em; margin-right: 15em;">
  360. <a href="https://toyhou.se/18857510.-f2u-off-kilter/18857517.tiled-bg" class="btn rounded-0" style="color: #cc0000; background: #000; border-style: solid; border-width: 2px; border-color: #540000;" data-toggle="tooltip" title="code by artbymaxm">
  361. <i class="fa-regular fa-code"></i>
  362. </a>
  363. </div>
  364.  
  365. </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!