ЕПС

• Что нужно сделать для размещения сайта на ЕПС
• Инструкция по организации доступа к Платформе обратной связи (ПОС)
• Визуальное оформление сайта работающего на платформе "Открытый регион"
• Вступление
• Оформление виджета ПОС в цветовую схему сайта
• Модуль баннеров ссылок на автоматизированные информационные системы
• Оформление панелей
• Пресс-центр Министерства просвещения Российской Федерации
• Оформление списков
• Модуль "Горячая линия по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями"
• Оформление кнопок на просмотр/скачивание документов
• Блок "Горячая линия по вопросам проведения государственной итоговой аттестации"
• Текст по ширине страницы, красная строка, заголовки, оформление таблиц.
• Grid-Сетка для нашего сайта
• Блок объявлений
• Объявления в стиле блокнота

Что нужно сделать для размещения сайта на ЕПС

Постановление Правительства Ямало-Ненецкого автономного округа "О региональном центре обработки данных Ямало-Ненецкого автономного округа"

Регламентирующие документы:

"Регистрация доменных имён третьего уровня YANAO.RU ЯНАО.РФ"

"Размещение ИС в региональном центре обработки данных Ямало-Ненецкого автономного округа"

Для размещения муниципальных информационных систем на мощностях вычислительного центра, необходимо указать нормативно правовой акт органа местного самоуправления муниципального образования Ямало-Ненецкого автономного округа, утверждающий создание муниципальной информационной системы

Если вам нужно зарегистрировать более одного домена/ИС - регистрируйте сначала один домен/ИС и следуйте инструкции направленной на ваш контактный email адрес.

"Порядок размещения официальных сайтов владельцами сайтов в государственной информационной системе «Единая платформа официальных сайтов органов государственной власти и органов местного самоуправления муниципальных образований в Ямало-Ненецком автономном округе»"

"Шаблон приказа об утверждении положения об официальном сайте, размещенном на Единой платформе сайтов, и порядка размещения информации на сайте"

Шаг 1

Заходим по ссылке https://nic.yanao.ru/ 

Кликаем по ссылке Регистрация домена 

Заполняем все поля

в поле доменное имя вводим ***lbt.yanao.ru или ***-lbt.yanao.ru, где *** ваше произвольное имя (чаще всего название вашей организации записанное транслитом)

ставим галочку я не робот и жмем сохранить.

Через некоторое время отведенное на обработку заявки вам будет выдано доменное имя третьего имени в зоне yanao.ru.

Шаг 2

Возвращаемся на главную страницу сайта https://nic.yanao.ru/ 

Переходим в раздел Регистрация ЕПС

Заполняем все поля, в поле Доменное имя официального сайта вводим доменное имя полученное на этапе 1.

В поле Идентификатор организации на сайте госуслуг вставляем oid Госуслуг Как-найти-oid-на-Госуслугах_.pdf

Далее прикладываем сопроводительное письмо на имя генерального директора ГКУ "Ресурсы Ямала" "О намерении присоединиться к Единой платформе сайтов", оформленного на официальном бланке организации и подписанного уполномоченным должностным лицом (руководителем) и светокопию приказа о сайте организации с приложениями.

Инструкция по организации доступа к Платформе обратной связи (ПОС)

Платформа обратной связи (ПОС) позволяет гражданам обратиться в адрес образовательной организации. Взаимодействие осуществляется при помощи установленного на сайте образовательной организации виджета ПОС. Для работы виджета ПОС необходимо генерировать код в личном кабинете образовательной организации сайта https://pos.gosuslugi.ru. (Для каждой образовательной организации необходим  индивидуальный код виджета). Администратор личного кабинета образовательной организации сайта https://pos.gosuslugi.ru (назначенный в самой образовательной организации) должен координировать работу образовательной организации на данном сайте.

Подтверждение готовности личного кабинета портала (ЛКО) ПОС к работе

После подтверждения учетной записи для работы в личном кабинете образовательной организации портала ПОС (переход по ссылкам с электронных адресов, указанных в заявках от организаций, полученных с сайта Госуслуги) достаточно:
администратору ЛКО и еще одному лицу из назначенных ролей (руководитель, координатор, куратор, исполнитель), указанному в заявке от организации, зайти в личный кабинет (ЛКО) ПОС:

• под ролью Администратора ЛКО по ссылке: https://pos.gosuslugi.ru/admin
• под ролями: руководитель, координатор, куратор, исполнитель по ссылке: https://pos.gosuslugi.ru/backoffice и подтвердить готовность ЛКО.

Роль «Администратор личного кабинета организации (ЛКО)» самостоятельно менять нельзя!!!! Только по заявке на электронные адреса: pos@omskportal.ru или sd@sc.minsvyaz.ru
!!! Администратор ЛКО  может самостоятельно назначать роли. !!!

Инструкция для администратора личного кабинета
1. Пройдите по ссылке https://pos.gosuslugi.ru/admin и войдите в личный кабинет сотрудника организации с ролью «Администратор личного кабинета организации (ЛКО)» через Единую систему идентификации и аутентификации (ЕСИА).

2, Выберите организацию и нажмите на «Перейти в ЛКО».

3. Выберите вкладку «Функционирование ЛКО».

Добавление виджета Платформы обратной связи

Для начала необходимо зайти в ЛКО на https://pos.gosuslugi.ru/backoffice/login 
1. В настройках ЛКО, на вкладке «Функционирование ЛКО» выберите один из вариантов оформления баннера.
2. Нажмите кнопку «Сгенерировать код».
3. Скопируйте код электронной формы, нажав кнопку «Скопировать код»

ВНИМАНИЕ!!!
Установленный на сайте образовательной организации виджет может не  отправлять сообщения в случае, если в ЛКО в разделе «Функционирование ЛКО» указан не актуальный адрес сайта или допущена ошибка в адресе сайта организации.
Для устранения этой проблемы необходимо обратиться в техническую поддержку, указав в заявке название организации, ОГРН организации и актуальный адрес сайта.
После замены адреса сайта необходимо заново сгенерировать код виджета и заменить на него ранее установленный код виджета на сайте организации.

Как добавить код виджета на сайт расположенный на единой платформе сайтов

Войти на сайт от имени администратора:

2. Кликнуть по кнопке добавить блок:

3. Установить чекбокс Типовой блок - Да

4. Тип блока выбрать - виджет ПОС

5. В поле код виджета сообщить о проблеме вставить код виджета сгенерированный платформой обратной связи расположенной по адресу https://pos.gosuslugi.ru/admin/:

Не забываем сохранить сделанные изменения:

Важно! После сохранения нового блока он автоматически помещается в самый низ главной страницы сайта!

Виджет ПОС должен располагаться в верхней части главной страницы  

Визуальное оформление сайта работающего на платформе "Открытый регион"

Вступление

По умолчанию платформа "Открытый регион" предлагает единое визуальное оформление для всех расположенных на ней сайтов. Мы попробуем немного разнообразить наше оформление. Делать это мы будем с помощью CSS.

CSS — язык каскадных стилей, который задаёт визуальное оформление для HTML, SVG и других языков разметки.

Для применения CSS нам необходимо на главной странице перейти по ссылке Редактировать анкету сайта - далее идем во вкладку дизайн портала и в поле подключаемые стили css вставляем свой код CSS.

Не забываем сохранить изменения!

Оформление виджета ПОС в цветовую схему сайта

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

Следующий css код заменит цветовую схему виджета в основные цвета нашего сайта:

/*Оформление виджета ПОС в цветовую схему сайта*/
#js-show-iframe-wrapper {
  background: var(--primary-color) !important;
}
#js-show-iframe-wrapper .bf-20__text {
  color: var(--light-color) !important;
}
#js-show-iframe-wrapper .pos-banner-fluid .pos-banner-btn_2 {
  background: var(--light-color) !important;
  color: var(--primary-color-dark) !important;
  border: 1px solid var(--primary-color-dark) !important;
  border-radius: 4px !important;
}

Как внедрить код css на наш сайт описывается в следующей статье.

Модуль баннеров ссылок на автоматизированные информационные системы

Авторизуемся на сайте через ЕСПД

В блоке управления сайтом жмем кнопку добавить блок

В блоке содержимое тычем в пиктограмму исходный код

Вставляем код блока баннеров-ссылок АИС

Жмем кнопку сохранить

Исходный код блока баннеров-ссылок АИС

CSS:

