`tsunami | Luca

Страница: 1 2 3 »

Сообщений 1 страница 10 из 25

Поделиться12013-02-10 14:31:41

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Хорошего дня. Я очень рада, что стала теперь твоим учителем. Очень надеюсь, что нашу обучение пойдет тебе на пользу, ты научишься многому интересному и познавательному. К сожалению, сейчас не очень много времени на обучение, я буду стараться читать тему и проверять работы по мере возможности.

План наших занятий

1. Что такое CSS? На чем основаны дизайны?
2. Стандартный код. Разберем поверхностно второе окно стиля.
3. Изменяем стандартный код под себя.
4. Работаем с кодом.
5. Добавим чего-то нового.
6. Работаем с первым окном стиля.
7. Разные виды дизайнов.

Журнал наших занятий

Буду дополнять по мере выполнения тобой заданий.
Тема урока. Задание.
Оценка за задание.
Что такое CSS?
На чем основаны дизайны?
Задание 1.
4+
Были небольшие недочеты.
Стандартный код.
Разберем поверхностно второе окно стиля.
Задание 2.
5
Работа выполнена отлично.
Изменяем код под себя.
Задание 3.
5
Замечательные исходники.
Работаем с кодом.
Задание 4.
5
Все отлично. Сенсэй доволен х)
Добавим чего-то нового.
Задание 5.

P.S. Ошибки я буду выделять красным и исправлять им же. Фуксией выделяю и исправляю недочеты. Таким цветом буду писать заголовки и сноски из своих же уроков для повторного прочтения.
Итак, начнем. Ты с css не знакома вообще?
Покажи, пожалуйста, некоторые свои работы html и в фотошопе.

Отредактировано `tsunami (2013-02-14 22:03:26)

Поделиться22013-02-10 14:35:50

Автор: Luca
Мое персональное бэээзумие
Зарегистрирован: 2013-02-09
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +0
Провел на форуме:
7 часов 14 минут
Последний визит:
2013-02-15 18:07:42

