posted Dec 16, 2018 20:03:24 GMT -6 in [JCINK] snake eyes
[googlefont=Roboto:400,400i,600,700|Raleway:200|Roboto+Condensed:400,700]
[attr="class","selk-jc-snake-eyes"]
[googlefont=Roboto:400,400i,700|Montserrat:800] [newclass=.snakeEyesPost] --snakeEyesAccent:#DE1B2E; [/newclass] [newclass=.se-LIGHTVER] --snakeEyesBG:#ececec; --snakeEyesLightBG:#f3f3f3; --snakeEyesBorder:#ddd; --snakeEyesText:#6a6a6a; --snakeEyesLightText:#aaa; --snakeEyesH2:#3a3a3a; --snakeEyesShadow:#fff; [/newclass] [newclass=.se-DARKVER] --snakeEyesBG:#333; --snakeEyesLightBG:#444; --snakeEyesBorder:#666; --snakeEyesText:#aaa; --snakeEyesLightText:#888; --snakeEyesH2:#eee; --snakeEyesShadow:#222; [/newclass] [newclass=.snakeEyesPost] width:500px; background-color:#ececec; background-color:var(--snakeEyesBG); border-radius:10px; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:relative; overflow:hidden; [/newclass] [newclass=.snakeEyesHeader] display:flex; flex-flow:row wrap; overflow:hidden; [/newclass] [newclass=.snakeEyesHeader img] width:100px; height:100px; border-radius:100%; padding:7.5px; background-color:var(--snakeEyesLightBG);border:3px solid #ddd; border:3px solid var(--snakeEyesBorder); border-right:3px solid var(--snakeEyesAccent); border-radius-top-left:0; [/newclass] [newclass=.snakeEyesHeader div] height:205px; width:205px; border-radius:100%; display:flex; align-items:center; flex-shrink:0; justify-content:center; margin-left:-35px; margin-top:-35px; [/newclass] [newclass=.snakeEyesHeader div:after] content:''; position:absolute; height:190px; width:190px; border:5px dashed var(--snakeEyesAccent); border-radius:100%; animation:8s linear infinite snakeEyesSpin; animation-play-state:paused; } @keyframes snakeEyesSpin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); }[/newclass] [newclass=.snakeEyesPost:hover .snakeEyesHeader div:after] animation-play-state:running; [/newclass] [newclass=.snakeEyesHeader span] height:170px; display:flex; flex-flow:column nowrap; justify-content:flex-end; [/newclass] [newclass=.snakeEyesHeader h1] width:280px; height:75px; margin:25px; text-align:left; font:800 50px/50px Montserrat; text-transform:uppercase; color:var(--snakeEyesAccent); text-shadow: -1px -1px 0 var(--snakeEyesShadow), 1px -1px 0 var(--snakeEyesShadow), -1px 1px 0 var(--snakeEyesShadow), 1px 1px 0 var(--snakeEyesShadow); [/newclass] [newclass=.snakeEyesHeader h2] margin:-20px 0px 0px 0px; width:280px; font:bold 30px 'Signerica Fat'; color:#3a3a3a; color:var(--snakeEyesH2); text-shadow: -1px -1px 0 var(--snakeEyesShadow), 1px -1px 0 var(--snakeEyesShadow), -1px 1px 0 var(--snakeEyesShadow), 1px 1px 0 var(--snakeEyesShadow); } @font-face { font-family:Signerica Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype');[/newclass] [newclass=.snakeEyesBody div] padding:50px; margin:25px; border-radius:10px; text-align:justify; background-color:var(--snakeEyesLightBG); color:#6a6a6a; color:var(--snakeEyesText); font:400 11px/15px roboto; [/newclass] [newclass=.snakeEyesBody div:nth-child(2)] color:var(--snakeEyesLightText); text-align:justify; padding:10px 25px; margin:25px; display:flex; justify-content:space-between; align-items:center; [/newclass] [newclass=.snakeEyesBody div a] font:800 11px/15px roboto; color:var(--snakeEyesAccent); padding:0px 0px 0px 25px; margin:0px; [/newclass] [newclass=.snakeEyesBody b] font:700 11px/15px roboto; color:var(--snakeEyesAccent); [/newclass] [newclass=.snakeEyesBody i] color:var(--snakeEyesLightText); border-bottom:1px solid var(--snakeEyesAccent); [/newclass] [newclass=.snakeEyesCredit] font:700 7px roboto; margin-left:425px; [/newclass] [newclass=.snakeEyesCredit a] font:700 7px roboto!important; [/newclass]
[attr="class","abc-selk-jc-contain"]
snake eyes
[attr="class","abc-selk-jc-rules"]
[attr="class","abc-selk-jc-body"]
[attr="class","abc-selk-jc-text"] honestly, this template still feels so unfinished to me for some reason cjdjkfslakr. but i'm posting it anyways. #selfcare.
the icon is, of course, 100 by 100 pixels. if you're going to edit the lyrics, try to keep each line around the same length as the demo -- i don't think it'll break, but it might look wonky.
also! this template has built-in dark & light modes that you can swap between without getting into the css -- just change se-LIGHTVER to se-DARKVER in the div class at the top or vice versa.
the icon is, of course, 100 by 100 pixels. if you're going to edit the lyrics, try to keep each line around the same length as the demo -- i don't think it'll break, but it might look wonky.
also! this template has built-in dark & light modes that you can swap between without getting into the css -- just change se-LIGHTVER to se-DARKVER in the div class at the top or vice versa.
[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinkposting [HASH]jcinklightposting
[attr="class","abc-selk-jc-colorpickers"]
[attr="class","abc-selk-jc-color"] #DE1B2E
[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"]
[newclass=.selk-jc-snake-eyes .abc-selk-jc-contain h1, .selk-jc-snake-eyes .abc-selk-jc-hash a, .selk-jc-snake-eyes .abc-selk-jc-rules h2]color:#DE1B2E!important;[/newclass] [newclass=.selk-jc-snake-eyes .abc-selk-jc-link]background-color:#DE1B2E!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] edit as much as you want! don't touch the credits! i'd love to see how you use it!
[dohtml]
<style>
.snakeEyesPost { --snakeEyesAccent:#DE1B2E; }
</style>
<div align="center">
<div class="se-LIGHTVER">
<div class="snakeEyesPost">
<div class="snakeEyesHeader">
<div>
<img style="width:100px; height:100px;" src="https://image.ibb.co/csnNFS/19.png">
</div>
<span>
<h1>you kept rolling</h1>
<h2>snake eyes</h2>
</span>
</div>
<div class="snakeEyesBody">
<div>
can't you see? everything is a mess, when you hide all the lies that you thought you could bury. <br><br>
you kept rolling snake eyes, <b>you kept rolling snake eyes</b>, one too many times. one too many times. and all you see are the cards that you can play, and you thought you'd get away with these games. and all you see are the cards there in your hand, and you thought that you have everything planned. <br><br>
can't you see? everything is a mess, when you hide all the lies that you thought you could bury. you kept rolling snake eyes. and all you see are the cards that you can play, and you thought you'd get away with these games. and all you see are the cards there in your hand, and you thought that you have everything planned. <br><br>
you kept rolling snake eyes, you kept rolling snake eyes, you kept rolling snake eyes, you kept rolling snake eyes, <i>one too many times</i>.
</div>
<div>
write your notes here! they autoexpand.
@admin
</div></div></div></div><div class="snakeEyesCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div></div>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700|Montserrat:800" rel="stylesheet">
</head>
<style>
@keyframes snakeEyesSpin {
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
.se-LIGHTVER { --snakeEyesBG:#ececec; --snakeEyesLightBG:#f3f3f3; --snakeEyesBorder:#ddd; --snakeEyesText:#6a6a6a; --snakeEyesLightText:#aaa; --snakeEyesH2:#3a3a3a; --snakeEyesShadow:#fff; }
.se-DARKVER { --snakeEyesBG:#333; --snakeEyesLightBG:#444; --snakeEyesBorder:#666; --snakeEyesText:#aaa; --snakeEyesLightText:#888; --snakeEyesH2:#eee; --snakeEyesShadow:#222; }
.snakeEyesPost { width:500px; background-color:#ececec; background-color:var(--snakeEyesBG); border-radius:10px; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.snakeEyesHeader { display:flex; flex-flow:row wrap; overflow:hidden; }
.snakeEyesHeader img { width:100px; height:100px; border-radius:100%; padding:7.5px; background-color:var(--snakeEyesLightBG);border:3px solid #ddd; border:3px solid var(--snakeEyesBorder); border-right:3px solid var(--snakeEyesAccent); border-radius-top-left:0; }
.snakeEyesHeader div { height:205px; width:205px; border-radius:100%; display:flex; align-items:center; flex-shrink:0; justify-content:center; margin-left:-35px; margin-top:-35px; }
.snakeEyesHeader div:after { content:''; position:absolute; height:190px; width:190px; border:5px dashed var(--snakeEyesAccent); border-radius:100%; animation:8s linear infinite snakeEyesSpin; animation-play-state:paused; }
.snakeEyesPost:hover .snakeEyesHeader div:after { animation-play-state:running; }
.snakeEyesHeader span { height:170px; display:flex; flex-flow:column nowrap; justify-content:flex-end; }
.snakeEyesHeader h1 { width:280px; height:75px; margin:25px; text-align:left; font:800 50px/50px Montserrat; text-transform:uppercase; color:var(--snakeEyesAccent); text-shadow: -1px -1px 0 var(--snakeEyesShadow), 1px -1px 0 var(--snakeEyesShadow), -1px 1px 0 var(--snakeEyesShadow), 1px 1px 0 var(--snakeEyesShadow); }
.snakeEyesHeader h2 { margin:-20px 0px 0px 0px; width:280px; font:bold 30px 'Signerica Fat'; color:#3a3a3a; color:var(--snakeEyesH2); text-shadow: -1px -1px 0 var(--snakeEyesShadow), 1px -1px 0 var(--snakeEyesShadow), -1px 1px 0 var(--snakeEyesShadow), 1px 1px 0 var(--snakeEyesShadow); } @font-face { font-family:Signerica Fat; src:url(//dl.dropbox.com/s/o5tlpkcxt7qwgj1/Signerica_Fat.ttf) format('truetype');}
.snakeEyesBody div { padding:50px; margin:25px; border-radius:10px; text-align:justify; background-color:var(--snakeEyesLightBG); color:#6a6a6a; color:var(--snakeEyesText); font:400 11px/15px roboto; }
.snakeEyesBody div:nth-child(2) { color:var(--snakeEyesLightText); text-align:justify; padding:10px 25px; margin:25px; display:flex; justify-content:space-between; align-items:center; }
.snakeEyesBody div a { font:800 11px/15px roboto; color:var(--snakeEyesAccent); padding:0px 0px 0px 25px; margin:0px; }
.snakeEyesBody b { font:700 11px/15px roboto; color:var(--snakeEyesAccent); }
.snakeEyesBody i { color:var(--snakeEyesLightText); border-bottom:1px solid var(--snakeEyesAccent); }
.snakeEyesCredit { font:700 7px roboto; margin-left:425px; }
.snakeEyesCredit a { font:700 7px roboto!important; }
</style>[/dohtml]
[attr="class","abc-selk-jc-link"] [attr="class","lnr lnr-link"]
[googlefont=Roboto:400,400i,700|Montserrat:800] [newclass=.snakeEyesPost] --snakeEyesAccent:#DE1B2E; [/newclass]
[attr="class","se-LIGHTVER"]
[attr="class","snakeEyesPost"]
[attr="class","snakeEyesHeader"]
you kept rolling
snake eyes
[attr="class","snakeEyesBody"]
can't you see? everything is a mess, when you hide all the lies that you thought you could bury.
you kept rolling snake eyes, you kept rolling snake eyes, one too many times. one too many times. and all you see are the cards that you can play, and you thought you'd get away with these games. and all you see are the cards there in your hand, and you thought that you have everything planned.
can't you see? everything is a mess, when you hide all the lies that you thought you could bury. you kept rolling snake eyes. and all you see are the cards that you can play, and you thought you'd get away with these games. and all you see are the cards there in your hand, and you thought that you have everything planned.
you kept rolling snake eyes, you kept rolling snake eyes, you kept rolling snake eyes, you kept rolling snake eyes, one too many times.
you kept rolling snake eyes, you kept rolling snake eyes, one too many times. one too many times. and all you see are the cards that you can play, and you thought you'd get away with these games. and all you see are the cards there in your hand, and you thought that you have everything planned.
can't you see? everything is a mess, when you hide all the lies that you thought you could bury. you kept rolling snake eyes. and all you see are the cards that you can play, and you thought you'd get away with these games. and all you see are the cards there in your hand, and you thought that you have everything planned.
you kept rolling snake eyes, you kept rolling snake eyes, you kept rolling snake eyes, you kept rolling snake eyes, one too many times.
write your notes here! they autoexpand. vriska
[attr="class","snakeEyesCredit"]SELKIE