/* АИС */
.aisor-row {
	display: grid;
	gap: 20px 32px;
	padding-top: 20px;
	grid-template-columns: repeat(3, 1fr);
	justify-items: center;
	& .aisor-col {
		display: grid;
		gap: 20px;
		grid-template-columns: max-content 1fr;
		align-items: center;
		color: var(--text-color);
		& .item {
			width: 352px;
			background: var(--primary-color-light);
			box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
			border-radius: 10px;
			padding: 154px 24px 24px;
			position: relative;
			text-align: center;
			& .icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 154px;
				border-radius: 12px 12px0 0;
				background-position: center;
				overflow: hidden;
				padding-top: 24px;
				& img {
					position: relative;
					width: 130px;
					height: auto;
				}
			}
			& .header {
				font-size: calc(25rem/var(--initial-font-multiplier));
				font-weight: bold;
				margin-top: 2em;
			}
			& .description {
				line-height: 24px;
				margin-top: 12px;
			}
			& .linkbtn {
				padding: 1em 0;
				& a {
					text-decoration: none;
					&.button-aisor {
						font-size: calc(20rem/var(--initial-font-multiplier));
						padding: 14px 40px;
						border-radius: 4px;
						border: 1px solid var(--primary-color-25);
						background: var(--primary-color-light);
						cursor: pointer;
						color: var(--primary-color);
						&:hover {
							background: var(--primary-color-hover);
							color: var(--primary-color-light);
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1087px) and (min-width: 736px) {
	.aisor-row {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 735px) {
	.aisor-row {
		grid-template-columns: 1fr;
	}
}

Как внедрить код css на наш сайт описывается в следующей статье.

HTML:

<div class="aisor-row">
	<div class="aisor-col">
		<div class="item">
			<div class="icon" style="background-image: url('/upload/uf/8a4/nt57kmvywtmecw7kvpwc8tab2oq2fiv6/first_bg.svg');">
				<img src="/upload/uf/656/pjdg5qva6c6dymybabtqnga06cy8enxo/logo_gos.svg" alt="Единый портал государственных услуг и функций">
			</div>
			<div class="header">Госуслуги</div>
			<div class="description"><br>Единый портал<br>государственных услуг<br>и функций</div>
			<div class="linkbtn"><a class="button-aisor" href="https://gosuslugi.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
	<div class="aisor-col">
		<div class="item">
			<div class="icon" style="background-image: url('/upload/uf/d21/n5ecgvbe3aeynjnjgoa32rsgn4d5thfd/second_bg.svg');"><img src="/upload/uf/727/k03nhm2aat12xpv5zcam0p9qxw932wj7/logo_sgo.svg" alt="Образование Ямала"></div>
			<div class="header">Образование<br>Ямала</div>
			<div class="description">Государственная<br>информационная система<br><br></div>
			<div class="linkbtn"><a class="button-aisor" href="https://sgo.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
	<div class="aisor-col">
		<div class="item">
			<div class="icon" style="background-image: url('/upload/uf/275/t7pbyi4xtaorpjq011obapd8o0z6opfq/third_bg.svg');"><img src="/upload/uf/295/g27e8sbwjorxhx7rp0hmiys9mwcxow98/gerbrf.svg" alt="Портал образовательных услуг"></div>
			<div class="header">Портал<br>образовательных услуг</div>
			<div class="description">Государственные и муниципальные<br>услуги в сфере образования<br><br></div>
			<div class="linkbtn"><a class="button-aisor" href="https://e-uslugi.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
</div>

Оформление панелей

По умолчанию панели сайтов расположенных на платформе "Открытый регион" окрашиваются в тот цвет который мы выбрали в качестве основного в разделе дизайн портала.

Вот css код который немного разнообразит цветовую схему наших панелей (окрашиваем панели в градиентный фон):

/*Оформление панелей*/
.top-panel,
.main-footer,
.photo-video-block .decoration .decoration__color {
  background: radial-gradient(circle, var(--primary-color-dark) 0%, var(--primary-color) 50%, var(--primary-color-dark) 100%);
}

Как внедрить код css на наш сайт описывается в следующей статье.

Пресс-центр Министерства просвещения Российской Федерации

Авторизуемся на сайте через ЕСПД

В блоке управления сайтом жмем кнопку добавить блок

Отмечаем радиокнопку типовой блок

В поле тип блока из выпадающего списка выбираем: RSS виджет

Вводим название блока для отображения: Пресс-центр Министерства просвещения Российской Федерации

Вводим ссылку на RSS-ленту: https://edu.gov.ru/press/_rss

Количество новостей для отображения: 6

Количество символов в названии новости: 100

Сохраняем блок.

Оформление списков

По умолчанию HTML предлагает нам стандартный вид списков в виде точек, кружочков, букв латинского алфавита.

• Пункт 1
• Пункт 2
• Пункт 3

Мы предлагаем разнообразить вид списков.

CSS Код оформления списков:

/* Оформление списков */
.upper-roman,
.middle-dash,
.check,
.lower-cyrillic,
.upper-cyrillic {
  list-style-position: inside;
  & > li {
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: .3em;
    padding-top: .3em;
    &:last-child {
      border-bottom: none;
    }
  }
}
.upper-roman {
  list-style-type: upper-roman;
}
@counter-style lower-cyrillic {
  system: alphabetic;
  symbols: "а" "б" "в" "г" "д" "е" "ж" "з" "и" "й" "к" "л" "м" "н" "о" "п" "р" "с" "т" "у" "ф" "х" "ц" "ч" "ш" "щ" "э" "ю" "я";
  suffix: ") ";
}
.lower-cyrillic {
  list-style: lower-cyrillic;
}
@counter-style upper-cyrillic {
  system: alphabetic;
  symbols: "А" "Б" "В" "Г" "Д" "Е" "Ж" "З" "И" "Й" "К" "Л" "М" "Н" "О" "П" "Р" "С" "Т" "У" "Ф" "Х" "Ц" "Ч" "Ш" "Щ" "Э" "Ю" "Я";
  suffix: ") ";
}
.upper-cyrillic {
  list-style: upper-cyrillic;
}
@counter-style middle-dash {
  system: cyclic;
  symbols: "- ";
  suffix: "";
}
.middle-dash {
  list-style: middle-dash;
}
@counter-style check {
  system: cyclic;
  symbols: "✓ ";
  suffix: "";
}
.check {
  list-style: check;
}
@counter-style rightwards-arrowhead {
  system: cyclic;
  symbols: "➤ ";
  suffix: "";
}
.rightwards-arrowhead {
  list-style: rightwards-arrowhead;
}

Как внедрить код css на наш сайт описывается в следующей статье.

Что мы получаем благодаря этому коду:

<ul class="upper-roman">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>

<ul class="middle-dash">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>

<ul class="check">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>

<ul class="lower-cyrillic">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>

<ul class="upper-cyrillic">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>

Модуль "Горячая линия по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями"

1. Кликаем по кнопке добавить блок

2. В поле содержимое блока кликаем по пиктограмме исходный код

3. В открывшееся окно вставляем код представленный ниже:

<div class="requests-anticorruption-block__body">
	<div class="requests">
		<div class="requests__icon-wrapper"><img src="https://edulbt.yanao.ru/upload/uf/c5a/xro8by1vlj0podvrd80goe3dtglnjpd0/gorline.png" alt="ГИА" width="73" height="61"></div>
		<div class="requests__title">
			<p>&laquo;Горячая линия&raquo; по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями</p>
			<hr>
			<p><a href="https://edulbt.yanao.ru/presscenter/news/144051/" target="_blank">Шкала температур</a></p>
		</div>
		<div class="requests__button-wrapper">+7 912-433-96-78 (круглосуточно)<br>+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)</div>
	</div>
</div>

4. Сохраняем все!

Оформление кнопок на просмотр/скачивание документов

<a class="my-btn" href="#" target="_blank">Basic</a>

<a class="my-btn focus" href="#" target="_blank">Basic focus</a>

<a class="my-btn active" href="#" target="_blank">Basic active</a>

<a class="my-btn disabled" href="#" target="_blank">Basic disabled</a>

<a class="my-btn success" href="#" target="_blank">Success</a>

<a class="my-btn success focus" href="#" target="_blank">Success focus</a>

<a class="my-btn success active" href="#" target="_blank">Success active</a>

<a class="my-btn success disabled" href="#" target="_blank">Success disabled</a>

<a class="my-btn info" href="#" target="_blank">Info</a>

<a class="my-btn info focus" href="#" target="_blank">Info focus</a>

<a class="my-btn info active" href="#" target="_blank">Info active</a>

<a class="my-btn info disabled" href="#" target="_blank">Info disabled</a>

<a class="my-btn warning" href="#" target="_blank">Warning</a>

<a class="my-btn warning focus" href="#" target="_blank">Warning focus</a>

<a class="my-btn warning active" href="#" target="_blank">Warning active</a>

<a class="my-btn warning disabled" href="#" target="_blank">Warning disabled</a>

<a class="my-btn danger" href="#" target="_blank">Danger</a>

<a class="my-btn danger focus" href="#" target="_blank">Danger focus</a>

<a class="my-btn danger active" href="#" target="_blank">Danger active</a>

<a class="my-btn danger disabled" href="#" target="_blank">Danger disabled</a>

CSS Код:

/* Оформление кнопок с классом my-btn */
.my-btn {
  display: inline-block;
  margin: .5em;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  padding: 10px 16px;
  line-height: 1.3333333;
  border-radius: 4px;
  border: 1px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--text-color);
  background-color: var(--primary-color-light);
  border-color: var(--border-color-light);
  &:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &:focus,
  &.focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
    outline-offset: -2px;
  }
  &:active,
  &.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px var(--text-color-gray);
    box-shadow: inset 0 3px 5px var(--text-color-gray);
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &:active:hover,
  &.active:hover,
  &:active:focus,
  &.active:focus,
  &:active.focus,
  &.active.focus {
    color: var(--primary-color);
    border-color: var(--primary-color);
  }
  &.success {
    --color: #fff;
    --bg: #198754;
    --border-color: #198754;
    --hover-color: #fff;
    --hover-bg: #157347;
    --hover-border-color: #146c43;
    --focus-shadow-rgb: 60, 153, 110;
    --active-color: #fff;
    --active-bg: #146c43;
    --active-border-color: #13653f;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #fff;
    --disabled-bg: #198754;
    --disabled-border-color: #198754;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.info {
    --color: #000;
    --bg: #0dcaf0;
    --border-color: #0dcaf0;
    --hover-color: #000;
    --hover-bg: #31d2f2;
    --hover-border-color: #25cff2;
    --focus-shadow-rgb: 11, 172, 204;
    --active-color: #000;
    --active-bg: #3dd5f3;
    --active-border-color: #25cff2;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #000;
    --disabled-bg: #0dcaf0;
    --disabled-border-color: #0dcaf0;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.warning {
    --color: #000;
    --bg: #ffc107;
    --border-color: #ffc107;
    --hover-color: #000;
    --hover-bg: #ffca2c;
    --hover-border-color: #ffc720;
    --focus-shadow-rgb: 217, 164, 6;
    --active-color: #000;
    --active-bg: #ffcd39;
    --active-border-color: #ffc720;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #000;
    --disabled-bg: #ffc107;
    --disabled-border-color: #ffc107;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
  &.danger {
    --color: #fff;
    --bg: #dc3545;
    --border-color: #dc3545;
    --hover-color: #fff;
    --hover-bg: #bb2d3b;
    --hover-border-color: #b02a37;
    --focus-shadow-rgb: 225, 83, 97;
    --active-color: #fff;
    --active-bg: #b02a37;
    --active-border-color: #a52834;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --disabled-color: #fff;
    --disabled-bg: #dc3545;
    --disabled-border-color: #dc3545;
    color: var(--color);
    background-color: var(--bg);
    border-color: var(--border-color);
    &:hover {
      color: var(--hover-color);
      background-color: var(--hover-bg);
      border-color: var(--hover-border-color);
    }
    &:focus,
    &.focus {
      shadow: var(--focus-shadow-rgb);
    }
    &:active,
    &.active {
      color: var(--active-color);
      background-color: var(--active-bg);
      border-color: var(--active-border-color);
      shadow: var(--active-shadow);
    }
    & .disabled {
      color: var(--disabled-color);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
    }
  }
}
.my-btn.disabled,
.my-btn[disabled],
fieldset[disabled] .my-btn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.my-btn.disabled:hover,
.my-btn[disabled]:hover,
fieldset[disabled] .my-btn:hover,
.my-btn.disabled:focus,
.my-btn[disabled]:focus,
fieldset[disabled] .my-btn:focus,
.my-btn.disabled.focus,
.my-btn[disabled].focus,
fieldset[disabled] .my-btn.focus {
  background-color: var(--primary-color-light);
  border-color: var(--border-color-light);
}
a.my-btn.disabled,
fieldset[disabled] a.my-btn {
  pointer-events: none;
}
a.my-btn {
  text-decoration: none;
}

Как внедрить код css на наш сайт описывается в следующей статье.

Блок "Горячая линия по вопросам проведения государственной итоговой аттестации"

1. Кликаем по кнопке добавить блок

2. В поле содержимое блока кликаем по пиктограмме исходный код

3. В открывшееся окно вставляем код представленный ниже:

<div class="requests-anticorruption-block__body">
	<div class="requests">
		<div class="requests__icon-wrapper"><img src="https://edulbt.yanao.ru/upload/uf/d96/ibbxad9bmnnsuanhcm3ua32la2hdefep/gia.png" alt="ГИА" width="73" height="61"></div>
		<h2 class="requests__title">Горячая линия по вопросам проведения государственной итоговой аттестации</h2>
		<div class="requests__button-wrapper">ГИА-9 +7 (34992) 5-72-10 #2226 <br>ГИА-11 +7 (34992) 5-72-10 #2225</div>
	</div>
</div>

4. Сохраняем все!

Текст по ширине страницы, красная строка, заголовки, оформление таблиц.

Далее мы применим довольно большой кусок css кода который оформит нам сразу несколько элементов:

• Оформление абзацев (красная строка, текст по ширине)
• Оформление таблиц (ширина 100%, отступы 5 px, чересстрочное выделение цветом)
• Оформление заголовков

Пример оформления заголовков:

Заголовок H2

Заголовок H3

Пример оформления текста по ширине страницы и красной строки:

С другой стороны, убеждённость некоторых оппонентов предполагает независимые способы реализации экономической целесообразности принимаемых решений. Также как граница обучения кадров обеспечивает актуальность укрепления моральных ценностей. Таким образом, базовый вектор развития создаёт предпосылки для стандартных подходов. Вот вам яркий пример современных тенденций — повышение уровня гражданского сознания играет определяющее значение для первоочередных требований. В рамках спецификации современных стандартов, сторонники тоталитаризма в науке, инициированные исключительно синтетически, смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.

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

Пример оформления таблицы:

CSS Код:

Как внедрить код css на наш сайт описывается в следующей статье.

.detail__text,
.static-detail,
.free-block {
  /*Оформление абзацев (красная строка, текст по ширине)*/
  & p {
    text-align: justify;
    text-indent: 1.5em;
  }
  /*Оформление таблиц (ширина 100%, отступы 5 px, чересстрочное выделение цветом)*/
  & table {
    width: 100%;
    border-collapse: collapse;
    border-width: 1px;
    border-spacing: 5px;
    & td,
    & th {
      padding: 1em;
      border: 1px solid var(--border-color);
    }
    & tr:nth-child(even) {
      background-color: var(--disabled-color-light);
    }
  }
  /* Оформление заголовков */
  & h2 {
    padding-bottom: .5em;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20%;
      height: 5px;
      background: var(--primary-color);
      z-index: 1;
    }
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: var(--light-gray-color);
    }
  }
  & h3 {
    border-bottom: 1px solid var(--light-gray-color);
    padding-bottom: .5em;
    position: relative;
    display: inline-block;
    &::before {
      background-color: var(--primary-color);
      border-radius: 50px;
      bottom: -5px;
      content: "";
      height: 10px;
      left: 0;
      position: absolute;
      width: 10px;
    }
    &::after {
      border-bottom: 2px solid var(--primary-color);
      bottom: -1px;
      content: "";
      height: 0;
      left: 0;
      position: absolute;
      width: 30%;
    }
  }
}

Для оформления этих элементов никаких дополнительных классов применять не нужно!

Grid-Сетка для нашего сайта

При просмотре разных сайтов в интернете можно заметить, как аккуратно располагаются на них элементы независимо от размера экрана: навигация, кнопки, блоки с текстом и другие вещи. За это отвечает язык разметки CSS (Cascading Style Sheets). Она бывает разных видов, но сегодня поговорим об одном из них, самом адаптивном — CSS-гридах.

Что такое CSS Grid

Grid (сетка) — это вид разметки, в котором элементы на сайте расположены в виде таблицы. Главная фишка этой таблицы в гибкости — можно объединять отдельные ячейки, менять размеры строк и столбцов, регулировать отступы между ними. А ещё гриды хорошо приспосабливаются к разным размерам экрана, что делает их адаптивными.

Структура грида напоминает обычный Excel-файл: есть горизонтальные и вертикальные линии, которые вместе образуют много разных ячеек. Только, в отличие от файла в Excel, внутри ячеек находятся не выгрузки по зарплате за март, а элементы сайта: текст, картинки, кнопки, блоки HTML-кода и так далее. А формально все эти части грид-разметки называются так:

grid-контейнер — самый главный элемент во всей разметке, в нём хранится всё содержимое сетки;

• grid-ячейка — единица грид-сетки, сюда можно положить один или несколько блоков кода;
• grid-линия — горизонтальная или вертикальная линия, разделяющая столбцы и колонки;
• grid-строка (row) — ряд ячеек;
• grid-столбец (column) — колонка ячеек;
• grid-элемент — какой-либо элемент сайта;
• grid-область (area) — пространство из ячеек, в CSS можно объединить несколько ячеек в одну и работать с ними как с единым целым.

А вот как они располагаются на схеме:

В отличие от Flexbox — другого популярного вида CSS-разметки — Grid позволяет создавать двумерные таблицы. Это значит, что в них могут быть одновременно и ряды, и колонки. А во Flexbox всё строго: можно выстроить элементы или в столбик, или в линию — сочетать оба метода нельзя.

Как мы можем использовать grid на нашем сайте!

С помощью grid-разметки очень удобно создавать разметку в виде столбцов.

рисунок 1

рисунок 2

рисунок 3

На рисунке 1 мы создали сетку состоящую из четырех столбцов, на рисунке 2 три столбца и на рисунке 3 - два столбца:

<!-- Сетка на 4 столбца -->
<div class="grid">
	<div class="col4">
		<div class="item">Содержимое столбца 1</div>
		<div class="item">Содержимое столбца 2</div>
		<div class="item">Содержимое столбца 3</div>
		<div class="item">Содержимое столбца 4</div>
	</div>
</div>

<!-- Сетка на 3 столбца -->
<div class="grid">
	<div class="col3">
		<div class="item">Содержимое столбца 1</div>
		<div class="item">Содержимое столбца 2</div>
		<div class="item">Содержимое столбца 3</div>
	</div>
</div>

<!-- Сетка на 2 столбца -->
<div class="grid">
	<div class="col2">
		<div class="item">Содержимое столбца 1</div>
		<div class="item">Содержимое столбца 2</div>
	</div>
</div>

для работы нашей сетки необходимо в подключаемых стилях css добавить следующий код:

<style type="text/css">
.grid {
  --min-col4: 250px;
  --min-col3: 352px;
  --min-col2: 544px;
  --col-gap: 20px;
  --width-item: 100%;
  display: grid;
  gap: var(--col-gap) var(--grid-gap);
  & .col4,
  & .col3,
  & .col2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: var(--col-gap) var(--grid-gap);
		color: var(--text-color);
    & .item {
      width: var(--width-item);
      background: var(--light-color);
      box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
      border-radius: 4px;
      position: relative;
			text-align: center;
    }
  }
  & .col4 {
    grid-template-columns: repeat(4, 1fr);
    & .item {
      min-width: var(--min-col4);
    }
  }
  & .col3 {
    grid-template-columns: repeat(3, 1fr);
    & .item {
      min-width: var(--min-col3);
    }
  }
  & .col2 {
    grid-template-columns: repeat(2, 1fr);
    & .item {
      min-width: var(--min-col2);
    }
  }
  @media screen and (max-width: 1087px) and (min-width: 736px) {
    & .col4 {
      grid-template-columns: repeat(3, 1fr);
    }
    & .col3 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col2 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 735px) and (min-width: 481px) {
    & .col4 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 480px) {
    & .col4 {
      grid-template-columns: 1fr;
    }
  }
}
</style>

Таким образом мы получили разметку grid-сетки.

Модуль баннеров-ссылок на Автоматизированные информационные системы с использованием grid-разметки

Для того чтобы получить модуль баннеров-ссылок на АИС как на рисунке 2 нужно немного дополнить наш код css:

<style type="text/css">
.grid {
  --min-col4: 250px;
  --min-col3: 352px;
  --min-col2: 544px;
  --col-gap: 20px;
  --width-item: 100%;
  display: grid;
  gap: var(--col-gap) var(--grid-gap);
  & .col4,
  & .col3,
  & .col2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: var(--col-gap) var(--grid-gap);
		color: var(--text-color);
    & .item {
      width: var(--width-item);
      background: var(--light-color);
      box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
      border-radius: 4px;
      position: relative;
			text-align: center;
    }
  }
  & .col4 {
    grid-template-columns: repeat(4, 1fr);
    & .item {
      min-width: var(--min-col4);
    }
  }
  & .col3 {
    grid-template-columns: repeat(3, 1fr);
    & .item {
      min-width: var(--min-col3);
      &.ais {
        display: grid;
        justify-items: center;
        padding-top: 154px;
        & .icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 154px;
				border-radius: 12px 12px0 0;
				background-position: center;
				overflow: hidden;
				padding-top: 24px;
				& img {
					position: relative;
					width: 130px;
					height: auto;
				}
			}
      }
      & .header {
				font-size: calc(25rem/var(--initial-font-multiplier));
				font-weight: bold;
				margin-top: 1rem;
        width: calc(100% - 1rem);
        height: 2rem;
			}
			& .description {
				margin-top: 2rem;
        width: calc(100% - 4rem);
        height: 4rem;
			}
      & .linkbtn {
				padding: 2em 0;
				& a {
					text-decoration: none;
					&.button-aisor {
						font-size: calc(20rem/var(--initial-font-multiplier));
						padding: .7rem 2rem;
						border-radius: 4px;
						border: 1px solid var(--primary-color-25);
						background: var(--primary-color-light);
						cursor: pointer;
						color: var(--primary-color);
						&:hover {
							background: var(--primary-color-hover);
							color: var(--primary-color-light);
						}
					}
				}
			}
    }
  }
  & .col2 {
    grid-template-columns: repeat(2, 1fr);
    & .item {
      min-width: var(--min-col2);
    }
  }
  @media screen and (max-width: 1087px) and (min-width: 736px) {
    & .col4 {
      grid-template-columns: repeat(3, 1fr);
    }
    & .col3 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col2 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 735px) and (min-width: 481px) {
    & .col4 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 480px) {
    & .col4 {
      grid-template-columns: 1fr;
    }
  }
}
</style>

Как внедрить код css на наш сайт описывается в следующей статье.

Далее на главной странице авторизуемся на сайте через ЕСПД

В блоке управления сайтом жмем кнопку добавить блок

В блоке содержимое тычем в пиктограмму исходный код

Вставляем код блока баннеров-ссылок АИС

Жмем кнопку сохранить

Исходный HTML-код блока баннеров-ссылок АИС:

<div class="grid">
	<div class="col3">
		<div class="item ais">
			<div class="icon" style="background-image: url('/upload/uf/8a4/nt57kmvywtmecw7kvpwc8tab2oq2fiv6/first_bg.svg');">
				<img src="/upload/uf/656/pjdg5qva6c6dymybabtqnga06cy8enxo/logo_gos.svg" alt="Единый портал государственных услуг и функций">
			</div>
			<div class="header">Госуслуги</div>
			<div class="description">Единый портал государственных услуг и функций</div>
			<div class="linkbtn"><a class="button-aisor" href="https://gosuslugi.ru/" target="_blank">Перейти</a></div>
		</div>
		<div class="item ais">
			<div class="icon" style="background-image: url('/upload/uf/d21/n5ecgvbe3aeynjnjgoa32rsgn4d5thfd/second_bg.svg');"><img src="/upload/uf/727/k03nhm2aat12xpv5zcam0p9qxw932wj7/logo_sgo.svg" alt="Образование Ямала"></div>
			<div class="header">Образование Ямала</div>
			<div class="description">Государственная информационная система</div>
			<div class="linkbtn"><a class="button-aisor" href="https://sgo.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
		<div class="item ais">
			<div class="icon" style="background-image: url('/upload/uf/275/t7pbyi4xtaorpjq011obapd8o0z6opfq/third_bg.svg');"><img src="/upload/uf/295/g27e8sbwjorxhx7rp0hmiys9mwcxow98/gerbrf.svg" alt="Портал образовательных услуг"></div>
			<div class="header">Портал образовательных услуг</div>
			<div class="description">Государственные и муниципальные услуги в сфере образования</div>
			<div class="linkbtn"><a class="button-aisor" href="https://e-uslugi.yanao.ru/" target="_blank">Перейти</a></div>
		</div>
	</div>
</div>

Модуль горячая линия

Для того чтобы получить модуль как на рисунке 2 необходимо еще дополнить наш css-код. Вот конечный результата:

<style type="text/css">
.grid {
  --min-col4: 250px;
  --min-col3: 352px;
  --min-col2: 544px;
  --col-gap: 20px;
  --width-item: 100%;
  display: grid;
  gap: var(--col-gap) var(--grid-gap);
  & .col4,
  & .col3,
  & .col2 {
    display: grid;
    align-content: center;
    justify-items: center;
    align-items: center;
    justify-content: center;
    gap: var(--col-gap) var(--grid-gap);
		color: var(--text-color);
    & .item {
      width: var(--width-item);
      background: var(--light-color);
      box-shadow: 0 24px 48px 0 var(--border-color-light), 0 1px 4px 0 var(--disabled-color-light);
      border-radius: 4px;
      position: relative;
			text-align: center;
    }
  }
  & .col4 {
    grid-template-columns: repeat(4, 1fr);
    & .item {
      min-width: var(--min-col4);
    }
  }
  & .col3 {
    grid-template-columns: repeat(3, 1fr);
    & .item {
      min-width: var(--min-col3);
      &.ais {
        display: grid;
        justify-items: center;
        padding-top: 154px;
        & .icon {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 154px;
				border-radius: 12px 12px0 0;
				background-position: center;
				overflow: hidden;
				padding-top: 24px;
				& img {
					position: relative;
					width: 130px;
					height: auto;
				}
			}
      }
      & .header {
				font-size: calc(25rem/var(--initial-font-multiplier));
				font-weight: bold;
				margin-top: 1rem;
        width: calc(100% - 1rem);
        height: 2rem;
			}
			& .description {
				margin-top: 2rem;
        width: calc(100% - 4rem);
        height: 4rem;
			}
      & .linkbtn {
				padding: 2em 0;
				& a {
					text-decoration: none;
					&.button-aisor {
						font-size: calc(20rem/var(--initial-font-multiplier));
						padding: .7rem 2rem;
						border-radius: 4px;
						border: 1px solid var(--primary-color-25);
						background: var(--primary-color-light);
						cursor: pointer;
						color: var(--primary-color);
						&:hover {
							background: var(--primary-color-hover);
							color: var(--primary-color-light);
						}
					}
				}
			}
    }
  }
  & .col2 {
    grid-template-columns: repeat(2, 1fr);
    & .item {
      min-width: var(--min-col2);
      & .my-ads {
        position: relative;
         & .requests {
           display: grid;
           justify-items: center;
           padding: var(--grid-gap);
           border-radius: 4px;
           border: 1px solid var(--primary-color-25);
           background: var(--primary-color-light);
           overflow: hidden;
            & .icon {
              width: 126px;
              height: 126px;
              background: hsl(0, 0%, 100%);
              color: var(--primary-color);
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 50%;
              box-shadow: 0 0 0 24px hsla(0, 0%, 100%, 0.5);
              margin: calc(-1 * var(--grid-gap)) 0;
           }
           &:hover {
               & .icon {
                 transform: scale(1.1);
                 transition: transform 1s ease-out;
             }
           }
           & .title {
             background: var(--primary-color-light);
             border-top: 1px solid var(--border-color-light);
             margin-top: 35px;
             padding: 1em 0;
             font-size: calc(18rem / var(--initial-font-multiplier));
             font-weight: bold;
             z-index: 1;
           }
           & .description {
             margin-top: 1em;
             & p {
               text-align: center;
               text-indent: 0;
             }
             & .my-btn {
               background-color: hsla(0, 0%, 100%, 0.5);
             }
           }
        }
      }
    }
  }
  @media screen and (max-width: 1087px) and (min-width: 736px) {
    & .col4 {
      grid-template-columns: repeat(3, 1fr);
    }
    & .col3 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col2 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 735px) and (min-width: 481px) {
    & .col4 {
      grid-template-columns: repeat(2, 1fr);
    }
    & .col3 {
      grid-template-columns: 1fr;
    }
  }
  @media screen and (max-width: 480px) {
    & .col4 {
      grid-template-columns: 1fr;
    }
  }
}
</style>