`tsunami
что-то как-то с большим трудом я могу изменить мелкие детали. заменить шапку там, фон. но это если у меня уже будет готовая основа. сама прописывать я это все не умею. вообще, постигала я это все методом "а что будет, если я удалю эту хрень?" и скажу не особо получалось

хтмл - таблица на ролевой по мостовым. с фотошопом сейчас сложнее. мой аватар тут моя единственная сохранившаяся фш работа. но я могу полазить, поискать авось, что проявится х)

Отредактировано Luca (2013-02-10 14:37:21)

Поделиться32013-02-10 16:52:54

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Для начала можешь внимательно полистать полезные статьи на форуме по дизайну, там есть очень хорошие. Для твоего обучения я буду пользоваться разными учебниками по CSS, если тебе будет интересно, ты потом сама сможешь посмотреть в интернете что-то подробнее.
Начнем.
Что же такое CSS?
Для начала как всегда немного теории. CSS расшифровывается как Cascading Style Sheets (каскадные листы стилей). Вообще CSS предназначен для того, чтобы делать оформление Веб-страниц. Это немного похоже на то, что можно делать в текстовом редакторе, например, в Microsoft Word'е. Но на самом деле, с помощью CSS можно делать намного больше.
Все форумы или сайты состоят из страниц, текста, ссылок. Определенный дизайн же просто делает форум удобнее для чтения и восприятия, но ничего более. Дизайн делает форум или сайт более красивым, отличает его от других, подчеркивает его тематику. Собственно, главные цели самого дизайнера я тоже уже перечислила.
Селекторы, свойства, значения
Так же, как в HTML есть теги, в CSS есть "селекторы". Селекторы – это имена стилей. Селектор определяет тот элемент, который будет каким-то образом меняться. Учить селекторы не нужно, их всегда можно подглядеть в исходном коде, так как это уникальные индентификаторы и классы элементов.
У каждого селектора есть "свойства", определяемые внутри фигурных скобок. Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения. Свойство - это то, что будет меняться в элементе, который мы выбрали селектором (например, фон). Значения свойств присваиваются при помощи двоеточия и разделяются точкой с запятой. С помощью значений мы указываем, что именно будет меняться (например, цвет фона).
Не бывает такого, чтобы свойство было отдельно от значения. Они всегда вместе.

body {
font-size: 0.8em;
color: #12007F;
}

В данном примере создается селектор body, в котором определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст между тегами body (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8 em и темно-синим цветом.

В коде css индентификаторы обозначаются решеткой (#), а классы точкой (.).

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 500px; top: 0px
}

Таких пар "свойство: значение" у селектора может быть несколько. В таком случае, мы указываем их через точку с запятой:

#селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

Параметры CSS
Фон
1. Цвет
backroung-color
Цвет фона какого-то элемента. Значением здесь может быть только веб-название выбранного цвета.
2. Картинка
backround-image
Фоновая картинка. Значения:
url("...") - вместо многоточия идет прямая ссылка на выбранную картинку, естественно, загруженную через какой-то сервер. Если картинки нет, то можно оставить пустые скобки без кавычек внутри или же использовать значение none.
3. Повторение
backround-repeat
Определяет, будет ли повторяться фоновая картинка. Значения:
repeat (или repeat-xy) - повторяется
no-repeat - не повторяется
repeat-y - повторяется по оси y (вертикально)
repeat-x - повторяется по оси х (горизонтально)
4. Прокрутка
backround-attachment
Определяет, будет ли прокручиваться фон или нет. Значения:
fixed - не будет
scroll - будет
5. Расположение
backround-position
Определяет расположение фоновой картинки. Значения:
top - сверху
center - по центру
bottom - снизу
left - слева
right - справа

Шрифт, текст
Для более удобной работы стиль для шрифта можно прописывать в одну строчку, через запятую указывая значения.
font - все нижеперечисленные параметры шрифта вместе.
1. Цвет
color
Определяет цвет шрифта в элементе. Как значение может употребляться только веб-название какого-то цвета.
2. Размер
font-size
Определяет размер шрифта. В качестве значений можно использовать любые единицы измерения CSS (их все я привожу позже), а можно так называемые константы - стандартные размеры (xx-small, x-small, small, medium, large, x-large, xx-large).
3. Стиль
font-style
Определяет начертание шрифта. Значения:
normal - нормальное, обычное
italic - курсив
oblique - немного менее наклонный, чем курсив
4. Толщина
font-weight
Определяет толщину начертания. Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
Число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
5. Семейство шрифта
font-family
Список шрифтов может включать несколько названий, но тогда их нужно разделять запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

6. Выравнивание
text-align
Определяет выравнивание текста внутри элемента. Значения:
center - по центру
justify - по ширине
left - слева
right - справа
7. Украшения
text-decoration
Определяет декоративные элементы текста. Значения:
underline - нижнее подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Границы (рамки)
Для более удобной работы стиль для границ можно прописывать в одну строчку без запятых.
border - все нижеперечисленные параметры.
border-top - все параметры верхней рамки (это не селектор, а свойство).
border-bottom - все параметры нижней рамки (это не селектор, а свойство).
border-right - все параметры правой рамки (это не селектор, а свойство).
border-left - все параметры левой рамки (это не селектор, а свойство).
1. Цвет
border-color
Определяет цвет границы (рамки). В качестве значения может использоваться только веб-название какого-то цвета.
2. Толщина
border-weight
Определяет толщину границы (рамки). Значения пойдут ниже (см. единицы измерения).
3. Стиль
border-style
Опрелеляет стиль сторон рамки. Значения:
none - рамки нет вообще
dotted - пунктирная рамка из точек
dashed - обычная пунктирная рамка
solid - одинарная сплошная рамка
double - двойная сплошная рамка
groove - трехмерная впадающая рамка
ridge - трехмерная возвышающаяся рамка
inset - трехмерная заглубленность фона
outset - трехмерная выпуклость фона
Значения CSS
1. Единицы измерения

Единицы измерения

em (например, font-size: 2em) используется для определения размера шрифта. Так "2em" означает, что заданный шрифт будет в два раза больше шрифта по умолчанию.
px (например, font-size: 12px) единица измерения - пиксели.
pt (например, font-size: 12pt) единица измерения – пункты.
% (например, font-size: 80%) единица измерения – проценты.
Другие единицы измерения – pc (пики), cm (сантиметры), mm (миллиметры) и in (дюймы).
Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если ты хочешь полностью убрать рамку вкруг элемента, то можно задать "border: 0".

2. Цвета
Для всех параметров, требующих указания цвета, нужно указывать веб-название этого самого цвета. Оно состоит из шести знаков после решетки (#).

Задание на закрепление
Для следующих селекторов задаешь следующие параметры и выкладываешь сюда получившийся у тебя код. Дальше разбираем ошибки.
1. Для селектора фон задаешь такие параметры:
- любая фоновая картинка
- картинка не повторяется
- картинка находится по центру
- фон прокручивается
2. Для селектора шрифт задаешь такие параметры:
- цвет выбираешь сама
- размер шрифта medium
- нормальное начертание
- шрифт Trebuchet Ms
3. Для селектора текст задаешь такие параметры:
- текст выравнивается по ширине
- имеет верхнее подчеркивание
4. Для селектора границы задаешь такие параметры:
- верхняя граница имеет толщину 5 пикселей, трехмерная впадающая, цвет выбираешь сама
- нижняя граница имеет толщину 5 пикселей, трехмерная впадающая, цвет выбираешь сама
- правая граница имеет толщину 3 пикселя, пунктирная, цвет выбираешь сама
- левая граница имеет толщину 3 пикселя, пунктирная, цвет выбираешь сама

Отредактировано `tsunami (2013-02-16 11:51:12)

