ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Поисковой ресурс

Проект от команды FD

Спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Макет для сайта «Fantasy Calalogue»

Детализированный макет «Fantasy catalogue» для тёмного дизайна многостраничного сайта
Стоимость при покупке эксклюзивно: 3600р
В стоимость входит корректировка макета и доработка недостающих страничек под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Большая новость! Восстановление потерянного контента, уход одного админа и новое правило - обо всём читайте по ссылке.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Подборка html-шаблонов (html, css)

Сообщений 21 страница 23 из 23

1

Здесь мы будем делиться ссылками на сайты с интересными html-шаблонами и собственно, самими шаблонами. Шаблоны, представленные тут абсолютно универсальны для любой платформы.

Для поиска шаблонов на нужную тему воспользуйтесь навигацией:

Кнопки

Блоки/цитаты

Списки

Анкеты

Таблицы

Рамки

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+2

21

Создание формы оформления заказа (CSS)

https://i.imgur.com/syqB7Dk.png
https://i.imgur.com/uJ5I4FO.png

Подробнее HTML и CSS

Шаг 1) добавить HTML:
Используйте элемент <form> для обработки входных данных.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Шаг 2) добавить CSS:
используйте CSS Flexbox для создания адаптивного макета:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

👅 Тут я думаю и коментировать не надо.....да 😏

Вот такие 2 полезные плюшки (в которых разберется я думаю каждый как, что и куда)

Отредактировано МАЧОнаДАЧЕ (19.04.22 10:01)

Подпись автора

...

+2

22

Хронология эпизодов RRPTANG

Довольно универсальный и простенький код. Интересное решение - появление статуса эпизода при наведении на картинку. Да, единственно неудобство (как по мне) это то что в коде нужно ставить картинки к каждому эпизоду строго размером 100 * 100 px, потому что при наведении на них и появляется информация о статусе ну и эпизоды разного статуса никак между собой не отличаются и не поймёшь активен он или заброшен, пока не наведёшь мышь на картинку. Но есть идея как это обыграть: вместо картинок ставить иконки, показывающие статус эпизодов или просто квадраты, покрашенные в разные цвета.

[html]<style>

/*ОСНОВНОЕ*/
.RRPTANG {
margin:auto; /*отступ*/
width:500px; /*ширина*/
text-align:left; /*текст слева*/
}

/*КОПИРАЙТ*/
.cdtRRPTANG {
position:absolute; /*позиционирование*/
margin-top:60px; /*отступ сверху*/
margin-left:-12px; /*отступ слева*/
/*анимация появления копирайта*/
transform:scale(0);  -webkit-transform:scale(0); transition:all 0.75s ease-in-out; -webkit-transition:all 0.75s ease-in-out;
}
.RRPTANG:hover .cdtRRPTANG {
transform:scale(1); -webkit-transform:scale(1);
}
.RRPTANG a {
text-decoration:none !important; /*убрать подчёркивание у ссылок*/
}
.rpTANG {
margin-bottom:10px; /*отступ снизу*/
width:500px; /*ширина*/
height:100px; /*высота*/
overflow:hidden;
}

/* КАРТИНКА И СТАТУС */
.ISTANG {
float:left;
margin-left:25px; /*отступ слева*/
margin-right:10px; /*отступ справа*/
width:100px; /*ширина*/
height:100px; /*высота*/
text-align:center; /*текст по центру*/
/*анимация*/
transition:all 0.55s; -webkit-transition:all 0.55s;
transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
}
.iconTANG {
width:100px; /*ширина*/
height:100px; /*высота*/
overflow:hidden;
transform:translateZ(50px); -webkit-transform:translateZ(50px); /*анимация*/
}
.iconTANG img {/*картинка*/
width:100px; /*ширина*/
height:100px; /*высота*/
}
.ndeTANG { /*то что появляется при наведении на картинку*/
width:90px; /*ширина*/
height:95px; /*высота*/
padding:5px 5px 0; /*отступы*/
transform:rotateX(-90deg) translateZ(-50px); -webkit-transform:rotateX(-90deg) translateZ(-50px); /*анимация*/
background:#CCC; /*цвет фона*/
}
/* СТАТУС ЭПИЗОДА */
.ndeTANG span {
display:block;
margin-top:33px; /*отступ сверху*/
padding:5px; /*отступ*/
text-align:center; /*текст по центру*/
text-transform:uppercase; /*все буквы заглавные*/
font-size:10px; /*размер шрифта*/
font-family:Arial; /*шрифт*/
line-height:14px; /*высота линии*/
background:white; /*цвет фона*/
color:grey; /*цвет текста*/
}
.ISTANG:hover {
transform:rotateX(90deg); -webkit-transform:rotateX(90deg); /*анимация при наведении*/
}

/* НАЗВАНИЕ ЭПИЗОДА */
.tleTANG {
display:block;
width:490px; /*ширина*/
height:15px; /*высота*/
padding:5px 10px 5px 0; /*отступы*/
text-align:right; /*текст справа*/
font-style:italic; /*курсив*/
font-size:22px; /*размер шрифта*/
font-family:Arial; /*шрифт*/
line-height:16px; /*высота линии*/
background:darkgrey; /*цвет фона*/
color:#F8F8F8; /*цвет текста*/
}

.tleTANG a {color:#F8F8F8; /*цвет ссылки*/}
.ftTANG {
margin-top:5px; /*отступ сверху*/
width:490px; /*ширина*/
height:15px; /*высота*/
padding-right:10px; /*отступ справа*/
text-align:right; /*текст справа*/
font-size:10px; /*размер шрифта*/
font-family:Arial; /*шрифт*/
line-height:15px; /*высота линии*/
background:#F3F3F3; /*цвет фона*/
color:black; /*цвет шрифта*/
}

/* ОПИСАНИЕ */
.storyTANG {
margin-top:5px; /*отступ сверху*/
width:500px; /*ширина*/
height:40px; /*высота*/
padding:5px 0; /*отступы*/
background:#F8F8F8; /*цвет фона*/
color:black; /*цвет текста*/
}
.storyTANG p {/*текст описания*/
margin:0; /*отступы*/
width:355px; /*ширина*/
height:40px; /*высота*/
padding-right:5px; /*отступ справа*/
overflow-y:auto; /*прокрутка*/
font-size:10px; /*размер шрифта*/
text-align:justify; /*текст по ширине*/
font-family:Arial; /*шрифт*/
line-height:13px; /*высота линии*/
}
</style>

<div class="RRPTANG"><!-- КОПИРАЙТ, ПОЖАЛУЙСТА НЕ УДАЛЯЙТЕ! --><a class="cdtRRPTANG" href="http://crushcrushcrush.actifforum.com/" target="blank"><img src="https://i.imgur.com/VHYyELL.png" /></a>

<!-- ЭПИЗОД I --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/510329.png" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>В процессе</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="..." target="_blank" class="tleTANG">название эпизода</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">Перечисление участников эпизода</div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p></div></div>

<!-- ЭПИЗОД II --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/510329.png" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>В архиве</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="..." target="_blank" class="tleTANG">название эпизода</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">Перечисление участников эпизода</div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p></div></div>

<!-- ЭПИЗОД III --><div class="rpTANG"><!-- КАРТИНКА & СТАТУС ЭПИЗОДА --><div class="ISTANG"><!--КАРТИНКА 100*100 --><div class="iconTANG"><img src="https://forumupload.ru/uploads/0007/e3/f7/6822/510329.png" /></div><!-- СТАТУС ЭПИЗОДА --><div class="ndeTANG"><span>Заброшен</span></div></div>
<!-- НАЗВАНИЕ ЭПИЗОДА --><a href="..." target="_blank" class="tleTANG">название эпизода</a>
<!-- УЧАСТНИКИ --><div class="ftTANG">Перечисление участников эпизода</div>
<!-- ОПИСАНИЕ --><div class="storyTANG"><p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p></div></div>
[/html]

Ксс-код ставим в Свой стиль (но возможно понадобится немного корректировок), в хтмл-верх в тегах <style>:

Код:
<style>
тут коды
<style>

Или отдельным файлом:

Код:
     <!-- Стиль хронологии эпизодов -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->

HTML-код надо ставить или в сообщения (с помощью дополнительно - html в сообщениях), или на отдельную страницу.

CSS
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

HTML - пример хронологии из трёх эпизодов активного, в архиве и заброшенного
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

HTML добавление нового блока с эпизодом
Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+3

23

Алфавитный список ABCV

Этот алфавитный список выглядит минималистично и занимает мало места. Из особенностей - буквы выстроены в линии, каждый из кругов с буквами в линии имеет свой отдельный селектор, так что при желании их можно покрасить в разные цвета, задать разные стилевые параметры. В стиле рассчитано место для 6 кругов в одной линии, в каждом из которых написано 2 буквы. Для кругов с тремя буквами имеется отдельные стилевые настройки. Для списков на русском и на английском CSS и HTMl чуть-чуть разные.

[html]<style>
.ABCV{/*блок целиком*/
width:500px; /*ширина*/
margin:auto; /*отступы автоматические*/
line-height:16px; /*высота линий*/
}

#LTRSV {/*Буквы блок полностью*/
width:500px; /*ширина*/
height:35px; /*высота*/
margin-bottom:25px; /*отступ снизу*/
text-align:center; /*текст по центру*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}

#LTRSV:hover {/*Наведение на буквы*/
height:160px; /*высота появляющегося контейнера*/
color:white; /*цвет шрифта*/
}

#LTRSV span{/*чёрная полоса*/
display:block;
margin-top:-25px; /*отступ сверху*/
height:5px; /*высота линии*/
background:black; /*цвет линии*/
}

.LTRSV {/*круглые области на фоне букв*/
transition:all ease 0.35s; -webkit-transition:all ease 0.35s; /*анимация*/
position:relative; /*позиционирование*/
z-index:3;
display:inline-block;
vertical-align:top; /*вертикальное выравнивание*/
margin:0 15px; /*отступы*/
height:33px; /*высота*/
width:35px; /*ширина*/
padding:12px 5px 0px 5px; /*отступы*/
border-radius:35px; /*закругление краём*/
text-align:center; /*по центру*/
color:white; /*цвет шрифта*/
background:teal; /*фоновый цвет*/
}

.LTRSV div {/*контейнер при наведении на буквы - настройки*/
position:absolute; /*позиционирование*/
z-index:1;
margin-left:-45px; /*отступ слева*/
margin-top:25px; /*отступ сверху*/
width:500px; /*ширина*/
height:0; /*высота ноль - то есть его не видно*/
overflow:hidden;
background:rgba(250,250,250,0.3); /*цвет фона*/
color:black; /*цвет шрифта*/
text-align:left; /*текст слева*/
font-size:11px; /*размер шрифта*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}

.LTRSV:hover div{/*контейнер при наведении на буквы - появляется*/
width:500px; /*ширина*/
height:135px;  /*высота*/
}

.LTRSV p {/*блок с текстом в сером конейнере*/
width:490px; /*ширина*/
height:125px; /*высота*/
padding:5px; /*отступ по всем четырём краям*/
overflow:auto;
transform:translateY(-125px); -webkit-transform:translateY(-125px); /*анимация*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}

.LTRSV:hover p{/*блок с текстом в сером конейнере при наведении мышью на буквы*/
transform:translateY(0px); -webkit-transform:translateY(0px); /*анимация*/
}

.VII div{/*двигаем второй круг с буквами*/
position:absolute; /*позиционирование*/
margin-left:-120px; /*отступ слева*/
}

.VIII div{ /* двигаем 3й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-195px; /*отступ слева*/
}

.VIV div{ /* двигаем 4й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-270px; /*отступ слева*/
}

.VV div{ /* двигаем 5й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-345px; /*отступ слева*/
}

.VVI div{/* двигаем 6й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}
.STUV {/*Блок с буквами S T U*/
font-size:12px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.STUV div{ /* двигаем Блок с буквами S T U  */
position:absolute; /*позиционирование*/
margin-left:-270px;/*отступ слева*/
}
.XYZV {/*Блок с буквами XYZ*/
font-size:12px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.XYZV div{/* двигаем Блок с буквами XYZ  */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}
</style>

<div class="ABCV">
<!-- ПЕРВАЯ ЛИНИЯ --><div id="LTRSV">
<!-- A B --><div class="LTRSV">A B<!-- КОНТЕНТ В БЛОКЕ A B --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- C D --><div class="LTRSV VII">C D<!-- КОНТЕНТ В БЛОКЕ C D --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- E F --><div class="LTRSV VIII">E F<!-- КОНТЕНТ В БЛОКЕ E F --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- G H --><div class="LTRSV VIV">G H<!-- КОНТЕНТ В БЛОКЕ G H --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- I J --><div class="LTRSV VV">I J<!-- КОНТЕНТ В БЛОКЕ I J --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- K L --><div class="LTRSV VVI">K L<!-- КОНТЕНТ В БЛОКЕ K L --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ПЕРВОЙ ЛИНИИ БУКВ --><span></span></div><br/>

<!-- ВТОРАЯ ЛИНИЯ --><div id="LTRSV">
<!-- M N --><div class="LTRSV">M N<!-- КОНТЕНТ В БЛОКЕ M N --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- O P --><div class="LTRSV VII">O P<!-- КОНТЕНТ В БЛОКЕ O P --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Q R --><div class="LTRSV VIII">Q R<!-- КОНТЕНТ В БЛОКЕ Q R --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- S T U --><div class="LTRSV STUV">S T U<!-- КОНТЕНТ В БЛОКЕ S T U --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- V W --><div class="LTRSV VV">V W<!-- КОНТЕНТ В БЛОКЕ V W --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!--  X Y Z --><div class="LTRSV XYZV">X Y Z<!-- КОНТЕНТ В БЛОКЕ X Y Z --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ВТОРОЙ ЛИНИИ БУКВ --><span></span></div></div>[/html]


[html]<style>.ABCV{/*блок целиком*/
width:500px; /*ширина*/
margin:auto; /*отступы автоматические*/
line-height:16px; /*высота линий*/
}

#LTRSV {/*Буквы блок полностью*/
width:500px; /*ширина*/
height:35px; /*высота*/
margin-bottom:25px; /*отступ снизу*/
text-align:center; /*текст по центру*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}

#LTRSV:hover {/*Наведение на буквы*/
height:160px; /*высота появляющегося контейнера*/
color:white; /*цвет шрифта*/
}

#LTRSV span{/*чёрная полоса*/
display:block;
margin-top:-25px; /*отступ сверху*/
height:5px; /*высота линии*/
background:black; /*цвет линии*/
}

.LTRSV {/*круглые области на фоне букв*/
transition:all ease 0.35s; -webkit-transition:all ease 0.35s; /*анимация*/
position:relative; /*позиционирование*/
z-index:3;
display:inline-block;
vertical-align:top; /*вертикальное выравнивание*/
margin:0 15px; /*отступы*/
height:33px; /*высота*/
width:35px; /*ширина*/
padding:12px 5px 0px 5px; /*отступы*/
border-radius:35px; /*закругление краём*/
text-align:center; /*по центру*/
color:white; /*цвет шрифта*/
background:teal; /*фоновый цвет*/
}

.LTRSV div {/*контейнер при наведении на буквы - настройки*/
position:absolute; /*позиционирование*/
z-index:1;
margin-left:-45px; /*отступ слева*/
margin-top:25px; /*отступ сверху*/
width:500px; /*ширина*/
height:0; /*высота ноль - то есть его не видно*/
overflow:hidden;
background:rgba(250,250,250,0.3); /*цвет фона*/
color:black; /*цвет шрифта*/
text-align:left; /*текст слева*/
font-size:11px; /*размер шрифта*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}

.LTRSV:hover div{/*контейнер при наведении на буквы - появляется*/
width:500px; /*ширина*/
height:135px;  /*высота*/
}

.LTRSV p {/*блок с текстом в сером конейнере*/
width:490px; /*ширина*/
height:125px; /*высота*/
padding:5px; /*отступ по всем четырём краям*/
overflow:auto;
transform:translateY(-125px); -webkit-transform:translateY(-125px); /*анимация*/
transition:all linear 0.45s; -webkit-transition:all linear 0.45s; /*анимация*/
}

.LTRSV:hover p{/*блок с текстом в сером конейнере при наведении мышью на буквы*/
transform:translateY(0px); -webkit-transform:translateY(0px); /*анимация*/
}

.VII div{/*двигаем второй круг с буквами*/
position:absolute; /*позиционирование*/
margin-left:-120px; /*отступ слева*/
}

