<!--HTML-->
<link href="https://fonts.googleapis.com/css?family=Arvo|Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">


.ftonestabs {
position: relative;  
width: 300px;
height: 500px;
padding: 10px;
border: 1px solid #C9D5CF;
background-color: #DBDBD8;
}

.ftonestab {
float: left;
overflow: hidden;
}

.ftonestab label {
display: block;
width: 30px; 
background-color: #C9D5CF; 
color: #B63149; 
padding: 10px;
font-family: calibri, sans-serif; 
font-size: 40px;
border-radius: 50%;
width: 42px;
height: 42px;
line-height: 100%;
text-align: center;
text-transform: uppercase; 
position: absolute; 
right: 330px; 
top: 100px;
} 

.ftonestab [type=radio] { display: none; }

.ftonescontent {
position: absolute;
overflow: auto;
-webkit-transition-duration: .9s; 
-moz-transition-duration: .9s; 
-o-transition-duration: .9s; 
top: 360px; 
bottom: 0px; 
left: 0px; 
right: 0px;
background: #DBDBD8;
padding: 30px;
border: 1px solid #ccc;
text-align:justify;
font-size: 11px;
font-family: 'Raleway', sans-serif;
color: #2A3936;
}

.ftonescontent h1{
background-color: #C9D5CF;
border: 1px solid #2A3936;
color: #B63149;
text-transform: uppercase;
text-shadow: 1px 1px #2A3936;
padding: 10px;
text-align:center;
font-family: 'Arvo', serif;
font-size: 30px;
letter-spacing: -1px;
}

.ftonestab [type=radio]:checked ~ label { 
background-color: #BAD1D1;
color: #FE6671;
width: 30px;
border-bottom: 0px; 
z-index: 4; 
border-radius: 50%;
 width: 42px;
height: 42px;
} 

.ftonestab [type=radio]:checked ~ label ~ .ftonescontent {z-index: 5; top:0px;}


.ftonescontent::-webkit-scrollbar { width: 5px; height: 5px; }
.ftonescontent::-webkit-scrollbar-track { background-color: #FDB3BC; }
.ftonescontent::-webkit-scrollbar-thumb { background-color: #B63149; }

</style>


<center><div class="ftonestabs">

<div class="ftonestab">
<input type="radio" id="ftonestab-1" name="ftonestab-group-1" checked>
<label for="ftonestab-1"><i class="fa fa-user-circle-o" aria-hidden="true"></i></label>
<div class="ftonescontent">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d3/22/78/d32278e1e712bf6b31043a269d8663b3.jpg" style="border: 1px solid #C9D5CF;">
</div>
</div>

<div class="ftonestab">
<input type="radio" id="ftonestab-2" name="ftonestab-group-1">
<label for="ftonestab-2" style="margin-top: 80px;"><i class="fa fa-pencil" aria-hidden="true"></i></label>
<div class="ftonescontent">
<h1>biography</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet dictum tincidunt. Cras interdum tortor eget volutpat lacinia. Vivamus sodales lorem non erat interdum, in pretium dui pretium. Sed convallis tincidunt tortor a lacinia. Etiam a accumsan sem, rhoncus rutrum metus. Vestibulum vel tellus et dolor porttitor porta eget at ligula. Mauris fermentum elit leo, ut luctus dui fringilla at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non egestas felis, semper placerat est. Fusce bibendum dictum mattis. Nam sit amet tortor ut ligula interdum suscipit. Phasellus in nisl dolor. Aenean porta lacinia convallis. Ut ac lorem elementum, tincidunt nunc sodales, vehicula felis.
<br><br>
Mauris hendrerit orci nec diam venenatis tincidunt. Vivamus in aliquet est, at tincidunt ex. Ut consectetur mauris tellus, id faucibus libero lacinia non. Maecenas finibus, metus vitae porta aliquam, mauris ipsum elementum massa, at efficitur neque dui eget diam. Fusce velit lectus, lobortis quis nulla vitae, dictum lobortis tellus. Cras facilisis diam risus, id rutrum arcu tempor at. Phasellus condimentum nulla sed ultricies aliquet. Integer lorem nunc, pulvinar a vestibulum eget, dictum in arcu.
</div>
</div>

<div class="ftonestab">
<input type="radio" id="ftonestab-3" name="ftonestab-group-1">
<label for="ftonestab-3" style="margin-top: 165px;"><i class="fa fa-check" aria-hidden="true"></i></label>
<div class="ftonescontent">
<h1>likes</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet dictum tincidunt. Cras interdum tortor eget volutpat lacinia. Vivamus sodales lorem non erat interdum, in pretium dui pretium. Sed convallis tincidunt tortor a lacinia. Etiam a accumsan sem, rhoncus rutrum metus. Vestibulum vel tellus et dolor porttitor porta eget at ligula. Mauris fermentum elit leo, ut luctus dui fringilla at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non egestas felis, semper placerat est. Fusce bibendum dictum mattis. Nam sit amet tortor ut ligula interdum suscipit. Phasellus in nisl dolor. Aenean porta lacinia convallis. Ut ac lorem elementum, tincidunt nunc sodales, vehicula felis.
<br><br>
Mauris hendrerit orci nec diam venenatis tincidunt. Vivamus in aliquet est, at tincidunt ex. Ut consectetur mauris tellus, id faucibus libero lacinia non. Maecenas finibus, metus vitae porta aliquam, mauris ipsum elementum massa, at efficitur neque dui eget diam. Fusce velit lectus, lobortis quis nulla vitae, dictum lobortis tellus. Cras facilisis diam risus, id rutrum arcu tempor at. Phasellus condimentum nulla sed ultricies aliquet. Integer lorem nunc, pulvinar a vestibulum eget, dictum in arcu.
</div>
</div>


<div class="ftonestab">
<input type="radio" id="ftonestab-4" name="ftonestab-group-1">
<label for="ftonestab-4" style="margin-top: 250px;"><i class="fa fa-ban" aria-hidden="true"></i></label>
<div class="ftonescontent">
<h1>dislikes</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet dictum tincidunt. Cras interdum tortor eget volutpat lacinia. Vivamus sodales lorem non erat interdum, in pretium dui pretium. Sed convallis tincidunt tortor a lacinia. Etiam a accumsan sem, rhoncus rutrum metus. Vestibulum vel tellus et dolor porttitor porta eget at ligula. Mauris fermentum elit leo, ut luctus dui fringilla at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc non egestas felis, semper placerat est. Fusce bibendum dictum mattis. Nam sit amet tortor ut ligula interdum suscipit. Phasellus in nisl dolor. Aenean porta lacinia convallis. Ut ac lorem elementum, tincidunt nunc sodales, vehicula felis.
<br><br>
Mauris hendrerit orci nec diam venenatis tincidunt. Vivamus in aliquet est, at tincidunt ex. Ut consectetur mauris tellus, id faucibus libero lacinia non. Maecenas finibus, metus vitae porta aliquam, mauris ipsum elementum massa, at efficitur neque dui eget diam. Fusce velit lectus, lobortis quis nulla vitae, dictum lobortis tellus. Cras facilisis diam risus, id rutrum arcu tempor at. Phasellus condimentum nulla sed ultricies aliquet. Integer lorem nunc, pulvinar a vestibulum eget, dictum in arcu.
</div>
</div>
</div>
<span style="font-family:sans-serif; font-size: 8px;text-transform:uppercase;color:#999;float:right;width:610px;padding:5px;">thank you <a href="http://z10.invisionfree.com/Shadowplay/index.php?showuser=15657">alyssa</a></span>
</center>