Skip to main content

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

Блок объявлений с классом: announcement

С помощью данного блока мы можем создавать объявления на разную тематику.

Для начала добавим код css в в поле подключаемые стили css

/* Блок объявлений */
.announcement {
  position: relative;
  padding: 0 1rem 0 0;

  & .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: var(--icon-background);
      color: var(--primary-color);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      box-shadow: 0 0 0 24px var(--primary-color-25);
      margin: calc(-1 * var(--grid-gap)) 0;
    }

    & .title {
      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;
}

Далее добавляем блок с нашим объявлением на главной странице сайта:

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

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

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

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

ГИА
«Горячая линия» по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями
+7 912-433-96-78 (круглосуточно)
+7 (34992) 5-72-10 добавочный 2210, 2212 (в рабочие часы)

Для горячей линии по вопросу организации учебного процесса в дни с неблагоприятными метеоусловиями 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="auto"></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>
ГИА
Горячая линия по вопросам проведения государственной итоговой аттестации
ГИА-9 +7 (34992) 5-72-10 #2226
ГИА-11 +7 (34992) 5-72-10 #2225

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

<div class="announcement">
    <div class="requests">
        <div class="icon"><img src="https://edulbt.yanao.ru/upload/uf/d96/ibbxad9bmnnsuanhcm3ua32la2hdefep/gia.png" alt="ГИА" width="73" height="auto"></div>
        <div class="title">Горячая линия по вопросам проведения государственной итоговой аттестации</div>
        <div class="wrapper">ГИА-9 +7 (34992) 5-72-10 #2226 <br>ГИА-11 +7 (34992) 5-72-10 #2225</div>
    </div>
</div>
ФГОС
Горячая линия по вопросам готовности к введению или реализации федерального государственного образовательного стандарта среднего общего образования
Задать вопрос

Для горячей линии по вопросам готовности к введению или реализации федерального государственного образовательного стандарта среднего общего образования:

<div class="announcement">
    <div class="requests">
        <div class="icon"><img src="https://edulbt.yanao.ru/upload/uf/419/t8l5pu0rnshfslvwcndz1s2us3k4w9dd/fgos.svg" alt="ФГОС" width="73" height="auto"></div>
        <div class="title">Горячая линия по вопросам готовности к введению или реализации федерального государственного образовательного стандарта среднего общего образования</div>
        <div class="wrapper"><a class="my-btn primary" href="https://edulbt.yanao.ru/service-forms/68e91179-050e-4137-abca-805b5058f8fc/" target="_blank">Задать вопрос</a></div>
    </div>
</div>

Не забываем нажать кнопку сохранить!

Back to top