angel on fire

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

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

[attr="class","abc-jc-selk-text"]and the jcink version! i should have jcink conversions up for everything in the project with the exception of tabbed stuff, because listen, i just now figured out ptabs & radio classes terrify me--

remember that you'll only have to replace the one hex code at the top of the template. if you'd rather not have the icon animating, delete the first .aofSidebar img class under the accent color.

[attr="class","abc-jc-selk-hash"] [HASH]lightposting [HASH]jcinkposting [HASH]icon [HASH]singleaccent [HASH]animation [HASH]noscroll [HASH]montserrat [HASH]opensans [HASH]pattern

[attr="class","abc-jc-selk-colorpickers"]

[attr="class","abc-jc-selk-color"]

#AF5D69

[attr="class","abc-jc-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 var(--aofAccent) to the desired hex code.

[googlefont=Roboto:700]

[attr="class","selk-code"]

edit as much as you want! don't touch the credits! i'd love to see how you use it!

[dohtml]
<style>

.angelonfire { --aofAccent:#AF5D69; }
.aofSidebar img { animation-play-state:running!important; }

</style>

<div align="center"><div class="angelonfire">
<div class="aofSidebar">

<img src="https://image.ibb.co/bUBicU/61.png">

<div>

@[tagged]

</div>
</div>
<div class="aofBody">
<div>

i woke up to another mess in the living room, broken bottles all around my feet. they came again in the night under crescent moon, didn't wake me in my sleep. 'cause they talk and drink and laugh 'bout things and fall in love in my backyard. i hide and cower in the corner, conversation's getting hard. 'cause nobody seems to ask about me anymore, and nobody seems to care 'bout anything i think. and nobody seems to recognize me in the crowd, in the background screaming, <b>"everybody, look at me!"</b> <br><br>

and i'm faded away, you know, <i>i used to be on fire</i>. and i'm faded away, you know, i used to be on fire. i'm standing in the ashes of who i used to be, and i'm faded away, you know, i used to be on fire. you know, i used to be on fire. you know, i used to be on fire, fire. <br><br>

i used to be a darling starlet like a centerpiece, had the whole world wrapped around my ring. i flew too closely to the sun that's setting in the east, and now i'm melting from my wings. 'cause i'd laugh and drink and talk 'bout things and fall in love in my backyard. now it's my own anxiety that makes the conversation hard. 'cause nobody seems to ask about me anymore, and nobody ever cares 'bout anything i think. and nobody seems to recognize me in the crowd, in the background screaming, "everybody, look at me!" and i'm faded away, you know, i used to be on fire.

</div>
<div>

and some notes go here! they autoexpand. so go wild, mon frere.

</div>
</div></div>
<div class="aofCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>
</div>

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i|Montserrat:700,700i');
.angelonfire { width:575px; border-radius:5px; background-color:#eee; overflow:hidden; display:flex; flex-flow:row wrap; }
.aofSidebar { width:200px; background-color:#5a5a5a; background-color:var(--aofAccent); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.aofSidebar img { width:100px; height:100px; position:absolute; z-index:1; padding:5px; background-color:#fafafa; border:10px solid #333; border-radius:100%; animation: aofpulse 5s infinite; animation-play-state:paused; } @keyframes aofpulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); } 50% { -moz-box-shadow: 0 0 0 50px rgba(0,0,0, 0); box-shadow: 0 0 0 50px rgba(0,0,0, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0); box-shadow: 0 0 0 0 rgba(0,0,0, 0); }}
.aofSidebar div:last-child { display:block; width:190px; overflow-wrap: break-word; word-wrap: break-word; text-transform:lowercase; font-style:italic; text-align:left; position:absolute; bottom:-5px; left:5px; }
.aofSidebar div:last-child a { font:700 30px/25px montserrat; font-style:italic; text-transform:lowercase; color:#fafafa; text-shadow:-1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333; }
.aofSidebar:before { content:''; position:absolute; width:100%; height:500px; bottom:0px; left:0px; background:url(https://image.ibb.co/mZ7zmp/1_by_Cold_Love98_1_copy.png); opacity:.15; }
.aofBody { width:300px; }
.aofBody b { font:700 10px montserrat; color:var(--aofAccent); }
.aofBody i { color:#999; border-bottom:1px solid var(--aofAccent); }
.aofBody div:first-child { width:272px; min-height:125px; margin:25px 25px 0px 25px; padding:0px 25px; border-left:1px solid #ddd; border-right:1px solid #ddd; font:400 10px open sans; text-align:justify; color:#6a6a6a; }
.aofBody div:last-child { width:325px; text-align:justify; font:400 10px open sans; color:#aaa; padding:25px; }
.aofCredit { font:bold 7px roboto; margin-left:500px; }
.aofCredit a { font:bold 7px roboto!important; }
</style>[/dohtml]

[attr="class","abc-jc-selk-link"] [attr="class","lnr lnr-link"]

[newclass=.abc-jc-selk-contain] --abc-jc-selk-accent:#AF5D69; [/newclass] [newclass=.abc-jc-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-reverse wrap; justify-content:space-between; position:relative; overflow:hidden; [/newclass] [newclass=.abc-jc-selk-contain h1] margin:0px; width:100%; display:flex; flex-flow:row wrap; align-items:center; font:200 32px/32px Raleway; color:var(--abc-jc-selk-accent); [/newclass] [newclass=.abc-jc-selk-contain h1:before] content:''; width:10px; height:1px; background-color:#ccc; flex-grow:2; margin-right:25px; [/newclass] [newclass=.abc-jc-selk-contain h1:after] content:'-Y-Z'; color:#ccc; [/newclass] [newclass=.abc-jc-selk-body] width:350px; border-radius:5px; color:#aaa; font:400 11px roboto; text-align:justify; margin-top:25px; [/newclass] [newclass=.abc-jc-selk-text] background-color:#fafafa; padding:25px; border-radius:5px; [/newclass] [newclass=.abc-jc-selk-hash] margin:25px 0px; text-align:left; [/newclass] [newclass=.abc-jc-selk-hash a] display:inline-block; height:10px; padding:5px 7px; margin:0px 3px 5px 0px; color:var(--abc-jc-selk-accent); background-color:#ddd; border-radius:2px; text-transform:uppercase; font:600 10px/10px roboto; [/newclass] [newclass=.abc-jc-selk-colorpickers] width:325px; display:flex; flex-flow:row wrap; align-items:flex-start; [/newclass] [newclass=.abc-jc-selk-color] display:flex; flex-flow:row nowrap; width:320px; [/newclass] [newclass=.abc-jc-selk-color div] height:10px; display:inline-block; margin-right:5px; background-color:#ccc; [/newclass] [newclass=.abc-jc-selk-color span] height:10px; width:38px; font:600 9px/10px Roboto; color:#ccc; [/newclass] [newclass=.abc-jc-selk-var] width:340px; font:400 10px/13px roboto; margin-top:25px; padding-right:10px; height:25px; overflow:auto; [/newclass] [newclass=.abc-jc-selk-var::-webkit-scrollbar] width:5px; border:0px; [/newclass] [newclass=.abc-jc-selk-var::-webkit-scrollbar-thumb] background-color:#999; border:0px; [/newclass] [newclass=.abc-jc-selk-var::-webkit-scrollbar-track] background-color:#ddd; border:0px; [/newclass] [newclass=.abc-jc-selk-rules] margin:25px 0px 0px 0px; text-align:left; width:125px; display:flex; justify-content:flex-start; align-self:stretch; align-items:flex-end; flex-flow:column nowrap; border-left:1px solid #ddd; [/newclass] [newclass=.abc-jc-selk-rules h2] margin:0px; display:block; width:50px; height:50px; background-color:var(--abc-jc-selk-accent); border-radius:5px; [/newclass] [newclass=.abc-jc-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; --abc-jc-selk-accent:#AF5D69; [/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-jc-selk-link] position:absolute; bottom:0px; left:0px; height:45px; width:45px!important; background-color:var(--abc-jc-selk-accent); display:flex!important; align-items:center!important; justify-content:center!important; border-radius:0px; [/newclass] [newclass=.abc-jc-selk-link i] font-size:20px; color:#fafafa; [/newclass]

[googlefont=Montserrat:700,700i|Open+Sans:400,400i,700] [newclass=.angelonfire] --aofAccent:#AF5D69; [/newclass] [newclass=.aofSidebar img] animation-play-state:running!important;[/newclass]

[attr="class","angelonfire"]

[attr="class","aofSidebar"]

@selkie

[attr="class","aofBody"]

i woke up to another mess in the living room, broken bottles all around my feet. they came again in the night under crescent moon, didn't wake me in my sleep. 'cause they talk and drink and laugh 'bout things and fall in love in my backyard. i hide and cower in the corner, conversation's getting hard. 'cause nobody seems to ask about me anymore, and nobody seems to care 'bout anything i think. and nobody seems to recognize me in the crowd, in the background screaming, "everybody, look at me!"

and i'm faded away, you know, i used to be on fire. and i'm faded away, you know, i used to be on fire. i'm standing in the ashes of who i used to be, and i'm faded away, you know, i used to be on fire. you know, i used to be on fire. you know, i used to be on fire, fire.

i used to be a darling starlet like a centerpiece, had the whole world wrapped around my ring. i flew too closely to the sun that's setting in the east, and now i'm melting from my wings. 'cause i'd laugh and drink and talk 'bout things and fall in love in my backyard. now it's my own anxiety that makes the conversation hard. 'cause nobody seems to ask about me anymore, and nobody ever cares 'bout anything i think. and nobody seems to recognize me in the crowd, in the background screaming, "everybody, look at me!" and i'm faded away, you know, i used to be on fire.

and some notes go here! they autoexpand. so go wild, mon frere.

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

[newclass=.angelonfire] width:575px; border-radius:5px; background-color:#eee; overflow:hidden; display:flex; flex-flow:row wrap; [/newclass] [newclass=.aofSidebar] width:200px; background-color:#5a5a5a; background-color:var(--aofAccent); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; [/newclass] [newclass=.aofSidebar img] width:100px; height:100px; position:absolute; z-index:1; padding:5px; background-color:#fafafa; border:10px solid #333; border-radius:100%; animation: aofpulse 5s infinite; animation-play-state:paused; } @keyframes aofpulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); box-shadow: 0 0 0 0 rgba(0,0,0, 0.25); } 50% { -moz-box-shadow: 0 0 0 50px rgba(0,0,0, 0); box-shadow: 0 0 0 50px rgba(0,0,0, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0); box-shadow: 0 0 0 0 rgba(0,0,0, 0); }[/newclass] [newclass=.aofSidebar div:last-child] display:block; width:190px; overflow-wrap: break-word; word-wrap: break-word; text-transform:lowercase; font-style:italic; text-align:left; position:absolute; bottom:-5px; left:5px; [/newclass] [newclass=.aofSidebar div:last-child a] font:700 30px/25px montserrat; font-style:italic; text-transform:lowercase; color:#fafafa!important; text-shadow:-1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333, 1px 1px 0 #333; [/newclass] [newclass=.aofSidebar:before] content:''; position:absolute; width:100%; height:500px; bottom:0px; left:0px; background:url(https://image.ibb.co/mZ7zmp/1_by_Cold_Love98_1_copy.png); opacity:.15; [/newclass] [newclass=.aofBody] width:300px; [/newclass] [newclass=.aofBody b] font:700 10px montserrat; color:var(--aofAccent); [/newclass] [newclass=.aofBody i] color:#999; border-bottom:1px solid var(--aofAccent); [/newclass] [newclass=.aofBody div:first-child] width:272px; min-height:125px; margin:25px 25px 0px 25px; padding:0px 25px; border-left:1px solid #ddd; border-right:1px solid #ddd; font:400 10px open sans; text-align:justify; color:#6a6a6a; [/newclass] [newclass=.aofBody div:last-child] width:325px; text-align:justify; font:400 10px open sans; color:#aaa; padding:25px; [/newclass] [newclass=.aofCredit] font:bold 7px roboto; margin-left:500px; [/newclass] [newclass=.aofCredit a] font:bold 7px roboto!important; [/newclass]