ЕПС

Размещение официального сайта на Единой платформе официальных сайтов органов государственной власти и органов местного самоуправления муниципальных образований в ЯНАО

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

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

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

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

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

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

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


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

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

Шаг 1

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

image.png

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

nic.yanao.ru_domain_create.png

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

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

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

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

Шаг 2

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

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

image.png

nic.yanao.ru_eps_create.png

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

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

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

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

image.png

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

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

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

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

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

image.png

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

image.png

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

image.png

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

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

image.png

 

image.png

 

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

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

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

image.png

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

image.png

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

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

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

image.png

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

image.png

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

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

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

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

Вступление

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

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

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

image.png

image.png

image.png

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

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

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

image.png

image.png

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

Следующий 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 на наш сайт описывается в следующей статье.

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

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

image.png



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

image.png

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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>

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

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

image.png

image.png

image.png

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

Вот 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 на наш сайт описывается в следующей статье.

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

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

image.png

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

image.png

image.png

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

image.png

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

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

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

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

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

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

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

image.png

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

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

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

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

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 на наш сайт описывается в следующей статье.

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

Описание Пример отображения Код HTML
Список upper-roman
  • пункт 1
  • пункт 2
  • пункт 3
<ul class="upper-roman">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>
Список middle-dash
  • пункт 1
  • пункт 2
  • пункт 3
 
<ul class="middle-dash">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>
Список check
  • пункт 1
  • пункт 2
  • пункт 3
 
<ul class="check">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>
Список lower-cyrillic
  • пункт 1
  • пункт 2
  • пункт 3
 
<ul class="lower-cyrillic">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>
Список upper-cyrillic
  • пункт 1
  • пункт 2
  • пункт 3
 
<ul class="upper-cyrillic">
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ul>

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

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

2024-04-02_08-54-18.jpg

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

2024-04-02_08-54-34.jpg

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

2024-04-02_08-55-19.jpg

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. Сохраняем все!

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

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

Basic
<a class="my-btn" href="#" target="_blank">Basic</a>
Basic  
<a class="my-btn focus" href="#" target="_blank">Basic focus</a>
Basic active  
<a class="my-btn active" href="#" target="_blank">Basic active</a>
Basic disabled  
<a class="my-btn disabled" href="#" target="_blank">Basic disabled</a>
Success  
<a class="my-btn success" href="#" target="_blank">Success</a>
Success focus  
<a class="my-btn success focus" href="#" target="_blank">Success focus</a>
Success active  
<a class="my-btn success active" href="#" target="_blank">Success active</a>
Success disabled  
<a class="my-btn success disabled" href="#" target="_blank">Success disabled</a>
Info  
<a class="my-btn info" href="#" target="_blank">Info</a>
Info focus  
<a class="my-btn info focus" href="#" target="_blank">Info focus</a>
Info active  
<a class="my-btn info active" href="#" target="_blank">Info active</a>
Info disabled  
<a class="my-btn info disabled" href="#" target="_blank">Info disabled</a>
Warning  
<a class="my-btn warning" href="#" target="_blank">Warning</a>
Warning focus  
<a class="my-btn warning focus" href="#" target="_blank">Warning focus</a>
Warning active  
<a class="my-btn warning active" href="#" target="_blank">Warning active</a>
Warning disabled  
<a class="my-btn warning disabled" href="#" target="_blank">Warning disabled</a>
Danger  
<a class="my-btn danger" href="#" target="_blank">Danger</a>
Danger focus  
<a class="my-btn danger focus" href="#" target="_blank">Danger focus</a>
Danger active  
<a class="my-btn danger active" href="#" target="_blank">Danger active</a>
Danger disabled  
<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 на наш сайт описывается в следующей статье.

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

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

2024-04-02_08-56-24.jpg

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

2024-04-02_08-54-34.jpg

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

2024-04-02_08-55-19.jpg

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 кода который оформит нам сразу несколько элементов:

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

Заголовок 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-контейнер — самый главный элемент во всей разметке, в нём хранится всё содержимое сетки;

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

image.png

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

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

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

image.pngрисунок 1

image.pngрисунок 2

image.pngрисунок 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 на наш сайт описывается в следующей статье.

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

image.png

image.png

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

image.png

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

image.png

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

image.png

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

image.png

Исходный 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>

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

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

image.png

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>