Оформление тренингов с картинкой

Вторая версия модификации тренингов через более приятную глазу плитку, но уже с возможностью добавить картинку. Обычное оформление плиткой вместе с css кодами можете найти в этой статье (инструкция по установке также там, если вдруг не знаете что и куда). В этом варианте отображается только название тренинга. Описание, количество уроков и преподаватель скрыты.

Визуальное оформление Геткурс

Сам css код для тренингов на Геткурсе:

body {
   	background-color: #f0f0f0; /*цвет фона*/
}

.stream-table
{
    --min-width: 200px;  /*ширина плитки в пикселях*/
    --height: 250px; /*высота плитки в пикселях*/
}

.stream-table td > a > div {display:none;}

.stream-table { 
  margin-left:0!important;
}

.stream-table tbody {
  display:flex;
  flex-wrap: wrap;
}

tr[data-training-id] {
    display: flex;
    position: relative;
    height: var(--height);
    width: var(--min-width);
    border-radius: 5px;
    margin: 0 20px 20px 0;
    overflow: hidden;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16);
    transition: 0.5s ease;
}

@media (max-width:850px) {
  .stream-table tbody tr {
    flex:0 0 calc(49%);
  }
      .stream-table tbody tr {
    height: var(--height);
  }
}

@media (max-width:510px) {
  .stream-table tbody tr {
      flex:0 0 100%;
  }
}

.stream-table tr a {
	height: 100%;
    width:100%;
	z-index: 2;
	position: relative;
}

.stream-table tbody tr:hover {
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.10) !important;
}

.stream-table tbody tr td {
  position:relative;
  display:flex;
  height:100%;
  width:100%;
  padding:0!important;
  background-color: #fff;
}

.stream-table tr td a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: inherit;
    padding: 0 10px 8% 10px;
    width: 100%;
}

.stream-table tbody tr td:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:70%;
}

.stream-table tbody tr[data-training-id="471055522"] td:after {              background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/104/h/9c884bd4742d192113f65cd868db203c.jpeg) no-repeat;
 background-size:cover;
}

.stream-table tbody tr[data-training-id="471055523"] td:after {          background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/125/h/367287fde94879e5a2d07d1e852383cf.jpg) no-repeat;
 background-size:cover;
}

.stream-table tbody tr[data-training-id="471055524"] td:after {           background:url(https://fs.getcourse.ru/fileservice/file/download/a/95768/sc/508/h/d0cf2c243b97856f3f190647b1210741.jpeg) no-repeat;
  background-size:cover;
}

Здесь я сделал потемнее фон, чтобы плитка лучше выделялась. Заменить цвет или убрать совсем можно во 2 строке. В 7 и 8 строке вы также можете задать размеры плитки. А картинки прописываются в коде с 88 строки. Вам необходимо задать номер тренинга и адрес картинки.

У каждого тренинга/подтренинга есть свой id — это числовой набор в адресной строке, когда вы входите в него. Именно это значение нужно менять в коде.

Оформление тренингов с картинкой

Ссылку на картинку также прописываете в коде. Само изображение сперва загружаете, например, в хранилище Геткурса, а потом ссылку на файл ставите в код. У меня в примере 3 тренинга. Поэтому в коде 3 конструкции. Они отличаются только id и ссылкой. Вам на каждый раздел нужно копировать данную часть кода и подставлять свои значения.

css код для тренингов
Оцените статью
Добавить комментарий

  1. Анастасия

    Здравствуйте, подскажите пожалуйста, если я брала код на аудиоплеер, сразу все работало а теперь не грузит, в чем может быть причина?

    Ответить
    1. Василий Брежнев автор

      добрый день, попробуйте другой файл вставить, будет ли с другим проигрываться.

      Ответить
  2. Наталья

    Здравствуйте, а можно сделать так, чтобы название не отображалось под картинкой?

    Ответить
    1. Василий Брежнев автор

      добрый вечер, выше в блоке, где вы копировали код, замените в строке 85 на 100% — «height:100%»
      а после 53 добавьте «font-size: 0px;», чтобы текст уменьшить

      Ответить
      1. Наталья

        Спасибо большое, все получилось))

        Ответить
      2. Наталья

        Только теперь почему то плитки не открываются после добавления индекса((

        Ответить
        1. Василий Брежнев автор

          да, простите, сразу не посмотрел, я поправил комментарий выше. А добавленную «z-index: 10;» удалите

          Ответить
          1. Наталья

            огонь!!! все теперь работает))) спасибо)

  3. Екатерина

    Здравствуйте. Скажите пожалуйста, как выровнять название урока по высоте-по центру?

    Ответить
    1. Василий Брежнев автор

      добавил тут код для плиток с выравниванием по центру — https://hellogc.blog/style/menjaem-vid-treningov-i-podtreningov/

      Ответить