Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Marvel' rel='stylesheet' type='text/css'><style type="text/css">
::-webkit-scrollbar { height: 12px; width: 10px; background: transparent;}
::-webkit-scrollbar-thumb { background: #000; }
::-webkit-scrollbar-corner { background: #000; }
::-webkit-scrollbar-track { background: transparent; }
#mchar { width: 500px; height: 690px;background-image: url(http://funkyimg.com/i/25xUM.png); position: relative; }
#mchar h1 { width: 440px; margin: 15px 20px 15px 20px; background-color: #93908f; position: absolute; top: 0px; left: 0px; font-weight: inherit; text-align: center; height: 30px; line-height: 30px; color: #F0F0EE; letter-spacing: 5px; font-family: marvel; font-size: 9px; }
.mcharmain { width: 460px; height: 250px; position: absolute; top: 57px; left: 20px; }
.mcharmain .mchabout { width: 460px; height: 250px; position: absolute; top: 0px; left: 0px; background-color: rgba(255,255,255,0.8); opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 1s ease-in-out; }
.mcharmain:hover .mchabout { width: 300px; height: 150px; position: absolute; top: 50px; left: 80px; opacity: 1; filter: alpha(opacity=1); -webkit-transition: all 1s ease-in-out; }
.mchabout p { font-family: calibri; margin-top: 0px; font-size: 9px; text-transform: uppercase; text-align: justify; padding: 15px; overflow: auto; line-height: 10px; color: transparent; letter-spacing: 1px; }
.mcharmain:hover .mchabout p { color: black; height: 120px; -webkit-transition: all 0.5s 1s ease-in-out; }
.mchartabs { position: absolute; clear: both; top: 320px; left: 20px; width: 460px; height: 360px; }
.mchartab { float: left; target: inherit; } .mchartab label { position: relative; width: 220px; height: 165px; background-color: rgba(255,255,255,0.8); } .mchartab input[type=checkbox] { display: none; }
.mcchartent { position: absolute; height: 210px; width: 420px; padding: 20px; left: 0px; right: 0; top: -263px; opacity: 0; filter: alpha(opacity=0); z-index: -1; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; }
.mcchartent label { position: absolute; top: 5px; right: 5px; font-family: calibri; font-size: 8px; text-transform: uppercase; width: 20px; height: 20px; line-height: 20px; background-color: #33302E; color: white; }
.mchartab input[type=checkbox]:checked ~ label ~ .mcchartent { z-index: 99; background-color: rgba(255,255,255,0.8); opacity: 1; filter: alpha(opacity=100); height: 210px; width: 420px; }
.mchartab label h3 { text-align: center; font-family: times; font-size: 7px; font-style: italic; color: #33302E; letter-spacing: 3px; text-transform: uppercase; font-weight: inherit; margin-top: 63px; border: 1px solid rgba(0,0,0,0.1); padding: 10px; z-index: 99; width: 90px; }
.mcchartent h2 { width: 415px; height: 20px; position: absolute; left: 5px; top: -2px; padding-left: 10px; text-align: left; line-height: 20px; font-family: calibri; letter-spacing: 5px; font-size: 8px; color: #33302E; background-color: rgba(102,204,204,0.5); text-transform: uppercase; font-weight: inherit; }
.mctextmain { width: 415px; height: 175px; padding: 20px; overflow: auto; position: absolute; left: 0px; top: 30px; text-align: justify; font-family: calibri; font-size: 12px; letter-spacing: 1px; color: #33302E; line-height: 10px; }
.mctextmain a { font-family: times; font-size: 7px; color: #66CCCC; letter-spacing: 3px; text-decoration: none; }
.mctextmain a:hover { color: #33302E; }
</style><center><div id="mchar">
<h1>GHOSTS WITH JUST VOICES</h1><div class="mcharmain">
<img src="http://funkyimg.com/i/25xUk.jpg"></div>
<div class="mchartabs"><div class="mchartab"><input type="checkbox" id="boxone" name="toggle"><label for="boxone" style="position: absolute; top: 0px; left: 0px;">
<h3>информация</h3>
</label><div class="mcchartent"><label for="boxone">X</label>
<h2>CHAR FIRST MIDDLE LAST</h2><div class="mctextmain">
Люди, не замечающие происходящего вокруг, полностью погруженные в свои дела,забившие головы несущественными мелочами. Не видят как Люди Икс борются с преступностью, Шерлок Хомс занялся изучением магии в школе Хогвартс, а несносные парни из Теории большого взрыва помогают железному человеку. Они даже не могут себе представить, настолько тонка и незаметна грань между мирами. Она заперта до невозможности,незаметна и практически прозрачна. И она исчезает полностью, как только появляется кроссовер. И вы спросите, что же такое кроссовер? И я отвечу вам, что кроссовер - это своеобразный микс из всех существующих фандомов. Огромная вселенная с самыми разнообразными персонажами, начиная от животных и заканчивая Богами. Место, где можно ощутить желанную свободу: переместиться во времени и пространстве, поговорить с историческими личностями, побывать в будущем, познакомиться со своими двойниками, побежать навстречу неизвестному. Здесь возможно все, если оно не противоречит логике и здравому смыслу.<br>
итак, вы уже погрузились в мир фантазий?что ж, не буду надолго задерживать,и сразу перейду к делу. Наш проект находиться в режиме <b>нулевой</b> готовности,но Вы уже сейчас можете забронировать любимые внешности, а если у Вас появилось желание поучаствовать в создании проекта, и ваша голова наполнилась множеством идей, которыми, вы непременно хотите поделиться, тогда, жду Вас в АМС. И все, что от Вас требуется,- регистрация. Именно этот шаг отделяет Вас от путешествия в таинственный мир.
</div></div></div>
<div class="mchartab"><input type="checkbox" id="boxtwo" name="toggle"><label for="boxtwo" style="position: absolute; top: 0px; left: 238px;">
<h3>нужные персонажи</h3>
</label><div class="mcchartent"><label for="boxtwo">X</label>
<h2>CHAR FIRST MIDDLE LAST</h2><div class="mctextmain">
сюда
</div></div></div>
<div class="mchartab"><input type="checkbox" id="boxthree" name="toggle"><label for="boxthree" style="position: absolute; bottom: 15px; left: 0px;">
<h3>парни</h3>
</label><div class="mcchartent"><label for="boxthree">X</label>
<h2>CHAR FIRST MIDDLE LAST</h2><div class="mctextmain">
сюда
</div></div></div>
<div class="mchartab"><input type="checkbox" id="boxfour" name="toggle"><label for="boxfour" style="position: absolute; bottom: 15px; left: 238px;">
<h3>девушки</h3>
</label><div class="mcchartent"><label for="boxfour">X</label>
<h2>CHAR FIRST MIDDLE LAST</h2><div class="mctextmain">
сюда
</div></div></div>
</div></div>
</center>Код:
<a href="link">имя персонажа</a> — <i>группа</i><br> выбранная вами роль<BR><BR>