API tools faq
paste
Advertisement
mochiroll

Stained.Code

mochiroll
Oct 15th, 2023 (edited)
179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.25 KB | None | 0 0
raw download clone embed print report
  1. [comment]Designed and coded by [USER=20950]@Nano[/USER].
  2. Please do not remove the credits or claim the code as your own work.
  3.  
  4. [font=Garamond]serif[/font]
  5. [font=Hind]sans-serif[/font]
  6.  
  7. [/comment][comment]
  8.  
  9. // accents //
  10.  
  11. [/comment][div= padding: 0;
  12.  
  13.  
  14.  
  15.  
  16.  
  17. /* <------------------------------------------ put your character's image url where indicated below ------------------------------------- */
  18. --charIMG: url('https://static.zerochan.net/Arknights.full.3970057.jpg') 50% 50%/cover no-repeat;
  19.  
  20.  
  21.  
  22.  
  23.  
  24. /* <--------------------------------- accents ---------------------------------> */
  25.  
  26. /* colors */
  27. --textcolor: #222222;
  28. --accent: #b04325; /* swap hex with your character's color */
  29. --linkcolor: #fefefe;
  30.  
  31. --musicolor: #fefefe; /* swap hex with music player color */
  32.  
  33. /* fonts */
  34. --textfont: 'Garamond', serif;
  35. --musicfont: 'Hind', sans-serif;
  36.  
  37. /* backgrounds */
  38. --bg01: url('https://i.imgur.com/53aZiyW.png') repeat;
  39. --bg02: url('https://i.imgur.com/JhB4iVV.jpg') repeat;
  40.  
  41. /* images */
  42. --flower: url('https://i.imgur.com/Zv683fw.png') no-repeat;
  43.  
  44. /* <--------------------------------- wrapper ---------------------------------> */
  45.  
  46. margin: 0 auto;
  47. padding: 50px 0;
  48. width: 100%;
  49. min-width: 300px;
  50. background: var(--bg01);
  51. font-size: initial;
  52. overflow: hidden;
  53. position: relative;][comment]
  54.  
  55. ----- start of image ----- >
  56.  
  57. [/comment][div= border-bottom: 10px solid var(--accent); padding: 0; margin: 0 auto; width: 100%; max-width: 550px; height: 200px; position: relative;][div=width: 100%; height: 200px; background: var(--charIMG); position: relative; z-index: 2; pointer-events: none;][/div][comment]
  58.  
  59. ----- start of music player ----->
  60.  
  61. [/comment][div=position: absolute; left: 25px; bottom: 45px; z-index: 1;][div=width: 30px; height: 30px; overflow: hidden; position: absolute;][div=position: absolute; top: -520px; left: -245px;][comment]
  62.  
  63.  
  64.  
  65.  
  66.  
  67. ----------------------- PLACE GDRIVE MP3 ID HERE ----------------------------->
  68.  
  69. [/comment][gdoc]1Up9z9G8-E4zmBgk6bKpviS4UFd-IZzM2[/gdoc][comment]
  70.  
  71. <----------------------- PLACE GDRIVE MP3 ID HERE -----------------------------
  72.  
  73.  
  74.  
  75.  
  76. [/comment][/div][/div][/div][comment]
  77.  
  78. ---------- start of music player visuals ---------->
  79.  
  80. [/comment][div=position: absolute; left: 20px; bottom: 15px; z-index: 3; pointer-events: none; display: flex; flex-wrap: nowrap;][div=border: 4px solid var(--musicolor); border-radius: 50%; width: 25px; height: 25px;][div=margin-top: 4px; margin-left: 1px; width: 100%; font-size: 12px; color: var(--musicolor); text-align: center;][fa]far fa-play[/fa][/div][/div][div=margin-left: 7px; border: 4px solid var(--musicolor); border-radius: 50%; width: 25px; height: 25px;][div=margin-top: 4px; width: 100%; font-size: 12px; color: var(--musicolor); text-align: center;][fa]far fa-pause[/fa][/div][/div][div=margin-left: 7px; font-family: var(--musicfont); color: var(--musicolor); font-size: 14px; text-transform: uppercase; font-weight: 700; position: relative;][comment]
  81.  
  82.  
  83.  
  84.  
  85.  
  86. -------------------- write song title here -------------------->
  87.  
  88. [/comment]Title of Song[comment]
  89.  
  90. <-------------------- write song title here --------------------
  91.  
  92.  
  93.  
  94.  
  95.  
  96. [/comment][div=margin-left: 2px; width: calc(100% + 75px); height: 2px; background: var(--musicolor); position: absolute; bottom: 7px;][div=width: 50px; height: 2px; background: var(--accent);][/div][/div][/div][/div][comment]
  97.  
  98. <---------- end of music player visuals ----------
  99.  
  100. [/comment][comment]
  101.  
  102. <----- end of music player -----
  103.  
  104. [/comment][/div][comment]
  105.  
  106. <----- end of image -----
  107.  
  108. [/comment][comment]
  109.  
  110. ----- start of main body ----->
  111.  
  112. [/comment][div= padding: 25px; margin: 0 auto; width: calc(100% - 50px); max-width: 500px; background: var(--bg02); position: relative; overflow: hidden;][comment]
  113.  
  114. --------------- start of flower decor --------------->
  115.  
  116. [/comment][div= padding: 0; width: 255px; height: 196px; background: var(--flower); position: absolute; bottom: 0; right: 0;][/div][comment]
  117.  
  118. <--------------- end of flower decor ---------------
  119.  
  120. [/comment][comment]
  121.  
  122. --------------- start of textbox --------------->
  123.  
  124. [/comment][div= padding: 0; width: 100%; position: relative; z-index: 1;][comment]
  125.  
  126. -------------------- start of content section -------------------->
  127.  
  128. [/comment][div= padding: 0; width: 100%; font-family: var(--textfont); font-size: 1em; line-height: 130%; color: var(--textcolor); text-align: justify;][div= border-left: 3px solid var(--accent); padding: 0; padding-left: 7px; width: calc(100% - 10px); font-weight: 700;][comment]
  129.  
  130.  
  131.  
  132.  
  133. --------------------------------- put your character's name here --------------------------->[/comment]Character Name[/div][comment]
  134.  
  135.  
  136.  
  137.  
  138. [/comment][div= padding: 0; width: 100%; font-family: var(--textfont); font-size: 1em; line-height: 130%; color: var(--textcolor); text-align: justify;][div= margin-top: 7px; margin-bottom: 20px; border-left: 3px solid var(--accent); padding: 0; padding-left: 7px; width: calc(100% - 10px); font-weight: 700;][comment]
  139.  
  140.  
  141.  
  142.  
  143.  
  144. --------------------------------- put tags/mentions here --------------------------->[/comment]Tags: @.Player[/div][comment]
  145.  
  146.  
  147.  
  148.  
  149.  
  150. [/comment]Post content here
  151.  
  152. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed semper lacinia sem at auctor. Quisque eget vehicula dolor. Sed faucibus suscipit enim, in pulvinar dui convallis ac. Aenean sed maximus leo. Aenean ut mauris velit. Nam quis ornare ex, id efficitur turpis. Nunc ut ante quam. Aliquam ligula magna, rhoncus eu justo quis, pretium rhoncus dolor. Pellentesque tristique molestie nunc, in tempus lectus varius sit amet.
  153.  
  154. [div=display: inline; color: var(--accent);]"Colored dialogue blah blah blah."[/div]
  155.  
  156. In elementum sem nec tempor dictum. Integer aliquet arcu vel justo gravida sagittis. Pellentesque finibus volutpat augue quis luctus. Donec nec arcu a enim aliquam pretium id eget dui. Nunc in ipsum consequat, varius nunc sed, ornare sapien. Cras ex neque, malesuada a efficitur luctus, fringilla eu lectus. Nunc risus nibh, aliquam id ullamcorper ut, consequat eu sem. Vestibulum vehicula dui eu erat faucibus feugiat. In maximus cursus mi, eget egestas neque pulvinar ut.
  157.  
  158. Nulla leo massa, pharetra in urna a, posuere sollicitudin velit. Aliquam ullamcorper dolor in nibh ultrices, eu interdum dolor maximus. Cras condimentum vulputate congue. Mauris justo turpis, aliquam ac nulla ut, viverra rutrum enim. In hac habitasse platea dictumst. Vestibulum tempor sem vel elit gravida fermentum. Duis magna quam, rutrum vel varius vitae, tempus id ligula. Cras vel orci vitae ligula egestas consequat. In lacus tellus, mattis finibus auctor a, auctor ac ex. Nullam molestie, leo eget faucibus lacinia, ipsum ipsum convallis turpis, dictum maximus eros ante congue ante. Quisque finibus nunc vitae massa venenatis, quis rhoncus tortor egestas. Suspendisse est orci, iaculis non massa a, mollis auctor lacus. Nullam dignissim lobortis dignissim. Sed in varius nisi, a scelerisque velit. Ut ex massa, ullamcorper ut libero ut, tincidunt ullamcorper lorem.[/div][comment]
  159.  
  160. <-------------------- end of content section --------------------
  161.  
  162. [/comment][/div][comment]
  163.  
  164. <--------------- end of textbox ---------------
  165.  
  166. [/comment][/div][comment]
  167.  
  168. <----- end of main body -----
  169.  
  170. [/comment][/div][/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!