API tools faq
paste
Advertisement
soxxx

014 - dark

soxxx
Feb 22nd, 2025
51
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.92 KB | None | 0 0
raw download clone embed print report
  1. [comment]code by sox
  2.  
  3. [font=Nunito Sans]font1[/font]
  4.  
  5. [/comment][div=height:auto; width:100%; overflow-x:auto; overflow-y:hidden;
  6.  
  7. /*accent colors*/
  8. --accent01: #000; /*black - keep dark!*/
  9. --accent02: #fff; /*white - keep light!*/
  10. --accent1: #929292; /*subtitles - gray*/
  11. --accent2: #1F1F1F; /*search bar - dark gray*/
  12. --accent3: #1ED760; /*icons/buttons - spotify green*/
  13. --accent4: #353535; /*lyrics bkgd*/
  14.  
  15.  
  16. /*values*/
  17. --bkgd: var(--accent01); /*background color*/
  18. --text: var(--accent02); /*default text color - applies to text NOT SET in the values below*/
  19. --lyricsbkgd: var(--accent4); /*gray*/
  20.  
  21. --followborder: 0.5px solid var(--accent3); /*unfollow button border style*/
  22. --picshadow: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /*main pic gradient overlay - black to transparent*/
  23.  
  24. --namecolor: var(--accent02); /*character name color*/
  25. --fccolor: var(--accent1); /*face claim name color*/
  26. --songcolor: var(--accent02); /*song name color*/
  27. --artistcolor: var(--accent1); /*song artist name color*/
  28. --lyricscolor: var(--accent02); /*lyrics text color*/
  29. --aboutcolor: var(--accent02); /*about role text color*/
  30. --followcolor: var(--accent3); /*unfollow button text color*/
  31.  
  32.  
  33. /*manual bold settings -- preserves font style on mobile*/
  34. --namebold: 0.6px var(--namecolor);
  35. --songbold: 0.2px var(--songcolor);
  36. --lyricsbold: 0.6px var(--lyricscolor);
  37. --followbold: 0.3px var(--followcolor);
  38. --fcbold: 0.3px var(--fccolor);
  39. --aboutbold: 0.6px var(--aboutcolor);
  40.  
  41.  
  42. /*pics*/
  43. --mainpic: url('https://i.imgur.com/QlMEsOl.jpeg'); /*character picture*/
  44. --mainpicsize: cover; /*picture size*/
  45. --mainpicposition: 50% 50%; /*picture positioning*/
  46.  
  47. --songpic: url('https://i.pinimg.com/736x/ad/96/a5/ad96a57598c624eb56895423efebc74c.jpg'); /*song picture*/
  48. --songpicsize: cover; /*picture size*/
  49. --songpicposition: 50% 50%; /*picture positioning*/
  50.  
  51.  
  52. /*fonts*/
  53. --font1: 'Nunito Sans', sans-serif;
  54.  
  55.  
  56. ][div=margin:auto; position:relative; width:fit-content; height:fit-content; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin-top:10px; margin-bottom:10px; box-sizing:border-box; overflow:hidden; cursor: url(https://imgur.com/5ex8RXq.png), auto; font-family:var(--font1); color:var(--text);][nobr]
  57.  
  58. [comment]---- LEFT START ----[/comment]
  59. [/nobr][div=position:relative; margin:5px; width:250px; height:275px; overflow:hidden; background:var(--bkgd); border-radius:8px;][nobr]
  60.  
  61. [comment]---- SEARCH BAR START ----[/comment]
  62. [comment]-- home --[/comment][div=position:absolute; width:20px; height:20px; left:10px; top:10px; background:var(--accent2); border-radius:20px; font-size:10px; line-height:21px; color:var(--accent1); text-align:center;][fa]far fa-home[/fa][/div]
  63. [comment]-- search --[/comment][div=position:absolute; width:195px; height:20px; left:35px; top:10px; background:var(--accent2); border-radius:20px; font-size:8px; line-height:21px; color:var(--accent1); padding-left:7px;][div=display:inline; margin-right:5px; font-size:10px;][fa]far fa-search[/fa][/div] What do you want to play?
  64. [comment]-- spotify icon --[/comment][div=display:inline; position:absolute; height:10px; top:5px; right:5px; text-align:right; color:var(--accent3); font-size:10px; line-height:10px; border-left:0.5px solid var(--accent1); padding-left:5px;][fa]fab fa-spotify[/fa][/div]
  65. [/div][comment]---- SEARCH END----[/comment]
  66.  
  67. [comment]---- LYRICS START ----[/comment]
  68. [/nobr][div=position:absolute; width:100%; height:185px; top:40px; background:var(--lyricsbkgd); font-size:13px; line-height:16px;][div=position:absolute; top:20px; left:15px; width:220px; height:145px; overflow-y:scroll; overflow-x:hidden; scrollbar-width:none; color:var(--lyricscolor); -webkit-text-stroke:var(--lyricsbold); letter-spacing:0.6px;][comment]
  69.  
  70. ---- LYRICS START HERE ----
  71. [/comment]Lorem ipsum dolor
  72. Sit amet consectetur
  73. Adipiscing elit sed do eiusmod tempor
  74. Incididunt ut labore et dolore magna aliqua
  75. Ut enim ad minim veniam
  76. Quis nostrud exercitation
  77. Ullamco laboris nisi ut aliquip
  78. Ex ea commodo consequat
  79. Duis aute irure dolor in reprehenderit in voluptate
  80. Velit esse cillum dolore eu fugiat nulla pariatur
  81. Excepteur sint occaecat
  82. Cupidatat non proident
  83. Sunt in culpa qui officia deserunt
  84. Mollit anim id est laborum
  85. [/div][/div][nobr][comment]---- LYRICS END----[/comment]
  86.  
  87.  
  88. [comment]---- SONG START ----[/comment]
  89. [comment]-- song pic --[/comment][div=position:absolute; left:10px; bottom:10px; width:30px; height:30px; background:var(--songpic); background-size:var(--songpicsize); background-position:var(--songpicposition); border-radius:3px;][/div]
  90. [comment]-- song name --[/comment][div=position:absolute; width:190px; height:10px; left:50px; bottom:23px; overflow:hidden; font-size:10px; line-height:10px;][div=display:inline; color:var(--songcolor); -webkit-text-stroke:var(--songbold); letter-spacing:0.2px;][comment]
  91.  
  92. ---- SONG NAME HERE ----
  93. [/comment]Title of a Song[/div]
  94.  
  95. [comment]-- circle icon --[/comment][div=display:inline; margin-left:5px; font-size:8px; color:var(--accent3);][fa]fas fa-circle-check[/fa][/div][/div]
  96. [comment]-- artist name --[/comment][div=position:absolute; width:190px; height:10px; left:50px; bottom:11px; font-size:8px; line-height:8px; color:var(--artistcolor);][comment]
  97.  
  98. ---- ARTIST NAME HERE ----
  99. [/comment]Artist Name
  100.  
  101. [/div][comment]---- SONG END ----[/comment]
  102. [/nobr][/div][nobr][comment]---- LEFT END ----[/comment]
  103.  
  104.  
  105.  
  106. [comment]---- RIGHT START ----[/comment]
  107. [div=position:relative; margin:5px; width:250px; height:275px; overflow:hidden; background:var(--bkgd); border-radius:8px;]
  108.  
  109. [comment]---- CHARACTER PIC SECTION START ----[/comment]
  110. [comment]-- pic --[/comment][div=position:absolute; top:0px; width:100%; height:200px; background:var(--mainpic); background-size:var(--mainpicsize); background-position:var(--mainpicposition);][/div]
  111. [comment]-- gradient overlay --[/comment][div=position:absolute; top:0px; width:100%; height:80px; background:var(--picshadow); background-size:var(--mainpicsize); background-position:var(--mainpicposition);][/div]
  112.  
  113. [comment]-- role name --[/comment][div=position:absolute; top:15px; left:15px; width:230px; height:30px; overflow:hidden; font-size:13px; line-height:14px; color:var(--aboutcolor); -webkit-text-stroke:var(--aboutbold); letter-spacing:0.7px;][comment]
  114.  
  115. ---- ROLE NAME HERE: About the [role] ----
  116. [/comment]About the RoleName
  117. [/div][comment]---- CHAR PIC SECTION END ----[/comment]
  118.  
  119.  
  120. [comment]---- CHARACTER INFO SECTION START ----[/comment]
  121. [comment]-- character name --[/comment][div=position:absolute; width:230px; height:16px; left:15px; bottom:45px; overflow:hidden; font-size:15px; line-height:15px;][div=display:inline; color:var(--namecolor); -webkit-text-stroke:var(--namebold); letter-spacing:0.7px;][comment]
  122.  
  123. ---- CHARACTER NAME HERE ----
  124. [/comment]Character Name[/div][/div]
  125.  
  126. [comment]-- monthly listeners --[/comment][div=position:absolute; width:190px; height:11px; left:15px; bottom:32px; overflow:hidden; font-size:11px; line-height:11px; color:var(--artistcolor);][comment]
  127.  
  128. ---- MONTHLY LISTENERS HERE ----
  129. [/comment]5,302,133 monthly listeners[/div]
  130.  
  131.  
  132. [comment]-- follow button --[/comment][div=position:absolute; width:auto; height:auto; right:15px; bottom:32px; border:var(--followborder); border-radius:30px; padding:3px 8px 3px 8px; text-align:center; font-size:9px; line-height:9px; color:var(--followcolor); -webkit-text-stroke:var(--followbold); letter-spacing:0.3px;]Unfollow[/div]
  133.  
  134. [comment]-- faceclaim name --[/comment][div=position:absolute; width:190px; height:10px; left:15px; bottom:11px; overflow:hidden; font-size:8px; line-height:8px; color:var(--fccolor);][div=display:inline;-webkit-text-stroke:var(--fcbold); letter-spacing:0.3px;]Faceclaim:[/div] [comment]
  135.  
  136. ---- FACECLAIM NAME HERE ----
  137. [/comment]Firstname Lastname
  138.  
  139. [/div][comment]---- CHARACTER INFO SECTION END----[/comment]
  140. [/div][comment]---- RIGHT END----[/comment]
  141.  
  142. [/nobr][/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!