Найти тему

Визуальное оформление

28 ноября 2023 поступил запрос - А ты можешь нам сделать не стандартное оформление, для нового продукта?

Ну и что я мог ответить? Конечно - ДА!

Начали мы с изменения вида плитки урока. Был сделан тестовый урок, что бы эксперт принял решение нравится ли ему и надо ли еще 27 уроков переделывать.

Вот что получилось:

-2

и делается это небольшим объяснением в CSS:

/*ставим картинку на фон блока плитки урока*/
.lesson-list .lesson-id-311078174 a{
background: url(https://fs.getcourse.ru/fileservice/file/download/a/241527/sc/293/h/9cdb2a60668364189cc0abe3583affed.png);
background-size: cover; /*подгон изображения под размер блока*/
background-position-x: 100%; /*что бы не переделывать картинку и оставить цветок справа (цветы с обеих сторон) сделал смещение влево*/
}
/*Меняем цвет описания урока в плитке
.lesson-list .lesson-id-311078174 a .description{
color:red;
}*/
/*Убираем отображение фона на второй части плитки*/
.lesson-list li .info{
background: none;
}