OneAlbatross

TH temporary song feature code

Mar 21st, 2022 (edited)
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.63 KB | None | 0 0
  1. <div class="row mx-auto " style="max-width:730px" >
  2. <!-- hidden-md-down and hidden-sm-down get the image and player to disapear when the screen is smaller (i.e. on mobile) you can remove this if you want it to display regardless, but it may look bad or crowded on smaller screens -->
  3. <!-- this is the image, replace src= with another image address -->
  4. <img class="hidden-md-down" style=" width:90px; border-radius: 4px 0px 0px 4px ;" src="https://i.scdn.co/image/ab67616d0000b2737cb62039b5d8f0927915c12b">
  5.  
  6. <!-- this has the background color for the box in it. rgba(0, 0, 0, .80 can be replaced with any rgb color, the fourth value .80 represent opacity -->
  7. <div class="hidden-sm-down " style="background-color: rgba(0, 0, 0, .80); border-radius: 0px 10px 10px 0px;">
  8. <div class="flex flex-row" style="border-radius: 10px;">
  9.  
  10. <div class=" pl-0 pl-md-4" style="width:100%; padding-top:12px ">
  11.  
  12.  
  13.  
  14. <div class="flex flex-row pt-1" style="">
  15.  
  16. <!-- TITLE of song ---------------------------------------------------------------------------------------------------- -->
  17. <div class="pt-0 pt-md-3 pb-2 " style="font-size:25px; font-weight:500; width:330px;">Song Name</div>
  18.  
  19. <!-- this div is responsible for the green button ------------------------------------------------ -->
  20. <div class="pr-4 pl-1 pt-2 " style="margin-top:-18px">
  21. <!-- this is the invisible youtube video that you're actually clicking on to make music play. Click the share button on a youtube video and copy the last part that's a jumble of letters and paste it here after the embed/ (do not just copy paste the url - that's a youtu.be link, it doesn't work)-->
  22. <iframe class="" style="width: 50px; height: 50px; opacity:.01; margin-bottom:-55px;" src="https://www.youtube.com/embed/"></iframe>
  23.  
  24. <div class="py-2 px-3" style="height: 40px; width: 40px; background-color: #40b850; border-radius:50%"><!-- this is the icon in the center of the play button... I've aligned this a few times and idk why it's always off, but you can mess with the margins here if you want to try and better center it --><i class="fas fa-play fa-xl " style="color: rgb(250, 250, 250); margin-left:-3px; margin-top:12px"></i></div>
  25.  
  26. </div>
  27.  
  28. <!-- this div has all the small text info ---------------------------------------------------------------------------------- -->
  29. <div class="pt-2" style="width:100%; ">
  30.  
  31. <!-- link color can be changed to any otehr #hex value-->
  32. <p class="my-0">by <a class="" style="text-decoration: none; color: #6ed2e6" href="LINK_TO_ARTIST" rel="nofollow">artist name</a></p>
  33. <p class=" pt-1">code <a class="https://toyhou.se/OneAlbatross" style="color: #6ed2e6;" href="https://open.spotify.com/track/6lgjHEsvr15RUXCsdib59J?si=f3bd4a50773d4474" rel="nofollow" title="code by OneAlbatross"><i class="fas fa-code mx-1"></i></a> • Single • 2000 • 0 : 00</p>
  34.  
  35.  
  36. </div>
  37.  
  38. <!-- OPTIONAL right side PNG/decoration/small pagedoll-->
  39. <!--
  40. <img src="">
  41. -->
  42.  
  43. </div>
  44. </div>
  45. </div>
  46.  
  47. </div>
  48.  
  49. </div>
Add Comment
Please, Sign In to add comment