write a reply

02. this shall be for music

options
quote
02. this shall be for music written Jul 5, 2018 21:06:06 GMT
frog on the floor
aliasfreiheit, microwaved burrito
pronounsany
1,544written posts
pharaoh leapearned bits
offlinecurrently
pharaoh leap
Administrator
pharaoh leap Avatar
i've been having some pretty dark thoughts.
[nospaces]

[attr="class","lppromised"]
[attr="class","lppromised1"]
[attr="class","lppromised2"]
[attr="class","lppromisedtitle"]THIS SHALL[break]BE FOR MUSIC

[attr="class","lppromisedblurb"]



TEMPLATE TYPE playlist[break]
COLOR + PALETTES none[break]
CHALLENGE TYPE create a playlist filled with your favorite songs[break][break]

Music is a very important aspect of my life, and I love spreading the word of my personal favorite songs because of how much they mean to me. Share your own favorite jams with the world through a playlist template formatted however you'd like. Maybe you want to mock up something Spotify or Youtube-like, or maybe even have a template with the music player built in. Make sure to list at least ten songs, however, and if most of them are by the same band, maybe limit it to one song per artist. Links to the songs or players that play the songs in questions are mandatory!




[googlefont=Roboto Condensed:300,400,700][googlefont=Roboto:400,700,800][googlefont=Rajdhani:400,700]
[newclass=.lppromised]padding:9px;border:solid 1px #e5e5e5;background-color:#f9f9f9;width:380px;[/newclass]
[newclass=.lppromised1]padding:20px;background-image:url(https://image.ibb.co/cijxkS/dark_spots2.png);[/newclass]
[newclass=.lppromised2]padding:25px;background-color:#f9f9f9;color:#5f5f5f;text-align:justify;font:11px Roboto;text-transform:uppercase;[/newclass]
[newclass=.lppromisedtitle]padding-right:10px;display:inline-block;font:35px Roboto Condensed;font-weight:700!important;letter-spacing:-.5px;color:#e5e5e5;line-height:30px;padding-bottom:25px;border-bottom:solid 5px #eeeeee;margin-bottom:25px;[/newclass]
[newclass=.lppromisedblurb]padding-bottom:30px;text-transform:lowercase;[/newclass]
[newclass=.lppromisedblurb b]color:#111111;[/newclass]
[newclass=.lppromisedleft]font:bold 10px Rajdhani;line-height:10px;text-align:left;color:#bbbbbb;padding:0px!important;width:30%;vertical-align:top;[/newclass]
[newclass=.lppromisedleft a]font:bold 10px Rajdhani;color:#111111;line-height:10px;[/newclass]
[newclass=.lppromisedright]padding:0px 0px 10px 15px!important;vertical-align:top;font:bold 10px Rajdhani;line-height:10px;text-align:left;color:#bbbbbb;[/newclass]
options
quote
02. this shall be for music written Jul 6, 2018 11:20:25 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
[googlefont=Roboto]
;laksdfjs I wouldn't really recommend anyone use this template just for the simple fact I made the coding itself so messy. Buuut if you really want to use it and can navigate around this mess, then I welcome you to. But also since the challenge was to not repeat songs by the same artists, I want to make an honorable mention of Sex Is Not The Enemy by Garbage, I just love Shirley Manson's voice.


[attr="class","dandyplylst3"]
00:00
Friday, 6 July
Hover to unlock
[attr="class","dandyplylst1"]
••••◦ AT&T
00:00
[attr="class","dandyplylst2"]
follow me down
3OH!3 ft... almost alice
circadian rhythm (l...
silversun pickups better nature
alive
adrian lux ft... alive
heads will roll
yeah yeah yeahs it's blitz!
i came 2 party
cinema bizarre ft... i came 2...
distortion
babymetal distortion
l.a.x. (mr. kitty remix)
aesthetic perfection l.a.x.
scared to be lonely
martin garrix ft... scared to be l...
only happy when...
garbage absolute garbage
house is falling down
hadouken! for the masses
◻
dandy ♫

[newclass=.dandyplylst1]margin-top:-405px;width:230px;height:380px;padding:10px;opacity:0;background-color:rgba(245,245,248,1);transition:1s;-webkit-transition:1s;-moz-transition:1s;[/newclass][newclass=.dandyplylst1:hover]z-index:5;position:relative;opacity:1;background-color:rgba(255,255,255,1);transition:1s;-webkit-transition:1s;-moz-transition:1s;[/newclass][newclass=.dandyplylst1 a]font-family:verdana!important;font-size:13px!important;color:#121212!important;font-weight:bold!important;text-transform:lowercase!important;[/newclass][newclass=.dandyplylst2]height:356px;overflow:auto;padding-right:8px;[/newclass][newclass=.dandyplylst2::-webkit-scrollbar]width:5px;background-color:#121212;border:0px!important;[/newclass][newclass=.dandyplylst2::-webkit-scrollbar-thumb]width:5px;background-color:#FF2851;border:0px!important;[/newclass][newclass=.dandyplylst2::-webkit-scrollbar-track]border-right:2px solid #FFF;border-left:2px solid #FFF;[/newclass][newclass=.dandyplylst3]margin-top:10px;position:relative;[/newclass]
last edit on Jul 6, 2018 11:40:45 GMT by Deleted
options
quote
02. this shall be for music written Jul 8, 2018 3:33:35 GMT
aliasantiviral
pronounsHe/Him
258written posts
Beetleearned bits
offlinecurrently
Beetle
Senior Member
Beetle Avatar
[nospaces]
This ended up a little more complicated than I planned for it to be, but I'm really pleased with the end result. I used a lot of RGBA for opacity and such so it doesn't really have customizability beyond the title background, scrollbar, and background image. I might release it as a free-to-use template despite this, though. We'll see.

[break]

[attr="class","antimusicw"]

[attr="class","antimusicbg"]


[attr="class","antimusictitle"]

The Antiviral Mix



[attr="class","antimusiccontent"]
[attr="class","antimusicplaylist"]






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Linger Longer - Cosmo Sheldrake






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Hunger of the Pine - Alt-J






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Acid Rain - Lorn






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Keep This Place Beautiful - Brick + Mortar






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Dissolve - Absofacto






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Agnes - Glass Animals






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Let It Happen - Tame Impala






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Settle Down - Kimbra






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Happy Pills - Weathers






[attr="class","antimusicsong"]
[attr="class","antimusicplaybutton"]▸
[attr="class","antimusicname"]Grandson - Overdose





























[googlefont=Roboto][googlefont=Knewave][newclass="::-webkit-scrollbar"]width:1px;[/newclass]
[newclass="::-webkit-scrollbar-track"]background:rgba(200,200,200,0.3);[/newclass]
[newclass="::-webkit-scrollbar-thumb"]background:rgb(242,249,33);[/newclass]
[newclass=".antimusicw"]width:310px;height:310px;box-shadow:3px 3px 2px rgba(0,0,0,0.1);overflow:hidden;margin:auto;margin-bottom:40px;margin-top:20px;[/newclass]
[newclass=".antimusicbg"]background-image:url('https://i.imgur.com/buaUAbM.png');width:320px;height:320px;margin:-5px;margin-bottom:-300px;position:relative;z-index:1;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;[/newclass]
[newclass=".antimusictitle"]width:250px;color:rgba(0,0,0,0.8);background:rgb(242,249,33);font: 20px Knewave;line-height:40px;text-transform:uppercase;border-radius:0 40px 100px 0;box-shadow:3px 3px 2px rgba(0,0,0,0.1);border-left:none;margin-top:20px;margin-left:-296px;margin-bottom:-58px;padding-left:30px;position:relative;z-index:99999;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;[/newclass]
[newclass=".antimusiccontent"]color:#fff;background:rgba(5,5,5,0.7);font-family:Tahoma;font-size:11px;border:1px solid rgba(55,55,55,0.1);box-shadow:3px 3px 2px rgba(0,0,0,0.1);height:276px;width:278px;border-radius:3px;margin-left:15px;opacity:0;position:relative;z-index:9999;-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;-ms-transition:all 0.4s ease-in-out;-o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;[/newclass]
[newclass=".antimusicplaylist"]overflow:auto;margin:15px;margin-top:74px;height:185px;padding-right:10px;text-align:justify;[/newclass]
[newclass=".antimusicw:hover>.antimusicbg"]-webkit-filter:blur(2px) grayscale(50%);-moz-filter:blur(2px);-o-filter:blur(2px);-ms-filter:blur(2px);filter:blur(2px) grayscale(50%);background-color:#ccc;[/newclass]
[newclass=".antimusicw:hover>.antimusiccontent"]opacity:1;[/newclass]
[newclass=".antimusicw:hover>.antimusictitle"]margin-left:0;[/newclass]
[newclass=".antimusicsong"]margin-bottom:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.3);[/newclass]
[newclass=".antimusicplaybutton"]background:rgba(5,5,5,0.7);line-height:27px;width:29px;border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.3);height:30px;padding-left:1px;text-align:center;font-size:35px;float:left;[/newclass]
[newclass=".antimusictitle a"]font: 20px Knewave;text-decoration:none;color:rgba(0,0,0,0.8);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;[/newclass]
[newclass=".antimusictitle a:hover"]text-decoration:none;color:rgba(0,0,0,0.5);[/newclass]
[newclass=".antimusicplaybutton a"]line-height:27px;font-size:35px;text-decoration:none;color:rgba(255,255,255,0.3);-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;[/newclass]
[newclass=".antimusicplaybutton a:hover"]color:rgba(242,249,33,0.8);[/newclass]
[newclass=".antimusicname"]background:rgba(5,5,5,0.7);line-height:27px;font-family:'Roboto';border:1px solid rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.3);height:30px;margin-left:40px;padding-left:1px;text-align:center;font-size:10px;line-height:31px;padding:0 5px 0 5px;[/newclass]
last edit on Jul 8, 2018 3:35:29 GMT by Beetle

Solar Waltz, an 18+ panfandom set in NYC
options
quote
02. this shall be for music written Jul 8, 2018 13:55:18 GMT
352written posts
vonearned bits
offlinecurrently
von
Senior Member
von Avatar
I hate this challenge wow. How much I hate this for giving me so much inspo i couldn't even doze off on train else I forget. Jkjk. Anyways, omg it's been a long time since I actually had fun making a template/coding things again. My main inspo is a summer song called We Young by NCT Dream. Seriously, listen to this if you just want to feel good and enjoy youth : )))


[nospaces]

[newclass=".fl, .wyngMenu span i"]display:flex; display:inline-flex; display;-ms-flexbox; display:-ms-flex; display:-moz-flex; display:-webkit-flex; display:-o-flex;[/newclass]
[newclass=".acet, .wyngMenu span i"]align-items:center; -moz-align-items:center; -o-align-items:center; -ms-align-items:center;[/newclass]
[newclass=".jcet, .wyngMenu span i"]justify-content:center; -moz-justify-content:center; -o-justify-content:center; -ms-justify-content:center;[/newclass]
[newclass=".wyn"]border-radius:10px; overflow:hidden; width:250px; height:400px; margin:0 auto; position:relative;[/newclass]
[newclass=".wynDrk"]background:rgba(20,20,20,0.6); width:250px; height:400px; position:absolute; top:0; left:0;[/newclass]
[newclass=".wyng"]transition:900ms; position:absolute; height:400px; bottom:-290px; background:linear-gradient(to top, #a7d2e2, #a4eeb2, transparent); width:210px; padding:20px;[/newclass]
[newclass=".wyngTitle"]font:900 25px Muli; color:#fff; text-align:center; transition:500ms;[/newclass]
[newclass=".wyngTitle span"]display:block; font:800 13px muli; color:#b8d7e2;[/newclass]
[newclass=".wyngMenu"]margin:0 auto; width:100px; text-align:center; font-size:10px; color:#333; transition:500ms;[/newclass]
[newclass=".wyngPlay"]width:170px; background:rgba(255,255,255,0.3); padding:1px; border-radius:15px; margin:10px auto; transition:500ms;[/newclass]
[newclass=".wyngMenu span"]background:rgba(255,255,255,0.5); display:inline-block; border-radius:100%; margin:0 10px;[/newclass]
[newclass=".wyngMenu span i"]width:27px; height:30px; padding:0 0 0 3px; border-radius:100%; color:#62a6bf;[/newclass]
[newclass=".wyngPtitle"]opacity:0; transition:500ms; font:900 55px/110% muli; color:#fff; text-align:center; margin:-20px 0 0; letter-spacing:-2px;[/newclass]
[newclass=".wyngPtitle span"]display:block; font:700 15px muli; letter-spacing:0;[/newclass]
[newclass=".wyngList"]opacity:0; transition:500ms; margin:50px 0 0; height:167px; overflow:auto;[/newclass]
[newclass=".wyngList::-webkit-scrollbar"]border:none;background:none; width:0;[/newclass]
[newclass=".wyngList div"]margin:0 0 10px; background:rgba(255,255,255,0.5); padding:10px; border-radius:5px; font:900 8px muli; color:#62a6bf;[/newclass]
[newclass=".wyngList div a"]margin:0; font:700 15px muli; color:#333; display:block; text-decoration:none;[/newclass]
[newclass=".wyngList div i"]float:right;[/newclass]
[newclass=".wyn:hover .wyng"]bottom:-20px;[/newclass]
[newclass=".wyn:hover .wyng .wyngPtitle"]opacity:1; transition-delay:300ms;[/newclass]
[newclass=".wyn:hover .wyng .wyngList"]opacity:1; transition-delay:300ms;[/newclass]
[newclass=".wyn:hover .wyng .wyngTitle"]opacity:0;[/newclass]
[newclass=".wyn:hover .wyng .wyngMenu"]opacity:0;[/newclass]
[newclass=".wyn:hover .wyng .wyngPlay"]opacity:0;[/newclass]

[attr="class","wyn"]

[attr="class","wynDrk"]




[attr="class","wyng"]

[attr="class","wyngTitle"]

We Young NCT Dream



[attr="class","wyngPlay"]


[attr="class","wyngMenu"]

[attr="class","fa fa-backward"]

[attr="class","fa fa-play"]

[attr="class","fa fa-forward"]





[attr="class","wyngPtitle"]

Panic.Von's Playlist



[attr="class","wyngList"]



[attr="class","fa fa-play"]

We YoungNCT DREAM






[attr="class","fa fa-play"]

BedNICKI MINAJ FT ARIANA GRANDE






[attr="class","fa fa-play"]

Bonnie & ClydeDEAN






[attr="class","fa fa-play"]

7th SenseNCT U







[attr="class","fa fa-play"]

Without YouNCT U








[attr="class","fa fa-play"]

BossNCT U






[attr="class","fa fa-play"]

Say AmenPanic! At the Disco












[googlefont=Muli:300,400,500,600,700,800,900]
options
quote
02. this shall be for music written Jul 8, 2018 22:54:03 GMT
frog on the floor
aliasfreiheit, microwaved burrito
pronounsany
1,544written posts
pharaoh leapearned bits
offlinecurrently
pharaoh leap
Administrator
pharaoh leap Avatar
i've been having some pretty dark thoughts.
These songs aren't in any particular order of favoritism - aside from Believe being the undeniable number one - and it's not even an entirely accurate list, because at least one song just wasn't... available... for linking... looking at you, Mehr by Rammstein. Anyway, my original transition idea is impossible in Proboards, so I took a little inspiration from 's fantastic submission above, I hope that's okay, sdfkjhldfkjsdh. ;u; (Oh, yeah, click the button in the middle of the "main" part to play the song, that one's an actual music player, the rest are just links -)
[break]









