0

введите сюда описание изображенияВозникла проблема с иконками их нужно разместить перед заголовком. И не могу никак понять, что я сделал неправильно.

school__item {
  width: 350px;
  margin-right: 75px;
  position: relative;
  
}
.school__item::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
}

.school__item--accommodation::before{
     background-image: url('../images/sun-icon.svg');
}
.school__item--fly::before{
     background-image: url('../images/airplane-icon.svg');
}
.school__item--learn::before{
     bac[![введите сюда описание изображения][1]][1]kground-image: url('../images/surfer-icon.svg');
}

введите сюда описание изображения

7
  • 1
    .school__item { padding-left: 50px; }?
    – ΝNL993
    1 фев в 7:30
  • В каком-то смысле помогло, спасибо
    – itmax23
    1 фев в 7:55
  • html разметка уже не правильная, зачем стилями иконки грузить? а если они вдруг поменять захотят их? 1 фев в 9:10
  • @ЕвгенийЛи html разметка уже не правильная HTML'а как такового не предоставлено. зачем стилями иконки грузить? а если они вдруг поменять захотят их? - Просто поменять их?...
    – ΝNL993
    1 фев в 15:27
  • @ΝNL993 РЕЬД нет, но по стилям можно понять, что не правильно верстает. Просто поменять их? А кто будет менять иконки? Вы будете менять, когда клиент, которому вы сдадите проект попросит вас? А если он будет каждый день просить вас поменять иконки? А если год пройдёт и он должен вас найти, что бы вы поменяли ему иконки? Клиент должен вносить изменения через админку, а для этого нужно выводить изображения через HTML! 2 фев в 4:59

1 ответ 1

0

Как-то так

.school__item {
  width: 350px;
  margin-right: 75px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 1px solid #000;
}
.school__title-wrapper {
  width: 90%;
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}
.school__image {
  width: 30px;
  height: 30px;
  display: block;
  background: #000;
}
.school__title {
  text-transform: uppercase;
  font-size: 18px;
}
.description {
  text-align: justify;
}
<div class="school__item">
  <div class="school__title-wrapper">
    <img class="school__image" src"/" alt="school__image">
    <span class="school__title">Каой-то текст</span>
  </div>
  <div class="description">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.