Код:
<div class="character">
<div class="pp-header">
<div class="pp-name">Имя Фамилия </div>
<div class="pp-info">раса, фракция</div>
</div>
<div class="pp-navigation">
<label class="pp-label pp-label1">
<input id="option1" checked="checked" name="toggle" type="radio"></input>
<span class="pp-section-title pp-section-title1">Профиль и хронология</span>
<div class="pp-section pp-section1">
<div class="pp-icons">
<!-- Начало иконки
<div class="pp-icon">
<img src="https://upforme.ru/uploads/001c/7d/10/4/863066.gif" />
</div>
Конец иконки -->
</div>
<div class="pp-plates">
<!-- Начало плашки
<div class="pp-plate">
<img src="https://upforme.ru/uploads/001c/7d/10/2/116861.png" />
<div>
<p>come what may</p>i'm here at the end
</div>
</div>
Конец плашки -->
</div>
<!-- Начало фона
<div class="pp-backgrounds">
<div class="pp-background"><img src="https://forumstatic.ru/files/001c/7a/01/25927.png" /></div>
</div>
Конец фона -->
<div class="pp-episodes">
<!-- Начало эпизода
<a class="pp-episode" href="https://obscura.rusff.me/viewtopic.php?id=196#p14941">
<div class="pp-episode-date">9:38</div>
<div class="pp-episode-title"> two of crows</div>
<div class="pp-episode-type">личный</div>
</a>
Конец эпизода -->
</div>
</div>
</label>
<label class="pp-label pp-label2">
<input id="option2" name="toggle" type="radio" />
<span class="pp-section-title pp-section-title2">Подарки</span>
<div class="pp-section pp-section2">
<div class="pp-gifts">
<!-- Начало подарка
<div class="pp-gift">
<div class="pp-gift-image">
<img src="https://upforme.ru/uploads/001c/7a/01/2/171718.png" />
</div>
<div class="pp-gift-wrapper">
<div class="pp-gift-title">Подарок</div>
<div class="pp-gift-description">Мой любимый бывший вороненок и НАДЕЖНЫЙ агент Инквизиции, целую твои золотые кодерские ручки</div>
</div>
</div>
Конец подарка -->
</div>
</div>
</label>
<label class="pp-label pp-label3">
<input id="option3" name="toggle" type="radio" />
<span class="pp-section-title pp-section-title3">Достижения</span>
<div class="pp-section pp-section3">
<div class="pp-achievements">
<!-- Начало ачивки с ссылкой на пруф
<a href="https://obscura.rusff.me/viewtopic.php?id=82#p3330" class="pp-achievement pp-achievement-achieved">
<div class="pp-achievement-image">
<img src="https://forumstatic.ru/files/001c/7d/10/22281.png">
</div>
<div class="pp-achievement-wrapper">
<div class="pp-achievement-title">Oh, Grey Warden...</div>
<div class="pp-achievement-description">послушать в эпизоде песню барда</div>
</div>
</a>
Конец ачивки -->
<!-- Начало ачивки без ссылки на пруф
<div class="pp-achievement pp-achievement-achieved">
<div class="pp-achievement-image">
<img src="https://forumstatic.ru/files/001c/7d/10/38777.png" />
</div>
<div class="pp-achievement-wrapper">
<div class="pp-achievement-title">Подающий надежды автор</div>
<div class="pp-achievement-description">5 постов</div>
</div>
</div>
Конец ачивки -->
</div>
</div>
</label>
<label class="pp-label pp-label4">
<input id="option4" name="toggle" type="radio" />
<span class="pp-section-title pp-section-title4">Коллекционирование</span>
<div class="pp-section pp-section4">
<div class="pp-collections">
<div class="pp-collection">
<div class="pp-collection-image">
<img src="https://forumstatic.ru/files/001c/7a/01/98274.webp?v=1" width="150" height="150">
</div>
<div class="pp-collection-description">
<div class="pp-collection-title">Голубое яйцо</div>
<ul class="pp-collection-tasks">
<li class="pp-collection-task">— Оставить 30 сообщений во флуде за день;</li>
<li class="pp-collection-task">— Отыграть NPC под маской</li>
<li class="pp-collection-task">— Отыграть NPC под маской;</li>
<li class="pp-collection-task">— Отыграть NPC под маской;</li>
<li class="pp-collection-task">— Отыграть NPC под маской;</li>
<li class="pp-collection-task">— Отыграть NPC под маской.</li>
</ul>
</div>
</div>
<div class="pp-collection">
<div class="pp-collection-image">
<img src="https://forumstatic.ru/files/001c/7a/01/23370.webp?v=1" width="150" height="150">
</div>
<div class="pp-collection-description">
<div class="pp-collection-title">Изумрудное яйцо</div>
<ul class="pp-collection-tasks">
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений.</li>
</ul>
</div>
</div>
<div class="pp-collection">
<div class="pp-collection-image">
<img src="https://forumstatic.ru/files/001c/7a/01/59309.webp?v=1" width="150" height="150">
</div>
<div class="pp-collection-description">
<div class="pp-collection-title">Зеленое яйцо</div>
<ul class="pp-collection-tasks">
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений.</li>
</ul>
</div>
</div>
<div class="pp-collection">
<div class="pp-collection-image">
<img src="https://forumstatic.ru/files/001c/7a/01/40645.webp?v=1" width="150" height="150">
</div>
<div class="pp-collection-description">
<div class="pp-collection-title">Синее яйцо</div>
<ul class="pp-collection-tasks">
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений.</li>
</ul>
</div>
</div>
<div class="pp-collection">
<div class="pp-collection-image">
<img src="https://forumstatic.ru/files/001c/7a/01/59403.webp?v=1" width="150" height="150">
</div>
<div class="pp-collection-description">
<div class="pp-collection-title">Золотое яйцо</div>
<ul class="pp-collection-tasks">
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений.</li>
</ul>
</div>
</div>
<div class="pp-collection">
<div class="pp-collection-image">
<img src="https://forumstatic.ru/files/001c/7a/01/69263.webp?v=1" width="150" height="150">
</div>
<div class="pp-collection-description">
<div class="pp-collection-title">Волшебное яйцо</div>
<ul class="pp-collection-tasks">
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений;</li>
<li class="pp-collection-task">— Провести онлайн 3 часа подряд;</li>
<li class="pp-collection-task">— Собрать 5 игровых достижений.</li>
</ul>
</div>
</div>
</div>
</div>
</label>
</div>
</div>
