Freelance collection

Menu
  • Главная
  • Бонусы и промокоды
  • Сервисы и инструкции
  • Обучение
  • Рост дохода
  • Первые шаги
  • ОБ АВТОРЕ
Menu

Оформление геткурс. Красивый список

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

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

оформление геткурс

Нажмите “Сохранить”.

http://ilynas.ru/wp-content/uploads/2023/07/zapis_2023_07_22_15_24_49_417.mp4

 

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

 

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

оформление геткурс

 

Автор — Светлана Ильина
Технический специалист онлайн-школ

 

Возможно вам будет интересно:

  • GetCourse. Как зарегистрироваться и получить 14 дней в подарок
  • Вакансия “Технический специалист”. Как найти достойную
Рубрика: Сервисы и инструкции

Добавить комментарий Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Рубрики

  • Бонусы и промокоды
  • Обучение
  • Первые шаги
  • Рост дохода
  • Сервисы и инструкции

getcourse вебинар выгодно геткурс дизайн заработок в интернете инструкция коды курс настройки новичкам обучение оформление поиск работы промокод профессионалам работа работа в декрете работа в интернете сервис тренинг фриланс

© 2023 Freelance collection | Политика конфиденциальности