[nospaces]

[attr="class","believeinleap"]
[attr="class","believeinleapgrad"]

[attr="class","believeinleapimg"]

[attr="class","believeinleapgrad2"]

[attr="class","believeinleapname"]BELIEVE

[attr="class","believeinleapcirc"]
[attr="class","believeinleapgrad3"]

[attr="class","believeinleapcircimg"]

[attr="class","believeinleapgrad4"]

[attr="class","believeinleapprog"]

[attr="class","believeinleapcirc1"]
[attr="class","believeinleapcirc2"]

[music]https://dl.dropboxusercontent.com/s/jyjgbdyj5ks2kkr/16%20Believe.mp3?dl=0[/music]


[attr="class","believeinleapname1"]SAVATAGE - STREETS: A ROCK OPERA

[attr="class","believeinleapbuttons"]

[attr="class","ion-arrow-left-b"]


[attr="class","ion-arrow-right-b"]


[attr="class","believeinleaphov"]
[attr="class","believeinleaphovbutton"]VIEW MORE SONGS

[attr="class","believeinleapgrad5"]

[attr="class","believeinleaphov1"]
[attr="class","believeinleaphovscroll"]



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Black Swan


Megadeth - TH1RT3EN



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Eyes of a Stranger


Queensryche - Operation: Mindcrime



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Hard as Iron


