.
шабл
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться22018-01-31 23:36:23
Код:
<!--HTML-->
<!---НЕ ТРОГАЙТЕ---!>
<style>.jfb,.jfbfriend,.jfbscroll{overflow:auto}.jfbnarrow,.jfbtabbar,.jffloattall{box-sizing:border-box}
.jfb{width:570px;height:auto;color:#333;background-color:#e9eaed;outline:#f0f0f0 solid 1px;margin:0 auto;position:relative;font:normal normal normal 11px/110% Helvetica,Arial,sans-serif}
.jfb ::-webkit-scrollbar{width:3px}.jfb ::-webkit-scrollbar-track{background-color:#d8dfea}.jfb ::-webkit-scrollbar-thumb{background-color:#6d84b4}.jfbtabbar,.jfbwide{background-color:#fff}
.jfb .jprofile{position:absolute;top:120px;left:18px;border:3px solid #fff;outline:#ddd solid 1px}.jfbtab label,.jfbtabbar{border-right:1px solid #ddd;border-left:1px solid #ddd}.jfbtabbar{width:100%;height:40px;border-bottom:1px solid #ddd;text-align:center;font:normal normal normal 12px/40px Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:1px}.jfbtabcontainer{margin:5px;position:relative;height:420px}.jfbtab{float:left}.jfbtab input[type=radio]{display:none}.jfbtab .jfcontent{opacity:0}.jfbtab input[type=radio]:checked~label~.jfcontent{opacity:1;z-index:2}.jfbtab label{display:block;height:40px;padding:0 14px;margin:2px -1px 0 0;position:relative;top:-47px;left:130px;font:normal normal bold 12px/40px Helvetica,Arial,sans-serif;text-transform:none;letter-spacing:normal;color:#6e7dc2}.jfbtab input[type=radio]:checked~label{color:#505a8a}.jfbtab input[type=radio]:checked~label:after{content:"";position:absolute;bottom:0;left:42%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid #e9eaed}.jfcontent{position:absolute;top:0;left:0;right:0;bottom:0}.jfbwide{border:1px solid #ddd}.jfbwide h1{background-color:#f6f7f8;padding:20px;margin:0;border-bottom:1px solid #ddd}.jfbscroll{margin:10px;padding-right:5px;height:345px}
.jfbphotos img{border:0;padding:0;float:justify;margin:0px;width:170px;height:47px}
.jfbfriend{width:49%;display:inline-block;height:80px}.jfbfriend img{float:left;margin-right:15px}.jfbwide h2{margin:0;float:left;font:normal normal bold 16px/80px Helvetica,Arial,sans-serif;color:#3b5998}.jfbwide h3{font:normal normal bold 12px/100% Helvetica,Arial,sans-serif;margin:0 0 20px 10px;padding:3px 5px;color:#888;text-align:left}.jfbwide h3:nth-of-type(1){margin-top:30px;border-left:3px solid #3b5998;color:#000}.jfbwide h4{margin:15px 0 5px;border-bottom:1px solid #ddd;padding-left:20px;text-transform:uppercase;font:normal normal bold 9px/100% Helvetica,Arial,sans-serif;color:#888}.jfbnarrow span,.jffloattall span{color:#6d84b4}.jfbwide h4:nth-of-type(1){margin-top:0}.jfbnarrow p{text-indent:5px}.jffloatleft{height:365px;width:29%;float:left;border-right:1px solid #ddd}.jfbnarrow{padding:20px}.jffloattall{height:405px;padding:10px 10px 0 5px}.jfbpost{height:auto;background-color:#f1f1f1;border:1px solid #ddd;margin-bottom:20px}.jfbpost:last-child{margin-bottom:0}.jfbpostmain{background-color:#fff;padding:15px;text-align:justify}.jpostimage{float:left;margin-right:15px}.jfbpostmain h5{margin:14px 0 18px;font:normal normal bold 14px/100% Helvetica,Arial,sans-serif;color:#3b5998}.jfbpostmain h5 span{display:block;font-weight:400;font-size:10px;color:#666}.jfblike{margin-top:10px;color:#6d84b4}.jfblike2{color:#6d84b4;margin:10px}.jpostimage{max-width:100%;display:block;margin-bottom:5px}</style>
<div class="jfb">
<!---А ВОТ ЗДЕСЬ УЖЕ ТРОГАЙТЕ. Вместо первой ссылки placehold.it вставляете ссылку на свою обложку, размера 570х200. Вместо второй ссылки - квадратную аватарку; размер аватарки подгонится автоматически. ---!>
<img src="https://placehold.it/570x200" class="jcover">
<img src="https://placehold.it/100x100" class="jprofile">
<!---СНОВА НЕ ТРОГАЙТЕ---!>
<div class="jfbtabbar">
</div>
<div class="jfbtabcontainer">
<div class="jfbtab">
<input type="radio" id="jtimeline" name="jfbgroup-1" checked>
<label for="jtimeline"> стена </label>
<div class="jfcontent">
<div class="jffloatleft jffloattall">
<div class="jfbpost">
<div class="jfbpostmain">
<!---ТРОГАЙТЕ. Вписываем аккуратно между скобочками---!>
Работает в <span>Место работы</span><br><br>
Окончил(а)/Учится в <span>ВУЗ/Школа</span><br><br>
Живёт в <span>г. Сеуле</span><br><br>
Родом из <span>г. Город</span>
<!---НЕ ТРОГАЙТЕ---!>
</div>
</div>
</div>
<div class="jfbscroll jfbnarrow jffloattall" style="padding: 10px;">
<!---ТРОГАЙТЕ. Вместо ссылки placehold.it снова вставляете ссылку на свою аватарку; размер опять же подгонится автоматически. Пишите свой пост!---!>
<div class="jfbpost">
<div class="jfbpostmain">
<img src="https://placehold.it/50x50" class="jpostimage">
<h5>Фамилия Имя<span>00.00.00</span>
</h5>
Здесь ты пишешь мысли, которыми хотел бы поделиться с семьей, друзьями и знакомыми. Тут может быть что-то личное, что-то смешное, что-то интересное, или что-то совершенно неглубокое, случайно написанное пьяной ночью. Дай полет своей фантазии!
<div class="jfblike">♥ Нравится • Коментарий • Поделиться</div></div>
<!---Впишите имена лайкнувших пост и количество "еще" лайкнувших---!>
<div class="jfblike2">Имя, имя, и еще 00</div>
</div>
<div class="jfbpost">
<div class="jfbpostmain">
<img src="https://placehold.it/50x50" class="jpostimage">
<h5>Фамилия Имя<span>00.00.00</span>
</h5>
А еще можешь выложить фотографию; картинку размером 400х200. Не забудь ее красиво подписать!
<img src="https://placehold.it/400x200" class="jpostimage">
<div class="jfblike">♥ Нравится • Комментарий • Поделиться</div></div>
<div class="jfblike2">Имя, имя, и еще 00</div>
</div>
<!---Чтобы сделать еще один пост, скопируйте и вставьте кусочек начиная от
<div class="jfbpost">
и заканчивая
<div class="jfblike2">Имя, имя, и еще 00</div>
</div>
Сложно, знаю, но вы сможете! Верю! ДАЛЬШЕ НЕ ТРОГАЙТЕ---!>
</div>
</div>
</div>
<div class="jfbtab">
<input type="radio" id="jabout" name="jfbgroup-1">
<label for="jabout"> обо мне </label>
<div class="jfcontent">
<!---ТРОГАЙТЕ. Думаю, сами разберетесь---!>
<div class="jfbwide"><h1></h1><div class="jffloatleft"><h3>моя страница</h3>
<h3><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_АНКЕТУ"><b>моя анкета</b></a></h3>
<h3><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ИНСТАГРАМ"><b>мой инстаграм </b></a></h3></div><div class="jfbscroll jfbnarrow">
<h4>краткая история</h4>
<p>Вкратце расскажи о себе!</p>
<h4>место жительства и место рождения</h4>
<p>Проживает в <span>г. Сеул, Республика Корея</span></p>
<p>Родился в <span>г. Город, Страна</span></p>
<h4>семья</h4>
<p><span>Имя члена семьи</span>; <span>Имя члена семьи</span>; <span>Имя члена семьи</span>; <span>Имя члена семьи</span>; <span>Имя члена семьи</span>;</p>
<h4>семейное положение</h4>
<p>♥ Женат на (Замужем за)/Помолвлен(а) с/Встречается с <span>Имя пары</span>/Без пары</p>
<h4>место работы</h4>
<p>00.00.00 - 00.00.00/настоящее, <span>Место работы</span></p>
<!---НЕ ТРОГАЙТЕ---!>
</div>
</div>
</div>
</div>
<div class="jfbtab">
<input type="radio" id="ejabout" name="jfbgroup-1">
<label for="ejabout"> отношения </label>
<div class="jfcontent"><div class="jfbwide"><h1></h1>
<div class="jffloatleft"><h3>мои отношения</h3></div>
<div class="jfbscroll jfbnarrow"><h4>мои отношения</h4>
<!---ТРОГАЙТЕ. Пройденный материал---!>
<p><table><tr><td width=35%><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ПРОФИЛЬ"><img src="https://placehold.it/80"></a></td>
<td>Описание персонажа и отношений с ним.</td></tr>
<tr><td width=35%><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ПРОФИЛЬ"><img src="https://placehold.it/80"></a></td>
<td width=65%>Описание персонажа и отношений с ним.</td></tr>
<tr><td width=35%><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ПРОФИЛЬ"><img src="https://placehold.it/80"></a></td>
<td width=65%>Описание персонажа и отношений с ним.</td></tr>
<tr><td width=35%><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ПРОФИЛЬ"><img src="https://placehold.it/80"></a></td>
<td width=65%>Описание персонажа и отношений с ним.</td></tr>
<tr><td width=35%><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ПРОФИЛЬ"><img src="https://placehold.it/80"></a></td>
<td width=65%>Описание персонажа и отношений с ним.</td></tr>
<tr><td width=35%><a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ПРОФИЛЬ"><img src="https://placehold.it/80"></a></td>
<td width=65%>Описание персонажа и отношений с ним.</td></tr></table></p>
<!---НЕ ТРОГАЙТЕ---!>
</div>
</div>
</div>
</div>
<div class="jfbtab">
<input type="radio" id="ijabout" name="jfbgroup-1">
<label for="ijabout"> эпизоды </label>
<div class="jfcontent">
<div class="jfbwide"><h1></h1>
<div class="jffloatleft"><h3>мои эпизоды</h3></div>
<div class="jfbscroll jfbnarrow">
<!---ТРОГАЙТЕ---!>
<h4>реал</h4>
1. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода<br>
2. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода<br>
3. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода</p>
<h4>флешбэк</h4>
1. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода<br>
2. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода<br>
3. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода</p>
<h4>альтернатива</h4>
1. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода<br>
2. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода<br>
3. <a href="http://pleasewait.rusff.me/ССЫЛКА_НА_ТЕМУ"><b>название эпизода</b></a> // участники эпизода</p>
<!---НЕ ТРОГАЙТЕ---!>
</div>
</div>
</div>
</div>
<div class="jfbtab"><input type="radio" id="jphoto" name="jfbgroup-1"><label for="jphoto"> награды </label><div class="jfcontent"><div class="jfbwide"><h1></h1><div class="jfbscroll jfbphotos">
<img src="http://s4.uploads.ru/A6oBE.png">
</div></div></div></div>
</div></div>
<!---ВЫ СМОГЛИ---!>Страница: 1
