API tools faq
paste
Advertisement
hanyus

f2u - playlist

hanyus
Dec 21st, 2022 (edited)
1,064
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.29 KB | None | 0 0
raw download clone embed print report
  1. <!-- FIND + REPLACE INFO
  2.  
  3. song info background : rgba(0,0,0,0.7)
  4. song card gradient colour 1 : #000000 (for every card)
  5. song 1 accent : #242393
  6. song 2 accent : #97bdd8
  7. any other song accents will have to be added manually
  8. text: #ffffff
  9.  
  10. -->
  11.  
  12.  
  13. <div class="container" style="max-width:750px">
  14. <div class="row no-gutters p-1" style="background:linear-gradient(rgba(20,20,20,0.8), rgba(20,20,20,1)">
  15. <!-- SONG 1 START - ACCENT COLOUR : #242393 - COPY FROM HERE TO 'SONG 1 END' + PASTE TO ADD MORE SECTIONS -->
  16. <!-- SONG CARD 1 START -->
  17.  
  18. <div class="col-sm-4 p-1">
  19. <div class="sticky-top">
  20. <div class="container" style="background-color:#000000; padding:1px">
  21. <!-- to change the accent manually change the #242393 to whichever colour you'd like -->
  22. <div class="container p-0" style="background:linear-gradient(#242393,#000000 40%)">
  23. <div class="pb-2 px-4 pt-4">
  24.  
  25. <!-- SONG 1 IMAGE - REPLACE 'IMAGE HERE' WITH YOUR IMAGE URL -->
  26.  
  27. <div class="card rounded-0 border-0 bg-white" style="background:url(IMAGE HERE); height:190px; background-size:cover; background-position:center; background-repeat:no-repeat;">
  28.  
  29.  
  30. </div></div>
  31. <div class="row no-gutters px-4 pb-4">
  32. <div class="col-auto">
  33.  
  34. <p style="font-variant:small-caps; font-size:20px; color:#ffffff" class="m-0">
  35.  
  36. <!-- SONG 1 NAME -->
  37.  
  38. song name</p>
  39.  
  40. <p style="font-weight:lighter; font-variant:small-caps; font-size:18px; color:#ffffff" class="m-0">
  41.  
  42. <!-- SONG 1 ARTIST -->
  43.  
  44. artist</p>
  45.  
  46. </div>
  47. <div class="col-auto ml-auto">
  48. <div class="card rounded-circle border-0 mt-2" style="background-color:#ffffff; height:40px; width:40px; overflow:hidden">
  49. <i class="fas fa-play fa-fw m-auto" style="color:#000000; font-size:20px">
  50.  
  51. <!-- SONG 1 YOUTUBE LINK - TO ADD A VIDEO, COPY EVERYTHING AFTER WATCH?V= AND PASTE IT AFTER EMBED/ - FOR EXAMPLE https://www.youtube.com/watch?v=tyPv7QyuZl0 BECOMES https://www.youtube.com/embed/tyPv7QyuZl0 THEN PUT IT BETWEEN THE QUOTES FOR SRC="" -->
  52.  
  53. <iframe style="width:550%; height:550%; border-radius:20px; position:absolute; left:-80px; top:-70px; opacity:0.01" src="https://www.youtube.com/embed/x3nKwPyLmzs" modestbranding="1"></iframe>
  54.  
  55.  
  56. </i>
  57. </div>
  58. </div>
  59. </div>
  60.  
  61.  
  62. </div>
  63. </div>
  64. </div>
  65. </div>
  66.  
  67. <!-- SONG CARD 1 END -->
  68. <!-- SONG INFO 1 START -->
  69. <div class="col-sm-8 p-1">
  70. <div class="card border-0 rounded-0 h-100 p-2" style="background-color:rgba(0,0,0,0.7); color:#ffffff">
  71. <p style="font-size:20px">about this song . . .</p>
  72. <!-- lyrics - to start a new line, just type <br> -->
  73. <div class="p-1" style="font-weight:lighter; font-variant:small-caps">
  74. <i>lyrics lyrics lyrics
  75. <br>another line <span style="font-weight:normal">highlighted lyrics</span>
  76. </i>
  77. </div>
  78. <!-- song info paragraph - you can easily delete this if you dont want it -->
  79. <div style="font-weight:lighter; font-size:13.5px" class="py-2 text-justify">
  80. <p>a few paragraphs about how this song fits your character if you want. explain if it's relevant to their lore, fits their vibe or is just something they'd listen to!</p>
  81. <p>another paragraph.</p>
  82. </div>
  83. </div>
  84. </div>
  85. <!-- SONG INFO 1 END -->
  86. <!-- SONG 1 END - ACCENT COLOUR : #242393 - COPY FROM HERE TO 'SONG 1 END' + PASTE TO ADD MORE SECTIONS -->
  87.  
  88. <!-- SONG 2 START - ACCENT COLOUR : #97bdd8 - COPY FROM HERE TO 'SONG 2 END' + PASTE TO ADD MORE SECTIONS -->
  89. <!-- SONG INFO 2 START -->
  90. <div class="col-sm-8 p-1">
  91. <div class="card border-0 rounded-0 h-100 p-2" style="background-color:rgba(0,0,0,0.7); color:#ffffff">
  92. <p style="font-size:20px">about this song . . .</p>
  93. <!-- lyrics - to start a new line, just type <br> -->
  94. <div class="p-1" style="font-weight:lighter; font-variant:small-caps">
  95. <i>lyrics lyrics lyrics
  96. <br>another line <span style="font-weight:normal">highlighted lyrics</span>
  97. </i>
  98. </div>
  99. <!-- song info paragraph - you can easily delete this if you dont want it -->
  100. <div style="font-weight:lighter; font-size:13.5px" class="py-2 text-justify">
  101. <p>a few paragraphs about how this song fits your character if you want. explain if it's relevant to their lore, fits their vibe or is just something they'd listen to!</p>
  102. <p>another paragraph.</p>
  103. </div>
  104. </div>
  105. </div>
  106. <!-- SONG INFO 2 END -->
  107. <!-- SONG CARD 2 START -->
  108.  
  109. <div class="col-sm-4 p-1">
  110. <div class="sticky-top">
  111. <div class="container" style="background-color:#000000; padding:1px">
  112. <!-- to change the accent manually change the #97bdd8 to whichever colour you'd like -->
  113. <div class="container p-0" style="background:linear-gradient(#97bdd8,#000000 40%)">
  114. <div class="pb-2 px-4 pt-4">
  115.  
  116. <!-- SONG 2 IMAGE - REPLACE 'IMAGE HERE' WITH YOUR IMAGE URL -->
  117.  
  118. <div class="card rounded-0 border-0 bg-white" style="background:url(IMAGE HERE); height:190px; background-size:cover; background-position:center; background-repeat:no-repeat;">
  119.  
  120.  
  121. </div></div>
  122. <div class="row no-gutters px-4 pb-4">
  123. <div class="col-auto">
  124.  
  125. <p style="font-variant:small-caps; font-size:20px; color:#ffffff" class="m-0">
  126.  
  127. <!-- SONG 2 NAME -->
  128.  
  129. song name</p>
  130.  
  131. <p style="font-weight:lighter; font-variant:small-caps; font-size:18px; color:#ffffff" class="m-0">
  132.  
  133. <!-- SONG 2 ARTIST -->
  134.  
  135. artist</p>
  136.  
  137. </div>
  138. <div class="col-auto ml-auto">
  139. <div class="card rounded-circle border-0 mt-2" style="background-color:#ffffff; height:40px; width:40px; overflow:hidden">
  140. <i class="fas fa-play fa-fw m-auto" style="color:#000000; font-size:20px">
  141.  
  142. <!-- SONG 2 YOUTUBE LINK - TO ADD A VIDEO, COPY EVERYTHING AFTER WATCH?V= AND PASTE IT AFTER EMBED/ - FOR EXAMPLE https://www.youtube.com/watch?v=tyPv7QyuZl0 BECOMES https://www.youtube.com/embed/tyPv7QyuZl0 THEN PUT IT BETWEEN THE QUOTES FOR SRC="" -->
  143.  
  144. <iframe style="width:550%; height:550%; border-radius:20px; position:absolute; left:-80px; top:-70px; opacity:0.01" src="https://www.youtube.com/embed/x3nKwPyLmzs" modestbranding="1"></iframe>
  145.  
  146.  
  147. </i>
  148. </div>
  149. </div>
  150. </div>
  151.  
  152.  
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157.  
  158. <!-- SONG CARD 2 END -->
  159. <!-- SONG 2 END - ACCENT COLOUR : #97bdd8 - COPY FROM HERE TO 'SONG 2 END' + PASTE TO ADD MORE SECTIONS -->
  160. </div>
  161. <a href="/hanyu" class="pull-right" style="font-size:12px">code by hanyu</a>
  162. </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!