Код:
<!--HTML--><center><link href='http://fonts.googleapis.com/css?family=NTR' rel='stylesheet' type='text/css'><div style="width: 400px; height: 270px; padding: 15px; background: url(http://funkyimg.com/i/27ua1.jpg); z-index: 1;"></div><center><div class="tabs"><div class="tab"><input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1"><div style="width: 120px; height: 120px; border: 2px solid #DEDBD7; position: relative; top: -60px; border-radius: 100%; background: url(http://funkyimg.com/i/27uqu.gif); background-size: 120px; z-index: 4; cursor: pointer; "></div></label> <div class="content"> <div style="font-family: 'NTR', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 70%; text-align: center; color: black; letter-spacing: 2px;">Всем привет!</div> <div style="font-family: calibri; font-size: 8px; height: 8px; line-height: 100%; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 2px; overflow: hidden;">С вами Мэтт!</div> <div style="width: 350px; font-family: calibri; height: 160px; padding-bottom: 1px; padding-top: 7px; color: #000; font-size: 13px; text-align: justify; line-height: 100%; overflow: auto;" class="motherscroll"> Я счастлив приветствовать гостей и участников форума на нашей ролевой. Ради вас мы много трудились в последнее время и, наконец, <b>Divergent & The100</b> начинает оживать, чему я безумно рад) Мы перезапустили полюбившийся нам проект и, поверьте, сил не пожалеем чтобы сделать вашу игру как можно интереснее, сюжеты - неожиданнее, а времяпрепровождение на форуме - комфортным, увлекательным и уютным. Будьте уверены, я за этим прослежу. Привязываясь к форумам - привязываешься и к людям, и не передать словами, как я рад видеть вновь знакомых людей. Это так круто, что вы снова с нами! Я желаю нам всем вдохновения для интересных постов и побольше свободного времени. Ах да, вы ведь в курсе, что серии третьего сезона Сотни уже выходят, а третий Дивергент выйдет совсем скоро? Ждем все вместе с нетерпением и активно обсуждаем развитие событий. </div></div></div><div class="tab"><input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2"><div style="width: 120px; height: 120px; border: 2px solid #fff; position: relative; top: -60px; border-radius: 100%; background: url(http://funkyimg.com/i/27uqp.gif); background-size: 120px; margin-left: 5px; z-index: 4; cursor: pointer; "></div></label> <div class="content"> <div style="font-family: 'NTR', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 70%; text-align: center; color: black; letter-spacing: 2px;">Всем привет!</div> <div style="font-family: calibri; font-size: 8px; height: 8px; line-height: 100%; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 2px; overflow: hidden;">С Вами Джон!</div> <div style="width: 350px; font-family: calibri; height: 160px; padding-bottom: 1px; padding-top: 7px; color: #000; font-size: 13px; text-align: justify; line-height: 100%; overflow: auto;" class="motherscroll"> От себя добавлю, что хоть мы и ушли на недолгий перерыв по определенным причинам, тем не менее, мы вновь собрались для того, чтобы устроить по-настоящему <s>АДСКИЙ АД НА ЭТОЙ ПЛАНЕТЕ</s> интересную и захватывающую игру. На волне выхода третьего сезона "Сотни" и премьеры третьего фильма "Аллигент" мы вдохновлены открывающимися возможностями развития событий и хотели бы, чтобы наши игроки переняли это вдохновение у нас. Давайте устроим настоящее столкновение двух миров и посмотрим, что из этого выйдет. Ну и пойдем в Город Света, разумеется х) </div></div></div><div class="tab"><input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3"><div style="width: 120px; height: 120px; border: 2px solid #fff; position: relative; top: -60px; border-radius: 100%; background: url(http://funkyimg.com/i/27uqo.gif); background-size: 120px; margin-left: 5px; z-index: 4; cursor: pointer; "></div></label> <div class="content"> <div style="font-family: 'NTR', sans-serif; font-size: 20px; text-transform: uppercase; line-height: 70%; text-align: center; color: black; letter-spacing: 2px;">Всем привет!</div> <div style="font-family: calibri; font-size: 8px; height: 8px; line-height: 100%; text-align: center; text-transform: uppercase; color: #000; letter-spacing: 2px; overflow: hidden;">С Вами Этна!</div> <div style="width: 350px; font-family: calibri; height: 160px; padding-bottom: 1px; padding-top: 7px; color: #000; font-size: 13px; text-align: justify; line-height: 100%; overflow: auto;" class="motherscroll"> Дражайшие мои, родные и хорошие, я рада вновь вас всех приветствовать на нашем скромном и уютном форуме! Вы не поверите, какое это счастье вновь распахнуть двери нашего дома и впустить гостей, умиротворенно завалиться на диване во флуде и обнять всех близких, дорогих! Я свято верю в то, что мы с вами дойдем до злосчастного Города Света и установим там свои законы! Я присоединяюсь к словам своих мужчин и желаю нам только самого хорошего! <b>А СЕЙЧАС ВРЕМЯ ПИЗДЮЛЕЙ</b>, я была бы не Этной, если это не напишу, <s>ВСЕ У КОГО ДО СИХ ПОР НЕ НАПИСАНЫ АНКЕТЫ, КТО НЕ ПРИСТУПИЛ К ИГРЕ - буду жестко наказаны %)</s> <b>mon amour pour vous ne</b> </div></div></div></div></center><div style="width: 400px; height: 100px; margin-top: -143px; background: #25221d; padding: 15px;"><div style="font-family: 'NTR', sans-serif; font-size: 35px; color: #fff; text-transform: uppercase; line-height: 90%; position: relative; top: 60px;">АМС ВЕЩАЕТ!</div><div style="font-family: calibri; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; color: #fff; line-height: 10%; margin-top: -3px; margin-bottom: 10px; position: relative; top: 60px;">And the mother we share will never keep our cold hearts from calling</div></div> <p><style type="text/css">.tabs { position: relative; width: 400px; height: 145px; } .tab { float: left; } .tab label { position: relative; left: 5px; } .tab [type=radio] { display: none; } .content { height: 230px; bottom: 0px; left: 0px; right: 0px; background: white; position: absolute; top: -285px; padding: 20px; overflow: hidden; opacity: 0; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; } [type=radio]:checked ~ label { z-index: 2; } [type=radio]:checked ~ label ~ .content { z-index: 2; opacity: 0.99; z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); } .motherscroll::-webkit-scrollbar {height: 2px;} .motherscroll::-webkit-scrollbar-track { background-color: #fff;} .motherscroll::-webkit-scrollbar-thumb { background-color: #000000;}</style>