Оформление на геткурс редко обходится без элемента “Список”. Он используется и на лендингах, и в тренингах. С помощью него удобно структурировать информацию, давать сложное просто, выделять главное.
Но предложенные в GetCourse блоки для оформления списков слишком простые.
Ниже расскажу, как красиво оформить список следующим образом:
1. Добавьте блок “Обычный текст” на лендинг или в урок.
2. Перейдите в html-редактор в блоке. Удалите всё и добавьте следующий код
<ul class="border"> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> <li>Элемент списка</li> </ul>
3. Замените слова “Элемент списка” на данные своего списка.
После этого нажмите “Сохранить и закрыть”.
4. Войдите в “Стиль” блока.
И в “Подробные настройки”.
5. Добавьте следующий код.
.border {
list-style: none;
padding: 0;
}
.border li {
font-family: "Trebuchet MS", "Lucida Sans";
padding: 7px 20px;
margin-bottom: 10px;
border-radius: 5px;
border-left: 10px solid #f05d22;
box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
-2px -2px 5px 0 rgba(0,0,0,.1),
2px 2px 5px 0 rgba(0,0,0,.1),
-2px 2px 5px 0 rgba(0,0,0,.1);
font-size: 20px;
letter-spacing: 2px;
transition: 0.3s all linear;
}
.border li:nth-child(2){border-color: #8bc63e;}
.border li:nth-child(3){border-color: #fcba30;}
.border li:nth-child(4){border-color: #1ccfc9;}
.border li:nth-child(5){border-color: #493224;}
.border li:hover {border-left: 10px solid transparent;}
.border li:nth-child(1):hover {border-right: 10px solid #f05d22;}
.border li:nth-child(2):hover {border-right: 10px solid #8bc63e;}
.border li:nth-child(3):hover {border-right: 10px solid #fcba30;}
.border li:nth-child(4):hover {border-right: 10px solid #1ccfc9;}
.border li:nth-child(5):hover {border-right: 10px solid #493224;}
Нажмите “Сохранить”.
Ваш красиво оформленный список готов!
Улыбнитесь! Для тех, кто помнит кино))
Автор — Светлана Ильина
Технический специалист онлайн-школ
Возможно вам будет интересно: