Оформление на геткурс редко обходится без элемента «Список». Он используется и на лендингах, и в тренингах. С помощью него удобно структурировать информацию, давать сложное просто, выделять главное.

Но предложенные в 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;}

Нажмите «Сохранить».

 

Ваш красиво оформленный список готов!

 

Улыбнитесь! Для тех, кто помнит кино))