xo

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

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

[attr="class","abc-selk-jc-text"] anyone else just want to sleep for the next 6 days? just me? ok ;;

images are 150 by 150 pixels and the accent is edited at the top.

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

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

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

#A30413

[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(--xo-accent) 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>
.xo-moodboard { --xo-accent:#A30413; }
</style>

<div align="center"><div class="xo-moodboard">
<div class="xo-title">
<h1>

<span class="th th-broken-heart-o"></span>

hey "tear chaser"

</h1>
</div>
<div class="xo-board">

<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>
<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>
<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>

<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>
<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>
<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>

<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>
<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>
<div><img src="http://placehold.it/150x150.png" style="width:150px; height:150px;"></div>

</div>
</div>
<div class="xo-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=Roboto+Slab:400" rel="stylesheet">
</head>
<style>
.xo-moodboard { width:610px; background-color:#eee; border-radius:5px; overflow:hidden; }
.xo-title { padding:25px 0px; background-color:#aaa; background-color:var(--xo-accent); display:flex; align-items:center; justify-content:flex-end; }
.xo-title h1 { margin:0px 25px 0px 0px; max-width:510px; text-align:right; padding:25px 25px; border-radius:5px; font:400 25px/25px roboto slab; text-transform:uppercase; background-color:#eee; color:#aaa; color:var(--xo-accent); text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; display:flex; }
.xo-title h1 span { display:inline; font-size:25px; line-height:25px; margin-right:10px; }
.xo-board { height:585px; padding:25px 0px 0px 0px; width:610px; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start; }
.xo-board div { padding:10px; background-color:#ddd; margin-left:25px; margin-bottom:25px; border-radius:5px; }
.xo-board img { display:block; border-radius:5px; }
.xo-credit { font:bold 7px roboto; margin-left:525px; } .xo-credit a { font:bold 7px roboto!important; }
</style>
[/dohtml]

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

[newclass=.selk-jc-xo .abc-selk-jc-contain h1, .selk-jc-xo .abc-selk-jc-hash a, .selk-jc-xo .abc-selk-jc-rules h2]color:#A30413!important;[/newclass] [newclass=.selk-jc-xo .abc-selk-jc-link]background-color:#A30413!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=Roboto+Slab:400] [newclass=.xo-moodboard] --xo-accent:#A30413; [/newclass]

[attr="class","xo-moodboard"]

[attr="class","xo-title"]

[attr="class","th th-broken-heart-o"] hey "tear chaser"

[attr="class","xo-board"]

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

[newclass=.xo-moodboard] width:610px; background-color:#eee; border-radius:5px; overflow:hidden; [/newclass] [newclass=.xo-title] padding:25px 0px; background-color:#aaa; background-color:var(--xo-accent); display:flex; align-items:center; justify-content:flex-end; [/newclass] [newclass=.xo-title h1] margin:0px 25px 0px 0px; max-width:510px; text-align:right; padding:25px 25px; border-radius:5px; font:400 25px/25px roboto slab; text-transform:uppercase; background-color:#eee; color:#aaa; color:var(--xo-accent); text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; display:flex; [/newclass] [newclass=.xo-title h1 span] display:inline; font-size:25px; line-height:25px; margin-right:10px; [/newclass] [newclass=.xo-board] height:585px; padding:25px 0px 0px 0px; width:610px; display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start; [/newclass] [newclass=.xo-board div] padding:10px; background-color:#ddd; margin-left:25px; margin-bottom:25px; border-radius:5px; [/newclass] [newclass=.xo-board img] display:block; border-radius:5px; [/newclass] [newclass=.xo-credit] font:bold 7px roboto; margin-left:525px; [/newclass] [newclass=.xo-credit a] font:bold 7px roboto!important; [/newclass]