Judas Priest - Ram it Down



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Dr. Feelgood


Motley Crue - Dr. Feelgood



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

September


Earth, Wind, and Fire - September 1978



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Aces High


Iron Maiden - Powerslave



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Kimi no Taion


Hatsune Miku - Kuwagata-P



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Synchronicity 1 + 2


The Police - Synchronicity



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Don't Treat Me Bad


Firehouse - Firehouse



[attr="class","believeinleapsong"]

[attr="class","believeinleapsonglink"][attr="class","ion-play"]

Call to Arms


Manowar - Warriors of the World






[googlefont=Montserrat:200,400,800][googlefont=Roboto:300,400,700][googlefont=Raleway:800]
[newclass=.believeinleap]margin:15px 0px;position:relative;width:470px;height:650px;border-radius:15px;box-shadow:2px 2px 10px rgba(0,0,0,.1);overflow:hidden;background-color:#ffffff;[/newclass]
[newclass=.believeinleapgrad]background-color:#eb506f;background:linear-gradient(to right, #eb506f, #ff715e);width:470px;height:500px;position:absolute;[/newclass]
[newclass=.believeinleapimg]height:500px;width:470px;background-image:url(https://image.ibb.co/fAMHro/Playlist2.png);background-size:cover;filter:grayscale(100%) contrast(160%);-webkit-filter:grayscale(100%) contrast(160%);-moz-filter:grayscale(100%) contrast(160%);opacity:.085;position:absolute;[/newclass]
[newclass=.believeinleapgrad2]background:linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,1));width:470px;height:500px;position:absolute;[/newclass]
[newclass=.believeinleapname]text-shadow:1px 1px 2px rgba(0,0,0,.1);font:50px Raleway;letter-spacing:3px;width:470px;text-align:center;padding-top:45px;line-height:40px;font-weight:800!important;color:#ffffff;position:absolute;[/newclass]
[newclass=.believeinleapcirc]padding:20px;background-color:#ffffff;border-radius:100%;width:350px;height:350px;position:absolute;margin:110px 40px;[/newclass]
[newclass=.believeinleapgrad3]background-color:#eb506f;background:linear-gradient(to right, #eb506f, #ff715e);height:350px;width:350px;position:absolute;border-radius:100%;[/newclass]
[newclass=.believeinleapcircimg]height:350px;width:350px;border-radius:100%;background-image:url(https://image.ibb.co/kfegHT/Playlist3.png);background-size:cover;filter:grayscale(100%) contrast(160%);-webkit-filter:grayscale(100%) contrast(160%);-moz-filter:grayscale(100%) contrast(160%);opacity:.35;position:absolute;[/newclass]
[newclass=.believeinleapgrad4]background-color:#eb506f;background:linear-gradient(to bottom, #eb506f, #ff715e);height:180px;width:180px;margin:85px;position:absolute;border-radius:100%;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 50%);-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 50%);-moz-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 50%);z-index:1;[/newclass]
[newclass=.believeinleapcirc1]height:168px;width:168px;padding:3px;margin:88px;background-color:#ffffff;border-radius:100%;position:absolute;[/newclass]
[newclass=.believeinleapcirc2]white-space:nowrap;height:168px;width:168px;overflow:hidden;border-radius:100%;position:relative;z-index:1;background-color:#ffffff;[/newclass]
[newclass=.believeinleapcirc2 .music]width:100px;padding:35px 20px;background-color:transparent;color:transparent;white-space:nowrap;width:600px;[/newclass]
[newclass=.believeinleapcirc2 .music .controls]color:#d5d5d5;font-size:100px;cursor:pointer;[/newclass]
[newclass=.believeinleapcirc2 .music .scrubber]margin-left:100px;[/newclass]
[newclass=.believeinleapname1]font:bold 15px Roboto;line-height:15px;color:#cccccc;letter-spacing:.5px;position:absolute;margin-top:515px;width:470px;text-align:center;z-index:3;[/newclass]
[newclass=.believeinleapbuttons]position:absolute;z-index:2;margin:395px 0px 0px 0px;width:470px;text-align:center;color:#eb506f;font-size:45px;[/newclass]
[newclass=.believeinleapbuttons div]cursor:pointer;height:100px;width:95px;line-height:100px;text-align:center;background-color:#ffffff;border-radius:100%;margin:0px auto;box-shadow:1px 1px 3px rgba(0,0,0,.12);-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;[/newclass]
[newclass=.believeinleapbuttons div:hover]color:#ff715e;[/newclass]
[newclass=.believeinleaphov]width:470px;height:650px;margin-top:650px;position:absolute;z-index:5;[/newclass]
[newclass=.believeinleaphovbutton]text-shadow:1px 1px 1px rgba(0,0,0,.1);cursor:pointer;width:200px;margin:-100px 135px 0px 135px;position:absolute;background-color:#eb506f;background:linear-gradient(to right, #eb506f, #ff715e);color:#ffffff;font:bold 15px Roboto;line-height:50px;height:50px;border-radius:30px;[/newclass]
[newclass=.believeinleapgrad5]background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));width:470px;height:200px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease;position:relative;z-index:1;[/newclass]
[newclass=.believeinleaphov1]padding:50px;height:550px;width:370px;background-color:#ffffff;position:relative;z-index:1;[/newclass]
[newclass=.believeinleaphov:hover .believeinleapgrad5]margin-top:-850px;[/newclass]
[newclass=.believeinleaphovtitle]font:bold 10px Roboto;color:#222222;line-height:10px;padding-bottom:25px;text-align:left;[/newclass]
[newclass=.believeinleaphovscroll]height:550px;padding-right:15px;overflow:auto;[/newclass]
[newclass=.believeinleaphovscroll::-webkit-scrollbar-thumb:vertical]background-color: #eb506f;background:linear-gradient(to bottom, #eb506f, #ff715e);border:none;border-radius:5px;[/newclass]
[newclass=.believeinleaphovscroll::-webkit-scrollbar]width: 7px;background: transparent;border:none;[/newclass]
[newclass=.believeinleapsong]text-align:left;padding:15px;padding-left:20px;background-color:#eb506f;border-radius:3px;background:linear-gradient(to right, #eb506f, #ff715e);margin-bottom:10px;height:40px;white-space:nowrap;opacity:.8;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;[/newclass]
[newclass=.believeinleapsong:hover]opacity:1;[/newclass]
[newclass=.believeinleapsonglink]position:relative;z-index:1;border:solid 3px #ffffff;border-radius:100%;height:34px;width:31px;padding-left:3px;font-size:15px;color:#ffffff;line-height:34px;text-align:center;float:right;[/newclass]
[newclass=.believeinleapsong h1]font:bold 17px Roboto;line-height:15px;padding-top:5px;padding-bottom:5px;color:#ffffff;[/newclass]
[newclass=.believeinleapsong h2]font:bold 10px Roboto;line-height:10px;color:#ffffff;opacity:.45;letter-spacing:.5px;[/newclass]
last edit on Jul 8, 2018 23:09:41 GMT by pharaoh leap
options
quote
02. this shall be for music written Jul 10, 2018 3:32:52 GMT
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
I FINALLY HAVE A REASON TO USE THIS KNOCKOUT TEXT EFFECT, cjkdlfsklafjcdk. i've also never made a playlist template before? my favorite songs are 1000% all over the place and wouldn't have made a good playlist so i threw together a bunch of stuff from my summer playlist instead :'D don't kill me for breaking the rules pls leap. [break][break]

warning that the clipping effects to create the gradient/knockout text don't work on internet explorer or opera mini, but this thing should at least be navigable? but the background will look off. sorry to y'all on those. everyone else should be good.
[break]

[nospaces][googlefont=Roboto:600,900][googlefont="Material+Icons"]
[attr="class","selkMusic"]

[attr="class","selkAlbumCover"]

[attr="class","selkCredit"]SELKIE


[attr="class","selkTitle"]
[attr="class","selkTitleCutout"]

HOT SUMMER NIGHTS



[attr="class","selkPlayButtons"]
[attr="class","material-icons"]
[attr="class","selkBackForth"]fast_rewind

[attr="class","material-icons"]
[attr="class","selkPlay"]


play_arrow


[attr="class","material-icons"]
[attr="class","selkBackForth"]fast_forward




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

AOA



CHERRY POP

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

SISTAR



SHAKE IT

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

MAMAMOO



YOU'RE THE BEST

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

REOL



NO TITLE

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

KERO KERO BONITO



TRAMPOLINE

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

F(X)



ALL MINE

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

AOA



BINGLE BANGLE

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline




[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

SISTAR



TOUCH MY BODY

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline





[attr="class","selkSongBG"]
[attr="class","selkSong"]
[attr="class","selkSongTitle"][attr="class","selkSongArtist"]

KERO KERO BONITO



FOREVER SUMMER HOLIDAY

[attr="class","material-icons"]
[attr="class","selkSongButton"]

play_circle_outline






[newclass=.selkMusic] width:500px; display:flex; flex-direction:column; flex-wrap:wrap; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);margin:10px; [/newclass]
[newclass=.selkAlbumCover] width:500px; height:500px; background-image:url(http://placehold.it/500x500.png); display:flex; flex-wrap:wrap; [/newclass]
[newclass=.selkTitle] font:900 36px Roboto; text-transform:uppercase; color:#fff; width:100%; height:200px; text-align:center; padding-top:25px; background: linear-gradient( to top, transparent, rgba(0,0,0,.5) ); [/newclass]
[newclass=.selkTitleCutout] color:#fff; text-fill-color: transparent; -webkit-text-fill-color: transparent; background:url(https://i.imgur.com/ZUOOKLT.png) 0px -25px; -webkit-background-clip: text; cursor:default; [/newclass]
[newclass=.selkPlayButtons] width:100%; align-self:flex-end; font-family:Material Icons; color:#fff; display:flex; flex-direction:row; align-items:center; justify-content:center; [/newclass]
[newclass=.selkBackForth] font-size:75px; text-shadow: 0px 0px 7px rgba(0,0,0,.33); cursor:pointer; width:75px; height:75px; [/newclass]
[newclass=.selkPlay] font-family: 'Material Icons';font-size:175px; text-shadow: 0px 0px 3px rgba(0,0,0,.33); margin:0px 25px; [/newclass]
[newclass=.selkPlay a] color:#fff; font:175px Material Icons; [/newclass]
[newclass=.selkCredit] position:absolute;width:490px;text-align:right;align-self:flex-end;color:#fff;font:bold 7px roboto;[/newclass]
[newclass=.selkCredit a] font:bold 7px roboto!important;color:#fff!important; [/newclass]
[newclass=.selkSongBG] background-color:#f6f6f6; [/newclass]
[newclass=.selkSong] background: linear-gradient( to right, #7DBABF, #56838A ); text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-color:#fafafa; height:50px; padding:5px; width:490px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; [/newclass]
[newclass=.selkSongButton] width:50px; height:50px; font:36px Material Icons; display:flex; align-items:center; justify-content:center; margin-right:5px; color:#aaa; [/newclass]
[newclass=.selkSongButton a] font:36px Material Icons!important;color:#aaa; [/newclass]
[newclass=.selkSongTitle] color:#ccc; display:flex; align-items:center; text-align:left; font:600 15px/90% Roboto; letter-spacing:0px; text-transform:uppercase; margin-left:20px; cursor:default; [/newclass]
[newclass=.selkSongArtist] color:#ccc; margin-right:25px; background-color:rgba(255,255,255,0); -webkit-background-clip: text; [/newclass]
last edit on Jul 10, 2018 3:41:55 GMT by selkie
weeping omens advertisement

all my proboards templates require the style tags plugin!
options
quote
02. this shall be for music written Jul 10, 2018 17:51:48 GMT
pronounsSHE/HER
77written posts
murkearned bits
offlinecurrently
murk
Junior Member
murk Avatar
don't edit this at 2am kids or it will break. thanks leap for forcing me to break a coding slump. <3
[break]i'll fix the artist thing after i wake up more whoops

[nospaces]






[attr="class","spotifywrap"]



[attr="class","spotifysbar"]



[attr="class","spotifysbartext"]







a list of



[break] my top 10



[break] faves



[break] all grabbed



[break] from spotify



[break] my music taste



[break] can have some



[break] unsettling



[break] noise patterns



[break] so take care



[break] and



[break] enjoy















[attr="class","spotifymain"]



[attr="class","spotifyalbum"]




[attr="class","spotifyatextwrap"] PLAYLIST
[attr="class","spotifytitle"]murk's faves !




a challenge by leap. [break]



Created by murklate • 10 songs, 34 min



[attr="class","spotifybutton1"]PLAY




[attr="class","spotifybutton2"]FOLLOWING








[attr="class","spotifymusicwrap"]



[attr="class","spotifymusictitle"]SONG TITLE
[attr="class","spotifyspace"]
ARTIST




[attr="class","spotifymusic"]all time low
[attr="class","spotifyspace"]
jon bellion




[attr="class","spotifymusic"]no tears left...
[attr="class","spotifyspace"]
ariana grande




[attr="class","spotifymusic"]say amen
[attr="class","spotifyspace"]
panic




[attr="class","spotifymusic"]maple
[attr="class","spotifyspace"]
hayley kiyoko




[attr="class","spotifymusic"]heaven's gate
[attr="class","spotifyspace"]
fall out boy




[attr="class","spotifymusic"]burn the house down
[attr="class","spotifyspace"]
ajr




[attr="class","spotifymusic"]kamikaze
[attr="class","spotifyspace"]
walk the moon




[attr="class","spotifymusic"]oh devil
[attr="class","spotifyspace"]
electric guest




[attr="class","spotifymusic"]sweet
[attr="class","spotifyspace"]
unlike pluto




[attr="class","spotifymusic"]pork soda
[attr="class","spotifyspace"]
glass animals












[attr="class","spotifycred"]murk on pixel perfect






















[googlefont=Roboto:400,700][googlefont=Montserrat:400,700,800]

[newclass=.spotifywrap]width:500px; height: 440px; margin:20px auto; background: #343434; border: 1px solid #141414; box-shadow: 1px 1px 10px;[/newclass]

[newclass=.spotifysbar]width:150px; height:400px; float:left; background:#141414; padding: 20px; box-sizing:border-box;[/newclass]

[newclass=.spotifysbartext]width: 110px; height: 400px; font: 700 14px roboto; color:#888; line-height: 30px; text-align: justify;[/newclass]

[newclass=.spotifysbartext:hover]color: #ccc;[/newclass]

[newclass=.spotifysbartext b]font: 700 14px roboto; color:#ccc; border-left: 4px solid #3ECF54; padding-left: 17px; margin-left: -20px;[/newclass]

[newclass=.spotifymain]width:350px; height:400px; background: linear-gradient(to bottom, rgb(54, 54, 54), rgb(24, 24, 24)); background: -webkit-linear-gradient(to bottom, rgb(54, 54, 54), rgb(24, 24, 24)); float:right; padding: 30px; box-sizing:border-box;[/newclass]

[newclass=.spotifyalbum]widith:100px; height:100px; float:left; padding: 3px; border: 1px solid #3ECF54;[/newclass]

[newclass=.spotifyalbum img]width:100px; height:100px;[/newclass]

[newclass=.spotifyatextwrap]width:200px; height: 100px; margin-right:-20px; float: right; padding-left: 20px; box-sizing:border-box; font: 9px roboto; color: #aaa; line-height: 20px; text-align: justify;[/newclass]

[newclass=.spotifyatextwrap b]font-weight: 400; color: #e0e0e0;[/newclass]

[newclass=.spotifytitle]font: 700 20px montserrat; color:#e0e0e0;[/newclass]

[newclass=.spotifybutton1]width: 50px; padding: 5px; background: #3ECF54; font: 400 11px roboto; color: #fff; float:left; text-align: center; border-radius: 500px 500px 500px 500px;[/newclass]

[newclass=.spotifybutton1:hover]background: #4DE864;[/newclass]

[newclass=.spotifybutton2]width: 80px; padding: 5px; background: #242424; font: 400 11px roboto; color: #3ECF54; border: 1px solid #ccc; float:left; margin-left: 10px; text-align: center; border-radius: 500px 500px 500px 500px;[/newclass]

[newclass=.spotifymusicwrap]width: 300px; height: 230px; background: #242424; padding: 20px; box-sizing:border-box; overflow: auto; margin-top:130px; display: flex; flex-wrap: wrap;[/newclass]

[newclass=.spotifymusicwrap::-webkit-scrollbar]width: 7px;[/newclass]

[newclass=.spotifymusicwrap::-webkit-scrollbar-track]width: 5px; background: #242424;[/newclass]

[newclass=.spotifymusicwrap::-webkit-scrollbar-thumb]width: 1px; background-color: #3ECF54; border-left: 3px solid #242424; border-right: 3px solid #242424; border-top: 3px solid #242424; border-bottom: 3px solid #242424;[/newclass]

[newclass=.spotifymusictitle]width: 260px; height: 30px; padding: 10px; background: #242424; border-bottom: 1px solid #343434; font: 11px roboto; color: #777; text-align: justify; box-sizing: border-box;[/newclass]

[newclass=.spotifyspace]width: 70px; display: inline-block;[/newclass]

[newclass=.spotifymusic]width: 260px; height: 30px; padding: 10px; background: #242424; border-bottom: 1px solid #343434; box-sizing: border-box; font: 11px arial; color: #ccc; text-align: justify;[/newclass]

[newclass=.spotifymusic:hover]background: #343434;[/newclass]

[newclass=.spotifymusic a]color: #ccc;[/newclass]

[newclass=.spotifycred]width: 500px; height: 40px; font: 11px roboto; color: #777; text-align: center; padding-top: 413px; box-sizing:border-box;[/newclass]

[newclass=.spotifycred a]font: 11px roboto; color: #777;[/newclass]
last edit on Jul 10, 2018 17:53:10 GMT by murk
( hover )
options
quote
02. this shall be for music written Oct 17, 2018 11:39:26 GMT
pronounsshe/her
103written posts
IT'S DIA!earned bits
offlinecurrently
IT'S DIA!
Full Member
IT'S DIA! Avatar
I hope I'm not too late yet. These songs aren't exactly my favorite songs, but I listen to them... like a lot. Uh, so yeah. this one was inspired by spotify when the phone is tilted hehehe.

[break][break]

[nospaces]








SHUT UP AND DANCE

WALK THE MOON








[attr="class","playlbg"]
[attr="class","playlist"] ▶ i won't go home without you

[attr="class","playlist"] ▶ let her go

[attr="class","playlist"] ▶ the only exception

[attr="class","playlist"] ▶ the one that got away

[attr="class","playlist"] ▶ big girls don't cry

[attr="class","playlist"] ▶ if i were a boy

[attr="class","playlist"] ▶ call it want you want










[newclass=.playlbg] height:218px;background-color:#323232;padding:5px;overflow:auto;padding-right:10px;margin-top:2px;[/newclass]

[newclass=.playlbg::-webkit-scrollbar]width:2px;background-color:#323232; border:2px solid #323232;[/newclass]
[newclass=.playlbg::-webkit-scrollbar-track]width: 2px; background: #323232;[/newclass]
[newclass=.playlbg::-webkit-scrollbar-thumb:vertical]background-color:#000; border-left:2px solid #000; border-right:2px solid #000;border-top:2px solid #000; border-bottom:2px solid #000; [/newclass]

[newclass=.playlist] width:92%;padding:10px;background-color:#222;font:10px karla;color:#808080;border-bottom:1px solid;letter-spacing:1px;cursor:pointer;text-transform:uppercase;-webkit-transition: ease 0.4s;[/newclass] [newclass=.playlist a] font:10px karla;color:#808080;letter-spacing:1px;text-transform:uppercase;[/newclass]
[newclass=.playlist:hover] background-color:#464646;-webkit-transition: ease 0.4s;[/newclass]

[Googlefont=Krub|Karla]
last edit on Oct 17, 2018 11:54:27 GMT by IT'S DIA!
options
quote
02. this shall be for music written Jan 3, 2020 16:09:52 GMT
Elemental Enthusiast
aliasMari
pronounsthey/she
983written posts
Mariearned bits
offlinecurrently
Mari
Part of the Furniture
Mari Avatar
eternally tired
I know nobody likes hover templates anymore but I made one anyway :') Let's hope I did this challenge thingy right (I probably didn't, judging by the looks of other people's templates compared to mine)[break][break]


[attr="class","MusicCont"]
[attr="class","MusicImg"]

[attr="class","MusicList"]
[attr="class","MusicSong"]
The Greatest Show On Earth

Nightwish



[attr="class","MusicSong"]
Kill The Lights

Set It Off



[attr="class","MusicSong"]
It's Time

Imagine Dragons



[attr="class","MusicSong"]
The Storm

Greenrose Faire



[attr="class","MusicSong"]
Blieve Loepe

Rowwen Hèze



[attr="class","MusicSong"]
Lose Your Ties

The Trouble Notes



[attr="class","MusicSong"]
What Lies Ahead

Kensington



[attr="class","MusicSong"]
Oppe Ruiver

Neet Oét Lottum



[attr="class","MusicSong"]
Warriors

CoCo and The Butterfields



[attr="class","MusicSong"]
Sol Invictus

Audiomachine




[attr="class","MusicTitle"]For The Music!


[googlefont=Raleway|Suez One]
[nospaces]
[newclass=".MusicCont"]width:500px;height:450px;background: linear-gradient(100deg, #ffb570 0%,#ffbaf1 100%); margin:0 auto;border-radius:5px;display:flex;flex-wrap:wrap;[/newclass][newclass=".MusicImg"]background-image:url(https://cdnw.nickpic.host/s5C0tN.png);height:450px;width:200px;background-size:contain;background-position:bottom center;background-repeat:no-repeat;filter:grayscale(50%);mix-blend-mode:multiply;position:relative;left:150px;z-index:5;transition:1s;[/newclass][newclass=".MusicList"]opacity:0;background-color:white;width:275px;height:420px;padding:2px;margin-top:10px;border-radius:20px;overflow:auto;transition:1s;position:relative;z-index:2;[/newclass][newclass=".MusicList::-webkit-scrollbar"]display:none;[/newclass][newclass=".MusicSong"]font-size:12px;font-family:raleway;color:#666;[/newclass][newclass=".MusicSong a"]background:linear-gradient(to left, #ffb570 0%,#ffbaf1 100%);font-family:suez one;font-size:25px;-webkit-background-clip:text;background-clip:text;color:transparent;[/newclass][newclass=".MusicSong p"]border-top:1px solid #c4c4c4;margin-top:0px;[/newclass][newclass=".MusicTitle"]font-size:100px;width:500px;height:400px;line-height:220px;margin-top:-470px;color:white;font-family:suez one;text-align:center;text-shadow:-2px 3px #c4c4c4;transition:1.75s;position:relative;z-index:1;text-transform:uppercase;[/newclass][newclass=".MusicCont:hover .MusicImg"]left:0;[/newclass][newclass=".MusicCont:hover .MusicList"]opacity:1;transition-delay:1s;[/newclass][newclass=".MusicCont:hover .MusicTitle"]opacity:0;[/newclass]
Reply