AntonBrock
@AntonBrock
screen light

Как можно сверстать такое?

Не могу понять как мне выстроить так элементы, буду очень признателен за помощь!
5c481b0c5db85955951939.jpeg
<div class="notifications-attention-warning-main">
        <div class="notifications-attention-warning-main-icon">
          <i class="material-icons">warning</i>
        </div>
        <div class="notifications-attention-warning-main-p">
          <p>Внимание!</p>
        </div>
        <div>
          <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem.</p>
        </div>
      </div>


.notifications-attention-warning-main {
    border: 2px solid red; /* просто для себя*/
    border-radius: 4px;
    background: radial-gradient(circle farthest-corner at 100px 50px, #ff7da7, #ffa3a4);
    display: flex;
    justify-content: flex-end;   /* нененене в линию все строится */
}

.notifications-attention-warning-main-icon {
    border-right-color: #000;
}


Что у меня:
5c481bcd198c3768627379.jpegUPD:
К значку докопался, сделал, кроме сбоку рамки, тут не знаю border-right-style не роботает
  • Вопрос задан
  • 324 просмотра
Решения вопроса 2
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Я бы картинку сделал фоновым рисунком.

Ответ написан
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
Ну, можно обернуть весь текст (заголовок и описание) в отдельный блок, который будет на том же уровне, что и блок с картинкой, и добавить родителю align-items: center. Ну плюс еще всякие отступы.
Получится так
jsfiddle.net/Vlad_IT/4qo65sge
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Chefranov
@Chefranov
Новичок
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы