[JCINK] two birds

« Prev
1
Next »

posted Dec 16, 2018 23:55:49 GMT -6 in [JCINK] two birds

[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]

[attr="class","selk-jc-two-birds"]

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

two birds

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

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

[attr="class","abc-selk-jc-text"] might make a matching post/tracker template for this someday, tbh. i wanna mess around w/ this style more.

icons are 100 by 100. all colors are defined in the ID above each character section -- i would also recommend changing the default class names of character_one, character_two, etc. to the names of the respective characters, as it makes editing easier.

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

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

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

#346CA4

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

#24347C

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

#B483CD

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

#693C7D

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

#EC2434

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

#A42C34

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

#94DCD4

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

#04747C

[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 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!

[dohtml]<div align="center"><div class="selkPlotter">

<style>
#CHARACTER_ONE {--two-birds-accent-1:#94DCD4; --two-birds-accent-2:#04747C; }
</style>
<div id="CHARACTER_ONE"><div class="selkPlotBox">

<img src="https://image.ibb.co/hQH6aS/30.png">

<h1>firstname</h1>

<div class="selkPlotBody">
<div>

<h2>subtitle</h2>

two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry. <br><br>
<h3>seeking</h3> some stuff here.

<h2>subtitle</h2>
one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...<br><br>

<h3>seeking</h3> some stuff here.
</div>
</div>
</div></div>

<style>
#CHARACTER_TWO {--two-birds-accent-1:#EC2434; --two-birds-accent-2:#A42C34; }
</style>
<div id="CHARACTER_TWO"><div class="selkPlotBox">

<img src="https://image.ibb.co/nAXNFS/14.png">

<h1>firstname</h1>

<div class="selkPlotBody">

<div>

<h2>subtitle</h2>
two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry. <br><br>
<h3>seeking</h3> some stuff here.

<h2>subtitle</h2>
one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...<br><br>

<h3>seeking</h3> some stuff here.

</div>
</div>
</div></div>


<style>
#CHARACTER_THREE {--two-birds-accent-1:#B483CD; --two-birds-accent-2:#693C7D; }
</style>
<div id="CHARACTER_THREE"><div class="selkPlotBox">

<img src="https://image.ibb.co/kypPUn/12.png">

<h1>firstname</h1>
<div class="selkPlotBody">
<div>

<h2>subtitle</h2>
two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry. <br><br>
<h3>seeking</h3> some stuff here.

<h2>subtitle</h2>
one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...<br><br>

<h3>seeking</h3> some stuff here.

</div>
</div>
</div></div>

<style>
#CHARACTER_FOUR {--two-birds-accent-1:#346CA4; --two-birds-accent-2:#24347C; }
</style>
<div id="CHARACTER_FOUR"><div class="selkPlotBox">

<img src="https://image.ibb.co/iUAypn/17.png">

<h1>firstname</h1>

<div class="selkPlotBody">
<div>

<h2>subtitle</h2>
two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry. <br><br>
<h3>seeking</h3> some stuff here.

<h2>subtitle</h2>
one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...<br><br>

<h3>seeking</h3> some stuff here.

</div>
</div>
</div></div>


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

<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700|Muli:200,300" rel="stylesheet">
</head>
<style>
.selkPlotter { --two-birds-accent-1:#ccc; --two-birds-accent-2:#333; }
.selkPlotter { width:575px; padding:25px; padding-bottom:25px; display:flex; overflow:auto; background-color:#eee;}
.selkPlotBox { width:175px; height:400px; margin-right:25px; position:relative; background-color:#aaa; background:linear-gradient( to bottom, var(--two-birds-accent-1), var(--two-birds-accent-2) ); display:flex; align-items:center; justify-content:center; border-radius:5px; }
.selkPlotBox img { position:absolute; overflow:hidden; width:100px; height:100px; border-radius:100%; background-color:#eee; padding:10px; box-shadow: 0px 50px rgba(255,255,255,.2); }
.selkPlotBox h1 { margin:0px; padding:0px 10px; position:absolute; bottom:25px; font:200 20px/18px muli; color:#fafafa; }
.selkPlotBody { width:155px; height:380px; margin:10px; border-radius:5px; background-color:#fafafa; position:absolute; display:flex; transform:scale(0); transform-origin: top left; -webkit-transform-origin: top left; top:0px; left:0px; transition:.5s ease; }
.selkPlotBox:hover .selkPlotBody { transform:scale(1); transition:.5s ease; }
.selkPlotBody div { margin:10px; padding-right:5px; overflow:auto; font:400 10px open sans; text-align:justify; color:#5a5a5a; }
.selkPlotBody h2 { display:block; margin:0px 10px 5px; font:300 12px muli; border-bottom:1px solid #ddd; text-align:center; color:var(--two-birds-accent-2); }
.selkPlotBody h3 { margin:0px; display:inline; padding:2px 5px; font:600 9px open sans; background-color:#eee; text-transform:uppercase; }
.selkPlotBody div::-webkit-scrollbar { width:5px; }
.selkPlotBody div::-webkit-scrollbar-thumb { background-color:#bbb; border:0px; }
.selkPlotBody div::-webkit-scrollbar-track { background-color:#ddd; border:0px; }
.selkPlotter::-webkit-scrollbar { height:10px; }
.selkPlotter::-webkit-scrollbar-thumb { background-color:#bbb; border:0px; }
.selkPlotter::-webkit-scrollbar-track { background-color:#ddd; border:0px; }
.selkCredit { font:bold 7px roboto; margin-left:550px; }
.selkCredit a { font:bold 7px roboto!important; }
</style>
[/dohtml]

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

[newclass=.selk-jc-two-birds .abc-selk-jc-contain h1, .selk-jc-two-birds .abc-selk-jc-hash a, .selk-jc-two-birds .abc-selk-jc-rules h2]color:#A42C34!important;[/newclass] [newclass=.selk-jc-two-birds .abc-selk-jc-link]background-color:#A42C34!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=Open+Sans:400,700|Muli:200,300]

[attr="class","selkPlotter"] [newclass=#CHARACTER_ONE]--two-birds-accent-1:#94DCD4; --two-birds-accent-2:#04747C; [/newclass]

[attr="id","CHARACTER_ONE"]

[attr="class","selkPlotBox"]

firstname

[attr="class","selkPlotBody"]

subtitle

two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry.

seeking

some stuff here.

subtitle

one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...

seeking

some stuff here.

[newclass=#CHARACTER_TWO]--two-birds-accent-1:#EC2434; --two-birds-accent-2:#A42C34; [/newclass]

[attr="id","CHARACTER_TWO"]

[attr="class","selkPlotBox"]

firstname

[attr="class","selkPlotBody"]

subtitle

two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry.

seeking

some stuff here.

subtitle

one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...

seeking

some stuff here.

[newclass=#CHARACTER_THREE]--two-birds-accent-1:#B483CD; --two-birds-accent-2:#693C7D; [/newclass]

[attr="id","CHARACTER_THREE"]

[attr="class","selkPlotBox"]

firstname

[attr="class","selkPlotBody"]

subtitle

two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry.

seeking

some stuff here.

subtitle

one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...

seeking

some stuff here.

[newclass=#CHARACTER_FOUR]--two-birds-accent-1:#346CA4; --two-birds-accent-2:#24347C; [/newclass]

[attr="id","CHARACTER_FOUR"]

[attr="class","selkPlotBox"]

firstname

[attr="class","selkPlotBody"]

subtitle

two birds on a wire. one tries to fly away, and the other watches him close from that wire. he says he wants to as well, but he is a liar. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds on a wire. one says come on, and the other says i'm tired. the sky is overcast, and i'm sorry.

seeking

some stuff here.

subtitle

one more or one less, nobody's worried. i'll believe it all, there's nothing i won't understand. i'll believe it all, i won't let go of your hand. two birds of a feather say that they're always gonna stay together. but one's never goin' to let go of that wire. he says that he will, but he's just a liar. two birds on a wire. one tries to fly away, and the other, watches him close from that wire. he says he wants to as well, but he is a liar. two birds on a wire, one tries to fly away, and the other...

seeking

some stuff here.

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

[newclass=.selkPlotter] --two-birds-accent-1:#ccc; --two-birds-accent-2:#333; [/newclass] [newclass=.selkPlotter] width:575px; padding:25px; padding-bottom:25px; display:flex; overflow:auto; background-color:#eee;[/newclass] [newclass=.selkPlotBox] width:175px; height:400px; margin-right:25px; position:relative; background-color:#aaa; background:linear-gradient( to bottom, var(--two-birds-accent-1), var(--two-birds-accent-2) ); display:flex; align-items:center; justify-content:center; border-radius:5px; [/newclass] [newclass=.selkPlotBox img] position:absolute; overflow:hidden; width:100px; height:100px; border-radius:100%; background-color:#eee; padding:10px; box-shadow: 0px 50px rgba(255,255,255,.2); [/newclass] [newclass=.selkPlotBox h1] margin:0px; padding:0px 10px; position:absolute; bottom:25px; font:200 20px/18px muli; color:#fafafa; [/newclass] [newclass=.selkPlotBody] width:155px; height:380px; margin:10px; border-radius:5px; background-color:#fafafa; position:absolute; display:flex; transform:scale(0); transform-origin: top left; -webkit-transform-origin: top left; top:0px; left:0px; transition:.5s ease; [/newclass] [newclass=.selkPlotBox:hover .selkPlotBody] transform:scale(1); transition:.5s ease; [/newclass] [newclass=.selkPlotBody div] margin:10px; padding-right:5px; overflow:auto; font:400 10px open sans; text-align:justify; color:#5a5a5a; [/newclass] [newclass=.selkPlotBody h2] display:block; margin:0px 10px 5px; font:300 12px muli; border-bottom:1px solid #ddd; text-align:center; color:var(--two-birds-accent-2); [/newclass] [newclass=.selkPlotBody h3] margin:0px; display:inline; padding:2px 5px; font:600 9px open sans; background-color:#eee; text-transform:uppercase; [/newclass] [newclass=.selkPlotBody div::-webkit-scrollbar] width:5px; [/newclass] [newclass=.selkPlotBody div::-webkit-scrollbar-thumb] background-color:#bbb; border:0px solid #eee; [/newclass] [newclass=.selkPlotBody div::-webkit-scrollbar-track] background-color:#ddd; [/newclass] [newclass=.selkPlotter::-webkit-scrollbar] height:10px; [/newclass] [newclass=.selkPlotter::-webkit-scrollbar-thumb] background-color:#bbb; border:0px solid #eee; [/newclass] [newclass=.selkPlotter::-webkit-scrollbar-track] background-color:#ddd; [/newclass] [newclass=.selkCredit] font:bold 7px roboto; margin-left:550px; [/newclass] [newclass=.selkCredit a] font:bold 7px roboto!important; [/newclass]