Код:
<!--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: #272e53; 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: #374176; 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:#878dac; 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: #272e53; 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">SMOW <span> <img src="http://funkyimg.com/i/2L1ET.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/2L1Eg.png" width="500" height="300" /> </div> <div id="app_container"> <div id="app_name"> Saint Monastery of Wisdom</div> <div id="app_details"> Братство [SMOW] | 10/35 | 15.01.17 <br /> CEILEVER | MENTHOL | MARTA_S</div> <div id="app_quote">" ✧ Священный Храм Мудрости ✧ "</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"> Всех приветствуем в нашем Братстве [SMOW]! Мы рады новым, активным и дружелюбным игрокам, которые готовы присоединиться к нашей ламповой семье и участвовать в различных мероприятиях для всего клана. В нашем братстве важно чтить все законы и следовать уставу внутри клана. Здесь Вас будут ждать тёплый приём и уютный дружелюбный клан, где Вы сможете завести новые знакомства и друзей! Welcome to SMOW!<br><br> Наше преимущество в поддержке друг друга и желании проявлять максимальную активность во всех мероприятиях, отдача в своих действиях и стремление к новым вершинам.<br><br> <img src="http://funkyimg.com/i/2L1He.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> ‣ около 29 участников;<br> ‣ владелец Ceilever<br> ‣ помощники Menthol и Marta_S<br> Участники: XxassaxX, vladomon, H8_Seed, DexterMorgan, Lizard, Nirtti, Alpha, Menthol, Xenogenies, anaconda, Marta_S, Drunken, Anomander, Aldorra_Lamina, Fuja, JackMurderer, DaShEn, -Roof-, Rougaru, Mellowhypez, Olenesta, Adamsn, Metamorphose, nevoir, Slane, Cardamon, Svirepaya<br><br> <a href="https://vk.com/clan_smow">Мы в VK.</a><br><br> Если у Вас будут какие-то вопросы относительно нашего Братства, можете написать в ЛС сообщества или кому-то из стаффа [контакты], кто будет доступен на данный момент. Просьба ознакомиться с правилами нашей обители. Ведите себя хорошо в группе! С уважением и печеньками, Братаны [SMOW]. </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/darya_veselovs">Ceilever</a> | <a href="https://vk.com/marta_sekirova">Marta_S</a> | <a href="https://vk.com/menthol_s">Menthol</a></div> </div><div id="revo_cred">за технической помощью писать <a href="https://vk.com/only_posers_die_you_idiot">pticin</a></div>