[*html]

<!---НЕ ТРОГАЙТЕ---!>

<style>.jfb,.jfbfriend,.jfbscroll{overflow:auto}.jfbnarrow,.jfbtabbar,.jffloattall{box-sizing:border-box}

.jfb{width:570px;height:auto;color:#333;background-color:#dde4e6;outline:#f0f0f0 solid 1px;margin:0 auto;position:relative;font:normal normal normal 11px/110% Helvetica,Arial,sans-serif}

.jfb ::-webkit-scrollbar{width:2px}.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">&hearts; Нравится &bull; Коментарий &bull; Поделиться</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">&hearts; Нравится &bull; Комментарий &bull; Поделиться</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>&hearts; Женат на (Замужем за)/Помолвлен(а) с/Встречается с <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>
<!---ВЫ СМОГЛИ---!>[/*html]