posted Dec 23, 2018 18:53:23 GMT -6 in [JCINK] young volcanoes
[googlefont=Roboto:400,600,700|Raleway:200|Roboto+Condensed:400,700]
[attr="class","selk-jc-young-volcano"]
[googlefont=Mr Dafoe:400|Roboto:400,400i,700] [newclass=.volc_Contain] --volc_accent:#FC6404; [/newclass] [newclass=.volc_Contain] width:550px; height:500px; border-radius:5px; overflow:hidden; background-color:#eee; display:flex; justify-content:space-between; [/newclass] [newclass=.volc_Sidebar] height:100%; width:200px; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background-color:#444; position:relative; [/newclass] [newclass=.volc_SideLink] width:calc(50%); height:50%; display:flex; align-items:center; justify-content:center; color:#7a7a7a; transition:.25s ease; [/newclass] [newclass=.volc_SideLink:hover] background-color:#555555; color:#8a8a8a; transition:.25s ease; [/newclass] [newclass=.volc_SideLink span] font-size:20px!important; [/newclass] [newclass=.volc_Sidebar img] width:100px; height:100px; border-radius:100%; padding:10px; background-color:#494949; border:1px solid #555; position:absolute; z-index:1; [/newclass] [newclass=.volc_Animation] width:120px; height:120px; position:absolute; z-index:2; border-radius:100%; border:1px solid transparent; border-right:1px solid var(--volc_accent); animation:1.75s volc_spinner linear infinite; animation-play-state:paused; } @keyframes volc_spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } [/newclass] [newclass=.volc_Contain:hover .volc_Animation] animation-play-state:running; [/newclass] [newclass=.volc_Sidebar:before] content:''; position:absolute; height:100%; width:1px; background-color:#555; [/newclass] [newclass=.volc_Sidebar:after] content:''; position:absolute; width:100%; height:1px; background-color:#555; [/newclass] [newclass=.volc_List] position:relative; width:325px; height:calc(100% - 25px); padding-top:25px; padding-right:25px; display:flex; flex-flow:column nowrap; [/newclass] [newclass=.volc_List div] height:450px; overflow:auto; [/newclass] [newclass=.volc_List div div] margin-top:25px; padding:0px 25px 0px 80px; height:auto; font:400 10px/14px roboto; color:#7a7a7a; text-align:justify; position:relative; z-index:1; text-shadow:-1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 1px 1px 0 #eee; [/newclass] [newclass=.volc_List div div:first-child]margin-top:0px;[/newclass] [newclass=.volc_List div div h1] margin:0px; font:400 20px/20px mr dafoe; text-transform:lowercase; color:var(--volc_accent); text-align:right; text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; [/newclass] [newclass=.volc_List img] width:75px; height:75px; margin-left:-55px; margin-right:10px; border-radius:100%; padding:5px; background-color:#eee; border:1px solid #ccc; position:relative; z-index:1; float:left; [/newclass] [newclass=.volc_List:before] content:''; position:absolute; height:100%; width:1px; background-color:#ccc; top:0px; left:68px; [/newclass] [newclass=.volc_List div::-webkit-scrollbar] width:11px; [/newclass] [newclass=.volc_List div::-webkit-scrollbar-thumb] background-color:var(--volc_accent); border:5px solid #eee; [/newclass] [newclass=.volc_List div::-webkit-scrollbar-track] background-color:#ddd; border:5px solid #eee; [/newclass] [newclass=.volc_Credit] font:bold 7px roboto; margin-left:500px; [/newclass] [newclass=.volc_Credit a] font:bold 7px roboto!important; [/newclass] [newclass=.lnr]font-family:Linearicons-Free;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:Linearicons-Free;src:url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot);src:url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.eot?#iefix) format('embedded-opentype'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff2) format('woff2'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.ttf) format('truetype'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.woff) format('woff'),url(https://cdn.linearicons.com/free/1.0.0/Linearicons-Free.svg#Linearicons-Free) format('svg');font-weight:400;font-style:normal;[/newclass] [newclass=.lnr-calendar-full:before]content:"\e836";[/newclass] [newclass=.lnr-heart-pulse:before]content:"\e840";[/newclass] [newclass=.lnr-briefcase:before]content:"\e84c";[/newclass] [newclass=.lnr-home:before]content:"\e800";[/newclass]
[attr="class","abc-selk-jc-contain"]
young volcanoes
[attr="class","abc-selk-jc-rules"] 
[attr="class","abc-selk-jc-body"]
[attr="class","abc-selk-jc-text"] do i really only have one more template to upload before this project is complete??? good lord, what happened to this month.
images are 100 by 100 and 75 by 75 pixels, respectively! accent is at the top of the template. ez clap.
images are 100 by 100 and 75 by 75 pixels, respectively! accent is at the top of the template. ez clap.
[attr="class","abc-selk-jc-hash"] [HASH]jcink [HASH]jcinktracking [HASH]jcinkrelationshiptracker
[attr="class","abc-selk-jc-colorpickers"]
[attr="class","abc-selk-jc-color"] #FC6404
[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(--volc_accent) to the desired hex code.
[attr="class","selk-code"]
[newclass=.selk-jc-young-volcano .abc-selk-jc-contain h1, .selk-jc-young-volcano .abc-selk-jc-hash a, .selk-jc-young-volcano .abc-selk-jc-rules h2]color:#FC6404!important;[/newclass] [newclass=.selk-jc-young-volcano .abc-selk-jc-link]background-color:#FC6404!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>
.volc_Contain { --volc_accent:#FC6404; }
</style>
<div align="center"><div class="volc_Contain">
<div class="volc_Sidebar">
<a title="AGE" class="volc_SideLink"><span class="lnr lnr-calendar-full"></span></a>
<a title="SEXUALITY" class="volc_SideLink"><span class="lnr lnr-heart-pulse"></span></a>
<a title="OCCUPATION" class="volc_SideLink"><span class="lnr lnr-briefcase"></span></a>
<a href="/" title="APPLICATION" class="volc_SideLink"><span class="lnr lnr-home"></span></a>
<div class="volc_Animation"></div>
<img src="https://image.ibb.co/fp65rp/70.png" style="width:100px; height:100px;">
</div>
<div class="volc_List">
<div>
<div>
<img src="https://image.ibb.co/fp65rp/70.png" style="width:75px; height:75px;">
<h1>relationship here</h1>
when rome's in ruins, we are the lions, free of the coliseums. in poisoned places, we are anti-venom, we're the beginning of the end. tonight the foxes hunt the hounds, it's all over now, before it has begun, and we've already won. we are wild. we are like young volcanoes. we are wild. americana exotica, do you wanna feel a little beautiful baby?
</div>
<div>
<img src="https://image.ibb.co/fp65rp/70.png" style="width:75px; height:75px;">
<h1>relationship here</h1>
come on make it easy, say i never mattered, run it up the flagpole. we will teach you, how to make boys next door out of assholes. tonight the foxes hunt the hounds, it's all over now, before it has begun, and we've already won.
</div>
<div>
<img src="https://image.ibb.co/fp65rp/70.png" style="width:75px; height:75px;">
<h1>relationship here</h1>
we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby? we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby? come on make it easy, say i never mattered, run it up the flagpole. we will teach you, how to make boys next door out of assholes. tonight the foxes hunt the hounds, it's all over now, before it has begun, and we've already won. we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby? we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby?
</div>
</div></div></div>
<div class="volc_Credit"><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|Mr+Dafoe:400" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
</head>
<style>
.volc_Contain { width:550px; height:500px; border-radius:5px; overflow:hidden; background-color:#eee; display:flex; justify-content:space-between; }
.volc_Sidebar { height:100%; width:200px; display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background-color:#444; position:relative; }
.volc_SideLink { width:calc(50%); height:50%; display:flex; align-items:center; justify-content:center; color:#7a7a7a; transition:.25s ease; }
.volc_SideLink:hover { background-color:#555555; color:#8a8a8a; transition:.25s ease; cursor:pointer; }
.volc_SideLink span { font-size:20px!important; color:#7a7a7a!important; }
.volc_SideLink a { color:#7a7a7a!important; }
.volc_Sidebar img { width:100px; height:100px; border-radius:100%; padding:10px; background-color:#494949; border:1px solid #555; position:absolute; z-index:1; }
.volc_Animation { width:120px; height:120px; position:absolute; z-index:2; border-radius:100%; border:1px solid transparent; border-right:1px solid var(--volc_accent); animation:1.75s volc_spinner linear infinite; animation-play-state:paused; } @keyframes volc_spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
.volc_Contain:hover .volc_Animation { animation-play-state:running; }
.volc_Sidebar:before { content:''; position:absolute; height:100%; width:1px; background-color:#555; }
.volc_Sidebar:after { content:''; position:absolute; width:100%; height:1px; background-color:#555; }
.volc_List { position:relative; width:325px; height:calc(100% - 25px); padding-top:25px; padding-right:25px; display:flex; flex-flow:column nowrap; }
.volc_List div { height:450px; overflow:auto; }
.volc_List div div { margin-top:25px; padding:0px 25px 0px 80px; height:auto; font:400 10px/14px roboto; color:#7a7a7a; text-align:justify; position:relative; z-index:1; text-shadow:-1px -1px 0 #eee, 1px -1px 0 #eee, -1px 1px 0 #eee, 1px 1px 0 #eee; }
.volc_List div div:first-child {margin-top:0px;}
.volc_List div div h1 { margin:0px; font:400 20px/20px mr dafoe; text-transform:lowercase; color:var(--volc_accent); text-align:right; text-shadow:-1px -1px 0 #fafafa, 1px -1px 0 #fafafa, -1px 1px 0 #fafafa, 1px 1px 0 #fafafa; }
.volc_List img { width:75px; height:75px; margin-left:-55px; margin-right:10px; border-radius:100%; padding:5px; background-color:#eee; border:1px solid #ccc; position:relative; z-index:1; float:left; }
.volc_List:before { content:''; position:absolute; height:100%; width:1px; background-color:#ccc; top:0px; left:68px; }
.volc_List div::-webkit-scrollbar { width:11px; }
.volc_List div::-webkit-scrollbar-thumb { background-color:var(--volc_accent); border:5px solid #eee; }
.volc_List div::-webkit-scrollbar-track { background-color:#ddd; border:5px solid #eee; }
.volc_Credit { font:bold 7px roboto; margin-left:500px; }
.volc_Credit a { font:bold 7px roboto!important; }
</style>
[/dohtml] [attr="class","abc-selk-jc-link"] [attr="class","lnr lnr-link"]
[googlefont=Mr Dafoe:400|Roboto:400,400i,700] [newclass=.volc_Contain] --volc_accent:#FC6404; [/newclass]
[attr="class","volc_Contain"]
[attr="class","volc_Sidebar"] [attr="class","volc_SideLink"][attr="class","lnr lnr-calendar-full"] [attr="class","volc_SideLink"][attr="class","lnr lnr-heart-pulse"] [attr="class","volc_SideLink"][attr="class","lnr lnr-briefcase"] [attr="class","volc_SideLink"][attr="class","lnr lnr-home"] 
[attr="class","volc_Animation"]
[attr="class","volc_List"]
relationship here
when rome's in ruins, we are the lions, free of the coliseums. in poisoned places, we are anti-venom, we're the beginning of the end. tonight the foxes hunt the hounds, it's all over now, before it has begun, and we've already won. we are wild. we are like young volcanoes. we are wild. americana exotica, do you wanna feel a little beautiful baby? relationship here
come on make it easy, say i never mattered, run it up the flagpole. we will teach you, how to make boys next door out of assholes. tonight the foxes hunt the hounds, it's all over now, before it has begun, and we've already won. relationship here
we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby? we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby? come on make it easy, say i never mattered, run it up the flagpole. we will teach you, how to make boys next door out of assholes. tonight the foxes hunt the hounds, it's all over now, before it has begun, and we've already won. we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby? we are wild. we are like young volcanoes. we are wild, americana exotica, do you wanna feel a little beautiful baby?[attr="class","volc_Credit"]SELKIE