[html]<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto+Mono:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<div id="good">
<div class="bsq">
</div>
<div class="mait">
<div class="imgb">
<img src="300X300 IMG HERE">
<scr></scr>
</div>
<div class="nam">
<div class="fna">
FIRST
</div>
<div class="lna">
LAST
</div>
</div>
<div class="cbg">
</div>
<div class="ifo">
INFO - INFO - INFO
</div>
<input type="radio" name="ttta" id="gtab1" checked>
<label for="gtab1">about</label>
<input type="radio" name="ttta" id="gtab2">
<label for="gtab2">relationships</label>
<input type="radio" name="ttta" id="gtab3">
<label for="gtab3">tracker</label>
<div class="lyrr">
A LINE OF LYRICS, BUT NOT TOO LONG
</div>
<div class="cont">
<div class="mbt">
<h1>
about
</h1>
TEXT HERE. YOU CAN ADD MORE THAN ONE HEADER
</div>
<div class="mbt">
<h1>
relationships
</h1>
TEXT HERE. YOU CAN ADD INDIVIDUAL HEADERS FOR FRIENDS OR WHATEVER im just lazy <3
</div>
<div class="mbt">
<h1>
active
</h1>
<a href="linky link">thread name</a>
<span>with first last</span>
<a href="linky link">thread name</a>
<span>with first last</span>
<a href="linky link">thread name</a>
<span>with first last</span>
<a href="linky link">thread name</a>
<span>with first last</span>
<h1>
complete
</h1>
<a href="linky link">thread name</a>
<span>with first last</span>
<a href="linky link">thread name</a>
<span>with first last</span>
<a href="linky link">thread name</a>
<span>with first last</span>
<a href="linky link">thread name</a>
<span>with first last</span>
</div>
</div>
<div class="imgb2">
<img src="190X330 IMG HERE, WILL RESIZE TO FIT">
</div>
</div>
</div>
<a href="http://cttw.jcink.net/index.php?showuser=14057"><div style="width: 500px; margin: 15px auto; text-align: center; font-size: 12px; font-family: courier; text-transform: lowercase; color: #555;">e v e</div></a>
<style>
#good {
height: 500px;
width: 500px;
position: relative;
margin: auto;
text-align: left
}
#good .bsq {
height: 485px;
width: 485px;
box-sizing: border-box;
position: absolute;
bottom: 0;
border: 1px solid #000;
background: #D7DBDF;
}
#good .mait {
height: 485px;
width: 485px;
position: absolute;
right: 0;
box-sizing: border-box;
top: 0;
background: #fff;
border: 1px solid #000;
}
#good .imgb {
height: 300px;
width: 300px;
position: absolute;
top: 70px;
right: 70px;
background: grey;
}
#good .imgb img {
height: 100%;
width: 100%;
position: absolute;
object-fit: cover
}
#good .imgb scr {
height: 100%;
width: 120px;
position: absolute;
right: 0;
background: #000;
mix-blend-mode: color
}
#good .cbg {
height: 100%;
width: 190px;
background: #2A4858;
position: absolute;
mix-blend-mode: multiply;
right: 0
}
#good .nam {
height: 50px;
width: 300px;
right: 70px;
bottom: 50px;
background: none;
position: absolute;
display: flex;
justify-content: space-between
}
.nam .fna {
width: 50%;
background: none;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
}
.nam .lna {
width: 50%;
background: none;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 15px;
justify-content: flex-end
}
.nam .fna,
.nam .lna {
font-size: 22px;
font-family: inter;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
color: #000
}
#good .ifo {
height: 300px;
position: absolute;
width: 50px;
background: none;
top: 70px;
left: 50px;
display: flex;
align-items: center;
font-family: roboto mono;
writing-mode: vertical-rl;
font-size: 13px;
letter-spacing: 1px;
color: #000;
}
#good .lyrr {
width: calc(100% - 190px - 80px);
left: 20px;
background: none;
height: 100px;
position: absolute;
top: 40px;
color: #75A1A7;
font-family: inter;
font-size: 20px;
font-weight: 900;
text-transform: uppercase;
font-style: italic;
line-height: 1.2
}
#good .cont {
height: 280px;
width: calc(100% - 190px - 80px);
bottom: 40px;
left: 20px;
overflow: hidden;
position: absolute;
}
#good .cont .mbt {
position: absolute;
overflow: auto;
box-sizing: border-box;
font-family: inter;
font-size: 12px;
line-height: 1.6;
text-align: justify;
padding-right: 10px;
opacity: 0;
height: 100%;
width: 100%;
top: 0;
color: #000;
transition: .4s ease;
}
#good .cont .mbt:nth-of-type(3) {
display: flex;
flex-direction: column;
line-height: 1.3
}
#good .cont .mbt:nth-of-type(3) a {
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
font-style: italic;
color: #2A4858;
}
#good .cont .mbt:nth-of-type(3) span {
margin-bottom: 15px;
}
#good .cont .mbt:nth-of-type(3) span:nth-child(1) {
margin-bottom: 0
}
#good .mbt h1 {
font-family: inter;
font-weight: 900;
color: #75A1A7;
margin: 10px 0;
text-transform: uppercase;
font-style: italic;
font-size: 20px
}
#good .mbt h1:nth-child(1) {
margin-top: 0
}
#good .imgb2 {
mix-blend-mode: multiply;
filter: grayscale(100%) contrast(120%);
position: absolute;
bottom: 0;
right: 0;
width: 190px;
height: 330px;
}
#good .imgb2 img {
height: 100%;
width: 100%;
object-fit: cover
}
#good input {
display: none
}
#good input+label {
font-family: roboto mono;
height: 25px;
width: 130px;
color: #000;
text-transform: lowercase;
position: relative;
top: 35px;
left: 345px;
background: none;
display: block;
display: flex;
align-items: center;
font-size: 12px;
font-weight: 500;
transition: .5s ease;
}
#good input:checked+label {
color: #fff;
transition-delay: 0s !important;
}
#good #gtab1:checked+label~.cont .mbt:nth-of-type(1) {
opacity: 1;
z-index: 5
}
#good #gtab2:checked+label~.cont .mbt:nth-of-type(2) {
opacity: 1;
z-index: 5
}
#good #gtab3:checked+label~.cont .mbt:nth-of-type(3) {
opacity: 1;
z-index: 5
}
#good ::-webkit-scrollbar {
width: 7px
}
#good ::-webkit-scrollbar-track {
background: none !important;
border: 1px solid #000;
}
#good ::-webkit-scrollbar-thumb {
background: #D7DBDF;
border: 1px solid #000;
}
/*transitions*/
#good .imgb {
transition: .5s ease .6s
}
#good .ifo {
transition: .5s ease .6s
}
#good .nam {
transition: .5s ease .6s
}
#good:hover .imgb {
opacity: 0;
transition-delay: 0s
}
#good:hover .ifo {
left: 30px;
opacity: 0;
transition-delay: 0s
}
#good:hover .nam {
bottom: 30px;
opacity: 0;
transition-delay: 0s
}
#good input+label {
opacity: 0
}
#good .cont {
opacity: 0;
transition: .5s ease
}
#good .lyrr {
opacity: 0;
transition: .5s ease
}
#good .imgb2 {
opacity: 0;
transition: .8s ease
}
#good:hover .lyrr {
transition-delay: .6s;
left: 40px;
opacity: 1
}
#good:hover .cont {
transition-delay: .6s;
left: 40px;
opacity: 1
}
#good:hover input+label {
left: 325px;
opacity: 1;
}
#good:hover .imgb2 {
opacity: 1;
transition: 1s ease;
}</style>[/html]