Поделиться42013-02-11 13:45:18

Автор: Luca
Мое персональное бэээзумие
Зарегистрирован: 2013-02-09
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +0
Провел на форуме:
7 часов 14 минут
Последний визит:
2013-02-15 18:07:42

# backround {background-image: url("...");
backround-repeat: no-repeat;
backround-position: center;
backround-attachmen: scroll;
}

# font { color: black;
font-size: medium;
font-style: normal;
font-family: Trebuchet Ms;
}

# text { text-align: justify;
text-decoration: overline;
}

# border-top { border-weight: 5px;
border-style: groove;
border-color: navy;
}

# border-bottom { border-weight: 5px;
border-style: groove;
border-color: navy;
}

#border-right {border-weight: 3px;
border-style: dashed;
border-color: red;
}

#border-left {border-weight: 3px;
border-style: dashed;
border-color: red;
}

Поделиться52013-02-11 14:28:31

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Luca
Ну, можно было не так официально подходить. Селекторы я предполагала, что ты так и возьмешь русские, но ты молодец))
1. С фоном все отлично.
2. Со шрифтом немного накосячено тут...

# font { color: black; #шестизнак
font-size: medium;
font-style: normal;
font-family: "Trebuchet Ms";
}

В некоторых случаях цвет текстом читается (когда стандартные цвета), но лучше указывать веб-название цвета (#шестизнак). Это в том же фотошопе можно посмотреть в палитре. Это не ошибка, просто так всегда лучше))
Дальше я писала, что название цвета, в котором есть пробелы, надо писать в одинарных или двойных кавычках. Это важно:

Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

3. С текстом тоже все отлично.
4. С границами тоже немного накосячено. Ты, наверное, не поняла просто.
Если брать уж нормальные селекторы, то все границы ты можешь прописывать не по одной, а сразу. Не знаю, работает ли эта штука, если прописывать по-отдельности, никогда не пробовала. Вот, по-идее, как это должно выглядеть:

# border: {
border-top: 5px groove navy;
border-bottom: 5px groove navy;
border-left: 3px dashed red;
border-right: 3px dashed red;
}

Здесь опять же цвет лучше указывать шестизнаком с решеточкой. Если не поняла что-то, могу объяснить еще раз. Не обижайся, все-таки за занятие 4, так как были небольшие недочеты. Скоро выложу второй урок.

Поделиться62013-02-11 15:26:42

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

P.S. Я тебе это сразу выведу, а не после сказанного.
Таблицы стилей могут содержать комментарии. Комментарии используются для создания пояснений.
Комментарии полностью игнорируются браузером при разборе таблиц стилей.
В CSS комментарии начинаются с "/*", и заканчиваются "*/", например:

/* Правило перекрасит абзацы HTML документа в зеленый цвет */
p {color:green;}

Стандартный код
Я стандартный код немного адаптировала. Ну, лично мне так удобнее и проще. Сначала будешь использовать как стандартный его, потом, может, возьмем действительно стандартный.
1. Структура style.css

Код:

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

/* А3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }


/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

.punbb h4, .punbb table {
  font-size: 1em;
  font-weight: normal;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: italic
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: italic;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: normal
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }


/* A5 Basic page layout and borders
-------------------------------------------------------------*/



/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width : 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-style: none;
  background-color: #opacity;
  width: 849px;
  border-width: 0px;
}


/* A5.2 */
.punbb {
  float: center;
  width: 100%;
  height: auto;
 background-color: #opacity
}

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 0px 20% 0px 20%;
  width: auto;
  float: none;
  }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 0 em;
  }

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0 em;
  }

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

/* A5.7 */
#pun-post .topic {
  margin-top: 1em;
  }


/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: dotted dotted dotted dotted;
  border-width: 0px 0px 0px 0px
  }

/* A5.9 */
.punbb .container {
  border-style: dotted;
  border-width: 0px;
  }

/* A5.10 */
#pun-main h1, .punbb .section h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.3em 1em;
  border-style: dotted dotted dotted dotted ;
  border-width: 0px 0px 0px 0px;
  }

#pun-main h2 {
  padding: 0.3em 1em;
  border-style: dotted dotted dotted dotted ;
  border-width: 0px 0px 0px 0px;
}



/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 0px solid #888;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 0px;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: normal;
  font-style: normal;
  margin: 0;
  }

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 0px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: normal;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: normal;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: normal;
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 0px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: normal;
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 4em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
  }

/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

.punbb .helplinks span INPUT {
  margin: 0px 2px 2px 0px;
}

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: center;
  width: 50%;
    margin-left: 11px;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: center;
  width: 30%;
  }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
  width: 90%;
  white-space: normal;
  }

/* C2.8 */
#pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: normal;
  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: normal;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 0px 0 0 0px;
  padding: 0.0em 0em;
  }

/* C2.12 */
.punbb .main th {
  border: none;
  padding: 0px 0em 0px 0em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 10;
  }

* html .tclcon {height: 1px}

/* C2.14 */
.punbb td div.tclcon {
  margin-left: 11px;
  text-align: left;
}

/* C2.15 */
.punbb div.icon {
      float: right;
      display: block;
      width: 93px;
      height: 58px;
    margin-right: 10px;
    padding-top: 0px;
    margin-top: 0px;}



/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }


 /* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: 0px;
  padding-bottom: 1px;
  }

/* C3.2 */
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
  }

/* C3.3 */
.punbb .post h3 span {
  border-left: 1px solid #a7b5bd;
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
  }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: 0em;
  overflow: hidden;
  font-weight: normal;
  }

/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
  text-align: left;
  
  }

/* C3.7 */
.pa-author {
  font-size: 1.1em;
  font-weight: normal;
  text-align: left;
  }

/* C3.8 */
.pa-author a {
  text-decoration: none
  text-align: left;
  font-weight: normal;
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;
  font-weight: normal;
  }


li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 0px;
  padding: 0 0 1px 0;

  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 0px;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 0px;
  background: transparent;
  text-align: right;
  }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: normal;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 0px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: normal;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: left;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 0px;
  }


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  margin-top: 0px;
  border-style: double;
  border: none;
  margin-bottom: 0px;

}

/* D1.2 */
#pun-title h1 {
  display : block;
  height: 502px;
margin-bottom: -1px;
}

/* D1.3 */
#pun-title .container {
  border-style: none ;
  padding: 0.2em 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: 502px;
  width: 100%; margin-bottom: 0px; margin-top: 0px;
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%; height: 502px;
}

#pun-title TD.title-logo-tdr {
  border: none;
  width: 849px;
  vertical-align: top;
  padding-right: 0px;
  padding-top: 0px;

}



/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks {
  border-style: none solid none solid;
  border-width: 0px 0px 0px 0px;
  margin: -100;
  margin-top: -300;
}

#pun-navlinks .container {
  border-style: none;
  border-width: 0;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
    padding-top: 12px;
    height: 20px;
    font-weight: normal;
    text-align: center;
}

/* D.3 */
#pun-navlinks li {
    display: inline;
    margin: 1.25%;
}

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: -100;
  }

/* D4.2 */
#pun-ulinks .container {
  padding: 0.7em 1em;
  text-align: center;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 0px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* D5.2 */
#pun-status .container {
  padding: 0.8em 1em 1em 1em;
  }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;
  }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 0px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }


/* D6 Announcement
-------------------------------------------------------------*/

#pun-announcement h2 {display: none}

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  }

/* D6.3 */
#pun-announcement .container {
  padding: 1em 1em 1em;
  }

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 0px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 0px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
  }

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: normal;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }




/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 0px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

Ну, лично мне привычнее использовать такой.

2. Цвета style.css

Код:

/* CS1 Background and text colours  background-color: #E139F1;
-------------------------------------------------------------*/

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #dedfdf;
  color: #333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #d1d1d1;
  color: #333;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #aac9eb;
  color: #fff;
  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #aac9eb;
  color: #333;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #d1d1d1;
  color: #005EAB
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #d1d1d1;
  color: #333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #f9f9f9;
  color: #333
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #dedfdf;
  color: #f1f1f1;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #606060
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #f5f5f5
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #606060;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #606060;
  }

/* CS2.5 */
.punbb th {
  border-color: #606060
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #ccc #fff #fff #ccc;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #ccc
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #fff
  }

.punbb .divider {
  border-color: #ccc #fff #fff #fff
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #aac9eb;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #005EAB
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #B42000;
  }

/* CS3.3 */
#pun-navlinks a {
  color:#005cb1;
  text-decoration: none
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #005cb1;
  text-decoration: underline
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
tr.iredirect div.icon {border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7}
div.inew {border-color: #0080D7 #0065C0 #0058B3 #0072CA}

Поделиться72013-02-11 17:34:08

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Разберем поверхностно второе окно
1. За что отвечают блоки
Блок CS1 Background and text colours отвечает за все фоны форума.
Блок CS2 Border colours отвечает за границы на форуме.
Блок CS3 Links отвечает за ссылки на форуме.
Блок CS4 Post status icons отвечает за иконки сообщений и тем.
Последний блок я люблю выносить в HTML-верх отдельно, так как лично мне прямо в стиле работать с этим неудобно. Но это потом, пока мы трогать этот раздел не будем.
2. CS1 Backround and text colours
Пункты /* CS1.1 */ и /* CS1.2 */ отвечают за "тело форума", но я предпочитаю их тоже заменять, чтобы не заморачиваться особо. Менять стандартный код под себя мы будем в следующем уроке.
Пункт /* CS1.3 */ отвечает за категории форума.
Пункт /* CS1.4 */ отвечает за шапку форума.
Пункт /* CS1.5 */ отвечает за полосы легенд.
Пункт /* CS1.6 */ отвечает за строки форум|тем|сообщений.
Пункт /* CS1.7 */ отвечает за коды и цитаты.
Пункт /* CS1.8 */ отвечает за главное меню, т.е форум/участники и т.д.
3. CS2 Border colours
Я предпочитаю везде проставлять вместо цветов ко всем свойствам border-color: подставлять transparent;, так как границы сейчас особо не нужны. Ты можешь сделать то же самое.
Пункт /* CS2.6 */ отвечает за границы кода и цитаты.
Пункт li.pa-online отвечает за границу у надписи онлайн, но я сама здесь никогда ничего не меняю.
4. CS3 Links
Пункт /* CS3.1 */ отвечает за все неактивные ссылки на форуме (без наведения).
Пункт /* CS3.2 */ отвечает за все активные ссылки на форуме (при наведении).
Пункт /* CS3.3 */ отвечает за главное меню без наведения.
Пункт /* CS3.4 */ отвечает за главное меню при наведении.

Задание
1. Создаешь свой тестовик на mybb.
2. Копируешь туда исходные коды, которые будут ниже.
3. Все комментарии исправляешь на русские и понятные, чтобы тебе было удобнее. И чтобы ты не спрашивала потом, где это менять. Когда сделаешь, кинь ссылку на тестовик сюда.

Поделиться82013-02-11 19:01:50

Автор: Luca
Мое персональное бэээзумие
Зарегистрирован: 2013-02-09
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +0
Провел на форуме:
7 часов 14 минут
Последний визит:
2013-02-15 18:07:42

`tsunami
http://luca.hutt.ru/

Поделиться92013-02-11 19:04:17

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Luca
Отлично, молодец. Новый урок напишу чуть позже. Ты заменила комментарии на русские?

Поделиться102013-02-11 19:04:34

Автор: Luca
Мое персональное бэээзумие
Зарегистрирован: 2013-02-09
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +0
Провел на форуме:
7 часов 14 минут
Последний визит:
2013-02-15 18:07:42

`tsunami
да