[html]
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<div id="spring">
<div id="spring-img" style="background-image: url(square img here, will resize!)"></div>
<a href="link here"> <div class="link1" title="link 1"><span class="lnr lnr-heart"></span></div></a>
<a href="link here"> <div class="link2" title="link 2"><span class="lnr lnr-star"></span></div></a>
<a href="link here"> <div class="link3" title="link 3"><span class="lnr lnr-diamond"></span></div></a>
<a href="link here"> <div class="link4" title="link 4"><span class="lnr lnr-cloud"></span></div></a>
<div id="spring-info">
<p>words here, they can be as long as you want cos it'll scroll <3</p>
<p>use p tags for each separate block!</p>
<p>description</p>
</div>
<h1>words/lyrics here! <span class="lnr lnr-moon"></span></h1>
<div id="spring-main">
<div class="spring-maincontainer">
<div class="spring-maintabs">
<div class="spring-maintab">
<input type="radio" id="spring-maintab-1" name="spring-maintab-group-1" checked>
<label for="spring-maintab-1">comms</label>
<div class="spring-maincontent">
<a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
</div>
</div>
<div class="spring-maintab">
<input type="radio" id="spring-maintab-2" name="spring-maintab-group-1">
<label for="spring-maintab-2">threads</label>
<div class="spring-maincontent">
<a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
</div>
</div>
<div class="spring-maintab">
<input type="radio" id="spring-maintab-3" name="spring-maintab-group-1">
<label for="spring-maintab-3">dead</label>
<div class="spring-maincontent">
<a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
<br><a>thread name</a> - with <b>first last</b>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 500px; margin: 10px auto; text-align: right; font-size: 8px; font-family: arial; text-transform: uppercase; color: #aaa;">eve's codes</div></a>
<style>
#spring {height: 350px; width: 500px; position: relative; margin: auto; background: #EBC9C2}
#spring-img {height: 70px; width: 70px; position: absolute; background-size: cover; background-position: center; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); top: 50px; left:60px;}
#spring-img:before {height: 90px; width: 90px; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border: 1px solid #fff; content: ""; position: absolute; top: -11px; left: -11px}
#spring .link1, #spring .link2, #spring .link3, #spring .link4 {height: 30px; width: 30px; position: absolute; color: #B2887F; line-height: 30px; text-align: center; font-size: 20px; background: none; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s}
.link1 span, .link2 span, .link3 span, .link4 span {line-height: 30px;}
.link1 {top: 110px; left: 25px}
.link2 {top: 130px; left: 50px}
.link3 {top: 130px; left: 110px}
.link4 {top: 110px; left: 135px}
#spring .link1:hover, #spring .link2:hover, #spring .link3:hover, #spring .link4:hover {color: #fff}
#spring-info {height: 150px; width: 140px; background: none; position: absolute; bottom: 25px; left: 25px; overflow: auto}
#spring-info::-webkit-scrollbar {width: 0}
#spring-info p {text-align: left; background: #eee; color: #488167; margin-top: 0; margin-bottom: 6px; padding: 6px 7px 6px 6px; line-height: 15px; font-family: anonymous pro; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; font-weight: 700; font-style: italic;}
#spring h1 {height: 30px; width: 250px; text-align: right; padding-right: 20px; background: #eee; position: absolute; right: 25px; top: 25px; line-height: 30px; font-family: anonymous pro; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-style: italic; color: #488167}
#spring-main {height: 240px; width: 270px; position: absolute; bottom: 25px; right: 25px; background: #eee; overflow: none}
#spring-main::before {height: 35px; width: 270px; background: #ddd; position: absolute; content: "";}
.spring-maincontainer {
margin: 10px auto;
height: auto;
width: auto;
}
.spring-maintabs {
margin: 0px auto;
position: relative;
width: 300px;
height: 300px;
}
.spring-maintab {
float: left;
}
.spring-maintab label {
display: block;
width: 70px;
height: 20px;
background: #F0DAD6;
border: 1px solid #eee;
margin-right: 5px;
position: relative;
left: 20px;
top: -3px;
z-index: 1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
text-align: center;
line-height: 20px;
font-family: anonymous pro;
font-size: 8px;
text-transform: uppercase;
font-weight: 700;
font-style: italic;
letter-spacing: 1px;
color: #488167;
}
.spring-maintab input[type=radio]:checked ~ label {
background: #eee;
z-index: 2;
}
.spring-maintab input[type=radio] {
display: none;
}
.spring-maincontent {
position: absolute;
bottom: 70px;
left: 0px;
background: #eee;
height: 175px;
border: 15px solid #eee;
padding-right: 5px;
width: 235px;
opacity: 0;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-o-transition: 0.4s ease;
font-family: poppins; font-size: 10px; letter-spacing: 0.3px; color: #666;
overflow: auto; text-align: justify; line-height:13px;
}
.spring-maincontent b, .spring-maincontent a {font-family: anonymous pro; text-transform: uppercase; font-style: italic; color: #B2887F; font-weight: 700; letter-spacing: 1px;}
.spring-maincontent a {color: #488167}
.spring-maintab input[type=radio]:checked ~ label ~ .spring-maincontent {
z-index: 1; opacity: 1;
}
.spring-maincontent::-webkit-scrollbar {width: 5px}
.spring-maincontent::-webkit-scrollbar-thumb {background: #F1B5AF!important}
.spring-maincontent::-webkit-scrollbar-track {background: #eee!important}
</style>
[/html]