Как внедрить код css на наш сайт описывается в следующей статье.

А это код для вставки в создаваемый модуль на главной странице:

<div class="grid">
	<div class="col2">
		<div class="item">
			<div class="my-ads">
				<div class="requests">
					<div class="icon"><img src="/upload/uf/c5a/xro8by1vlj0podvrd80goe3dtglnjpd0/gorline.png" alt="ГИА" width="73" height="61"></div>
					<div class="title">Горячая линия по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями</div>
					<div class="description">
						<p>+7 912-433-96-78 (круглосуточно)<br>+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)</p>
						<p><a href="/presscenter/news/144051/" target="_blank" class="my-btn">Шкала температур</a></p>
					</div>
				</div>
			</div>
		</div>
		<div class="item">
			<div class="my-ads">
				<div class="requests">
					<div class="icon"><img src="/upload/uf/d96/ibbxad9bmnnsuanhcm3ua32la2hdefep/gia.png" alt="ГИА" width="73" height="61"></div>
					<div class="title">Горячая линия по вопросам проведения государственной итоговой аттестации</div>
					<div class="description">
						<p>ГИА-9 +7 (34992) 5-72-10 добавочный 2226</p>
						<p>ГИА-11 +7 (34992) 5-72-10 добавочный 2225</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

В данном примере мы дополнительно использовали класс my-btn который описывается в статье: Оформление кнопок на просмотр/скачивание документов

