<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'> <center><div style="width: 300px; height: 150px; border-top: #734186 10px solid; border-bottom: #734186 7px solid; background-color: #fff; padding: 10px;"><div style="background-color: #fed78a; height: 18px; color: white; font-family: aguafina script; font-size: 20px; line-height: 65%; padding: 5px; text-transform: lowercase;">История моей жизни</div><div style="font-family: calibri; font-size: 8px; color: #734186; letter-spacing: 5px; text-transform: uppercase;">"Жизнь — это волнующее приключение, и самая прекрасная жизнь — это жизнь, прожитая для других людей."</div><div style="width:240px; height: 90px; font-family: Calibri; font-size: 10px; color: #734186; text-align: justify; overflow: auto; padding-left: -55px; padding-top: 10px; line-height: 9px;"> <b>- Анкету Вы выкладываете сами в теме "регистрация", создавая при этом отдельную тему. Анкету нужно заполнить по шаблону, которую можно найти в той же теме - "регистрация". Перед отправкой желательно проверить её на наличие ошибок в Microsoft Word или других текстовых программах. Название анкеты, стандартное : имя на английском [возраст]. Администрация желает вам вдохновения в заполнении анкеты.</b> </div></center>
не забудьте убрать звездочки (*)
в названии анкеты следует указать: surname name, age.
как вы видели - у нас анкета в html, потому напоминаем некоторые вещи:
<b>жирный текст</b>
<i>курсив</i>
<u>подчеркнутый текст</u>
<s>зачеркнутый текст</s>
<br> – перенос строки
если вам понадобились выравнивания по краям_центру, то ставятся эти кода:
<center>текст посередине</center>
<div style="text-align: left">выравнивание по левому краю</div>
<div style="text-align: right">выравнивание по правому краю</div>
для изображении у нас тоже есть код:
<img src="сюда вставляется прямая ссылка на изображение">
Код:<!--HTML--> <style type="text/css"> .noraa { opacity: 0; width: 240px; height: 140px; padding: 10px; background-color: white; -moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s; -o-transition-duration: 0.9s; } .noraa:hover { opacity: 1; width: 240px; height: 140px; padding: 10px; background-color: white; -moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s; -o-transition-duration: 0.9s; } </style> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type='text/css'> .lovelybone { position:relative; overflow:hidden; width:490px; height:500px;background-image: url(http://funkyimg.com/i/28jLy.png); padding:20px; } .lovelybones { position:relative; overflow:hidden; width:400px; height:410px; background-color:#fff; padding:20px; } .whitewash { position:absolute; overflow:hidden; top:20px; left:-400px; width:380px; height:480px; padding:10px; background-color:#fff; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .lovelybones:hover .whitewash { left:20px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .text { width:155px; height:30px; padding-right:5px; padding-bottom:4px; border-bottom:1px solid #eee; margin-bottom:5px; font-family:oswald; color:#222; line-height:30px; font-size:12px; text-transform:lowercase; text-align:right; } .infos { position:absolute; left: 210px; top:10px; padding-left:20px; width:160px; height:280px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .lilpic { position:absolute; top:10px; left:-10px; overflow:hidden; width:140px; height:390px; background-image: url(http://funkyimg.com/i/28pDj.png); padding:20px; margin-right:20px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .lilpic:hover { width:380px; background-color:#f5f5f5; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; transition-delay: .75s; -webkit-transition-delay: .75s; } .lilpicc { position:absolute; top:0px; left:0px; width:380px; height:380px; opacity:1; -webkit-transition: 1s ease-out;-moz-transition: 1s ease-out;-o-transition: 1s ease-out; } .lilpic:hover .lilpicc { top:280px; } .wooooords { opacity:0; width:350px; height:370px; overflow:auto; text-align:justify; line-height:100%; font-size:12px; font-family:calibri; color:#fff; } .lilpic:hover .wooooords { opacity:1; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; transition-delay: .75s; -webkit-transition-delay: .75s; } </style><center><div style='width:440px; height:50px; background-color:#fff; border-radius:5px; font-family:oswald; color:#222; line-height:50px; font-size:20px; text-transform:uppercase; letter-spacing:2px;'> NAME SURNAME </div><div class='lovelybone'><div class='lovelybones'><div class='whitewash'><div class='infos'><div class='text'> ИМЯ ФАМИЛИЯ НА РУС. </div><div class='text'> ВОЗРАСТ </div><div class='text'> ДАТА РОЖДЕНИЯ </div><div class='text'> МЕСТО РОЖДЕНИЯ </div><div class='text'> ПРОФЕССИЯ </div><div class='text'> ОРИЕНТАЦИЯ </div><div class='text'> СЕМЕЙНОЕ ПОЛОЖЕНИЕ </div><div class='text'> </div></div><div class='lilpic'><div class='wooooords'> тут будет что-то, что вы напишете. другими словами ваша альма матер - анкета. минимум семь развернутых пунктов о биографии и характере вашего персонажа. способ оформления на ваш вкус. </div> </div></div> <img src='http://placehold.it/400x490'> </div><div style='width:440px; height:50px; background-color:#fff; font-family:oswald; color:#222; line-height:50px; font-size:20px; text-transform:uppercase; letter-spacing:2px;'> </div></div> <div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'></div> </center>
[*code]<!**--HTML--> <style type="text/css"> .noraa { opacity: 0; width: 240px; height: 140px; padding: 10px; background-color: white; -moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s; -o-transition-duration: 0.9s; } .noraa:hover { opacity: 1; width: 240px; height: 140px; padding: 10px; background-color: white; -moz-transition-duration: 0.9s; -webkit-transition-duration: 0.9s; -o-transition-duration: 0.9s; } </style> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><style type='text/css'> .lovelybone { position:relative; overflow:hidden; width:490px; height:500px;background-image: url(http://funkyimg.com/i/28jLy.png); padding:20px; } .lovelybones { position:relative; overflow:hidden; width:400px; height:410px; background-color:#fff; padding:20px; } .whitewash { position:absolute; overflow:hidden; top:20px; left:-400px; width:380px; height:480px; padding:10px; background-color:#fff; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .lovelybones:hover .whitewash { left:20px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .text { width:155px; height:30px; padding-right:5px; padding-bottom:4px; border-bottom:1px solid #eee; margin-bottom:5px; font-family:oswald; color:#222; line-height:30px; font-size:12px; text-transform:lowercase; text-align:right; } .infos { position:absolute; left: 210px; top:10px; padding-left:20px; width:160px; height:280px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .lilpic { position:absolute; top:10px; left:-10px; overflow:hidden; width:140px; height:390px; background-image: url(http://funkyimg.com/i/28pDj.png); padding:20px; margin-right:20px; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; } .lilpic:hover { width:380px; background-color:#f5f5f5; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; transition-delay: .75s; -webkit-transition-delay: .75s; } .lilpicc { position:absolute; top:0px; left:0px; width:380px; height:380px; opacity:1; -webkit-transition: 1s ease-out;-moz-transition: 1s ease-out;-o-transition: 1s ease-out; } .lilpic:hover .lilpicc { top:280px; } .wooooords { opacity:0; width:350px; height:370px; overflow:auto; text-align:justify; line-height:100%; font-size:12px; font-family:calibri; color:#fff; } .lilpic:hover .wooooords { opacity:1; -webkit-transition: 0.7s ease-out;-moz-transition: 0.7s ease-out;-o-transition: 0.7s ease-out; transition-delay: .75s; -webkit-transition-delay: .75s; } </style><center><div style='width:440px; height:50px; background-color:#fff; border-radius:5px; font-family:oswald; color:#222; line-height:50px; font-size:20px; text-transform:uppercase; letter-spacing:2px;'> NAME SURNAME </div><div class='lovelybone'><div class='lovelybones'><div class='whitewash'><div class='infos'><div class='text'> ИМЯ ФАМИЛИЯ НА РУС. </div><div class='text'> ВОЗРАСТ </div><div class='text'> ДАТА РОЖДЕНИЯ </div><div class='text'> МЕСТО РОЖДЕНИЯ </div><div class='text'> ПРОФЕССИЯ </div><div class='text'> ОРИЕНТАЦИЯ </div><div class='text'> СЕМЕЙНОЕ ПОЛОЖЕНИЕ </div><div class='text'> </div></div><div class='lilpic'><div class='wooooords'> тут будет что-то, что вы напишете. другими словами ваша альма матер - анкета. минимум семь развернутых пунктов о биографии и характере вашего персонажа. способ оформления на ваш вкус. </div> </div></div> <img src='http://placehold.it/400x490'> </div><div style='width:440px; height:50px; background-color:#fff; font-family:oswald; color:#222; line-height:50px; font-size:20px; text-transform:uppercase; letter-spacing:2px;'> </div></div> <div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'></div> </center>[/code*]