keep on doin'

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

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

[attr="class","abc-selk-jc-text"] fun fact that illustrates the weird things i get focused on: the thing i spent the most time trying to get right is the gradient underline for italic classes. i've got my #priorities straight, as you can plainly see.

the three bottom sections are k-kind of...b-badly coded...so if they look weird while you're using that's. my fault. oops. edit the accents at the top of the template, the font icons are self-hosted so it doesn't matter if your site has them installed or not, you know the drill.

[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinkposting [HASH]jcinklightposting

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

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

#F6CAC9

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

#91A8D2

[attr="class","abc-selk-jc-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(--kodAccent1) and var(--kodAccent2) to the desired hex codes.

[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>
.kodPost { --kodAccent1:#F6CAC9; --kodAccent2:#91A8D2; }
</style>

<div align="center"><div class="kodPost">
<div class="kodGradient">
<div class="kodBody">
<div class="kodHeader">

<img src="https://image.ibb.co/gNwhFS/28.png">

</div>
<div>

You’re special, you’re innocent like a child You’re a prism that could absorb anything Just fill yourself with your own senses With that smile filled with excitement With those eyes filled with curiosity  Your clumsy yesterdays, your wandering todays Your answerless tomorrows, it’s okay  Just keep going Now listen to what’s inside The dreams that rise up They’re only going to you Feel yourself, like this Dance all you want, lightly Time spreads out far Only fill it with you  <b>Keep on doin’ doin’ what you do</b> <i>Keep on doin’ doin’ what you do</i> Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do <br><br>

Your life, your style, make it your own So no one can easily follow Don’t force yourself to fit some place else Come on baby, no matter what anyone says Just walk on your own path  Your exhausted mornings, your crazy afternoons Your lazy dawns, it’s okay  Just keep going Now listen to what’s inside The dreams that rise up They’re only going to you Feel yourself, like this Dance all you want, lightly Time spreads out far Only fill it with you Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do <br><br>

Color yourself with your own color Color yourself in this black and white world Draw out the sketched dreams You just keep on doin’ doin’ what you do Keep on Keep on Keep on Keep on  Just keep going Now listen to what’s inside The dreams that rise up They’re only going to you Feel yourself, like this Dance all you want, lightly Time spreads out far Only fill it with you

</div>
<div class="kodDetails">
<div><i class="th th-pencil-1-o"></i>
<div>

two hundred ninety one words

</div></div>
<div><i class="th th-user-3-o"></i>
<div>

@tagged

</div></div>
<div><i class="th th-music-1-o"></i>
<div>

keep on doin' by luna

</div></div>
</div>
<div class="kodNotes">

and you put your notes here! as (well, usually) always, they autoexpand, so write to your heart's desire.

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

<head>
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Montserrat:500" rel="stylesheet">
</head>
<style>
.kodPost { width:500px; background-color:#f1f1f1; padding:0px; border-radius:5px; }
.kodGradient { padding:25px; position:relative; background:linear-gradient(to bottom, var(--kodAccent1), var(--kodAccent2) ); border-radius:5px; }
.kodGradient:after { content:''; position:absolute; width:100%; height:100%; top:0px; left:0px; background:url(https://image.ibb.co/kVXPpT/lineart_refreshhh_x_LJ_07_copy.png); filter:invert(1); opacity:.15; border-radius:5px; }
.kodBody { background-color:#eee; padding:25px; position:relative; z-index:1; border-radius:5px; }
.kodHeader { width:100%; height:100px; background:linear-gradient(to bottom right, var(--kodAccent1), var(--kodAccent2)); border-radius:5px; margin-bottom:25px; }
.kodHeader img { border:10px solid #eee; margin-top:-10px; border-radius:100%; }
.kodBody div:nth-child(2) { padding:0px 25px; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5; text-align:justify; font:11px/15px roboto; color:#6a6a6a; }
.kodBody div b { font:500 11px/15px montserrat; color:var(--kodAccent2); }
.kodBody div i { color:#aaa; border-width:0px 0px 1px 0px;   border-style:solid; border-image:linear-gradient(to right, var(--kodAccent1), var(--kodAccent2)) 1; }
.kodNotes { text-align:justify; font:10px verdana; color:#aaa; padding:25px 0px 0px 0px; }
.kodDetails { display:flex; margin-top:25px; }
.kodDetails div { width:33%; padding:0px 10px 0px 10px; height:40px; position:relative; display:flex; align-items:center; z-index:2; border:0px; }
.kodDetails div:nth-child(2) { padding:0px 10px 0px 10px; }
.kodDetails div i { font-style:normal; border:0px; font-size:40px; line-height:40px; position:absolute; opacity:.5; margin-top:2px; color:#aaa; display:block; background:linear-gradient(to top, var(--kodAccent1), var(--kodAccent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.kodDetails div a { font:10px verdana!important; }
.kodDetails div div { padding:0px; width:auto; position:relative; border:0px!important; margin-left:auto; font:10px verdana!important; color:#aaa!important; text-align:left!important; height:40px; display:flex; align-items:center; padding:10px 0px 10px 25px!important; text-shadow:-1px -1px 0 #EEEEEE,  1px -1px 0 #EEEEEE, -1px 1px 0 #EEEEEE, 1px 1px 0 #EEEEEE; }
.kodCredit { font:bold 7px roboto; margin-left:400px; }
.kodCredit a { font:bold 7px roboto!important; }
</style>[/dohtml]

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

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

[googlefont=Montserrat:500] [newclass=.kodPost] --kodAccent1:#F6CAC9; --kodAccent2:#91A8D2; [/newclass]

[attr="class","kodPost"]

[attr="class","kodGradient"]

[attr="class","kodBody"]

[attr="class","kodHeader"]

You’re special, you’re innocent like a child You’re a prism that could absorb anything Just fill yourself with your own senses With that smile filled with excitement With those eyes filled with curiosity Your clumsy yesterdays, your wandering todays Your answerless tomorrows, it’s okay Just keep going Now listen to what’s inside The dreams that rise up They’re only going to you Feel yourself, like this Dance all you want, lightly Time spreads out far Only fill it with you Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do

Your life, your style, make it your own So no one can easily follow Don’t force yourself to fit some place else Come on baby, no matter what anyone says Just walk on your own path Your exhausted mornings, your crazy afternoons Your lazy dawns, it’s okay Just keep going Now listen to what’s inside The dreams that rise up They’re only going to you Feel yourself, like this Dance all you want, lightly Time spreads out far Only fill it with you Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do Keep on doin’ doin’ what you do

Color yourself with your own color Color yourself in this black and white world Draw out the sketched dreams You just keep on doin’ doin’ what you do Keep on Keep on Keep on Keep on Just keep going Now listen to what’s inside The dreams that rise up They’re only going to you Feel yourself, like this Dance all you want, lightly Time spreads out far Only fill it with you

[attr="class","kodDetails"]

[attr="class","th th-pencil-1-o"]

two hundred ninety one words

[attr="class","th th-user-3-o"]

@tagged

[attr="class","th th-music-1-o"]

keep on doin' by luna

[attr="class","kodNotes"] and you put your notes here! as (well, usually) always, they autoexpand, so write to your heart's desire.

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

[newclass=.kodPost] width:500px; background-color:#f1f1f1; padding:0px; border-radius:5px; [/newclass] [newclass=.kodGradient] padding:25px; position:relative; background:linear-gradient(to bottom, var(--kodAccent1), var(--kodAccent2) ); border-radius:5px; [/newclass] [newclass=.kodGradient:after] content:''; position:absolute; width:100%; height:100%; top:0px; left:0px; background:url(https://image.ibb.co/kVXPpT/lineart_refreshhh_x_LJ_07_copy.png); filter:invert(1); opacity:.15; border-radius:5px; [/newclass] [newclass=.kodBody] background-color:#eee; padding:25px; position:relative; z-index:1; border-radius:5px; [/newclass] [newclass=.kodHeader] width:100%; height:100px; background:linear-gradient(to bottom right, var(--kodAccent1), var(--kodAccent2)); border-radius:5px; margin-bottom:25px; [/newclass] [newclass=.kodHeader img] border:10px solid #eee; margin-top:-10px; border-radius:100%; [/newclass] [newclass=.kodBody div:nth-child(2)] padding:0px 25px; border-left:1px solid #d5d5d5; border-right:1px solid #d5d5d5; text-align:justify; font:11px/15px roboto; color:#6a6a6a; [/newclass] [newclass=.kodBody div b] font:500 11px/15px montserrat; color:var(--kodAccent2); [/newclass] [newclass=.kodBody div i] color:#aaa; border-width:0px 0px 1px 0px; border-style:solid; border-image:linear-gradient(to right, var(--kodAccent1), var(--kodAccent2)) 1; [/newclass] [newclass=.kodNotes] text-align:justify; font:10px verdana; color:#aaa; padding:25px 0px 0px 0px; [/newclass] [newclass=.kodDetails] display:flex; margin-top:25px; [/newclass] [newclass=.kodDetails div] width:33%; padding:0px 10px 0px 10px; height:40px; position:relative; display:flex; align-items:center; z-index:2; border:0px; [/newclass] [newclass=.kodDetails div:nth-child(2)] padding:0px 10px 0px 10px; [/newclass] [newclass=.kodDetails div i] font-style:normal; border:0px; font-size:40px; line-height:40px; position:absolute; opacity:.5; margin-top:2px; color:#aaa; display:block; background:linear-gradient(to top, var(--kodAccent1), var(--kodAccent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; [/newclass] [newclass=.kodDetails div a] font:10px verdana!important; [/newclass] [newclass=.kodDetails div div] padding:0px; width:auto; position:relative; border:0px!important; margin-left:auto; font:10px verdana!important; color:#aaa!important; text-align:left!important; height:40px; display:flex; align-items:center; padding:10px 0px 10px 25px!important; text-shadow:-1px -1px 0 #EEEEEE, 1px -1px 0 #EEEEEE, -1px 1px 0 #EEEEEE, 1px 1px 0 #EEEEEE; [/newclass] [newclass=.kodCredit] font:bold 7px roboto; margin-left:400px; [/newclass] [newclass=.kodCredit a] font:bold 7px roboto!important; [/newclass] [newclass=.kodHoneybee]speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale } @font-face { font-family: "honeybee";src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot");src:url("//dl.dropbox.com/s/0l8lnm6qy7vzwn7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/504hc3yd80hv4ux/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/2f5jbp3v8tjk5hf/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/nyfekn9fqo1wid2/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;[/newclass] [newclass=.th-pencil-1-o:before]content: "\e276"; font-family:"honeybee";[/newclass] [newclass=.th-user-3-o:before]content: "\e398"; font-family:"honeybee";[/newclass] [newclass=.th-music-1-o:before]content: "\e216"; font-family:"honeybee";[/newclass]