Код:
[emoji]<style>
.casscodestitlecontainer {
background-image: linear-gradient(to top, #c2d479, #cde07f);
margin: 0;
padding: 5px 0 15px 0;
}
.casscodesbigcontainer {
position: relative;
width: 430px;
height: auto;
font-family: Calibri;
font-size: 10px;
text-align: justify;
font-weight: normal;
line-height: 110%;
background: url('http://i.imgur.com/pS5mMvf.png') repeat;
border: 10px solid #fff;
margin: 10px auto 2px;
padding: 18px;
box-shadow: 0px 0px 1px #999;
overflow: hidden;
}
.casscodesbigcontainer ::-webkit-scrollbar {
width: 4px;
background: #eee;
border: 2px solid #fff;
}
.casscodesbigcontainer ::-webkit-scrollbar-thumb:vertical {
background: #c2d479;
}
.casscodesbigcontainer h1 {
color: #fafafa;
font-family: 'Open Sans Condensed';
font-size: 55px;
font-weight: normal;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 1px #bbb;
letter-spacing: -3px;
line-height: 100%;
margin: 0px auto 0px;
}
.casscodesbigcontainer h2 {
color: #684a1e;
font-family: 'Great Vibes', cursive;
font-size: 25px;
font-weight: lighter;
text-align: center;
text-transform: lowercase;
text-shadow: 1px 1px 1px #fff;
letter-spacing: 1px;
margin: -4px auto 0px;
}
.casscodesbigcontainer h3 {
margin: 0px auto;
text-align: center;
font-family: 'Open Sans Condensed';
font-size: 8px;
font-weight: normal;
line-height: 100%;
text-transform: uppercase;
color: #243a52;
letter-spacing: 1px;
}
.casscodesmedcontainer {
height: auto;
width: auto;
margin: 10px auto;
}
.casscodescontent {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: white;
border: 20px solid #fff;
outline: 1px solid #cfcfcf;
padding: 0px 3px;
overflow: hidden;
}
.casscodescontent p {
position: relative;
color: #888;
font-family: 'Open Sans Condensed', serif;
font-size: 14px;
font-style: none;
text-align: left;
line-height: 11px;
background: transparent;
padding: 2px 0px 0px;
margin: 1px 2px 3px 5px;
}
.casscodescontent p:first-letter {
display: inline-block;
float: left;
color: #684a1e;
font-family: 'Bitter', serif;
font-size: 19px;
font-weight: lighter;
text-shadow: 1px 1px 1px #bbb;
background-color: #cde07f;
background-image: linear-gradient(to top, #cde07f, #c2d479);
padding: 7px 7px 10px 7px;
margin: 3px 5px 0 0px;
box-shadow: 0 0 1px #222;
}
.casscodescontent b {
color: #684a1e;
font-family: 'Playfair Display', serif;
font-size: 15px;
font-style: none;
font-weight: bold;
text-align: left;
text-transform: lowercase;
line-height: 10px;
background: transparent;
}
.casscodescontent a:link, a:visited, a:active {
color: #777;
font-family: 'Droid Sans', sans-serif;
font-size: 14px;
font-style: none;
font-weight: lighter;
text-align: left;
text-transform: lowercase;
text-decoration: none;
letter-spacing: -1px;
line-height: 10px;
background: transparent;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.casscodescontent a:hover {
color: #ad6712;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
.casscodescontent img {
float: left;
}
.casscodestab {
float: left;
}
.casscodestab label {
position: relative;
display: block;
top: 370px;
left: 9px;
width: 50px;
height: 32px;
color: #888;
text-align: center;
text-transform: uppercase;
background-image: linear-gradient(to right, #ddd, #eee);
border: 1px solid #ccc;
border-radius: 50%;
padding: 18px 0 0 0;
margin-left: 10px;
z-index: 3;
}
.casscodestab input[type=radio]:checked ~ label {
color: #684a1e;
background-image: linear-gradient(to right, #bdcf75, #cde07f);
border: 1px solid #ccc;
z-index: 3;
}
.casscodestab input[type=radio] {
display: none; /* DON'T EDIT */
}
.casscodestab input[type=radio]:checked ~ label ~ .casscodescontent {
z-index: 2;
}
.casscodestabs {
position: relative;
right: 0px;
width: 400px;
height: 400px;
color: #fff;
margin: 0px auto;
}
.casscodestable {
width: 176px;
border-collapse: collapse;
border-spacing: 1;
}
.casscodestable td {
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
word-break: normal;
border: 1px solid transparent;
padding: 5px 0px 5px 5px;
overflow: hidden;
}
.casscodestable .titles {
vertical-align: top;
width: 80px;
color: #665;
background-image: linear-gradient(to left, #eee, #dfdfdf);
}
.casscodestable .details {
vertical-align: top;
width: 113px;
color: #777;
background-image: linear-gradient(to right, #eee, #dfdfdf);;
}
a.casscodeslink:link, a.casscodeslink:visited, a.casscodeslink:active {
display: block;
width: 60px;
color: #888;
font-family: calibri;
font-size: 10px;
font-style: normal;
font-weight: lighter;
text-align: center;
text-transform: uppercase;
text-decoration: none;
text-shadow: none;
letter-spacing: 0px;
line-height: 8px;
background-color: rgba(191, 191, 191, 0.3);
border: 1px solid #dadada;
border-radius: 0.1em;
box-shadow: inset 0 0 0 0 #cde07f;
padding: 6px 10px 7px 10px;
margin: 7px 3px -4px -3px;
opacity: 100;
-webkit-transition: all ease 0.8s;
-moz-transition: all ease 0.8s;
transition: all ease 0.8s;
}
a.casscodeslink:hover {
color: #684a1e;
border: 1px solid #c1d475;
box-shadow: inset 0 100px 0 0 #cde07f;
}
</style>
<div class="casscodesbigcontainer">
<div class="casscodesmedcontainer">
<div class="casscodestabs">
<div class="casscodestab">
<input type="radio" id="casscodestab-1" name="casscodestab-group-1" checked>
<label for="casscodestab-1">Details</label>
<div class="casscodescontent">
<div class="casscodestitlecontainer">
<h1>hell hath <font color="#ad6712">no fury</font></h1>
<h2>like a woman scorned... or hungry.</h2>
</div>
<table style="margin: 0 0 0 -3px;"><td valign="top" width="70%"><img src="http://i.imgur.com/HdcKfAQ.gif" style="margin-left: 1px; border: 3px solid #cde07f; width: 252; margin-top: 7px; margin-bottom: 7px; margin-right: 5px;" align="left">
</td>
<td valign="top" width="30%">
<a href="http://hallofheroes.jcink.net/index.php?act=ST&f=100&t=568&st=0#entry1732" class="casscodeslink">My Tester</a>
<a href="http://hallofheroes.jcink.net/index.php?showtopic=45" class="casscodeslink">My Awards</a>
<a href="http://hallofheroes.jcink.net/index.php?showtopic=274" class="casscodeslink">My Graphics</a>
<a href="http://hallofheroes.jcink.net/index.php?showuser=4" class="casscodeslink">My Profile</a>
<a href="http://hallofheroes.jcink.net/index.php?act=Awards&id=4" class="casscodeslink">My Badges</a>
<a href="http://hallofheroes.jcink.net/index.php?act=Msg&CODE=04&MID=4" class="casscodeslink">Send a PM</a>
</td></table>
<p>Hey I'm Cass and I've been coding for over 8 years now, granted an entirely different style of templates and skins. Comments and constructive criticism are always welcome and appreciated!</p>
<p>Any templates shown that do not include the codes <u>are not</u> for personal use. If you use my templates, minor changes are accepted but please leave the credits (and general setup) intact. Don't use as bases for your own codes! If you "mimic" my work, credit me for inspiration.</p>
</u></p>
</div>
</div>
<div class="casscodestab">
<input type="radio" id="casscodestab-2" name="casscodestab-group-1">
<label for="casscodestab-2">Threads</label>
<div class="casscodescontent">
<div class="casscodestitlecontainer">
<h1>Thread <font color="#ad6712">Templates</font></h1>
<h2>last updated day, month</h2>
</div>
<table style="margin: 0 0 0 -4px;">
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>Touch of Color</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>Knock on Wood</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
</table>
</div>
</div>
<div class="casscodestab">
<input type="radio" id="casscodestab-3" name="casscodestab-group-1">
<label for="casscodestab-3">Comms</label>
<div class="casscodescontent">
<div class="casscodestitlecontainer">
<h1>Comms <font color="#ad6712">Templates</font></h1>
<h2>last updated day, month</h2>
</div>
<table style="margin: 0 0 0 -4px;">
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>IM/Chat (gray simple)</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
</table>
</div>
</div>
<div class="casscodestab">
<input type="radio" id="casscodestab-4" name="casscodestab-group-1">
<label for="casscodestab-4">Siggies</label>
<div class="casscodescontent">
<div class="casscodestitlecontainer">
<h1>Siggy <font color="#ad6712">Templates</font></h1>
<h2>last updated day, month</h2>
</div>
<table style="margin: 0 0 0 -4px;">
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td></table>
</div>
</div>
<div class="casscodestab">
<input type="radio" id="casscodestab-5" name="casscodestab-group-1">
<label for="casscodestab-5">Skins</label>
<div class="casscodescontent">
<div class="casscodestitlecontainer">
<h1>Skin <font color="#ad6712">Templates</font></h1>
<h2>last updated day, month</h2>
</div>
<table style="margin: 0 0 0 -4px;">
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a></td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
</table>
</div>
</div>
<div class="casscodestab">
<input type="radio" id="casscodestab-6" name="casscodestab-group-1">
<label for="casscodestab-6">Misc.</label>
<div class="casscodescontent">
<div class="casscodestitlecontainer">
<h1>Misc. <font color="#ad6712">Templates</font></h1>
<h2>last updated day, month</h2>
</div>
<table style="margin: 0 0 0 -4px;">
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>Way to be Square</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>Tweed is the New Jean</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%">
<table class="casscodestable">
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</tr>
<tr>
<td class="details">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
<tr>
<td class="titles">
<b>TBA</b><br />
<a href="">View Template</a>
</td>
</tr>
</table>
</td>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
