posted Dec 16, 2018 18:34:40 GMT -6 in [JCINK] reach for the moon
[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]
[attr="class","selk-jc-reachftm"]
[googlefont=Montserrat+Alternates:200,400,700|Montserrat:700|Open+Sans:400] [newclass=.rmisDirectory] --rmisAccent1:#D42434; --GROUP1NAME:#83C4A4; --GROUP2NAME:#A24C65; --GROUP3NAME:#093478; --GROUP4NAME:#E4AC14; --GROUP5NAME:#B483CD;[/newclass] [newclass=.GROUP1NAME h2, .GROUP1NAME i, .GROUP1NAME b] border-color:var(--GROUP1NAME)!important; color:var(--GROUP1NAME)!important;[/newclass] [newclass=.GROUP2NAME h2, .GROUP2NAME i, .GROUP2NAME b] border-color:var(--GROUP2NAME)!important; color:var(--GROUP2NAME)!important;[/newclass] [newclass=.GROUP3NAME h2, .GROUP3NAME i, .GROUP3NAME b] border-color:var(--GROUP3NAME)!important; color:var(--GROUP3NAME)!important;[/newclass] [newclass=.GROUP4NAME h2, .GROUP4NAME i, .GROUP4NAME b] border-color:var(--GROUP4NAME)!important; color:var(--GROUP4NAME)!important;[/newclass] [newclass=.GROUP5NAME h2, .GROUP5NAME i, .GROUP5NAME b] border-color:var(--GROUP5NAME)!important; color:var(--GROUP5NAME)!important;[/newclass] [newclass=.rmisDirectory] width:500px; height:400px; background-color:#eaeaea; overflow:hidden; [/newclass] [newclass=.rmisDirectory h1] margin:0px; height:50px; display:flex; align-items:center; justify-content:space-between; background-color:#3a3a3a; font:200 32px Montserrat Alternates; padding:25px 50px; color:#fafafa; [/newclass] [newclass=.rmisDirectory h1 div] width:100px; height:100px; display:flex; align-items:center; justify-content:center; background-color:var(--rmisAccent1); margin-right:-50px; [/newclass] [newclass=.rmisDirectory h1 div img] width:50px; height:50px; border-radius:100%; border:5px solid #eaeaea; [/newclass] [newclass=.rmisInfo] width:100%; height:300px; display:flex; align-items:center; justify-content:space-between; [/newclass] [newclass=.rmisBio] width:50%; height:100%; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; [/newclass] [newclass=.rmisBio span] display:block; width:92%; height:38px; padding:10px; display:flex; align-items:center; justify-content:space-between; [/newclass] [newclass=.rmisBio span a] width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:18px; background-color:#f4f4f4; border-radius:5px; color:var(--rmisAccent1); [/newclass] [newclass=.rmisBio div] width:190px; height:200px; padding-right:10px; align-self:flex-end; background-color:#f4f4f4; border:25px solid #f4f4f4; text-align:justify; font:400 12px/18px open sans; color:#7a7a7a; overflow:auto; [/newclass] [newclass=.rmisRoster] width:50%; height:100%; background-color:#efefef; display:flex; flex-flow:column wrap; overflow:auto; [/newclass] [newclass=.rmisRoster div] width:230px; padding:7px 7px 0px 0px; display:flex; align-items:center; text-align:left; justify-content:space-between; [/newclass] [newclass=.rmisRoster div img] width:50px!important; height:50px!important; border-radius:5px; [/newclass] [newclass=.rmisRoster h2, h3] width:150px; margin:0px; [/newclass] [newclass=.rmisRoster h2] font:400 12px/6px Montserrat Alternates; padding-left:5px; padding-bottom:7px; color:#3A3A3A; text-transform:lowercase; letter-spacing:0px; border-bottom:1px solid #ccc; [/newclass] [newclass=.rmisRoster h2 a, rmisRoster h2 span] font:700 12px/6px Montserrat Alternates!important;border:0px; [/newclass] [newclass=.rmisRoster h3] padding:2px; font:700 7px montserrat; letter-spacing:.5px; color:#6a6a6a; text-transform:uppercase; [/newclass] [newclass=.rmisRoster i] height:25px; width:25px; border:1px solid #ccc; border-radius:5px; font-size:12px; text-decoration:none; color:#aaa; display:flex; align-items:center; justify-content:center; [/newclass] [newclass=.rmisDirectory b] color:var(--rmisAccent1); [/newclass] [newclass=.rmisCredit] font:bold 7px roboto; margin-left:450px; [/newclass] [newclass=.rmisCredit a] font:bold 7px roboto!important; [/newclass] [newclass=.rmisRoster::-webkit-scrollbar, .rmisBio div::-webkit-scrollbar] height:8px; width:8px; [/newclass] [newclass=.rmisRoster::-webkit-scrollbar-thumb, .rmisBio div::-webkit-scrollbar-thumb] background-color:#ddd; border:0px; [/newclass] [newclass=.rmisRoster::-webkit-scrollbar-track, .rmisBio div::-webkit-scrollbar-track] border:1px solid #ddd; background-color:#fafafa; [/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] [newclass=.th-cake-4-o:before]content:"\e026";font-family: "honeybee";font-style:normal;[/newclass] [newclass=.th-constellation-o:before]content:"\e41e";font-family: "honeybee";font-style:normal;[/newclass] [newclass=.th-earth-o:before]content:"\e426";font-family: "honeybee";font-style:normal;[/newclass] [newclass=.th-heart-1-o:before]content:"\e155";font-family: "honeybee";font-style:normal;[/newclass] [newclass=.th-link-o:before]content:"\e1bd";font-family: "honeybee";font-style:normal;[/newclass]
[attr="class","abc-selk-jc-contain"]
reach for the moon
[attr="class","abc-selk-jc-rules"] 
[attr="class","abc-selk-jc-body"]
[attr="class","abc-selk-jc-text"] i'm pretty sure coding this template was the moment i fell in love w/ montserrat alternates as a font. memories /wipes away tear
icons are 50 by 50 and 60 by 60 pixels, respectively. this template supports color coding by member groups -- just rename the "group#name" variables & edit the hex colors accordingly! members will have to rename the first div in order for said color coding to take effect, so make sure you mention that in your member guides ;o
like always, you can use the code below if you'd like, but the installation guide in the next post is very highly recommended to keep things clean.
oh, and while there's a credit link built into the template, i'm totally okay with you removing it as long as you credit selkie of pixel perfect somewhere accessible on the site.
icons are 50 by 50 and 60 by 60 pixels, respectively. this template supports color coding by member groups -- just rename the "group#name" variables & edit the hex colors accordingly! members will have to rename the first div in order for said color coding to take effect, so make sure you mention that in your member guides ;o
like always, you can use the code below if you'd like, but the installation guide in the next post is very highly recommended to keep things clean.
oh, and while there's a credit link built into the template, i'm totally okay with you removing it as long as you credit selkie of pixel perfect somewhere accessible on the site.
[attr="class","abc-selk-jc-hash"] [HASH]jcinknecessity [HASH]jcinkwhoswho
[attr="class","abc-selk-jc-colorpickers"]
[attr="class","abc-selk-jc-color"] #83C4A4
[attr="class","abc-selk-jc-color"] #A24C65
[attr="class","abc-selk-jc-color"] #093478
[attr="class","abc-selk-jc-color"] #E4AC14
[attr="class","abc-selk-jc-color"] #B483CD
[attr="class","abc-selk-jc-color"] #D42434
[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-reachftm .abc-selk-jc-contain h1, .selk-jc-reachftm .abc-selk-jc-hash a, .selk-jc-reachftm .abc-selk-jc-rules h2]color:#D42434!important;[/newclass] [newclass=.selk-jc-reachftm .abc-selk-jc-link]background-color:#D42434!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]<div align="center"><div class="rmisDirectory">
<h1>
member
<div><img style="max-width:100%;" src="https://image.ibb.co/cokPH9/image.png"></div>
</h1>
<div class="rmisInfo">
<div class="rmisBio">
<span>
<a title="AGE"><i class="th th-cake-4-o"></i></a>
<a title="ZODIAC"><i class="th th-constellation-o"></i></a>
<a title="TIMEZONE"><i class="th th-earth-o"></i></a>
<a title="PRONOUNS"><i class="th th-heart-1-o"></i></a>
<a title="PLOTTER" href="PLOTTER_LINK_HERE"><i class="th th-link-o"></i></a>
</span>
<div>
mokou's inability to die allows her body to receive an indefinite amount of punishment. no matter whether she's beheaded, incinerated or has taken any other form of strike, she'll always revive without exception. mokou will recover within a few day's time if she takes a non-fatal blow. due to the nature of the hourai elixir she drank over 1300 years ago, she's also incapable of contracting any form of disease or illness. this includes the natural process of aging. it is said she can completely recover even if a single hair remained, although it seems redundant because those who taste the elixir will recover regardless.
</div>
</div>
<div class="rmisRoster">
<div class="GROUP1NAME">
<img src="https://image.ibb.co/d8TQqU/image.png" style="max-width:100%;">
<span>
<h2>wriggle nightbug</h2>
<h3>00 <b>»</b> YOKAI <b>»</b> DELIVERY SERVICE</h3>
</span>
<a href="" title="APPLICATION"><i class="th th-link-o"></i></a>
</div>
<div class="GROUP2NAME">
<img src="https://image.ibb.co/gHWdAU/image.png" style="max-width:100%;">
<span>
<h2>mystia lorelei</h2>
<h3>00 <b>»</b> YOKAI <b>»</b> VENDOR</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
<div class="GROUP3NAME">
<img src="https://image.ibb.co/kDPn4p/image.png" style="max-width:100%;">
<span>
<h2>keine kamishirasawa</h2>
<h3>00 <b>»</b> HALF-YOKAI <b>»</b> TEACHER</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
<div class="GROUP4NAME">
<img style="max-width:100%;" src="https://image.ibb.co/eCqoAU/image.png">
<span>
<h2>marisa kirisame</h2>
<h3>00 <b>»</b> HUMAN <b>»</b> MAGICIAN</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
<div class="GROUP5NAME">
<img src="https://image.ibb.co/euPyAU/image.png" style="max-width:100%;">
<span>
<h2>reisen udongein inaba</h2>
<h3>00 <b>»</b> MOON RABBIT <b>»</b> STUDENT</h3>
</span>
<a href="" title="APPLICATION"><i class="th th-link-o"></i></a>
</div>
<div>
<img style="max-width:100%;" src="https://image.ibb.co/jyeLPp/image.png">
<span>
<h2>eirin yagokoro</h2>
<h3>00 <b>»</b> LUNARIAN <b>»</b> PHARMACIST</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
<div>
<img style="max-width:100%;" src="https://image.ibb.co/mAOmx9/image.png">
<span>
<h2>kaguya houraisan</h2>
<h3>00 <b>»</b> HUMAN <b>»</b> FUGITIVE</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
<div>
<img style="max-width:100%;" src="https://image.ibb.co/mfXUH9/image.png">
<span>
<h2>fujiwara no mokou</h2>
<h3>00 <b>»</b> IMMORTAL <b>»</b> RESCUER</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
<div>
<img style="max-width:100%;" src="https://placehold.it/50x50.png">
<span>
<h2>@tagged</h2>
<h3>00 <b>»</b> GROUP <b>»</b> OCCUPATION</h3>
</span>
<a title="APPLICATION" href=""><i class="th th-link-o"></i></a>
</div>
</div>
</div>
</div>
<div class="rmisCredit"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div></div>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates:200,400,700|Montserrat:700|Open+Sans:400" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
</head>
<style>
.rmisDirectory {
--rmisAccent1:#D42434;
/* GROUP COLORS */
--GROUP1NAME:#83C4A4;
--GROUP2NAME:#A24C65;
--GROUP3NAME:#093478;
--GROUP4NAME:#E4AC14;
--GROUP5NAME:#B483CD;
}
.GROUP1NAME h2, .GROUP1NAME i, .GROUP1NAME b { border-color:var(--GROUP1NAME)!important; color:var(--GROUP1NAME)!important;}
.GROUP2NAME h2, .GROUP2NAME i, .GROUP2NAME b { border-color:var(--GROUP2NAME)!important; color:var(--GROUP2NAME)!important;}
.GROUP3NAME h2, .GROUP3NAME i, .GROUP3NAME b { border-color:var(--GROUP3NAME)!important; color:var(--GROUP3NAME)!important;}
.GROUP4NAME h2, .GROUP4NAME i, .GROUP4NAME b { border-color:var(--GROUP4NAME)!important; color:var(--GROUP4NAME)!important;}
.GROUP5NAME h2, .GROUP5NAME i, .GROUP5NAME b { border-color:var(--GROUP5NAME)!important; color:var(--GROUP5NAME)!important;}
.rmisDirectory { width:500px; height:400px; background-color:#eaeaea; overflow:hidden; }
.rmisDirectory h1 { margin:0px; height:50px; display:flex; align-items:center; justify-content:space-between; background-color:#3a3a3a; font:200 32px Montserrat Alternates; padding:25px 50px; color:#fafafa; }
.rmisDirectory h1 div { width:100px; height:100px; display:flex; align-items:center; justify-content:center; background-color:var(--rmisAccent1); margin-right:-50px; }
.rmisDirectory h1 div img { width:50px; height:50px; border-radius:100%; border:5px solid #eaeaea; }
.rmisInfo { width:100%; height:300px; display:flex; align-items:center; justify-content:space-between; }
.rmisBio { width:50%; height:100%; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; }
.rmisBio span { display:block; width:92%; height:38px; padding:10px; display:flex; align-items:center; justify-content:space-between; }
.rmisBio span a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:18px; background-color:#f4f4f4; border-radius:5px; color:var(--rmisAccent1); cursor:pointer; }
.rmisBio div { width:190px; height:200px; padding-right:10px; align-self:flex-end; background-color:#f4f4f4; border:25px solid #f4f4f4; text-align:justify; font:400 12px/18px open sans; color:#7a7a7a; overflow:auto; }
.rmisRoster { width:50%; height:100%; background-color:#efefef; display:flex; flex-flow:column wrap; overflow:auto; }
.rmisRoster div { width:230px; padding:7px 7px 0px 0px; display:flex; align-items:center; text-align:left; justify-content:space-between; }
.rmisRoster div img { width:50px!important; height:50px!important; border-radius:5px; }
.rmisRoster h2, h3 { width:150px; margin:0px; }
.rmisRoster h2 { font:400 12px/6px Montserrat Alternates; padding-left:5px; padding-bottom:7px; color:#3A3A3A; text-transform:lowercase; letter-spacing:0px; border-bottom:1px solid #ccc; }
.rmisRoster h2 a, rmisRoster h2 span { font:700 12px/6px Montserrat Alternates!important;border:0px; }
.rmisRoster h3 { padding:2px; font:700 7px montserrat; letter-spacing:.5px; color:#6a6a6a; text-transform:uppercase; }
.rmisRoster i { height:25px; width:25px; border:1px solid #ccc; border-radius:5px; font-size:12px; text-decoration:none; color:#aaa; display:flex; align-items:center; justify-content:center; }
.rmisDirectory b { color:var(--rmisAccent1); }
.rmisCredit { font:bold 7px roboto; margin-left:450px; }
.rmisCredit a { font:bold 7px roboto!important; }
.rmisRoster::-webkit-scrollbar, .rmisBio div::-webkit-scrollbar { height:8px; width:8px; }
.rmisRoster::-webkit-scrollbar-thumb, .rmisBio div::-webkit-scrollbar-thumb { background-color:#ddd; border:0px; }
.rmisRoster::-webkit-scrollbar-track, .rmisBio div::-webkit-scrollbar-track { border:1px solid #ddd; background-color:#fafafa; }
</style>[/dohtml] [attr="class","abc-selk-jc-link"] [attr="class","lnr lnr-link"]
[googlefont=Montserrat+Alternates:200,400,700|Montserrat:700|Open+Sans:400]
[attr="class","rmisDirectory"] member
member 
[attr="class","rmisInfo"]
[attr="class","rmisBio"] [attr="class","th th-cake-4-o"] [attr="class","th th-constellation-o"] [attr="class","th th-earth-o"] [attr="class","th th-heart-1-o"] [attr="class","th th-link-o"]
mokou's inability to die allows her body to receive an indefinite amount of punishment. no matter whether she's beheaded, incinerated or has taken any other form of strike, she'll always revive without exception. mokou will recover within a few day's time if she takes a non-fatal blow. due to the nature of the hourai elixir she drank over 1300 years ago, she's also incapable of contracting any form of disease or illness. this includes the natural process of aging. it is said she can completely recover even if a single hair remained, although it seems redundant because those who taste the elixir will recover regardless.
[attr="class","rmisRoster"]
[attr="class","GROUP1NAME"] 
wriggle nightbug
00 » YOKAI » DELIVERY SERVICE
[attr="class","th th-link-o"]
[attr="class","GROUP3NAME"] 
keine kamishirasawa
00 » HALF-YOKAI » TEACHER
[attr="class","th th-link-o"]
[attr="class","GROUP5NAME"] 
reisen udongein inaba
00 » MOON RABBIT » STUDENT
[attr="class","th th-link-o"]
[attr="class","rmisCredit"]SELKIE