Блок объявлений

Пример:

«Горячая линия» по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями

Шкала температур

+7 912-433-96-78 (круглосуточно)
+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)

Горячая линия по вопросам проведения государственной итоговой аттестации

ГИА-9 +7 (34992) 5-72-10 #2226
ГИА-11 +7 (34992) 5-72-10 #2225

CSS-код нашего оформления блока объявлений:

/* Блок объявлений */
.announcement {
position: relative;
  & .requests {
    padding: 1em;
    border-radius: 4px;
    border: 1px solid var(--primary-color-25);
    background: var(--primary-color-light);
    overflow: hidden;
    display: grid;
    grid-template-columns: 0fr 1fr max-content;
    align-items: center;
    gap: 20px;
    & .icon {
      width: 126px;
      height: 126px;
      background: hsl(0, 0%, 100%);
      color: var(--primary-color);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      box-shadow: 0 0 0 24px hsla(0, 0%, 100%, 0.5);
      margin: calc(-1 * var(--grid-gap)) 0;
      }
    & .title {
      display: grid;
      place-items: center;
      margin-left: 1em;
      font-size: calc(18rem / var(--initial-font-multiplier));
      font-weight: bold;
      & div {
        display: grid;
        place-items: center;
        padding: 1em 0;
        border-bottom: 1px solid var(--primary-color-25);
        &:last-child {
          border-bottom: none;
        }
      }
      & p {
          text-align: left;
        }
      }
    & .wrapper {
      display: flex;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      }
    @media (hover: hover) {
      &:hover {
        & .icon {
          transform: scale(1.1);
          transition: transform 1s ease-out;
        }
      } 
    }
    @media screen and (min-width: 735px) {
      &:last-child {
        grid-template-columns: 0fr 1fr 320px;
        & .title {
          font-size: calc(22rem / var(--initial-font-multiplier));
          justify-self: flex-start;
        }
        & .icon {
          margin: calc(-1 * var(--grid-gap)) 20px;
          grid-row: 1;
        }
        & .wrapper {
          border-left: 1px solid var(--primary-color-25);
          padding-left: var(--grid-gap);
          margin: calc(-1 * var(--grid-gap)) 0;
          grid-column: 3;
          & .button {
            height: 48px;
            padding: 0 22px;
            min-width: 200px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 1155px) and (min-width: 1088px) {
    & .requests {
      grid-template-columns: 0fr 1fr;
      & .icon {
        grid-row: 1 / 3;
      }
    }
    & .title {
      justify-self: center;
      text-align: center;
    }
    & .wrapper {
      grid-column: 2;
    }
  }
  @media screen and (max-width: 1087px) {
    & .requests {
      grid-template-columns: 1fr;
      & > * {
        justify-self: center;
      }
      & .title {
        text-align: center;
      }
    }
  }
}
@media screen and (max-width: 735px) {
  .announcement {
    grid-template-columns: 1fr;
  }
}
:root.root--special .announcement {
  background-color: var(--special-background-color);
  & .requests {
    background-color: var(--special-background-color);
    border-color: var(--special-text-color);
  }
  & .title {
    color: var(--special-text-color);
  }
  & .icon {
    box-shadow: none;
    background-color: var(--special-background-color);
    color: var(--special-text-color);
  }
}
:root.root--special:not([data-special-font-size='normal']) .requests {
  grid-template-columns: 0fr 1fr;
}
:root.root--special:not([data-special-font-size='normal']) .icon {
  grid-row: 1 / 3;
}
:root.root--special:not([data-special-font-size='normal']) .title {
  justify-self: center;
  text-align: center;
}
:root.root--special:not([data-special-font-size='normal']) .wrapper {
grid-column: 2;
}

Как внедрить код css на наш сайт описывается в следующей статье.

HTML-код самого блока объявлений:

<div class="announcement">
<div class="requests">
<div class="icon"><img src="https://edulbt.yanao.ru/upload/uf/c5a/xro8by1vlj0podvrd80goe3dtglnjpd0/gorline.png" alt="ГИА" width="73" height="61"></div>
<div class="title">
<div>&laquo;Горячая линия&raquo; по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями</div>
<div><a href="https://edulbt.yanao.ru/presscenter/news/144051/" target="_blank" class="my-btn primary">Шкала температур</a></div>
</div>
<div class="wrapper">+7 912-433-96-78 (круглосуточно)<br>+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)</div>
</div>
</div>

Объявления в стиле блокнота

CSS-код:

/*Блокнот*/
.notepad {
	margin: 1em auto;
	padding: 0 23px 50px 35px;
	line-height: 26px;
	font-size: 18px;
  background-color: var(--light-color);
	background-image: -webkit-linear-gradient(var(--error-color) 1px, transparent 1px), -webkit-linear-gradient(var(--error-color) 1px, transparent 1px), -webkit-linear-gradient(var(--border-color) 1px, transparent 1px);
	background-image: -moz-linear-gradient(var(--error-color) 1px, transparent 1px), -moz-linear-gradient(var(--error-color) 1px, transparent 1px), -moz-linear-gradient(var(--border-color) 1px, transparent 1px);
	background-image: -o-linear-gradient(var(--error-color) 1px, transparent 1px), -o-linear-gradient(var(--error-color) 1px, transparent 1px), -o-linear-gradient(var(--border-color) 1px, transparent 1px);
	background-image: linear-gradient(var(--error-color) 1px, transparent 1px), linear-gradient(var(--error-color) 1px, transparent 1px), linear-gradient(var(--border-color) 1px, transparent 1px);
	background-size: 1px 1px, 1px 1px, 26px 26px;
	background-repeat: repeat-y, repeat-y, repeat;
	background-position: 22px 0, 24px 0, 0 50px;
  & .heading {
    position: relative;
    margin: 0 -23px 14px -35px;
    height: 3em;
    font-size: 18px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-color);
    &:before,
    &:after {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 1px;
      right: 1px;
      height: 0;
      border-top: 1px dashed var(--border-color-light);
      border-color: var(--border-color);
    }
  }
  & p {
    line-height: 26px;
    margin-bottom: -25px;
    margin-top: 25px;
    text-indent: 1.5em;
    text-align: justify;
  }
  & ul,
  & ol {
    & li {
      line-height: 26px;
    }
    margin-top: 25px;
    margin-bottom: -25px;
  }
}

Как внедрить код css на наш сайт описывается в следующей статье.

HTML-код:

<div class="notepad">
  <div class="heading">Заголовок объявления</div>
  <p>абзац объявления</p>
  <p>еще абзац объявления</p>
</div>