Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- SINGLE PLAYLIST - NO SCROLL VERS
- HTML BY @NEBULASBOX ON TOYHOU.SE
- EDITING INFORMATION :
- TO CHANGE BOX SIZE :
- AUTO ADJUST :
- - CHANGE PX SIZE IN THE FIRST DIV TO WHATEVER PERCENTAGE YOU WANT ((EX : "style="width:400px;" -> "style="width:75%;"))
- - DONE !
- CUSTOM SIZE :
- - CHANGE PX SIZE IN THE FIRST DIV TO WHATEVER PX SIZE YOU WANT ((EX : "style="width:400px;" -> "style="width:500px;"))
- - DONE !
- TO ADD AUDIO :
- - DOWNLOAD YOUR AUDIO FROM YOUTUBE USING A CONVERTER
- - UPLOAD AUDIO TO A HOSTING SITE ((EX : DISCORD))
- - COPY LINK TO THE DIRECT FILE ((NOT A MESSAGE LINK, THE FILE LINK {EX: https://cdn.discordapp.com/attachments/667169408300482590/813104297667592192/MARETU_-_SIU.mp3}))
- - REPLACE THE "#" IN THE CODE WITH THE AUDIO LINK ((EX : src="#" -> src="https://cdn.discordapp.com/attachments/667169408300482590/813104297667592192/MARETU_-_SIU.mp3"))
- - DONE !
- TO MAKE IT SO COLORS ARE CUSTOM :
- BACKGROUND :
- - REMOVE THE "bg-muted" FROM THE CLASS AREA IN THE FIRST DIV ((EX : <div class="card card-block bg-muted" style="width:400px;"> -> <div class="card card-block" style="width:400px;">))
- - ADD "background: #{hex code}" TO THE STYLE AREA IN THE FIRST DIV ((EX : <div class="card card-block" style="width:400px;"> -> <div class="card card-block" style="width:400px; background: #181d25;">))
- - DONE !
- TEXT :
- - REMOVE ALL OF THE "class="text-primary" FROM THE CODE ((EX : <p class="text-primary"> -> <p> , <a data-toggle="collapse" href="#menu" style="text-decoration:none;" class="text-primary"> -> <a data-toggle="collapse" href="#menu" style="text-decoration:none;">))
- - ADD "color: #{hex code};" IN THE STYLE AREA ((EX : <p> -> <p style="color: #5aff54;"> , <a data-toggle="collapse" href="#menu" style="text-decoration:none;"> -> <a data-toggle="collapse" href="#menu" style="text-decoration:none; color: #5aff54;">))
- - DONE !
- DIVIDER :
- - ADD #{hex code} AFTER "solid" IN THE STYLE AREA ((EX : style="border:1px solid;" -> style="border:1px solid #303845;"))
- - DONE !
- USEFUL LINKS :
- AUDIO CONVERTERS
- - https://ytmp3.cc/en13/
- - https://x2convert.com/en41
- HEX CODE GENERATORS
- - https://html-color-codes.info/colors-from-image/#
- - https://htmlcolorcodes.com/color-picker/
- - https://imagecolorpicker.com/color-code/59423f
- PREVIEW SITE ((TO SEE IF CODE IS HOW YOU WANT IT))
- - https://th.circlejourney.net/#
- -->
- <div class="card card-block bg-muted" style="width:400px;">
- <div style="font-size:1.125em;" class="text-center">
- <a data-toggle="collapse" href="#menu" style="text-decoration:none;">
- <i class="fad fa-list-music"></i> My Playlist</a><div class="collapse" id="menu">
- <ul class="side-nav list-unstyled">
- <li class="sidebar-li-links">
- <div class="card w-75 mx-auto mb-1 mt-1" style="border:1px solid;"></div> <!--divider-->
- <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
- <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
- <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
- <p class="text-primary"><i class="fad fa-compact-disc fa-spin"></i> -;┊ ༑ ࿐ྂ。Artist - Song Name</p> <audio controls=""><source src="#" /></audio>
- </li>
- </ul>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement