foreigner's god

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

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

[attr="class","abc-selk-jc-text"] fun fact (are all of my template commentaries on jcink conversions going to be fun facts? stay tuned): this is actually the second-newest template of the project, because this is probably my favorite song & i was so gosh dang worried about giving it the prettiest code. i dunno if i actually accomplished this or not, lMAo.

the jcink version of this template is a toggle template, rather than just being a hover (a gif demonstrating this is available here!) i hope that makes up for you guys missing out on tabbed templates for a while, oops.

the background image dimensions are 500 by 600 and is modified along with all colors in the template at the top of the code. the lyrics are editable, but try to keep them short.

[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinkposting [HASH]jcinklightposting [HASH]toggle [HASH]saturnicons

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

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

#6E85AB

[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(--fg-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>

.fg-box { 
--fg-accent:#6E85AB;
background:url(https://image.ibb.co/eyfFuU/image.png)!important;
}

</style>

<div align="center"><div class="fg-box">
	  <div class="fg-toggle">
    <input type="checkbox" id="fg-tog-but">
    <label for="fg-tog-but">
      <div class="fg-lyrics">
		<h1>
screaming
		</h1>
		<h2>
the name
		</h2>
		<h3>
of a
		</h3>
		<h4>
foreigner's god
		</h4>
	</div>
		</label>
			<div class="fg-post-tog">
			<div class="fg-post">
				<input type="checkbox" id="fg-tog-but">
				<label for="fg-tog-but">
					<span class="th th-left-curve"></span>
				</label>
		<div>

<b>lorem ipsum</b> <i>dolor sit amet</i>, consectetur adipiscing elit. integer aliquet nibh eu turpis congue pulvinar. proin pulvinar eget augue non tempus. vestibulum vitae nibh in ex efficitur commodo. aenean et arcu massa. praesent mauris est, dapibus eget lacinia dapibus, semper a diam. proin condimentum viverra hendrerit. donec fringilla ultrices arcu et finibus. vestibulum metus eros, consequat vel condimentum non, consequat vel erat. praesent vulputate leo non purus lobortis facilisis. mauris volutpat tincidunt sagittis. in auctor ligula quis interdum condimentum. proin efficitur nibh eu justo commodo placerat. proin ante tellus, laoreet at tincidunt tempor, finibus eu nibh. <br><br>

vestibulum in posuere ex, eu vehicula lacus. integer sed risus eget erat facilisis convallis. maecenas non sapien justo. vivamus gravida consequat tempus. maecenas in nibh gravida, suscipit nisi vel, ornare metus. maecenas pharetra quam quis metus consectetur, eu tristique leo semper. nam consequat sollicitudin leo, id interdum erat pretium sit amet. integer eleifend quam nec tellus vehicula, in vulputate magna cursus. praesent hendrerit, velit et mollis rutrum, ex nisi iaculis lorem, eget molestie elit turpis sit amet libero. curabitur mollis finibus tincidunt. in convallis lectus a lorem suscipit consequat. etiam feugiat lectus eget elit ornare malesuada. aliquam congue imperdiet rutrum. donec posuere sit amet.  <br><br>

lorem ipsum dolor sit amet, consectetur adipiscing elit. integer aliquet nibh eu turpis congue pulvinar. proin pulvinar eget augue non tempus. vestibulum vitae nibh in ex efficitur commodo. aenean et arcu massa. praesent mauris est, dapibus eget lacinia dapibus, semper a diam. proin condimentum viverra hendrerit. donec fringilla ultrices arcu et finibus. vestibulum metus eros, consequat vel condimentum non, consequat vel erat. praesent vulputate leo non purus lobortis facilisis. mauris volutpat tincidunt sagittis. in auctor ligula quis interdum condimentum. proin efficitur nibh eu justo commodo placerat. proin ante tellus, laoreet at tincidunt tempor, finibus eu nibh.

[user=1,4]@vriska[/user]

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

<head>
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Playfair+Display:400,700|Roboto:400,700" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
</head>

<style>

.fg-toggle {
display:flex;
align-items:center;
justify-content:center;
flex-flow:column nowrap;
z-index:2;
height:600px;
}
.fg-toggle input[type=checkbox] { display:none; }
.fg-toggle label { cursor:pointer; position:absolute; }
.fg-toggle input[type=checkbox]:checked ~ .fg-post-tog {
position:relative;
top:-14px;
transition:.33s ease;
width:500px!important;
height:600px!important;
}
.fg-post-tog {
width:500px!important;
height:600px!important;
position:relative;
top:591px;
transition:.33s ease;
}
.fg-tog-but { 
position:absolute;
z-index:100;
}
.fg-post label {
background-color:var(--fg-accent);
width:25px;
height:25px;
margin:25px 0px 0px 25px;
display:flex;
align-items:center;
justify-content:center;
}
.fg-post label span {
font-size:10px;
color:#000;
}
.fg-box {
width:500px;
height:600px;
display:flex;
align-items:center;
justify-content:center;
background:url(https://image.ibb.co/eyfFuU/image.png);
box-shadow:0px 0px 10px rgba(0,0,0,.25);
margin:10px;
position:relative;
overflow:hidden;
line-height:normal!important;
}
.fg-circ {
width:250px;
height:250px;
position:absolute;
background-color:rgba(255,255,255,.25);
z-index:1;
transform:rotate(45deg) scale(0);
transition:.5s ease;
}
.fg-box:hover .fg-circ {
transform:rotate(45deg) scale(1);
transition:.5s ease;
}
.fg-post {
position:absolute;
z-index:2;
background-color:rgba(0,0,0,.8);
width:500px;
height:600px;
padding:0px;
transition:.25s ease;
text-align:justify;
color:#999;
}
.fg-post b {
font:600 13px roboto;
color:var(--fg-accent);
}
.fg-post i {
border-bottom:1px solid var(--fg-accent);

}
.fg-post div {
margin:75px;
font:400 13px/16px roboto!important;
text-align:justify;
color:#bbb;
transition:.25s ease;
height:450px;
overflow:auto;
padding-right:10px;
}

.fg-post a { display:block; text-align:center; color:var(--fg-accent); font:600 13px roboto!important; margin-top:25px; }

.fg-post div::-webkit-scrollbar {
width:10px; border:0px!important; background-color:rgba(0,0,0,0)!important;
}
.fg-post div::-webkit-scrollbar-thumb {
background-color:var(--fg-accent); border:0px;
}
.fg-post div::-webkit-scrollbar-track {
background-color:rgba(0,0,0,0)!important;
border:0px;
}

.fg-lyrics {
cursor:pointer;
}
.fg-lyrics h1 {
margin:0px;
font:700 35px/35px Libre Baskerville;
text-transform:uppercase;
display:flex;
align-items:center;
justify-content:center;
color:#fafafa;
text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.fg-lyrics h2 {
margin:0px;
width:220px;
display:flex;
align-items:center;
justify-content:center;
font:700 25px/25px playfair display;
text-transform:uppercase;
color:#fafafa;
text-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.fg-lyrics h2:before {
content:'';
margin-right:10px;
height:1px;
background-color:#fafafa;
flex-grow:1;
box-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.fg-lyrics h2:after {
content:'';
margin-left:10px;
height:1px;
background-color:#fafafa;
flex-grow:1;
box-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.fg-lyrics h3 {
margin:0px;
width:220px;
display:flex;
align-items:center;
text-transform:uppercase;
font:400 82px/82px Libre Baskerville;
color:#fafafa;
text-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.fg-lyrics h4 {
margin:0px;
font:400 18px/18px Libre Baskerville;
text-transform:uppercase;
color:#fafafa;
text-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.fg-cred {
margin-top:-10px;
font:700 7px roboto;
margin-left:425px;
}
.fg-cred a {
font:700 7px roboto;
}

</style>
[/dohtml]

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

[newclass=.selk-jc-foreignersgod .abc-selk-jc-contain h1, .selk-jc-foreignersgod .abc-selk-jc-hash a, .selk-jc-foreignersgod .abc-selk-jc-rules h2]color:#6E85AB!important;[/newclass] [newclass=.selk-jc-foreignersgod .abc-selk-jc-link]background-color:#6E85AB!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:400,400i,600,700|Playfair+Display:400,700|Libre+Baskerville:400] [newclass=.fg-box] --fg-accent:#6E85AB; background:url(https://image.ibb.co/eyfFuU/image.png)!important; [/newclass]

[attr="class","fg-box"]

[attr="class","fg-lyrics"]

screaming

the name

of a

foreigner's god

[attr="class","fg-post"]

she moved with shameless wonder, the perfect creature rarely seen. since some liar brought the thunder, when the land was godless and free. her eyes look sharp and steady, into the empty parts of me. but still my heart is heavy, with the hate of some other man's beliefs. always a well dressed fraud, who wouldn't spare the rod. never for me. screaming the name of a foreigner's god, screaming the name of a foreigner's god, screaming the name of a foreigner's god, the purest expression of grief. wondering who i copy, mustering some tender charm. she feels no control of her body, she feels no safety in my arms. i've no language left to say it, but all i do is quake to her. breaking if i try convey it, the broken love i make to her. all that i've been taught, and every word i've got, is foreign to me. screaming the name of a foreigner's god, screaming the name of a foreigner's god, screaming the name of a foreigner's god, the purest expression of grief.

she moved with shameless wonder, the perfect creature rarely seen. since some liar brought the thunder, when the land was godless and free. her eyes look sharp and steady, into the empty parts of me. but still my heart is heavy, with the hate of some other man's beliefs. always a well dressed fraud, who wouldn't spare the rod. never for me. screaming the name of a foreigner's god, screaming the name of a foreigner's god, screaming the name of a foreigner's god, the purest expression of grief. wondering who i copy, mustering some tender charm. she feels no control of her body, she feels no safety in my arms. i've no language left to say it, but all i do is quake to her. breaking if i try convey it, the broken love i make to her. all that i've been taught, and every word i've got, is foreign to me. screaming the name of a foreigner's god, screaming the name of a foreigner's god, screaming the name of a foreigner's god, the purest expression of grief. vriska

[attr="class","fg-circ"]

[attr="class","fg-cred"]SELKIE

[newclass=.fg-box] width:500px; height:600px; display:flex; align-items:center; justify-content:center; background:url(http://placehold.it/500x600/333/eee); box-shadow:0px 0px 10px rgba(0,0,0,.25); margin:10px; position:relative; overflow:hidden; [/newclass] [newclass=.fg-circ] width:250px; height:250px; position:absolute; background-color:rgba(255,255,255,.25); z-index:1; transform:rotate(45deg) scale(1); transition:.5s ease; transition-delay:1s; [/newclass] [newclass=.fg-box:hover .fg-circ] transform:rotate(45deg) scale(0); transition:.5s ease; [/newclass] [newclass=.fg-post] position:absolute; top:600px; z-index:2; background-color:rgba(0,0,0,.85); width:calc(100%); height:calc(100%); padding:0px; transition:.5s ease; text-align:justify; color:#999; transition-delay:.5s; [/newclass] [newclass=.fg-box:hover .fg-post] top:0px; transition:.5s ease; transition-delay:.5s; [/newclass] [newclass=.fg-post b] font:700 13px roboto; color:var(--fg-accent); [/newclass] [newclass=.fg-post i] border-bottom:1px solid var(--fg-accent); [/newclass] [newclass=.fg-post a] display:block; text-align:center; color:var(--fg-accent); font:600 13px roboto!important; margin-top:25px; [/newclass] [newclass=.fg-post div] margin:75px; font:400 13px roboto; text-align:justify; color:#bbb; transition:.25s ease; height:450px; overflow:auto; padding-right:10px; [/newclass] [newclass=.fg-post div::-webkit-scrollbar] width:10px; border:0px; background-color:rgba(0,0,0,0)!important; [/newclass] [newclass=.fg-post div::-webkit-scrollbar-thumb] background-color:var(--fg-accent); border:0px;[/newclass] [newclass=.fg-post div::-webkit-scrollbar-track] background-color:rgba(0,0,0,0)!important; border:0px;[/newclass] [newclass=.fg-lyrics] cursor:pointer; [/newclass] [newclass=.fg-lyrics h1] margin:0px; font:700 35px/35px Playfair Display; text-transform:uppercase; display:flex; align-items:center; justify-content:center; color:#fafafa; text-shadow:1px 1px 2px rgba(0,0,0,.5); [/newclass] [newclass=.fg-lyrics h2] margin:0px; width:220px; display:flex; align-items:center; justify-content:center; font:700 25px/25px playfair display; text-transform:uppercase; color:#fafafa; text-shadow:1px 1px 1px rgba(0,0,0,.5); [/newclass] [newclass=.fg-lyrics h2:before] content:''; margin-right:10px; height:1px; background-color:#fafafa; flex-grow:1; box-shadow:1px 1px 1px rgba(0,0,0,.5); [/newclass] [newclass=.fg-lyrics h2:after] content:''; margin-left:10px; height:1px; background-color:#fafafa; flex-grow:1; box-shadow:1px 1px 1px rgba(0,0,0,.5); [/newclass] [newclass=.fg-lyrics h3] margin:0px; width:220px; display:flex; align-items:center; justify-content:center; text-transform:uppercase; font:400 82px/82px Libre Baskerville; color:#fafafa; text-shadow:1px 1px 1px rgba(0,0,0,.5); [/newclass] [newclass=.fg-lyrics h4] margin:0px; font:400 18px/18px Libre Baskerville; text-transform:uppercase; color:#fafafa; text-shadow:1px 1px 1px rgba(0,0,0,.5); [/newclass] [newclass=.fg-cred] margin-top:-10px; font:700 7px roboto; margin-left:425px; [/newclass] [newclass=.fg-cred a] font:700 7px roboto; [/newclass]