spotify playlist
created by:wytchstarr
Custom ColorsHTMLMiscellaneous
Copy
<!--
hiii! thanks so much for using my code!! just a few things...
please do not redistribute this code, claim it as your own, or remove the credit
frankensteining is okay! just give credit :) also youre free to edit the code to your liking
if you have any issues feel free to let me know!! ill do my best to help you ^^
other than that, hope you enjoy this code!! feel free to drop a comment on the code's toyhouse profile cause id love to see how you decide to use this code!! :D
COLOURS (use 'ctrl+h' in circlejourney or 'ctrl+f'):
text (main): #b3b3b3
text (song titles): #ffffff
border: #121212
divider: #b3b3b3
main: #212121
accent: #1db954
-->
<!-- CONTAINER -->
<div class="container mt-3" style="background-color: #212121; width:60%; border-style:solid; border-width:2.5px; border-color:#121212">
<!-- HEADER -->
<div class="row">
<div class="col-sm-12 pl-1 pr-1 pt-1" style="color:#ffffff; font-size:30px;"><b>Playlist Name</b></div>
</div>
<!-- SUBHEADER -->
<div class="row" style="border-bottom: solid 1px #b3b3b3;">
<div class="col-sm-1" style="color:#b3b3b3;">#</div>
<div class="col-sm-5" style="color:#b3b3b3;">Title</div>
<div class="col-sm-4" style="color:#b3b3b3;">Album</div>
<div class="col-sm-1" style="text-align:center; color:#b3b3b3;"><i class="fa-light fa-clock-three"></i></div>
<div class="col-sm-1"></div>
</div>
<!-- SONG 1 -->
<div class="row pt-1">
<div class="col-sm-1" style="color:#b3b3b3;">1.</div>
<div class="col-sm-5" style="color:#b3b3b3;"><span><img style="width:45px; float:left; padding-right:6px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3vrTUU3CKbUDThpm8aZzFXdTmai6PodNfXA&s"></span> <span style="color:#ffffff;"><b>Song name</b></span><br><sup>Artist name</sup></div>
<div class="col-sm-4" style="color:#b3b3b3;">Album name</div>
<div class="col-sm-1" style="text-align:center; color:#b3b3b3;">0:00</div>
<div class="col-sm-1">
<p>
<!-- REPLACE 'URLHERE' WITH THE 'V=___________' PART OF YOUR YOUTUBE URL -->
<iframe frameborder="0" style="position:absolute;height:1rem;width:1rem;opacity:0.001;"
src="https://www.youtube.com/embed/URLHERE"></iframe>
<i class="fas fa-circle-play fa-xl" style="color:#1db954;"></i>
⠀
</p>
</div>
</div>
<!-- SONG 2 -->
<div class="row pt-1">
<div class="col-sm-1" style="color:#b3b3b3;">2.</div>
<div class="col-sm-5" style="color:#b3b3b3;"><span><img style="width:45px; float:left; padding-right:6px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3vrTUU3CKbUDThpm8aZzFXdTmai6PodNfXA&s"></span> <span style="color:#ffffff;"><b>Song name</b></span><br><sup>Artist name</sup></div>
<div class="col-sm-4" style="color:#b3b3b3;">Album name</div>
<div class="col-sm-1" style="text-align:center; color:#b3b3b3;">0:00</div>
<div class="col-sm-1">
<p>
<!-- REPLACE 'URLHERE' WITH THE 'V=___________' PART OF YOUR YOUTUBE URL -->
<iframe frameborder="0" style="position:absolute;height:1rem;width:1rem;opacity:0.001;"
src="https://www.youtube.com/embed/URLHERE"></iframe>
<i class="fas fa-circle-play fa-xl" style="color:#1db954;"></i>
⠀
</p>
</div>
</div>
<!-- SONG 3 -->
<div class="row pt-1">
<div class="col-sm-1" style="color:#b3b3b3;">3.</div>
<div class="col-sm-5" style="color:#b3b3b3;"><span><img style="width:45px; float:left; padding-right:6px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3vrTUU3CKbUDThpm8aZzFXdTmai6PodNfXA&s"></span> <span style="color:#ffffff;"><b>Song name</b></span><br><sup>Artist name</sup></div>
<div class="col-sm-4" style="color:#b3b3b3;">Album name</div>
<div class="col-sm-1" style="text-align:center; color:#b3b3b3;">0:00</div>
<div class="col-sm-1">
<p>
<!-- REPLACE 'URLHERE' WITH THE 'V=___________' PART OF YOUR YOUTUBE URL -->
<iframe frameborder="0" style="position:absolute;height:1rem;width:1rem;opacity:0.001;"
src="https://www.youtube.com/embed/URLHERE"></iframe>
<i class="fas fa-circle-play fa-xl" style="color:#1db954;"></i>
⠀
</p>
</div>
</div>
<!-- SONG 4 -->
<div class="row pt-1">
<div class="col-sm-1" style="color:#b3b3b3;">4.</div>
<div class="col-sm-5" style="color:#b3b3b3;"><span><img style="width:45px; float:left; padding-right:6px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3vrTUU3CKbUDThpm8aZzFXdTmai6PodNfXA&s"></span> <span style="color:#ffffff;"><b>Song name</b></span><br><sup>Artist name</sup></div>
<div class="col-sm-4" style="color:#b3b3b3;">Album name</div>
<div class="col-sm-1" style="text-align:center; color:#b3b3b3;">0:00</div>
<div class="col-sm-1">
<p>
<!-- REPLACE 'URLHERE' WITH THE 'V=___________' PART OF YOUR YOUTUBE URL -->
<iframe frameborder="0" style="position:absolute;height:1rem;width:1rem;opacity:0.001;"
src="https://www.youtube.com/embed/URLHERE"></iframe>
<i class="fas fa-circle-play fa-xl" style="color:#1db954;"></i>
⠀
</p>
</div>
</div>
<!-- SONG 5 -->
<div class="row pt-1">
<div class="col-sm-1" style="color:#b3b3b3;">5.</div>
<div class="col-sm-5" style="color:#b3b3b3;"><span><img style="width:45px; float:left; padding-right:6px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3vrTUU3CKbUDThpm8aZzFXdTmai6PodNfXA&s"></span> <span style="color:#ffffff;"><b>Song name</b></span><br><sup>Artist name</sup></div>
<div class="col-sm-4" style="color:#b3b3b3;">Album name</div>
<div class="col-sm-1" style="text-align:center; color:#b3b3b3;">0:00</div>
<div class="col-sm-1">
<p>
<!-- REPLACE 'URLHERE' WITH THE 'V=___________' PART OF YOUR YOUTUBE URL -->
<iframe frameborder="0" style="position:absolute;height:1rem;width:1rem;opacity:0.001;"
src="https://www.youtube.com/embed/URLHERE"></iframe>
<i class="fas fa-circle-play fa-xl" style="color:#1db954;"></i>
⠀
</p>
</div>
</div>
<!-- ADD MORE SONGS BELOW HERE! -->
<!-- CREDIT (DO NOT REMOVE) -->
<div style="text-align:right; padding-bottom:1px;">
<a href="https://toyhou.se/wytchstarr"><i class="fa-light fa-code" style="color: #b3b3b3;"></i></a>
</div>
<!-- END -->
</div>