[attr="class","selk-zinnia-up"]
[attr="class","abc-selk-contain"]
zinnia
[attr="class","abc-selk-rules"]
[attr="class","abc-selk-body"]
[attr="class","abc-selk-text"]
this template is not for public use![break][break]
also it's broken rn, i'll find another mp3 host later, i'm lazy
[break]
okay, the title of this song is
technically "zinnia's theme", but i'm not going to call it that because it's prettier the other way, sue me. i struggled a lot to come up w/ an idea for this code, but decided that a playlist template would be a fitting end for the project! [break][break]
this playlist template is
fully functional which is why it's a bit bare-bones aesthetically, wheezes -- toggle between songs using the tabs on the left, and play/pause songs using the play button in the center! (just make sure to pause songs when you're done listening to them, because you might create some unintended mashups otherwise.) [break][break]
i'd also like to take a minute and say
thank you to everyone for supporting me throughout this project. the amount of support i got from everyone here was wonderful and it means more to me than i can ever express. happy holidays, pixel <3
[attr="class","abc-selk-hash"]
[HASH]abcsofcode
[newclass=.selk-zinnia-up .abc-selk-contain h1, .selk-zinnia-up .abc-selk-hash a, .selk-zinnia-up .abc-selk-rules h2]color:#DF6885!important;[/newclass]
[newclass=.selk-zinnia-up .abc-selk-link]background-color:#DF6885!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-selk-contain] width:500px; padding:25px; border-radius:5px; background-color:#eee; display:flex; flex-flow:row wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass]
[newclass=.abc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-selk-accent); [/newclass]
[newclass=.abc-selk-contain h1:after] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-left:25px; [/newclass]
[newclass=.abc-selk-contain h1:before] content:'A-B-'; color:#ccc; [/newclass]
[newclass=.abc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass]
[newclass=.abc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass]
[newclass=.abc-selk-hash] margin:25px 0px; text-align:left; [/newclass]
[newclass=.abc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass]
[newclass=.abc-selk-colorpickers] width:309px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass]
[newclass=.abc-selk-color] display:flex; flex-flow:row nowrap; width:309px; [/newclass]
[newclass=.abc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass]
[newclass=.abc-selk-color span] height:10px; width:0px; display:flex; font:600 9px/10px Roboto; color:#ccc; [/newclass]
[newclass=.abc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass]
[newclass=.abc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass]
[newclass=.abc-selk-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; flex-flow:column nowrap; border-right:1px solid #ddd; [/newclass]
[newclass=.abc-selk-rules img] width:100px; height:100px; border-radius:5px; [/newclass]
[newclass=.selk-code] background-color:#eee; width:500px; padding:25px; -webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin-top:-25px; position:relative; overflow:hidden; [/newclass]
[newclass=.selk-code div] margin:0px!important; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; [/newclass]
[newclass=.selk-code div span] display:inline-block; font:700 9px roboto; color:#333; text-transform:uppercase; background-color:#ddd; margin:0px 5px 25px 0px; padding:5px 8px; border-radius:3px; [/newclass]
[newclass=.selk-code code] display:block; width:400px!important; height:100px!important;overflow:auto!important; padding:25px!important; text-align:justify; border-radius:5px; font:11px roboto; color:#aaa; background-color:#f7f7f7; border:0px!important; [/newclass]
[newclass=.selk-code .code_tag_toggle]margin-top:25px; border:0px!important; color:#333!important; font:700 9px/9px roboto!important; padding:5px 10px!important; border-radius:3px!important;[/newclass]
[newclass=.abc-selk-link] position:absolute; bottom:0px; right:0px; height:45px; width:45px!important; background-color:var(--abc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass]
[newclass=.abc-selk-link i] font-size:20px; color:#fafafa; [/newclass][break][break]
[nospaces][googlefont=Open+Sans:400,700|Raleway:900|Montserrat:700|Maven+Pro:900]
[attr="class","selk-Contain"]
[PTabbedContent]
[PTab=
[attr="class","selk-Tab"]
angel on fire
3:16
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/nti20k9bjvw3ryg/Halsey%20-%20Angel%20On%20Fire%20%28Audio%29.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
angel on fire
[/PTab]
[PTab=
[attr="class","selk-Tab"]
buy the stars
4:48
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/jgjwpxeoulaw7zy/MARINA%20AND%20THE%20DIAMONDS%20BUY%20THE%20STARS.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
buy the stars
[/PTab]
[PTab=
[attr="class","selk-Tab"]
cosmic love
4:01
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/a1wboen51m5454f/cosmiclove.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
cosmic love
[/PTab]
[PTab=
[attr="class","selk-Tab"]
dracula
3:15
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/w1qru3puvomb6lz/f%28x%29%20-%20Dracula%20%5B3%EC%A7%91%20Red%20Light%5D.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
dracula
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
even in death
2:35
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/ql24hvfjmfeczhd/At%20the%20Price%20of%20Oblivion%20-%2003%20Even%20in%20Death.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
even in death
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
foreigner's god
3:39
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/uuu997hr92ejzxt/foreignersgod.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
foreigner's god
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
galaxy
3:10
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/ybo7kpk73cpl6tz/galaxy.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
galaxy
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
hello planet
5:04
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/bo6r03ud5433l1f/hello_planet.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
hello, planet
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
icarus
3:46
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/2i3zybr5jmr7y3z/icarus.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
icarus
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
jenny
3:51
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/0ex91dqdnoa624e/jenny.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
jenny
[/PTab={codes}]
[PTab=
[attr="class","selk-Tab"]
keep on doin'
3:11
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/wous0y58p4r8xjc/keep%20on%20doin%27.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
keep on doin'
[/PTab]
[PTab=
[attr="class","selk-Tab"]
leave the lights on
6:46
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/xudie0qdioa1zw2/leavethelightson.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
leave the lights on
[/PTab]
[PTab=
[attr="class","selk-Tab"]
monster
3:23
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/nkbjhoeo2oj8ict/monster.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
monster
[/PTab]
[PTab=
[attr="class","selk-Tab"]
nina cried power
3:47
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/piltz9837q92409/nina_cried_power.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
nina cried power
[/PTab]
[PTab=
[attr="class","selk-Tab"]
operation: mindcrime
4:46
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/0kjdlf8n45ft1nn/operation_mindcrime.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
operation: mindcrime
[/PTab]
[PTab=
[attr="class","selk-Tab"]
pop/stars
3:23
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/rt1lcow29gpbzxm/popstars.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
pop/stars
[/PTab]
[PTab=
[attr="class","selk-Tab"]
quaver
3:35
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/o0022s8hus7f6uz/quaver.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
quaver
[/PTab]
[PTab=
[attr="class","selk-Tab"]
reach for the moon
5:57
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/kijnaotcc5dfowd/reachforthemoon.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
reach for the moon
[/PTab]
[PTab=
[attr="class","selk-Tab"]
snake eyes
4:25
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/12iuoucsliy9un0/snakeeyes.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
snake eyes
[/PTab]
[PTab=
[attr="class","selk-Tab"]
two birds
3:16
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/6z5znrjfkg9negi/twobirds.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
two birds
[/PTab]
[PTab=
[attr="class","selk-Tab"]
unbelievable
3:25
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/5firfsp62brxo40/unbelievable.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
unbelievable
[/PTab]
[PTab=
[attr="class","selk-Tab"]
vagrant
3:43
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/apmfrxafn09ssi8/vagrant.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
vagrant
[/PTab]
[PTab=
[attr="class","selk-Tab"]
werewolf gimmick
3:43
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/cnp44r222lik1r8/werewolf%20gimmick.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
werewolf gimmick
[/PTab]
[PTab=
[attr="class","selk-Tab"]
xo
3:41
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/fi3do2ac67nieyr/xo.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
xo
[/PTab]
[PTab=
[attr="class","selk-Tab"]
young volcanoes
3:17
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/k656549muuwc7f1/youngvolcanoes.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
young volcanoes
[/PTab]
[PTab=
[attr="class","selk-Tab"]
zinnia
5:01
]
[attr="class","selk-cover"][music]https://dl.dropboxusercontent.com/s/zngivxb6vceqvg5/zinnia.mp3[/music]
[attr="class","selk-big-img"]
[attr="class","selk-play-bg"]
[attr="class","selk-bottom"]
NOW PLAYING
zinnia
[/PTab]
[/PTabbedContent={width:650px; height:400px;border-radius:5px; overflow:hidden; background-color:#fff; tabs:side; border:0px; position:relative; }]
[newclass=.selk-Contain] --selk-accent:#DF6885; width:650px; height:400px; position:relative;[/newclass]
[newclass=.selk-cover] width: 400px; height: 400px; background-color: #eee; position: relative; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; [/newclass]
[newclass=.selk-big-img] position: absolute; width: 400px; height: 300px; background: url(https://i.imgur.com/FqUCpsL.png); background-position: center; align-self: flex-start; position: relative; filter: grayscale(100%); opacity: 0.75; [/newclass]
[newclass=.selk-big-img:after] content: ""; width: 400px; height: 300px; background: linear-gradient( to bottom, rgba(238, 238, 238, 0.1), rgba(238, 238, 238, 1) ); position: absolute; top: 0px; left: 0px; [/newclass]
[newclass=.selk-top] position: absolute; top: 25px; text-transform: lowercase; font: 400 35px maven pro; color: #fafafa; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-play-bg] position: absolute; width: 200px; height: 200px; border-radius: 100%; background: url(https://i.ibb.co/1KZRJxc/image.png); background-size: cover; border: 10px solid #f8f8f8; display: flex; align-items: center; justify-content: center; z-index: 1; [/newclass]
[newclass=.selk-play-bg:after] content: ""; position: absolute; top: -10px; left: -10px; width: 220px; height: 220px; background-color: transparent; border-radius: 100%; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-play-bg i] display: block; width: 150px; height: 150px; font-size: 150px; color: #eee; z-index: 1; border-radius: 100px; [/newclass]
[newclass=.selk-play-bg i:before] display: block; background: url(https://i.imgur.com/FqUCpsL.png); background-size: cover; background-position: center; -webkit-background-clip: text; color: #fafafa; text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.25); [/newclass]
[newclass=.selk-bottom] position: absolute; bottom: 0px; width: 400px; height: 100px; background-color: #eee; z-index: 0; display: flex; flex-flow: column nowrap; align-items: center; justify-content: flex-end; [/newclass]
[newclass=.selk-bottom h1] margin: 5px 0px 0px 0px; font: 700 8px/100% Montserrat; text-transform: uppercase; color: #ccc; position: relative; z-index: 1; [/newclass]
[newclass=.selk-bottom h2] display: block; margin: 0px 0px 25px 0px; font: 900 36px/100% maven pro; color: #888; position: relative; text-transform: uppercase; z-index: 0; [/newclass]
[newclass=.selk-cover .music]background-color:transparent;color:transparent; width:150px; height:150px; position:absolute; z-index:99999; white-space:nowrap; padding:0px; [/newclass]
[newclass=.selk-cover .music .controls] color:#FDFDFD; text-shadow:0px 0px 10px rgba(0,0,0,.25); font-size:150px; line-height:150px; margin:0px; z-index:99999; cursor:pointer;[/newclass]
[newclass=.selk-cover .music .time]display:none;[/newclass]
[newclass=.selk-cover .music .scrubber]display:none;[/newclass]
[newclass=.selk-cover .music .fa-fw]width:150px;[/newclass]
[newclass=.selk-Tab] height:10px; width:200px; color:#eee; padding:15px 25px; display:flex; align-items:center; justify-content:space-between; text-align:left; font:700 10px/10px open sans; text-transform:uppercase; text-shadow:1px 1px rgba(0,0,0,.25); [/newclass]
[newclass=.selk-Extras] position:absolute; width:300px; padding:50px 50px; display:flex; align-items:center; justify-content:space-between; bottom:0px; right:0px; z-index:100; [/newclass]
[newclass=.selk-Extras span] font-size:25px; color:#fafafa; text-shadow:2px 2px rgba(0,0,0,.1); cursor:pointer; [/newclass]
[newclass=.selk-Contain table td]padding:0px!important; border:0px!important;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder]table-layout:none!important; height:400px!important; overflow-y:scroll!important; display:flex; flex-flow: row wrap; overflow-x:hidden!important; [/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar]width:5px; border:0px;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar-thumb]background-color:var(--selk-accent);border:1px solid #333;[/newclass]
[newclass=.selk-Contain .PT_Tabs_holder::-webkit-scrollbar-track]background-color:#333;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs]background-color:#444;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_hover]background-color:var(--selk-accent); cursor:pointer;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_selected_hover]background-color:var(--selk-accent); cursor:pointer;[/newclass]
[newclass=.selk-Contain .PT_table .PT_tabs_selected]background-color:var(--selk-accent);[/newclass]