Код:
<!--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>