Код:
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Wire+One|Geo|Russo+One|Economica' rel='stylesheet' type='text/css'> <style type='text/css'> #appheader { width: 480px; height:300px; background: #999; margin:0px auto; } #app_hover { width: 480px; height: 300px; position: relative; overflow: hidden; } #app_hover .app_inside { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; o-transition: all .5s ease-out; position: absolute; left: 0px; bottom: 0px; width: 480px; height: 300px; } #app_hover:hover .app_inside { -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; o-transition: all .5s ease-out; top: -320px; } #app_container{ height: 280px; width: 480px; padding: 30px 0px; background: #ddd; color: #111; text-transform: uppercase; font-family: 'Exo', sans-serif; line-height: 100%; padding-top: 10px; text-align: center; letter-spacing: 2px; border:1px solid #111; } .app_title{ display:block; font: 18px "Economica"; line-height:16px; background: #211e27; color:#ddd; padding:10px; margin:0px auto; border-bottom:1px solid #131611; text-transform:uppercase; } #app span{ display:block; width:50%; float:right; text-align:right; } #app_name { margin-top:30px; padding:30px; font: 31px "wire one"; } #app_details { font-size:9px; margin:10px 20px; } #app_quote { text-transform:lowercase; font-style:italic; font-size:9px; margin:10px 40px; } #app { width:480px; padding: 10px 10px; background: #111; margin:20px auto 0px auto; } #revo_cred {width:480px; margin: 0px auto 20px auto; font-size:8px; text-transform:uppercase; text-align:center; } #revo_cred a {font-weight:bold; text-decoration:none;} .app_info { background:#ddd; color:#111; padding:10px; height:200px; overflow:auto; } .accordion3 { margin:0px auto; width:480px; background: #111; font: 9px arial; letter-spacing:1px; } .accordion3 ul { list-style:none; margin:0; padding:0; } .accordion3 li { margin:0; padding:0; } .accordion3 [type=radio], .accordion [type=checkbox] { display:none; } .accordion3 label { display:block; font: 18px "Economica"; line-height:16px; background: #57596e; color:#ddd; cursor:pointer; text-transform:uppercase; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; } .accordion3 ul li label:hover, .accordion3 [type=radio]:checked ~ label, .accordion3 [type=checkbox]:checked ~ label { background:#fa824e; background-position: top right; color:#fff; } .accordion3 .content3 { color:#555; background:#ddd; padding:0px 10px; height:200px; overflow:auto; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; text-align:justify; font-size:11px; } .accordion3 .content3 .info{ padding:10px; } .app_foot{ display:block; font: 18px "Economica"; line-height:16px; background: #211e27; color:#ddd; padding:10px; margin:0px auto; text-align:center; text-transform:uppercase; } /* Vertical */ .vertical3 ul li { overflow:hidden; margin:0 0 1px; } .vertical3 ul li label { padding:10px; } .vertical3 [type=radio]:checked ~ label, .vertical3 [type=checkbox]:checked ~ label { border-bottom:0; } .vertical3 ul li label:hover { } .vertical3 ul li .content3 { height:0px; border-top:0; } .vertical3 [type=radio]:checked ~ label ~ .content3, .vertical3 [type=checkbox]:checked ~ label ~ .content3 { height:300px; } </style> <div id="app"> <div class="app_title">[KOTIKI] <span> <img src="http://funkyimg.com/i/2Lb3B.png"><img src="http://funkyimg.com/i/2L1ES.png"></span></div> <div id="appheader"><div id="app_hover"><div class="app_inside"><div id="app_img"> <img src="http://funkyimg.com/i/2Lb3y.png" width="500" height="300" /> </div> <div id="app_container"> <div id="app_name"> раздача приватов онлайн без смс и регистрации</div> <div id="app_details"> CLAN [KOTIKI] | 65/140 | 03.06.16 <br /> ZOOMKA | LAZY_CAT | NASAREK </div> <div id="app_quote">" ехал котик через реку<br> видит кот - в реке приват<br> сунул котик руку в реку<br> вся подслушка его цап "</div></div></div></div></div><div class="accordion3 vertical3"> <ul><li><input type="radio" id="radio-1" name="radio-accordion3" checked="checked" /><label for="radio-1">ЗНАКОМСТВО</label><div class="content3"><div class="info"> Каждому даётся право выбора. Каждый реализует его так, как захочет и сможет. <br> Кто-то становится одиночкой. Кто-то уходит в другой клан. Наш путь иной — мы - [KOTIKI].<br> Наши преимущества - ламповая атмосфера, собственные беседы в вк/дискорде, клановые конкурсы/гонки<br><br><br><br> <img src="http://funkyimg.com/i/2Lb3F.png"> </div></div></li><li><input type="radio" id="radio-2" name="radio-accordion3" /><label for="radio-2">УЧАСТНИКИ</label><div class="content3"><div class="info"> ‣ набор закрыт;<br> ‣ около 65 участников;<br> ‣ владелец Zoomka/ExeCute <br> ‣ помощники Lazy_Cat, Nasarek<br> Участники: ...<br><br> <a href="https://vk.com/kotikiyo">Мы в VK.</a><br><br> </div></div></li><li><input type="radio" id="radio-3" name="radio-accordion3" /><label for="radio-3">СТАТИСТИКА </label><div class="content3"><div class="info"> Состояние на Сентябрь - 8.000 лапок.<br> Бонусы:<br> ‣ самый активный клан - 0;<br> ‣ clan war - 0;<br> ‣ активность - 0;<br><br> Ранг клана - 0.<br> Выполненные задания:<br> ‣ ...<br> ‣ ...<br> ‣ ...<br><br> Проведенные мероприятия:<br> ‣ ...<br> ‣ ...<br> ‣ ...<br> </div></div></li></ul></div><div class="app_foot "><a href="https://vk.com/zoomkawoker">ZOOMKA</a> | <a href="https://vk.com/dcp_kid">LAZY_CAT</a> | <a href="https://vk.com/nasarek">NASAREK</a></div> </div><div id="revo_cred">за технической помощью писать <a href="https://vk.com/only_posers_die_you_idiot">pticin</a></div>