unbelievable

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

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

[attr="class","abc-selk-jc-text"] i should do another template for this song & really make something super retro. >:U maybe someday™

the header image is 500 by 250 pixels! the scan lines in it are overlaid automatically -- if you don't like the effect, just delete the entire unb-img:before newclass.

[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinkplotting [HASH]jcinklightplotting [HASH]jcinksingleplotter

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

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

#7B5B6E

[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(--unb-accent-1) 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!

[dohtml]
<style>

.unb-contain { --unb-accent-1:#7B5B6E; }

</style>

<div align="center"><div class="unb-contain">
<div class="unb-img">

<img src="https://image.ibb.co/kaumoe/image.png" style="width:500px; height:250px;">

</div>

<div class="unb-app">

<a href="APPLICATION_LINK_HERE" title="VIEW MY APPLICATION"><span class="th th-user-3"></span></a>

</div>

<div class="unb-body">
<h1>

subtitle

<span>

this is as good as it gets

</span>
</h1>
<div>


when i was a kid i saved up all my dough so i could buy c-3po, <b>put mentos in my diet coke</b> in the backseat of the bus. when i was a kid i ate spaghetti-os, played laser tag and g.i. joes, and if you vowed "no girls allowed," then you could join the club. when i was a kid i spent my saturdays blowin' on nintendo games, the newest thing was "lion king," and <i>i could feel the love</i>. it's unbelievable, this is as good as it gets. it's unbelievable, don't know what's gonna happen next. it's unbelievable, you haven't seen nothing yet.
<br><br>

<h2>seeking</h2> it's unbelievable, it's unbelievable


</div>

<h1>

subtitle

<span>

don't know what's gonna happen next

</span>
</h1>

<div>



when i was a kid i dreamed of power wheels, stayed up late watching action films. and i won't lie, my friends and i, were too legit to quit. when i was a kid i lived for climbing trees, ate <b>dr. pepper jellybeans</b>. my favorite part of "jurassic park" was how <i>real the raptors looked</i>. when i was a kid i still had vhs, watched fresh prince and jazzy jeff zack. morris owned the first cell phone, and it was off the hook! it's unbelievable, this is as good as it gets. it's unbelievable, don't know what's gonna happen next. it's unbelievable, you haven't seen nothing yet. it's unbelievable, it's unbelievable.<br><br>

<h2>seeking</h2> it's unbelievable, it's unbelievable



</div>

</div></div>
<div class="unb-credit"><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=Montserrat+Alternates:600,700|Inconsolata:400,700|Roboto:400,400i,700" rel="stylesheet">
</head>
<style>
.unb-contain { width:520px; background-color:#fafafa; overflow:hidden; border:1px solid #d9d9d9; border-radius:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; position:relative; }
.unb-img { width:500px; height:250px; margin:10px 0px 11px 0px; position:relative; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow:hidden; }
.unb-img:before { content:''; position:absolute; width:500px; height:250px; background:url(https://image.ibb.co/mMY3io/3_copy.png); filter:invert(1); opacity:.1; left:0px; }
.unb-app { width:50px; height:50px; display:flex; align-items:center; justify-content:center; background-color:#fafafa; position:absolute; top:240px; border-radius:100%; border:1px solid #D9D9D9; }
.unb-app a { font-size:30px; font-family:"honeybee"!important; color:var(--unb-accent-1)!important; text-decoration:none!important; }
.unb-body { width:520px; background-color:#f6f6f6; padding:0px 0px 0px 0px; }
.unb-body h1 { margin:0px 0px; padding:25px 25px; display:flex; background-color:#eaeaea; flex-flow:column nowrap; outline:1px solid #d9d9d9; border:1px solid #fcfcfc; font:700 36px/36px montserrat alternates; color:#aaa; color:var(--unb-accent-1); text-shadow: -1px -1px 0 #fcfcfc, 1px -1px 0 #fcfcfc, -1px 1px 0 #fcfcfc, 1px 1px 0 #fcfcfc; }
.unb-body span { display:block; font:400 12px inconsolata; text-shadow: -1px -1px 0 #fcfcfc, 1px -1px 0 #fcfcfc, -1px 1px 0 #fcfcfc, 1px 1px 0 #fcfcfc; text-transform:uppercase; color:#aaa; }
.unb-body div { padding:50px; text-align:justify; font:400 12px roboto; color:#9a9a9a; }
.unb-body div h2 { margin:0px 10px; display:inline-block; background-color:#aaa; background-color:var(--unb-accent-1); padding:2px 10px; color:#F6F6F6; font:600 10px montserrat alternates; border-radius:2px; text-transform:lowercase; }
.unb-body div b { font:700 12px montserrat alternates; color:var(--unb-accent-1); text-shadow: -1px -1px 0 #fcfcfc, 1px -1px 0 #fcfcfc, -1px 1px 0 #fcfcfc, 1px 1px 0 #fcfcfc; }
.unb-body div i { color:#bbb; border-bottom:1px solid var(--unb-accent-1);}
.unb-credit { font:bold 7px roboto; margin-left:450px; }
.unb-credit a { font:bold 7px roboto!important; }
</style>
[/dohtml]

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

[newclass=.selk-jc-unbelievable .abc-selk-jc-contain h1, .selk-jc-unbelievable .abc-selk-jc-hash a, .selk-jc-unbelievable .abc-selk-jc-rules h2]color:#7B5B6E!important;[/newclass] [newclass=.selk-jc-unbelievable .abc-selk-jc-link]background-color:#7B5B6E!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+Alternates:600,700|Inconsolata:400,700|Roboto:400,400i,700] [newclass=.unb-contain] --unb-accent-1:#7B5B6E; [/newclass]

[attr="class","unb-contain"]

[attr="class","unb-img"]

[attr="class","unb-app"]

[attr="class","unb-body"]

subtitle this is as good as it gets

when i was a kid i saved up all my dough so i could buy c-3po, put mentos in my diet coke in the backseat of the bus. when i was a kid i ate spaghetti-os, played laser tag and g.i. joes, and if you vowed "no girls allowed," then you could join the club. when i was a kid i spent my saturdays blowin' on nintendo games, the newest thing was "lion king," and i could feel the love. it's unbelievable, this is as good as it gets. it's unbelievable, don't know what's gonna happen next. it's unbelievable, you haven't seen nothing yet.

seeking

it's unbelievable, it's unbelievable

subtitle don't know what's gonna happen next

when i was a kid i dreamed of power wheels, stayed up late watching action films. and i won't lie, my friends and i, were too legit to quit. when i was a kid i lived for climbing trees, ate dr. pepper jellybeans. my favorite part of "jurassic park" was how real the raptors looked. when i was a kid i still had vhs, watched fresh prince and jazzy jeff. zack morris owned the first cell phone, and it was off the hook! it's unbelievable, this is as good as it gets. it's unbelievable, don't know what's gonna happen next. it's unbelievable, you haven't seen nothing yet. it's unbelievable, it's unbelievable.

seeking

it's unbelievable, it's unbelievable

[attr="class","unb-credit"]SELKIE

[newclass=.unb-contain] width:520px; background-color:#fafafa; overflow:hidden; border:1px solid #d9d9d9; border-radius:5px; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; position:relative; [/newclass] [newclass=.unb-img:before] content:''; position:absolute; width:500px; height:250px; background:url(https://image.ibb.co/mMY3io/3_copy.png); filter:invert(1); opacity:.1; left:0px; [/newclass] [newclass=.unb-img] width:500px; height:250px; margin:10px 0px 11px 0px; position:relative; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow:hidden; [/newclass] [newclass=.unb-app] width:50px; height:50px; display:flex; align-items:center; justify-content:center; background-color:#fafafa; position:absolute; top:240px; border-radius:100%; border:1px solid #D9D9D9; [/newclass] [newclass=.unb-app a] font-size:30px; font-family:"honeybee"!important; color:var(--unb-accent-1)!important; text-decoration:none!important; [/newclass] [newclass=.unb-app a:before] content:'\e397'; [/newclass] [newclass=.unb-body] width:520px; background-color:#f6f6f6; padding:0px 0px 0px 0px; [/newclass] [newclass=.unb-body h1] margin:0px 0px; padding:25px 25px; display:flex; background-color:#eaeaea; flex-flow:column nowrap; outline:1px solid #d9d9d9; border:1px solid #fcfcfc; font:700 36px/36px montserrat alternates; color:#aaa; color:var(--unb-accent-1); text-shadow: -1px -1px 0 #fcfcfc, 1px -1px 0 #fcfcfc, -1px 1px 0 #fcfcfc, 1px 1px 0 #fcfcfc; [/newclass] [newclass=.unb-body span] display:block; font:400 12px inconsolata; text-shadow: -1px -1px 0 #fcfcfc, 1px -1px 0 #fcfcfc, -1px 1px 0 #fcfcfc, 1px 1px 0 #fcfcfc; text-transform:uppercase; color:#aaa; [/newclass] [newclass=.unb-body div] padding:50px; text-align:justify; font:400 12px roboto; color:#9a9a9a; [/newclass] [newclass=.unb-body div h2] margin:0px 10px; display:inline-block; background-color:#aaa; background-color:var(--unb-accent-1); padding:2px 10px; color:#F6F6F6; font:600 10px montserrat alternates; border-radius:2px; text-transform:lowercase; [/newclass] [newclass=.unb-body div b] font:700 12px montserrat alternates; color:var(--unb-accent-1); text-shadow: -1px -1px 0 #fcfcfc, 1px -1px 0 #fcfcfc, -1px 1px 0 #fcfcfc, 1px 1px 0 #fcfcfc; [/newclass] [newclass=.unb-body div i] color:#bbb; border-bottom:1px solid var(--unb-accent-1);[/newclass] [newclass=.unb-credit] font:bold 7px roboto; margin-left:450px; [/newclass] [newclass=.unb-credit a] font:bold 7px roboto!important; [/newclass] [newclass=.th]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]