Код:
<!--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: #3dba37;
margin: 0 auto;
padding: 5px 5px 12px 5px;
}
.openroad {
width: 340px;
height: 50px;
font-family: 'arial' sans-serif;
font-weight: bold;
font-size: 55px;
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:#3dba37;
text-decoration: none;
}
a.wow:visited {
color:#3dba37;
}
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: #3dba37;
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">CAREER & LUXURY</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/22Pb7.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: #3dba37; 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: #3dba37;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: #3dba37; 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>
