Код:
<!--HTML--> 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style type='text/css'>

.baddream {
   width: 350px;
   height: 400px;
   background-color: #8235ea;
   margin: 0 auto;
   padding: 5px 5px 12px 5px;
}

.openroad {
   width: 340px;
   height: 50px;
   font-family: 'arial' sans-serif; 
   font-weight: bold;
   font-size: 50px;
   text-transform: lowercase; 
   color: #ffffff; 
   letter-spacing: -5px; 
   line-height: 100%;
   padding: 1px 3px 2px 4px;
}

.topdown {
   width: 340px;
   height: 15px;
   font-family: 'arial' sans-serif;
   font-weight: 400;
   font-size: 9px;
   text-align: justify;
   text-transform: uppercase; 
   color: #ffffff; 
   letter-spacing: 1px; 
   line-height: 100%;
   padding: 0px 3px 0px 20px;
}


.loveiknow {
   margin: 0 auto;
   font-size: 14px;
   position: relative;
   top: 170px;
}

a.wow:link {
  color:#8235ea;
  text-decoration: none;
}

a.wow:visited {
  color:#8235ea;
}
a.wow:hover {
  color:#b84041;
}

.stabs { 
   position: relative;   
   width: 250px; 
   height: 240px; 
   clear: both;
   top: 23px;
}

.stab { 
   float: left; 
} 








.stab label { 
   display: block; 
   background-color: #ffffff;
   width: 18px;
   height: 18px;
   padding: 6px 5px 5px 6px;
   margin-top: 5px;
   margin-left: 13px; 
   text-align: center; 
   line-height: 100%; 
   letter-spacing: 0px; 
   color: #000000; 
   background-color: #ffffff;
   position: relative;
   left: 60px;
   top: -5px; 
   font-size: 15px;
}
.stabs .stab [type=radio] { 
   display: none; 
} 
.stabs .stab [type=radio]:checked ~ label { 
   background: #ffffff;
   color: #8235ea;
   z-index: 1; 
}
.stabs .stab [type=radio]:checked ~ label ~ .content {
   z-index: 4; 
   -webkit-transform: scale(1);
   -o-transform: scale(1); 
   -moz-transform: scale(1);
}
.content {
   position: absolute;
   bottom: 0px;
   top: 105px;
   left: 6px;
   right: 0px;
   background: #ffffff;
   padding: 20px 12px 20px 12px;
   width: 315px;
   height: 230px;
  font-family: 'arial' sans-serif;
   font-weight: 400;
   font-size: 11px;
   text-align: justify;
   letter-spacing: 0px;
   overflow-y: auto; 
   -webkit-transform: scale(0); 
   -o-transform: scale(0); 
   -moz-transform: scale(0); 
   -webkit-transition-duration: .8s; 
   -moz-transition-duration: .8s; 
   -o-transition-duration: .8s;
}
</style>





<body>
<div class="baddream">
<div class="stabs">
<div class="openroad">ACTIVITIES & ENTERT.</div>
<div class="topdown">lee taemin - 21.09.2015</div> 
<div class="stab"><input type="radio" id="stab-1" name="stab-group-1" checked>
<label for="stab-1"><i class="fa fa-pencil-square-o"></i></label>
<div class="content">
<img src="http://funkyimg.com/i/22P9e.gif">
</div> 
</div>



<div class="stab">
<input type="radio" id="stab-3" name="stab-group-1">
<label for="stab-3"><i class="fa fa-phone"></i></label>
<div class="content">
<center><div style="width: 250px; height: 30px; background: #8235ea; font-family: lobster; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">важная информация</div>

<div class="althekiller">

<a href="URL"><div class="faceclaim"><div class="maleceleb">правила</div><div class="malechar">правила</div></a>
</div>


<a href="URL"><div class="faceclaim"><div class="maleceleb">сюжет</div><div class="malechar">сюжет</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">город любви</div><div class="malechar">город любви</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">объявления</div><div class="malechar">объявления</div></a>
</div>

<a href="URL"><div class="faceclaim"><div class="maleceleb">что-то</div><div class="malechar">что-то</div></a>
</div></center>
<P>
<P>
</div>
</div>

<div class="stab">
<input type="radio" id="stab-4" name="stab-group-1">
<label for="stab-4"><i class="fa fa-male"></i></label>
<div class="content">
<link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'><style type="text/css">.foofighters {background-color: #ffffff;color: #000000;width: 450px;border-top: 10px solid #000000;padding: 10px;text-align: center;}.whenilearnto {text-align: center;font-family: pathway gothic one;margin: 10px 0px;font-size: 30px;text-transform: uppercase; color: #634933;}.althekiller {width: 200px;float: left; padding-left: 60px; padding-top: 30px;}.althekiller .boys {font-family: pathway gothic one;font-size: 25px;color: #b1ce99;text-align: center;text-transform: uppercase; margin-bottom: 10px;}.althekiller .girls {font-family: pathway gothic one;font-size: 25px;color: #897393;text-align: center;text-transform: uppercase;margin-bottom: 10px;}.althekiller .faceclaim {width: 175px;height: 20px;display: block;overflow: hidden;margin-bottom: 5px; }.althekiller .maleceleb{background-color: #8235ea;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;}.althekiller .malechar{background-color: #000000;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;margin-top: -20px;opacity: 0;transition: .8s all;-moz-transition: .8s all;-webkit-transition: .8s all;-o-transition: .8s all;}.althekiller .malechar:hover {opacity: .99; }.althekiller .girlceleb{background-color: #897393;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;}.althekiller .girlchar{background-color: #000000;padding: 5px 0px;display: block;width: 175px;height: 10px;font-family: arial;font-size: 8px;color: #ffffff;text-transform: uppercase;text-align: center;letter-spacing: 2px;margin-top: -20px;opacity: 0;transition: .8s all;-moz-transition: .8s all;-webkit-transition: .8s all;-o-transition: .8s all;}.althekiller .girlchar:hover {opacity: .99; }</style><center>

<center><div style="width: 250px; height: 30px; background: #8235ea; font-family: lobster; font-size: 20px; text-transform: lowercase; color: white; line-height: 30px;">оформление профиля</div>

<div class="althekiller">

<a href="URL"><div class="faceclaim"><div class="maleceleb">личное звание</div><div class="malechar">личное звание</div></a>
</div>


<a href="URL"><div class="faceclaim"><div class="maleceleb">отношения</div><div class="malechar">отношения</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">инстаграм</div><div class="malechar">инстаграм</div></a>
</div>



<a href="URL"><div class="faceclaim"><div class="maleceleb">внешности</div><div class="malechar">внешности</div></a>
</div>

<a href="URL"><div class="faceclaim"><div class="maleceleb">личная страница</div><div class="malechar">личная страница</div></a>
</div></center>
<P>
<P>
</div>
</div>
</div>




</body>