Выглядит шаблон вот так (он пустой, потому что заполнить его должны вы!):
[hideprofile][html]
<!--- Цвета кастомизируются. Во всём шаблоне использованы всего четыре цвета за редкими исключениями. Просто укажите вместо цвета типа #af8c65 тот, который по вкусу вам. Экспериментируйте и сделайте свою страничку уникальной! --->
<style>
:root {
--main-color: #af8c65;
--2nd-color: #304c4e;
--3rd-dark-color:#152024;
--light-and-text:#cccccc;
}
</style>
<!--- Разметка начинается отсюда --->
<section class='void-feed-wrapper'>
<div class='void-feed-logo' />
<div class="vf-menu">
<!--- То, что внутри кавычек в атрибуте data-self и само название кнопки можно менять --->
<button class="vf-main" data-self='//data_about_me'>Profile</button>
<button class="vf-photos" data-self='//data_some_photo_shit'>Photos</button>
<button class="vf-music" data-self='//data_a_bit_of_music'>Music</button>
<button data-self='//data_custom_button'>Custom</button><!--- Пример кастомной кнопки. Название и описание меняется. Можно скопировать и добавить сколько нужно. Не забудьте, что к кнопке нужно и добавлять контейнеры! --->
</div>
<div id="main-content" class="vf-tab-content vf-prof ">
<div class='vf-aboutme-wrapper'>
<!--- шапка личной странички --->
<div class='ep-wrapper'>
<!--- Параллакс настраивается. Первая в списке картинка - фон. Остальные - png. Вы можете менять их как вам захочется. Если хочется статичной картинки - удалите все, кроме единственной и сотрите у неё атрибут data-speed="0.01" --->
<img class='parallax vf-custom-head' data-speed="0.01" src='https://i.imgur.com/dcWbOR1.png' >
<img class='parallax vf-custom-head' data-speed="0.04" src='https://i.imgur.com/0QGSsgK.png' >
<img class='parallax vf-custom-head' data-speed="0.07" src='https://i.imgur.com/ZSnGYUq.png' >
<img class='parallax vf-custom-head' data-speed="0.1" src='https://i.imgur.com/a0J0W77.png' >
</div>
<!--- аватар --->
<div class='vf-custom-avatar'><img src='https://i.imgur.com/tGZBV4p.png'></div>
<!--- личные данные --->
<div class='vf-personal'>
<div class='vf-name vf-approved'>Name Surname</div><!--- Имя персонажа--->
<a class='vf-agent' href='#ссылка_на_анкету'>@agent</a> <!--- любой подходящий на ваш вкус аватар (его можно менять, просто редактируя первое сообщение в теме с этим вот блоком --->
<div class='vf-status'>Есть многое на свете, друг Горацио, что и не снилось нашим мудрецам. </div> <!--- Статус (на 150-200 символов) --->
</div>
<div class='vf-about'><div class='vf-about-visual'>
<!--- Персональные данные. Можете менять текст внутри data-aboutme, добавлять свои дополнительные контейнеры и писать столько текста, сколько хотите. Пунктов может быть сколько угодно, просто на определённом этапе они начнут прокручиваться --->
<div data-aboutme='Date of Birth'>00 00 0000 </div>
<div data-aboutme='Occupation'>Описание почти любой длины </div>
<div data-aboutme='Custom'>Описание почти любой длины</div>
<div data-aboutme='Custom'>Описание почти любой длины</div>
<div data-aboutme='Custom'>Описание почти любой длины</div>
</div></div></div></div>
<div id="photos-content" class="vf-tab-content" >
<div class='fr-common-cont'><div class="vf-photos-data">
<!--- Просто надо вставить ссылку на фото с любого подходящего файлообменника. Надо добавить фото? Просто копируйте строку ещё раз. И ещё раз. --->
<img class="vf-pers-photo " src="https://i.imgur.com/tGZBV4p.png" alt="Photo">
<img class="vf-pers-photo " src="https://i.imgur.com/tGZBV4p.png" alt="Photo">
<img class="vf-pers-photo " src="https://i.imgur.com/tGZBV4p.png" alt="Photo">
</div>
</div>
</div>
<div id="music-content" class="vf-tab-content" ><div class='fr-music-cont'>
<!--- Вот тут ничего трогать не надо --->
<div class="vf-video-player">
<iframe id="vf-youtube-player" width="560" height="315" src="" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div class="vf-video-list">
<!--- Список музыкальных ссылок. РАБОТАЕТ ТОЛЬКО С YOUTUBE! Вам надо просто вставить в атрибут data-video-id код из ссылки видео на youtube. Ссылок может быть любое количество --->
<a href="#" data-video-id="bqM52TEP6uo">うには新しい技を身につけました！</a>
<a href="#" data-video-id="Oaw_Wy6XDFk">Cyberpunk 2077 - The Rebel Path</a>
<a href="#" data-video-id="XQL0ZxaVRhI">Korn - Let The Dark Do The Rest</a>
</div></div></div>
<!--- Этот блок нужен, если вы желаете добавить четвёртую вкладку. Его можно клонировать бесконечно и заполнять своим контентом. Если не нужен - просто удалите. Не забывайте: в комплекте с этим блоком обязательно нужна кнопка в меню выше. Частично работают бб-коды - размер шрифта, центр/справа/слева, жирный, курсив. Абзацы делаются с помощью <br> --->
<div class="vf-tab-content" ><div class='fr-custom-cont'>Кастомная кнопка<br>
</div></div>
<div class='void-feed-footer' />
<!--- ОФОРМЛЕНИЕ --->
<!--- Надписи внутри контейнеров можете менять на те, что хочется --->
<div class='fr-anim fr-flicker fr-anim-first' >//content_data_undefined</div>
<div class='fr-anim fr-anim-second' >//content_({foo})_display</div>
<div class='fr-anim fr-flicker fr-anim-third' >//data: TRN_VINODE_935081</div>
<div class='fr-anim fr-anim-fourth' >TRN_TCLASS_800095</div>
<div class='fr-anim fr-blur-out fr-anim-fifth' >VER_M6A6T64</div>
</section>[/html]
◀︎ ШАБЛОН ДЛЯ ПЕРВОГО СООБЩЕНИЯ ТЕМЫ ▶︎
Отредактировано AdminCP (2024-10-09 00:26:52)
- Подпись автора
подпись с картинкой в правом углу
КАРТИНКА
