pop/stars

[attr="class","abc-selk-rules"]

[attr="class","abc-selk-body"]

[attr="class","abc-selk-text"]

i originally coded this for another song but recoded this at the beginning of december because i listen to this song wayyyyyyy too much. i'm really glad i did, because this version is a million percent cooler. i think i'm finally getting a handle on animations, so i really need to use more flashy (snrk) effects O:<[break][break]

this template is not for public use!

[attr="class","abc-selk-hash"]
[HASH]abcsofcode

[newclass=.selk-popstars .abc-selk-contain h1, .selk-popstars .abc-selk-hash a, .selk-popstars .abc-selk-rules h2]color:#AD334D!important;[/newclass]
[newclass=.selk-popstars .abc-selk-link]background-color:#AD334D!important;[/newclass]
[newclass=.abc-selk-contain, .selk-code] --abc-selk-accent:#CCCCCC; [/newclass]
[newclass=.abc-selk-contain] width:500px; padding:25px; -webkit-border-top-left-radius: 5px;-webkit-border-top-right-radius: 5px;border-top-left-radius: 5px;border-top-right-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][break][break]

[nospaces][googlefont=Montserrat:400,700|Montserrat+Alternates:400,700|Roboto:400,400i,700]

[attr="class","kdaPost"]

[attr="class","kdaRender"]

[attr="class","kdaIMG1"]

[attr="class","kdaIMGhover"]

[attr="class","kdaBodyContain"]

[attr="class","kdaBody"]

you know who it is, coming 'round again, you want a dose of this right now it's k/da! i'm a goddess with a blade, sori chyuh bwa nae eereum, itchi moht ha geh loud, loud, loud, loud. i could take it to the top, juhl dae mum choo ji moht hae, nae ga kkeut nae joo neun bad gal, gal, gal. and when i start to talk like that, oh, you won't know how to react. i'm a picture-perfect face, with that wild in my veins, you can hear it in my growl, growl, growl, growl. [break][break]

so keep your eyes on me now, mu uhtseul bo dun joah hal guh ya. dahl sooup neun level, na wa dae gyul won han nuhl hwak shin hae. we got it all in our hands now, so can you handle what we're all about? we're so tough, not scared to show you up, can you feel the rush now? ain't nobody bringing us down, down, down, down, down, down, they could try it but we're gonna wear the crown. you could go another round, round, round, round, round, round, round. wish you luck, but you're not bringing us down. we go hard, 'til we get it, get it, we go hard, we so in it, in it, we pop stars, only winning, winning now, ain't nobody bringing us down, down, down, down. [break][break] hey! you ready for this? see, uhn jae deunji nae mo seup magic, dan han bun eh naega jab uh, juhl dae gi jook ji ahn chi uh! pow pow ni ga mwol ahruh, gyun dil soo up ssuh won hae do, won ha neun gae uhl gool ae boyuh, i’m trouble and you’re wanting it. i'm so cold, when i move that way, you gon' be so blown, i'm the realest in the game, uh! said i'm on fire with a blade, you're about to hear my name, ringing in your head like, whoa.

[attr="class","kdaDeco"]

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

[newclass=.kdaPost] --kda-l-bg:#fcfcfc; --kda-l-text:#9c9c9c; --kda-l-text-bg:#fefefe; --kda-l-sidebarbg:#FFE8E6; --kda-l-accent:#AD334D; --kda-l-bold:#AD334D; transition:.25s; [/newclass]
[newclass=.kdaPost:hover, .kdaPost:hover .kdaBody, .kdaPost:hover .kdaDeco, .kdaPost:hover .kdaRender::after, .kdaPost:hover .kdaBody b, .kdaPost:hover .kdaBody i] transition:.25s; transition-delay:1s!important; --kda-l-bg:#333; --kda-l-text:#9c9c9c; --kda-l-text-bg:#414141; --kda-l-sidebarbg:#9CF4FC; --kda-l-accent:#7446F4; --kda-l-bold:#E927F3; [/newclass]

[newclass=.kdaPost]width:550px; height:500px; border-radius:10px; background-color:var(--kda-l-bg); overflow:hidden; display:flex; justify-content:center; align-items:flex-start;[/newclass]
[newclass=.kdaPost::after]content:''; width:550px; height:500px; position:absolute; background-image:url(https://image.ibb.co/b6UFw8/5.png); filter:invert(0%); opacity:.05; z-index:0; transition:.25s;[/newclass]
[newclass=.kdaPost:hover::after]filter: invert(100%); opacity:.05; transition:.25s; transition-delay:1s;[/newclass]
[newclass=.kdaRender]width:0px; height:500px; position:relative; margin-right:auto; z-index:2; align-self:flex-end;[/newclass]
[newclass=.kdaRender::after]content:''; position:absolute; z-index:0; margin-top:-500px; width:550px; height:500px; background-color:var(--kda-l-sidebarbg); transition:.25s; -webkit-clip-path: polygon(0 0, 25% 0, 50% 100%, 0% 100%); clip-path: polygon(0 0, 25% 0, 50% 100%, 0% 100%); [/newclass]
[newclass=.kdaIMG1]height:500px;[/newclass]
[newclass=.kdaIMG1 img]height:500px; margin-left:-125px; position:relative; z-index:2; [/newclass]
[newclass=.kdaIMGhover]position:absolute; top:0px; left:-1px;[/newclass]
[newclass=.kdaPost:hover .kdaIMGhover img] animation: kda-blink-in 1s normal forwards; opacity:1; transition:.25s; } @keyframes kda-out { 0% { opacity:1; } 100% { opacity:0; }[/newclass]
[newclass=.kdaIMGhover img]height:500px; margin-left:-125px; position:relative; z-index:2; animation: kda-out .25s normal forwards; opacity:0; transition:.25s;} @keyframes kda-blink-in { 0% { opacity:0; } 25% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }[/newclass]
[newclass=.kdaBodyContain]height:500px; display:flex; align-items:center;[/newclass]
[newclass=.kdaBody]height:calc(378px + 50px); transition:.25s; width:275px; border-radius:10px; position:relative; margin-right:35px; z-index:3; background-color:var(--kda-l-text-bg); font:11px/160% roboto; text-align:justify; color:var(--kda-l-text); display:inline-block;[/newclass]
[newclass=.kdaBody div]height:378px; overflow:auto; margin:25px;[/newclass]
[newclass=.kdaBody b]font:700 12px/11px Montserrat Alternates; color:var(--kda-l-bold); transition:.25s;[/newclass]
[newclass=.kdaBody i]color:#cacaca; border-bottom:1px solid var(--kda-l-sidebarbg); transition:.25s;[/newclass]
[newclass=.kdaBody a]font:12px/11px Montserrat Alternates; color:var(--kda-l-accent); text-align:center; display: block; margin-top:25px; [/newclass]
[newclass=.kdaDeco]align-self:center; position:absolute; height:450px; width:450px; border:10px dotted var(--kda-l-accent); transition:.25s; border-radius:100%; animation:kda-spinner 15s linear infinite; animation-play-state:paused; z-index:1; [/newclass]
[newclass=.kdaPost:hover .kdaDeco]animation-play-state:running; } @keyframes kda-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); }[/newclass]
[newclass=.kdaCredit]font:800 7px roboto; margin-left:500px;[/newclass]
[newclass=.kdaCredit a]font:800 7px roboto;[/newclass]
[newclass=.kdaBody div::-webkit-scrollbar]width:0px;[/newclass]