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

Вот и пришло время вспомнить HTML разметку и начать брать отдельную оплату за визуальное оформление.

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

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

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

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

и делается это небольшим объяснением в 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;
}

Ждем решения эксперта и конечно, как только будет все полностью сделано обязательно дополню статью.

Были предложены разные варианты и комбинации:

Но эксперт решил, что хочет по другому и остановились на следующем варианте:

1. каждый модуль имеет свое визуальное оформление
2. модули разделяются визуально картинками в рамке