posted Dec 1, 2018 16:48:02 GMT -6 in dracula
[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]
[newclass=.selk-dracula .abc-selk-contain h1, .selk-dracula .abc-selk-hash a, .selk-dracula .abc-selk-rules h2]color:#AC1C2C!important;[/newclass]
[newclass=.selk-dracula .abc-selk-link]background-color:#AC1C2C!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]
[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]
[newclass=.dracAbout] width:475px; padding:50px; background-color:#333; color:#eee; font:10px verdana; text-align:justify; [/newclass]
[newclass=.dracPlotter] width:525px; padding:25px; display:flex; overflow:auto; background-color:#eee; [/newclass]
[newclass=.dracPlotBox] width:250px; height:225px; margin-right:25px; position:relative; overflow:hidden; display:flex; flex-flow:row wrap; [/newclass]
[newclass=.dracPlotFront] width:275px; height:225px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; background-color:#333; position:relative; [/newclass]
[newclass=.dracPlotFront img] width:100px; height:100px; border-radius:100%; padding:10px; border:2px solid #ccc; position:absolute; [/newclass]
[newclass=.dracPlotFront span] font:400 18px quicksand; color:#eaeaeaea; position:absolute; bottom:15px; [/newclass]
[newclass=.dracPlotAnimation] background-color:#ccc; width:500px; height:500px; position:absolute; margin-top:200px; transition:1s ease; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); clip-path: polygon(0 0, 0% 100%, 100% 100%); transition-delay:.5s; [/newclass]
[newclass=.dracPlotBox:hover .dracPlotAnimation] margin-top:-250px; transition:.5s ease; [/newclass]
[newclass=.dracPlotBody] width:230px; height:205px; background-color:#eee; position:absolute; z-index:1; top:10px; left:10px; opacity:0; transition:.5s ease; [/newclass]
[newclass=.dracPlotBox:hover .dracPlotBody] opacity:1; transition:.5s ease; transition-delay:.5s; [/newclass]
[newclass=.dracPlotBody div] margin:10px; height:185px; padding-right:10px; overflow:auto; font:400 11px/19px roboto; color:#6a6a6a; text-align:justify; [/newclass]
[newclass=.dracPlotBody div b] font:700 12px/15px quicksand; color:#aaa; [/newclass]
[newclass=.dracPlotBody div h1] margin:0px; color:#aaa; font:400 15px quicksand; text-align:center; [/newclass]
[newclass=.dracPlotBody div h2] margin:0px; display:inline; font:400 10px/8px raleway; text-transform:lowercase; background-color:#ddd; padding:3px 7px; margin-left:5px; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar] width:11px; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar-thumb] border:5px solid #eee; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar-track] background-color:#ccc; border:5px solid #eee; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar] height:11px; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar-thumb] border:1px solid #ddd; background-color:#fafafa; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar-track] background-color:#ddd; border:0px;[/newclass]
[newclass=.dracCredit] font:bold 7px roboto; margin-left:500px; [/newclass]
[newclass=.dracCredit a] font:bold 7px roboto!important; [/newclass]
[attr="class","selk-dracula"]
[attr="class","abc-selk-contain"]
dracula
[attr="class","abc-selk-rules"]
[attr="class","abc-selk-body"]
[attr="class","abc-selk-text"]
first kpop song of the project, now everyone will see my sins. i miss f(x) with my entire heart. anyways, another side-scrolling multiplotter coming from ya boi, who would've thought. this was originally conceived as a multiplotter, but honestly i think it'd make a decent wanted ad as well? iunno.[break][break]
adding more characters is a bit complex as all colors are defined in the css, so you'll have to replace each mention of the variable in the newclasses above each character section in order for everything to work correctly. i'd highly recommend using a search and replace for this.
first kpop song of the project, now everyone will see my sins. i miss f(x) with my entire heart. anyways, another side-scrolling multiplotter coming from ya boi, who would've thought. this was originally conceived as a multiplotter, but honestly i think it'd make a decent wanted ad as well? iunno.[break][break]
adding more characters is a bit complex as all colors are defined in the css, so you'll have to replace each mention of the variable in the newclasses above each character section in order for everything to work correctly. i'd highly recommend using a search and replace for this.
[attr="class","abc-selk-hash"]
[HASH]lightplotting [HASH]mediumplotting [HASH]wantedad [HASH]multiplotter [HASH]icon [HASH]hover [HASH]scroll [HASH]sidescrolling [HASH]verdana [HASH]roboto [HASH]quicksand [HASH]raleway [HASH]abcsofcode
[HASH]lightplotting [HASH]mediumplotting [HASH]wantedad [HASH]multiplotter [HASH]icon [HASH]hover [HASH]scroll [HASH]sidescrolling [HASH]verdana [HASH]roboto [HASH]quicksand [HASH]raleway [HASH]abcsofcode
[attr="class","abc-selk-colorpickers"]
[attr="class","abc-selk-color"]
#AC1C2C
#AC1C2C
[attr="class","abc-selk-color"]
#F8930C
#F8930C
[attr="class","abc-selk-color"]
#EDB318
#EDB318
[attr="class","abc-selk-color"]
#7DD1E3
#7DD1E3
[attr="class","abc-selk-var"]
this template uses css variables for easier editing and is therefore incompatible with internet explorer. if you need this cross-compatibility, use a search and replace to change each variable to the desired hex code.
this template uses css variables for easier editing and is therefore incompatible with internet explorer. if you need this cross-compatibility, use a search and replace to change each variable to the desired hex code.
[attr="class","selk-code"]
edit as much as you want!
don't touch the credits!
i'd love to see how you use it!
edit as much as you want!
don't touch the credits!
i'd love to see how you use it!
[nospaces]
[div align="center"][googlefont=Quicksand:400,700|Raleway:400|Roboto:400,700]
[div][attr="class","dracAbout"]your optional about goes here! alternatively, if you're using this as a wanted ad, you can write about it here. deep in the darkest night, when there's no one around, the force is coming, and there's no way out.[/div]
[div][attr="class","dracPlotter"]
[newclass=.dracPlotter] --CHARACTER_ONE:#AC1C2C;[/newclass]
[newclass=.CHARACTER_ONE .dracPlotFront img, .CHARACTER_ONE .dracPlotBody div b] border-color:var(--CHARACTER_ONE)!important; color:var(--CHARACTER_ONE)!important; [/newclass]
[newclass=.CHARACTER_ONE .dracPlotAnimation, .CHARACTER_ONE .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_ONE)!important; [/newclass]
[div][attr="class","CHARACTER_ONE"][div][attr="class","dracPlotBox"]
[div][attr="class","dracPlotFront"]
[img style="width:100px;height:100px;" src="https://image.ibb.co/jZkn49/59.png"]
[span]
firstname lastname
[/span]
[/div]
[div][attr="class","dracPlotBody"]
[div]
[h1]subtitle[/h1]
[b]lorem[/b] as the night deepens, it gets stronger the dark shadow overshadowing me, you better ru-ru-ru-ru-ru-ru-ru-run don’t let yourself get alone in the dark, don’t walk alone that moment, he opens his eyes, you better ru-ru-ru-ru-ru-ru-ru-run [break][break] yeah, when that moon hides behind the cloud yeah, He flies secretly yeah, he will target you who’s lonely, you better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you [break][break]
[h2]seeking[/h2] what'cha lookin' for?
[/div]
[/div]
[div][attr="class","dracPlotAnimation"][/div]
[/div][/div]
[newclass=.dracPlotter] --CHARACTER_TWO:#F8930C;[/newclass]
[newclass=.CHARACTER_TWO .dracPlotFront img, .CHARACTER_TWO .dracPlotBody div b] border-color:var(--CHARACTER_TWO)!important; color:var(--CHARACTER_TWO)!important; [/newclass]
[newclass=.CHARACTER_TWO .dracPlotAnimation, .CHARACTER_TWO .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_TWO)!important; [/newclass]
[div][attr="class","CHARACTER_TWO"][div][attr="class","dracPlotBox"]
[div][attr="class","dracPlotFront"]
[img style="width:100px;height:100px;" src="https://image.ibb.co/ixq9vS/22.png"]
[span]
firstname lastname
[/span]
[/div]
[div][attr="class","dracPlotBody"]
[div]
[h1]subtitle[/h1]
[b]lorem[/b] Dracula-la-la-la-la Dracula-la-la-la-la you would be a bit thirsty, your heart might feel weird you are under fear now, You better ru-ru-ru-ru-ru-ru-ru-run yeah, the moment you feel that breath yeah, push him away quickly yeah, the more you acknowledge, the more he enjoys it, You better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you Dracula-la-la-la-la Dracula, don’t look behind you Dracula You better ru-ru-ru-ru-ru-ru-ru-run Dracula, you have to follow the sun Dracula You better ru-ru-ru-ru-ru-ru-ru-run kiss me trust me, this isn’t a dream look at me love me, born again Dracula-la-la-la-la [break][break]
[h2]seeking[/h2] what'cha lookin' for?
[/div]
[/div]
[div][attr="class","dracPlotAnimation"][/div]
[/div][/div]
[newclass=.dracPlotter] --CHARACTER_THREE:#EDB318;[/newclass]
[newclass=.CHARACTER_THREE .dracPlotFront img, .CHARACTER_THREE .dracPlotBody div b] border-color:var(--CHARACTER_THREE)!important; color:var(--CHARACTER_THREE)!important; [/newclass]
[newclass=.CHARACTER_THREE .dracPlotAnimation, .CHARACTER_THREE .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_THREE)!important; [/newclass]
[div][attr="class","CHARACTER_THREE"][div][attr="class","dracPlotBox"]
[div][attr="class","dracPlotFront"]
[img style="width:100px;height:100px;" src="https://image.ibb.co/b9vVGp/image.png"]
[span]
firstname lastname
[/span]
[/div]
[div][attr="class","dracPlotBody"]
[div]
[h1]subtitle[/h1]
[b]lorem[/b] as the night deepens, it gets stronger the dark shadow overshadowing me, you better ru-ru-ru-ru-ru-ru-ru-run don’t let yourself get alone in the dark, don’t walk alone that moment, he opens his eyes, you better ru-ru-ru-ru-ru-ru-ru-run [break][break] yeah, when that moon hides behind the cloud yeah, He flies secretly yeah, he will target you who’s lonely, you better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you [break]
[h2]seeking[/h2] what'cha lookin' for?
[/div]
[/div]
[div][attr="class","dracPlotAnimation"][/div]
[/div][/div]
[newclass=.dracPlotter] --CHARACTER_FOUR:#7DD1E3;[/newclass]
[newclass=.CHARACTER_FOUR .dracPlotFront img, .CHARACTER_FOUR .dracPlotBody div b] border-color:var(--CHARACTER_FOUR)!important; color:var(--CHARACTER_FOUR)!important; [/newclass]
[newclass=.CHARACTER_FOUR .dracPlotAnimation, .CHARACTER_FOUR .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_FOUR)!important; [/newclass]
[div][attr="class","CHARACTER_FOUR"][div][attr="class","dracPlotBox"]
[div][attr="class","dracPlotFront"]
[img style="width:100px;height:100px;" src="https://image.ibb.co/hQH6aS/30.png"]
[span]
firstname lastname
[/span]
[/div]
[div][attr="class","dracPlotBody"]
[div]
[h1]subtitle[/h1]
[b]lorem[/b] Dracula-la-la-la-la Dracula-la-la-la-la you would be a bit thirsty, your heart might feel weird you are under fear now, You better ru-ru-ru-ru-ru-ru-ru-run yeah, the moment you feel that breath yeah, push him away quickly yeah, the more you acknowledge, the more he enjoys it, You better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you Dracula-la-la-la-la Dracula, don’t look behind you Dracula You better ru-ru-ru-ru-ru-ru-ru-run Dracula, you have to follow the sun Dracula You better ru-ru-ru-ru-ru-ru-ru-run kiss me trust me, this isn’t a dream look at me love me, born again Dracula-la-la-la-la [break][break]
[h2]seeking[/h2] what'cha lookin' for?
[/div]
[/div]
[div][attr="class","dracPlotAnimation"][/div]
[/div][/div]
[/div][div][attr="class","dracCredit"][a href="http://pixel-perfect.boards.net/user/15"]SELKIE[/a][/div][/div]
[newclass=.dracAbout] width:475px; padding:50px; background-color:#333; color:#eee; font:10px verdana; text-align:justify; [/newclass]
[newclass=.dracPlotter] width:525px; padding:25px; display:flex; overflow:auto; background-color:#eee; [/newclass]
[newclass=.dracPlotBox] width:250px; height:225px; margin-right:25px; position:relative; overflow:hidden; display:flex; flex-flow:row wrap; [/newclass]
[newclass=.dracPlotFront] width:275px; height:225px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; background-color:#333; position:relative; [/newclass]
[newclass=.dracPlotFront img] width:100px; height:100px; border-radius:100%; padding:10px; border:2px solid #ccc; position:absolute; [/newclass]
[newclass=.dracPlotFront span] font:400 18px quicksand; color:#eaeaeaea; position:absolute; bottom:15px; [/newclass]
[newclass=.dracPlotAnimation] background-color:#ccc; width:500px; height:500px; position:absolute; margin-top:200px; transition:1s ease; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); clip-path: polygon(0 0, 0% 100%, 100% 100%); transition-delay:.5s; [/newclass]
[newclass=.dracPlotBox:hover .dracPlotAnimation] margin-top:-250px; transition:.5s ease; [/newclass]
[newclass=.dracPlotBody] width:230px; height:205px; background-color:#eee; position:absolute; z-index:1; top:10px; left:10px; opacity:0; transition:.5s ease; [/newclass]
[newclass=.dracPlotBox:hover .dracPlotBody] opacity:1; transition:.5s ease; transition-delay:.5s; [/newclass]
[newclass=.dracPlotBody div] margin:10px; height:185px; padding-right:10px; overflow:auto; font:400 11px/19px roboto; color:#6a6a6a; text-align:justify; [/newclass]
[newclass=.dracPlotBody div b] font:700 12px/15px quicksand; color:#aaa; [/newclass]
[newclass=.dracPlotBody div h1] margin:0px; color:#aaa; font:400 15px quicksand; text-align:center; [/newclass]
[newclass=.dracPlotBody div h2] margin:0px; display:inline; font:400 10px/8px raleway; text-transform:lowercase; background-color:#ddd; padding:3px 7px; margin-left:5px; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar] width:11px; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar-thumb] border:5px solid #eee; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar-track] background-color:#ccc; border:5px solid #eee; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar] height:11px; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar-thumb] border:1px solid #ddd; background-color:#fafafa; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar-track] background-color:#ddd; border:0px;[/newclass]
[newclass=.dracCredit] font:bold 7px roboto; margin-left:500px; [/newclass]
[newclass=.dracCredit a] font:bold 7px roboto!important; [/newclass]
[attr="class","abc-selk-link"]
[attr="class","lnr lnr-link"]
[attr="class","lnr lnr-link"]
[newclass=.selk-dracula .abc-selk-contain h1, .selk-dracula .abc-selk-hash a, .selk-dracula .abc-selk-rules h2]color:#AC1C2C!important;[/newclass]
[newclass=.selk-dracula .abc-selk-link]background-color:#AC1C2C!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]
[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=Quicksand:400,700|Raleway:400|Roboto:400,700]
[attr="class","dracAbout"]your optional about goes here! alternatively, if you're using this as a wanted ad, you can write about it here. deep in the darkest night, when there's no one around, the force is coming, and there's no way out.
[attr="class","dracPlotter"]
[newclass=.dracPlotter] --CHARACTER_ONE:#AC1C2C;[/newclass]
[newclass=.CHARACTER_ONE .dracPlotFront img, .CHARACTER_ONE .dracPlotBody div b] border-color:var(--CHARACTER_ONE)!important; color:var(--CHARACTER_ONE)!important; [/newclass]
[newclass=.CHARACTER_ONE .dracPlotAnimation, .CHARACTER_ONE .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_ONE)!important; [/newclass]
[newclass=.dracPlotter] --CHARACTER_TWO:#F8930C;[/newclass]
[newclass=.CHARACTER_TWO .dracPlotFront img, .CHARACTER_TWO .dracPlotBody div b] border-color:var(--CHARACTER_TWO)!important; color:var(--CHARACTER_TWO)!important; [/newclass]
[newclass=.CHARACTER_TWO .dracPlotAnimation, .CHARACTER_TWO .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_TWO)!important; [/newclass]
[newclass=.dracPlotter] --CHARACTER_THREE:#EDB318;[/newclass]
[newclass=.CHARACTER_THREE .dracPlotFront img, .CHARACTER_THREE .dracPlotBody div b] border-color:var(--CHARACTER_THREE)!important; color:var(--CHARACTER_THREE)!important; [/newclass]
[newclass=.CHARACTER_THREE .dracPlotAnimation, .CHARACTER_THREE .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_THREE)!important; [/newclass]
[newclass=.dracPlotter] --CHARACTER_FOUR:#7DD1E3;[/newclass]
[newclass=.CHARACTER_FOUR .dracPlotFront img, .CHARACTER_FOUR .dracPlotBody div b] border-color:var(--CHARACTER_FOUR)!important; color:var(--CHARACTER_FOUR)!important; [/newclass]
[newclass=.CHARACTER_FOUR .dracPlotAnimation, .CHARACTER_FOUR .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_FOUR)!important; [/newclass]
[newclass=.dracPlotter] --CHARACTER_ONE:#AC1C2C;[/newclass]
[newclass=.CHARACTER_ONE .dracPlotFront img, .CHARACTER_ONE .dracPlotBody div b] border-color:var(--CHARACTER_ONE)!important; color:var(--CHARACTER_ONE)!important; [/newclass]
[newclass=.CHARACTER_ONE .dracPlotAnimation, .CHARACTER_ONE .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_ONE)!important; [/newclass]
[attr="class","CHARACTER_ONE"]
[attr="class","dracPlotBox"]
[attr="class","dracPlotFront"]
firstname lastname
firstname lastname
[attr="class","dracPlotBody"]
lorem as the night deepens, it gets stronger the dark shadow overshadowing me, you better ru-ru-ru-ru-ru-ru-ru-run don’t let yourself get alone in the dark, don’t walk alone that moment, he opens his eyes, you better ru-ru-ru-ru-ru-ru-ru-run [break][break] yeah, when that moon hides behind the cloud yeah, He flies secretly yeah, he will target you who’s lonely, you better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you [break][break]
subtitle
lorem as the night deepens, it gets stronger the dark shadow overshadowing me, you better ru-ru-ru-ru-ru-ru-ru-run don’t let yourself get alone in the dark, don’t walk alone that moment, he opens his eyes, you better ru-ru-ru-ru-ru-ru-ru-run [break][break] yeah, when that moon hides behind the cloud yeah, He flies secretly yeah, he will target you who’s lonely, you better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you [break][break]
seeking
what'cha lookin' for?[attr="class","dracPlotAnimation"]
[newclass=.dracPlotter] --CHARACTER_TWO:#F8930C;[/newclass]
[newclass=.CHARACTER_TWO .dracPlotFront img, .CHARACTER_TWO .dracPlotBody div b] border-color:var(--CHARACTER_TWO)!important; color:var(--CHARACTER_TWO)!important; [/newclass]
[newclass=.CHARACTER_TWO .dracPlotAnimation, .CHARACTER_TWO .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_TWO)!important; [/newclass]
[attr="class","CHARACTER_TWO"]
[attr="class","dracPlotBox"]
[attr="class","dracPlotFront"]
firstname lastname
firstname lastname
[attr="class","dracPlotBody"]
lorem Dracula-la-la-la-la Dracula-la-la-la-la you would be a bit thirsty, your heart might feel weird you are under fear now, You better ru-ru-ru-ru-ru-ru-ru-run yeah, the moment you feel that breath yeah, push him away quickly yeah, the more you acknowledge, the more he enjoys it, You better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you Dracula-la-la-la-la Dracula, don’t look behind you Dracula You better ru-ru-ru-ru-ru-ru-ru-run Dracula, you have to follow the sun Dracula You better ru-ru-ru-ru-ru-ru-ru-run kiss me trust me, this isn’t a dream look at me love me, born again Dracula-la-la-la-la [break][break]
subtitle
lorem Dracula-la-la-la-la Dracula-la-la-la-la you would be a bit thirsty, your heart might feel weird you are under fear now, You better ru-ru-ru-ru-ru-ru-ru-run yeah, the moment you feel that breath yeah, push him away quickly yeah, the more you acknowledge, the more he enjoys it, You better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you Dracula-la-la-la-la Dracula, don’t look behind you Dracula You better ru-ru-ru-ru-ru-ru-ru-run Dracula, you have to follow the sun Dracula You better ru-ru-ru-ru-ru-ru-ru-run kiss me trust me, this isn’t a dream look at me love me, born again Dracula-la-la-la-la [break][break]
seeking
what'cha lookin' for?[attr="class","dracPlotAnimation"]
[newclass=.dracPlotter] --CHARACTER_THREE:#EDB318;[/newclass]
[newclass=.CHARACTER_THREE .dracPlotFront img, .CHARACTER_THREE .dracPlotBody div b] border-color:var(--CHARACTER_THREE)!important; color:var(--CHARACTER_THREE)!important; [/newclass]
[newclass=.CHARACTER_THREE .dracPlotAnimation, .CHARACTER_THREE .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_THREE)!important; [/newclass]
[attr="class","CHARACTER_THREE"]
[attr="class","dracPlotBox"]
[attr="class","dracPlotFront"]
firstname lastname
firstname lastname
[attr="class","dracPlotBody"]
lorem as the night deepens, it gets stronger the dark shadow overshadowing me, you better ru-ru-ru-ru-ru-ru-ru-run don’t let yourself get alone in the dark, don’t walk alone that moment, he opens his eyes, you better ru-ru-ru-ru-ru-ru-ru-run [break][break] yeah, when that moon hides behind the cloud yeah, He flies secretly yeah, he will target you who’s lonely, you better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you [break]
subtitle
lorem as the night deepens, it gets stronger the dark shadow overshadowing me, you better ru-ru-ru-ru-ru-ru-ru-run don’t let yourself get alone in the dark, don’t walk alone that moment, he opens his eyes, you better ru-ru-ru-ru-ru-ru-ru-run [break][break] yeah, when that moon hides behind the cloud yeah, He flies secretly yeah, he will target you who’s lonely, you better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you [break]
seeking
what'cha lookin' for?[attr="class","dracPlotAnimation"]
[newclass=.dracPlotter] --CHARACTER_FOUR:#7DD1E3;[/newclass]
[newclass=.CHARACTER_FOUR .dracPlotFront img, .CHARACTER_FOUR .dracPlotBody div b] border-color:var(--CHARACTER_FOUR)!important; color:var(--CHARACTER_FOUR)!important; [/newclass]
[newclass=.CHARACTER_FOUR .dracPlotAnimation, .CHARACTER_FOUR .dracPlotBody div::-webkit-scrollbar-thumb] background-color:var(--CHARACTER_FOUR)!important; [/newclass]
[attr="class","CHARACTER_FOUR"]
[attr="class","dracPlotBox"]
[attr="class","dracPlotFront"]
firstname lastname
firstname lastname
[attr="class","dracPlotBody"]
lorem Dracula-la-la-la-la Dracula-la-la-la-la you would be a bit thirsty, your heart might feel weird you are under fear now, You better ru-ru-ru-ru-ru-ru-ru-run yeah, the moment you feel that breath yeah, push him away quickly yeah, the more you acknowledge, the more he enjoys it, You better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you Dracula-la-la-la-la Dracula, don’t look behind you Dracula You better ru-ru-ru-ru-ru-ru-ru-run Dracula, you have to follow the sun Dracula You better ru-ru-ru-ru-ru-ru-ru-run kiss me trust me, this isn’t a dream look at me love me, born again Dracula-la-la-la-la [break][break]
subtitle
lorem Dracula-la-la-la-la Dracula-la-la-la-la you would be a bit thirsty, your heart might feel weird you are under fear now, You better ru-ru-ru-ru-ru-ru-ru-run yeah, the moment you feel that breath yeah, push him away quickly yeah, the more you acknowledge, the more he enjoys it, You better ru-ru-ru-ru-ru-ru-ru-run hold me trust me, hold my hand look at me love me, I’m protecting you Dracula-la-la-la-la Dracula, don’t look behind you Dracula You better ru-ru-ru-ru-ru-ru-ru-run Dracula, you have to follow the sun Dracula You better ru-ru-ru-ru-ru-ru-ru-run kiss me trust me, this isn’t a dream look at me love me, born again Dracula-la-la-la-la [break][break]
seeking
what'cha lookin' for?[attr="class","dracPlotAnimation"]
[attr="class","dracCredit"]SELKIE
[newclass=.dracAbout] width:475px; padding:50px; background-color:#333; color:#eee; font:10px verdana; text-align:justify; [/newclass]
[newclass=.dracPlotter] width:525px; padding:25px; display:flex; overflow:auto; background-color:#eee; [/newclass]
[newclass=.dracPlotBox] width:250px; height:225px; margin-right:25px; position:relative; overflow:hidden; display:flex; flex-flow:row wrap; [/newclass]
[newclass=.dracPlotFront] width:275px; height:225px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; background-color:#333; position:relative; [/newclass]
[newclass=.dracPlotFront img] width:100px; height:100px; border-radius:100%; padding:10px; border:2px solid #ccc; position:absolute; [/newclass]
[newclass=.dracPlotFront span] font:400 18px quicksand; color:#eaeaeaea; position:absolute; bottom:15px; [/newclass]
[newclass=.dracPlotAnimation] background-color:#ccc; width:500px; height:500px; position:absolute; margin-top:200px; transition:1s ease; -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%); clip-path: polygon(0 0, 0% 100%, 100% 100%); transition-delay:.5s; [/newclass]
[newclass=.dracPlotBox:hover .dracPlotAnimation] margin-top:-250px; transition:.5s ease; [/newclass]
[newclass=.dracPlotBody] width:230px; height:205px; background-color:#eee; position:absolute; z-index:1; top:10px; left:10px; opacity:0; transition:.5s ease; [/newclass]
[newclass=.dracPlotBox:hover .dracPlotBody] opacity:1; transition:.5s ease; transition-delay:.5s; [/newclass]
[newclass=.dracPlotBody div] margin:10px; height:185px; padding-right:10px; overflow:auto; font:400 11px/19px roboto; color:#6a6a6a; text-align:justify; [/newclass]
[newclass=.dracPlotBody div b] font:700 12px/15px quicksand; color:#aaa; [/newclass]
[newclass=.dracPlotBody div h1] margin:0px; color:#aaa; font:400 15px quicksand; text-align:center; [/newclass]
[newclass=.dracPlotBody div h2] margin:0px; display:inline; font:400 10px/8px raleway; text-transform:lowercase; background-color:#ddd; padding:3px 7px; margin-left:5px; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar] width:11px; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar-thumb] border:5px solid #eee; [/newclass]
[newclass=.dracPlotBody div::-webkit-scrollbar-track] background-color:#ccc; border:5px solid #eee; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar] height:11px; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar-thumb] border:1px solid #ddd; background-color:#fafafa; [/newclass]
[newclass=.dracPlotter::-webkit-scrollbar-track] background-color:#ddd; border:0px;[/newclass]
[newclass=.dracCredit] font:bold 7px roboto; margin-left:500px; [/newclass]
[newclass=.dracCredit a] font:bold 7px roboto!important; [/newclass]