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

Пример:

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

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

+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>