API tools faq
paste
hanyus

f2u - the new now

hanyus
Sep 8th, 2021 (edited)
232
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.63 KB | None | 0 0
raw download clone embed print report
  1. <!-- FIND + REPLACE
  2. borders: #c4c4c4
  3. accents (name, song colour etc): #ff9875
  4. the backgrounds are each background-color:white and the text is color:black (right at the beginning of the code) it's pretty easy to change manually if you'd like!
  5. -->
  6.  
  7. <!-- you can change the background image by editing the link below if you want! -->
  8. <div class="container p-4" style="background:url(https://cdn.discordapp.com/attachments/273482437135171585/884038906390151259/y-so-serious-white.png); color:black; font-weight:lighter; background-attachment:fixed">
  9. <div class="container" style="box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background-color:white">
  10.  
  11. <div class="row p-3">
  12. <div class="col-sm-3" style="border:1px solid #c4c4c4; padding:10px">
  13. <!-- MAIN/SQUARE IMAGE -->
  14. <div class="card rounded-0 border-0" style="background:url(IMAGE URL); height:240px; background-size:cover; background-position:center"></div>
  15. </div>
  16. <div class="col-sm-9">
  17. <!-- char intro -->
  18. <div class="container mb-5"><div class="pull-right" style="border-bottom:1px solid #c4c4c4; font-size:20px; color:#ff9875">NAME / quote (if you want one)</div></div>
  19. <div class="p-2 text-justify" style="height:215px; overflow:auto; border-left:1px solid #c4c4c4">
  20. <p>character intro! scrolls when filled so add as much as you want. you could also describe their personality here! 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>
  21. <p>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. 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. </p></div>
  22. </div>
  23. </div>
  24.  
  25. </div>
  26. <div class="container my-3 p-3 text-center" style="background-color:white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; font-size:20px">
  27. <!-- song -->
  28. <span><a href="song link" style="color:#ff9875"><i class="fad fa-music mx-3"></i> song . artist <i class="fad fa-music mx-3"></i></a></span>
  29. </div>
  30. <div class="container my-3" style="background-color:white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;">
  31. <div class="row p-3">
  32. <div class="col-sm-9">
  33. <!-- story -->
  34. <span style="border-bottom:1px solid #c4c4c4; font-size:20px">STORY</span>
  35. <div class="p-2 text-justify" style="height:592px; overflow:auto; border-right:1px solid #c4c4c4">
  36. <p>backstory! this scrolls when filled so write as much as you want!</p>
  37. <p>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>
  38. <div class="p-1 m-2 my-3" style="border-left:1px solid #ff9875; font-size:18px">subheading ; feel free to delete if you dont want it / add more by pasting this snippet!</div>
  39. <p>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>
  40. </div>
  41. </div>
  42. <div class="col-sm-3" style="border:1px solid #c4c4c4; padding:10px">
  43. <!-- SIDE IMAGE -->
  44. <div class="card rounded-0 border-0" style="background:url(IMAGE URL); height:600px; background-size:cover; background-position:center"></div></div>
  45. </div>
  46. </div>
  47. <div class="container my-" style="background-color:white; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;">
  48. <div class="row p-3">
  49. <!-- COPY PASTE FROM HERE TO RELATIONSHIP END TO ADD MORE -->
  50. <div class="col-sm-6 p-2" style="border-left:1px solid #c4c4c4">
  51. <div class="container">
  52. <div class="row">
  53. <div class="col-sm-4" style="border:1px solid #c4c4c4; padding:10px">
  54. <div class="card rounded-0 border-0" style="background:url(IMAGE URL); height:150px; background-size:cover; background-position:center"></div>
  55. </div>
  56. <div class="col-sm-8">
  57. <span style="color:#ff9875; font-size:18px">NAME / relationship</span>
  58. <div class="container text-justify" style="height:145px; overflow:auto"><p>relationship description! this scrolls when filled.</p></div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <!-- RELATIONSHIP END -->
  64. <!-- COPY PASTE FROM HERE TO RELATIONSHIP END TO ADD MORE -->
  65. <div class="col-sm-6 p-2" style="border-left:1px solid #c4c4c4">
  66. <div class="container">
  67. <div class="row">
  68. <div class="col-sm-4" style="border:1px solid #c4c4c4; padding:10px">
  69. <div class="card rounded-0 border-0" style="background:url(IMAGE URL); height:150px; background-size:cover; background-position:center"></div>
  70. </div>
  71. <div class="col-sm-8">
  72. <span style="color:#ff9875; font-size:18px">NAME / relationship</span>
  73. <div class="container text-justify" style="height:145px; overflow:auto"><p>relationship description! this scrolls when filled.</p></div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. <!-- RELATIONSHIP END -->
  79. </div>
  80. </div>
  81. </div>
  82. <!-- CREDITS- DONT REMOVE!! -->
  83. <a href="hanyu" class="pull-right" style="position:relative; left:-50px; font-size:10px">code by hanyu</a>
  84.  
  85.  
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!