.VIII div{ /* двигаем 3й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-195px; /*отступ слева*/
}

.VIV div{ /* двигаем 4й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-270px; /*отступ слева*/
}

.VV div{ /* двигаем 5й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-345px; /*отступ слева*/
}

.VVI div{/* двигаем 6й круг с буквами */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}
.STUV {/*Блок с буквами СТУ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.STUV div{ /* Блок с буквами СТУ  */
position:absolute; /*позиционирование*/
margin-left:-195px; /*отступ слева*/
}

.FHCV {/*Блок с буквами ФХЦ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.FHCV div{ /* Блок с буквами ФХЦ  */
position:absolute; /*позиционирование*/
margin-left:-270px; /*отступ слева*/
}

.CHSHV {/*Блок с буквами ЧШЩ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.CHSHV div{ /* Блок с буквами ЧШЩ  */
position:absolute; /*позиционирование*/
margin-left:-345px; /*отступ слева*/
}

.EUYV {/*Блок с буквами ЭЮЯ*/
font-size:11px; /*размер шрифта*/
height:32px; /*высота*/
width:35px; /*ширина*/
padding:13px 5px 0px 5px; /*отступы*/
}
.EUYV div{/* двигаем Блок с буквами ЭЮЯ  */
position:absolute; /*позиционирование*/
margin-left:-420px; /*отступ слева*/
}</style>

<div class="ABCV">
<!-- ПЕРВАЯ ЛИНИЯ --><div id="LTRSV">
<!-- A Б --><div class="LTRSV">А Б<!-- КОНТЕНТ В БЛОКЕ A Б --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- В Г --><div class="LTRSV VII">В Г<!-- КОНТЕНТ В БЛОКЕ В Г --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Д Е --><div class="LTRSV VIII">Д Е<!-- КОНТЕНТ В БЛОКЕ Д Е --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Ж З --><div class="LTRSV VIV">Ж З<!-- КОНТЕНТ В БЛОКЕ Ж З --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- И К --><div class="LTRSV VV">И К<!-- КОНТЕНТ В БЛОКЕ И К --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Л М --><div class="LTRSV VVI">Л М<!-- КОНТЕНТ В БЛОКЕ Л М --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ПЕРВОЙ ЛИНИИ БУКВ --><span></span></div><br/>

<!-- ВТОРАЯ ЛИНИЯ --><div id="LTRSV">
<!-- Н О --><div class="LTRSV">Н О<!-- КОНТЕНТ В БЛОКЕ Н О --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- П Р --><div class="LTRSV VII">П Р<!-- КОНТЕНТ В БЛОКЕ П Р --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- С Т У --><div class="LTRSV STUV">С Т У<!-- КОНТЕНТ В БЛОКЕ С Т У --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Ф Х Ц --><div class="LTRSV FHCV">Ф Х Ц<!-- КОНТЕНТ В БЛОКЕ Ф Х Ц --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- Ч Ш Щ--><div class="LTRSV CHSHV">Ч Ш Щ<!-- КОНТЕНТ В БЛОКЕ Ч Ш Щ --><div><p><b>Прототип</b> — <i>Персонаж</i></p></div></div>
<!-- Э Ю Я --><div class="LTRSV EUYV">Э Ю Я<!-- КОНТЕНТ В БЛОКЕ Э Ю Я --><div><p><b>Прототип</b> — <i>Персонаж</i></p></p></div></div>
<!-- ЧЁРНАЯ ЛИНИЯ НА ФОНЕ ВТОРОЙ ЛИНИИ БУКВ --><span></span></div></div>[/html]

Ксс-код ставим в Свой стиль (но возможно понадобится немного корректировок), в хтмл-верх в тегах <style>:

Код:
<style>
тут коды
<style>

Или отдельным файлом:

Код:
     <!-- Стиль хронологии эпизодов -->
<link rel="stylesheet" type="text/css" href="https://ссылка на файл с ксс-кодом.css" />
<!-- Конец -->

HTML-код надо ставить или в сообщения (с помощью дополнительно - html в сообщениях), или на отдельную страницу.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

© CODAGE PAR SKAEMP / CCCRUSH
Переведено специально для FD

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+4