Каморка Геткурсовода 💻 | Канал Максима Елисеева
А вот и долгожданный анонс моего четвёртого по счёту стрима в рамках клуба Train IT на тему "Секреты параллакса", который стартует 25 мая в 16:00! ▶️ https://train-it.ru/frying-layouts◀️ ➡️ Мечтаете преобразить проекты в современный презентабельный вид? …
⏳ Друзья, осталось всего 6 часов до окончания действия льготной цены на стрим "Прожарка макетов — Секреты параллакса"!
Регистрация на стрим >>
Сегодня ровно в 0:00 цена изменится на обычную, даже для владельцев GTFcard. Вы ещё можете успеть приобрести участие на стриме по льготной цене.✅
Регистрация на стрим >>
Важное напоминание ❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.
Регистрация на стрим >>
Сегодня ровно в 0:00 цена изменится на обычную, даже для владельцев GTFcard. Вы ещё можете успеть приобрести участие на стриме по льготной цене.
Регистрация на стрим >>
Важное напоминание ❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.
Please open Telegram to view this post
VIEW IN TELEGRAM
train-it.ru
Train IT — клуб изучения востребованных направлений | Стрим
Каморка Геткурсовода 💻 | Канал Максима Елисеева
А вот и долгожданный анонс моего четвёртого по счёту стрима в рамках клуба Train IT на тему "Секреты параллакса", который стартует 25 мая в 16:00! ▶️ https://train-it.ru/frying-layouts◀️ ➡️ Мечтаете преобразить проекты в современный презентабельный вид? …
⌛️ Осталось 3 часа до окончания действия льготной цены, и это последнее напоминание.
Регистрация на стрим >>
Далее вы сможете приобрести участие на стриме по обычной цене до дня проведения стрима (25 мая 16:00). После этой даты приобрести запись будет невозможно. Стримы — это эксклюзив клуба Train IT, и их можно найти в дальнейшем лишь на распродажах клуба😎
Регистрация на стрим >>
Приобретая участие на стриме, запись останется у вас навсегда в личном кабинете клуба Train IT😉
Регистрация на стрим >>
Далее вы сможете приобрести участие на стриме по обычной цене до дня проведения стрима (25 мая 16:00). После этой даты приобрести запись будет невозможно. Стримы — это эксклюзив клуба Train IT, и их можно найти в дальнейшем лишь на распродажах клуба
Регистрация на стрим >>
Приобретая участие на стриме, запись останется у вас навсегда в личном кабинете клуба Train IT
Please open Telegram to view this post
VIEW IN TELEGRAM
train-it.ru
Train IT — клуб изучения востребованных направлений | Стрим
Друзья, стрим «Прожарка макетов. Сезон 4. Секреты параллакса» начнется через 15 минут для всех, кто приобретал участие на стриме 😉
Для тех, кто не сможет присутствовать в прямом эфире: запись опубликуется в течении 2-х дней после проведения стрима.
Залетайте на стрим!
Для тех, кто не сможет присутствовать в прямом эфире: запись опубликуется в течении 2-х дней после проведения стрима.
Залетайте на стрим!
Друзья, всем отличного субботнего настроения 😉
А я уже подготовил и опубликовал для вас запись прошедшего стрима (от 25 мая) с материалами по параллаксу, чтобы выходные вы провели с пользой!😎
Для тех, кто приобретал участие — запись здесь😉
P.S. Не забудьте авторизироваться в клубе с главной страницы "войти в Личный кабинет" с той почты, с которой вы приобретали участие.
А я уже подготовил и опубликовал для вас запись прошедшего стрима (от 25 мая) с материалами по параллаксу, чтобы выходные вы провели с пользой!
Для тех, кто приобретал участие — запись здесь
P.S. Не забудьте авторизироваться в клубе с главной страницы "войти в Личный кабинет" с той почты, с которой вы приобретали участие.
Please open Telegram to view this post
VIEW IN TELEGRAM
Как всегда лазил по великому и всемогущему интернету и нашел много чего полезного для вас, что слегка скрасит, а может быть и сильно упростит вам жизнь как при вёрстке, так и в повседневной жизни 😎
Несколько интересных сервисов, которыми я хочу с вами поделиться:
1. Великолепный сервис Color Thief который поможет вам определиться с цветовой гаммой вашего проекта по фотографии. Сервис покажет преобладающие цвета, которые вы сможете взять "пипеткой", или же посмотреть с помощью F12 в панели разработчика, проинспектировав нужный кружочек с цветом.
2. Small Dev Tools поможет в форматировании вашего кода, приведения в нужный вид по стандартам написания, а так же поможет декодировать разные форматы (UTF-8, BASE64, JSON и т.д.). Так же помимо этого присутствует много плюшек, например, генерация собственных QR-кодов! Очень полезный сервис для продвинутых пользователей.
3. Забавный генератор аватарок (VK, Telegram, куда угодно) PFP Maker который может сгенерировать, обработать и украсить вашу фотографию дополненным контентом.
4. Storytale — это база картинок 3D и иллюстраций, которые вы можете скачать бесплатно, а некоторые за простую регистрацию на проекте, и пользоваться в своё удовольствие в ваших проектах.
#полезные_сервисы
Несколько интересных сервисов, которыми я хочу с вами поделиться:
1. Великолепный сервис Color Thief который поможет вам определиться с цветовой гаммой вашего проекта по фотографии. Сервис покажет преобладающие цвета, которые вы сможете взять "пипеткой", или же посмотреть с помощью F12 в панели разработчика, проинспектировав нужный кружочек с цветом.
2. Small Dev Tools поможет в форматировании вашего кода, приведения в нужный вид по стандартам написания, а так же поможет декодировать разные форматы (UTF-8, BASE64, JSON и т.д.). Так же помимо этого присутствует много плюшек, например, генерация собственных QR-кодов! Очень полезный сервис для продвинутых пользователей.
3. Забавный генератор аватарок (VK, Telegram, куда угодно) PFP Maker который может сгенерировать, обработать и украсить вашу фотографию дополненным контентом.
4. Storytale — это база картинок 3D и иллюстраций, которые вы можете скачать бесплатно, а некоторые за простую регистрацию на проекте, и пользоваться в своё удовольствие в ваших проектах.
#полезные_сервисы
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, вот и начало лета, сезон отпусков и отдыха. А для некоторых работа продолжается, в том числе и у меня. Но я всё же совмещу работу с отдыхом, и поэтому у меня есть две новости для вас:
🌟 Новость №1:
Я объявляю ежегодные летние каникулы в клубе Train IT с 15 июня по 15 июля.
В этом месяце, 14 июня, у меня будет день рождения🥳 И я немного ломаю реальность и хочу в честь своего дня рождения подарить подарки вам! Для всех, у кого доступ заканчивается не раньше 15 июня 0:00 (и не заморожен), я подарю +30 дней доступов к имеющимся направлениям в подписке!
А если вы хотите просто попасть под эту акцию и получить месяц бесплатно в подарок от меня, то просто оформляйте доступ с главной страницы к клубу😎
❗️Акция с подарочным месяцем закончится 14 июня в 23:59. Начисление подарочных дней состоится 15 июня в течении дня.
🌟 Новость №2:
Я буду продолжать выпускать посты и радовать вас полезными фишками и секретами. А так же я работаю над своими новыми продуктами, в частности для тех, кто хочет углубить свои знания в HTML/CSS/JS в тесном сотрудничестве со мной. Речь идёт о моей практической экспериментальной группе, где мы отработаем основы и азы вёрстки с моей обратной связью и выходом на связь в онлайн-формате😏
Так же я буду видоизменять свой клуб. Доделывать ступени тренажера дальше и превращать его в машину обучения с интереснейшей вовлечённостью в виде геймификации.
Вот такой пост-анонс получился. Желаю всем тёплого лета😉
Я объявляю ежегодные летние каникулы в клубе Train IT с 15 июня по 15 июля.
В этом месяце, 14 июня, у меня будет день рождения
А если вы хотите просто попасть под эту акцию и получить месяц бесплатно в подарок от меня, то просто оформляйте доступ с главной страницы к клубу
❗️Акция с подарочным месяцем закончится 14 июня в 23:59. Начисление подарочных дней состоится 15 июня в течении дня.
Я буду продолжать выпускать посты и радовать вас полезными фишками и секретами. А так же я работаю над своими новыми продуктами, в частности для тех, кто хочет углубить свои знания в HTML/CSS/JS в тесном сотрудничестве со мной. Речь идёт о моей практической экспериментальной группе, где мы отработаем основы и азы вёрстки с моей обратной связью и выходом на связь в онлайн-формате
Так же я буду видоизменять свой клуб. Доделывать ступени тренажера дальше и превращать его в машину обучения с интереснейшей вовлечённостью в виде геймификации.
Вот такой пост-анонс получился. Желаю всем тёплого лета
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, сегодня мой 34й день рождения!🥳 🥳 🥳
Я рад, что мне удалось собрать такое тёплое комьюнити, и безумно счастлив приносить пользу и вклад в наше с вами сообщество и индустрию EdTech в целом☺️
Хочу поблагодарить вас за то, что вы есть. Ваша поддержка вдохновляет меня делать кучу всего крутого и полезного, а так же делиться с вами этими полезностями. Дальше будет только круче, ярче, а вместе мы всегда сильнее🥰
🎈Так же хочу напомнить, что акция +30 дней доступов в подарок от меня закончится сегодня в 23:59. Так что если вы хотите успеть получить в подарок +30 дней к текущим доступам, вы ещё успеваете это сделать, приобретая доступы с главной страницы клуба 😉
Летние каникулы в клубе Train IT начнутся с 15 июня и продлятся до 15 июля.
Зачисление подарочных доступов произойдет 15 июня в течение дня.
Ну а я пошел праздновать😂
Я рад, что мне удалось собрать такое тёплое комьюнити, и безумно счастлив приносить пользу и вклад в наше с вами сообщество и индустрию EdTech в целом
Хочу поблагодарить вас за то, что вы есть. Ваша поддержка вдохновляет меня делать кучу всего крутого и полезного, а так же делиться с вами этими полезностями. Дальше будет только круче, ярче, а вместе мы всегда сильнее
🎈Так же хочу напомнить, что акция +30 дней доступов в подарок от меня закончится сегодня в 23:59. Так что если вы хотите успеть получить в подарок +30 дней к текущим доступам, вы ещё успеваете это сделать, приобретая доступы с главной страницы клуба 😉
Летние каникулы в клубе Train IT начнутся с 15 июня и продлятся до 15 июля.
Зачисление подарочных доступов произойдет 15 июня в течение дня.
Ну а я пошел праздновать
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Предвыходная уличная познавательная магия 😅
Please open Telegram to view this post
VIEW IN TELEGRAM
Сделал интересную декоративную фишку для кнопки формы, и хочу поделиться ею с вами.
Бывает такая ситуация, что наш интернет барахлит, либо происходит слишком долгое ожидание от сервера самого ГК, и когда пользователь кликает на кнопку Оплатить/Записаться и т.д., то возможно длительное ожидание, в ходе которого пользователь не до конца понимает, формируется его заказ или нет. Да, Геткурс с недавних пор сделал значок загрузки на самой кнопке, но я предлагаю ещё больше разнообразить и показать пользователю, что его заказ формируется, и ему следует немного подождать, чтобы не было соблазна тыкнуть на кнопку формы ещё раз(и убить все процессы или задвоить заказ) .
Мой простенький скрипт позволяет добавить надпись на кнопке при нажатии что заказ формируется, а так же меняет цвет самой кнопки. Вы можете изменить этот цвет и текст под себя, как вам нравится.
Порядок установки:
1. Поставьте вашему блоку с формой любой класс. У меня этот класс
😎
Пользуйтесь😊
#полезная_фишка
Бывает такая ситуация, что наш интернет барахлит, либо происходит слишком долгое ожидание от сервера самого ГК, и когда пользователь кликает на кнопку Оплатить/Записаться и т.д., то возможно длительное ожидание, в ходе которого пользователь не до конца понимает, формируется его заказ или нет. Да, Геткурс с недавних пор сделал значок загрузки на самой кнопке, но я предлагаю ещё больше разнообразить и показать пользователю, что его заказ формируется, и ему следует немного подождать, чтобы не было соблазна тыкнуть на кнопку формы ещё раз
Мой простенький скрипт позволяет добавить надпись на кнопке при нажатии что заказ формируется, а так же меняет цвет самой кнопки. Вы можете изменить этот цвет и текст под себя, как вам нравится.
Порядок установки:
1. Поставьте вашему блоку с формой любой класс. У меня этот класс
my-form
2. Поставьте скрипт в блок JavaScript под вашу форму:$(function() {
let myForm = document.querySelector('.my-form'); // Здесь поменять класс на класс вашего блока
let formBtn = myForm.querySelector('.btn');
formBtn.addEventListener('click', function() {
this.innerHTML = ' Формируем заказ...';
this.style.backgroundColor = '#a0cfa0';
});
})
Обратите внимание, что если ваш класс у формы будет другим, то в вам в скрипте нужно поставить свой класс вместо .my-form
Пользуйтесь
#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Проводите марафоны? Есть открытые уроки для всех зарегистрировавшихся? 😏
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".
Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.
Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":
#лайфхак #полезная_фишка
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".
Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.
Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":
<script>Кнопочка появится в вашей Ленте ответов справа сверху, примерно через 10 минут (зависит от загруженности сервера ГК, на котором располагается ваш проект) ✔️
$(function() {
if(window.location.href.indexOf('/teach/control/answers/unanswered') > -1) {
$('.container').append(`
<button class="btn btn-success accept-all" style="position: fixed; top: 20px; right: 20px;">Принять всё</button>
`);
$(function() {
var acceptBtns = document.querySelectorAll('.btn[value="accepted"]');
$('.accept-all').on('click', function() {
acceptBtns.forEach(e => e.click());
});
});
}
})
</script>
#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Нашел парочку достаточно интересных шаблонов и решил спросить вас, какой из них вам больше всего нравится и интересен в плане реализации?
Прикреплю к этому посту два шаблона, а опрос будет ниже.
Голосование продлится до конца дня среды (5 июля). Думаю, многие уже догадываются, что это означает😎
P.S. Если победит первый шаблон, то туда тоже обязательно прикрутим слайдер!🎂
Прикреплю к этому посту два шаблона, а опрос будет ниже.
Голосование продлится до конца дня среды (5 июля). Думаю, многие уже догадываются, что это означает
P.S. Если победит первый шаблон, то туда тоже обязательно прикрутим слайдер!
Please open Telegram to view this post
VIEW IN TELEGRAM
Какой из них вам больше всего нравится и интересен в плане реализации?
Final Results
53%
Шаблон-1
47%
Шаблон-2
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Какой из них вам больше всего нравится и интересен в плане реализации?
Жаркое голосование 😬
Сегодня в 18:00 остановлю голосование, и определим макет, который будем верстать.
Анонс предстоящей вёрстки будет в пятницу (7 июля). Не пропустите🥺
Сегодня в 18:00 остановлю голосование, и определим макет, который будем верстать.
Анонс предстоящей вёрстки будет в пятницу (7 июля). Не пропустите
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Какой из них вам больше всего нравится и интересен в плане реализации?
А вот и тот самый анонс по итогу голосования! 😎
Победил макет "Книжный лендинг" (Шаблон-1). Именно его мы будем с вами верстать на очередном, уже 5-м по счёту стриме, в рамках клуба Train IT — Прожарке макетов. Стрим пройдёт 27 июля в 16:00.
⏩ Участвовать на стриме и посмотреть программу
Не переживайте, в первый макет я тоже внедрю слайдер и подробно объясню как с нимбороться работать. Поэтому главную фишку второго макета мы частично реализуем в первом 😉
Как и всегда, в данный момент действуют льготные цены до 24 июля 23:59:
Для счастливых обладателей GTFcard — 1790р.
Обычная льготная цена — 1990р.
А уже 25 июля цена изменится и станет 2590р. для всех.
⏩ Участвовать на стриме и посмотреть программу
И конечно же, если вы не сможете посетить эфир в этот день, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT.
Важные моменты:
❕ Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.
❕ Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.
❕ Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.
Победил макет "Книжный лендинг" (Шаблон-1). Именно его мы будем с вами верстать на очередном, уже 5-м по счёту стриме, в рамках клуба Train IT — Прожарке макетов. Стрим пройдёт 27 июля в 16:00.
Не переживайте, в первый макет я тоже внедрю слайдер и подробно объясню как с ним
Как и всегда, в данный момент действуют льготные цены до 24 июля 23:59:
Для счастливых обладателей GTFcard — 1790р.
Обычная льготная цена — 1990р.
А уже 25 июля цена изменится и станет 2590р. для всех.
И конечно же, если вы не сможете посетить эфир в этот день, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT.
Важные моменты:
Please open Telegram to view this post
VIEW IN TELEGRAM
Вот представьте ситуацию: вам прилетает макет с красивым дизайном, сделанным в Фигме. Всё очень круто, вы начинаете потихоньку верстать первый экран и осознаёте, что элементы попросту в него не помещаются, а в Фигме всё ровненько и красиво. 🤬
Не многие обращают внимание на то, что ширина самого контейнера, содержащего контент в Фигме, зачастую существенно отличается от ширины контейнера Геткурса, у которого есть ограничение в 1170px (плюс по 15 пикселям маргина/паддинга по бокам). И тут встаёт вопрос: как всё это уместить в пределы Геткурса?
Некоторые люди сдадутся и будут делать всё в соответствии с контейнером ГК. Но мы-то с вами не такие, правда же?😉 Мы попросту изменим ширину контейнера и сделаем её такой же на всей странице, как и в макете. Делается это сверхпросто и быстро.
Предположим, что в Фигме контейнер самого контента имеет ширину в 1400px. А мы помним, что контейнеры Геткурса под контент составляют 1170px в ширину. Ставим CSS-блок в самый верх вашей страницы и просто добавляем туда следующее:
#лайфхак
Не многие обращают внимание на то, что ширина самого контейнера, содержащего контент в Фигме, зачастую существенно отличается от ширины контейнера Геткурса, у которого есть ограничение в 1170px (плюс по 15 пикселям маргина/паддинга по бокам). И тут встаёт вопрос: как всё это уместить в пределы Геткурса?
Некоторые люди сдадутся и будут делать всё в соответствии с контейнером ГК. Но мы-то с вами не такие, правда же?
Предположим, что в Фигме контейнер самого контента имеет ширину в 1400px. А мы помним, что контейнеры Геткурса под контент составляют 1170px в ширину. Ставим CSS-блок в самый верх вашей страницы и просто добавляем туда следующее:
.my-container,
.container {
max-width: 1400px !important;
}
У Геткурса есть два селектора его контейнеров, которые по сути мы просто переназначили. И всё, ваши контейнеры растянулись как надо и теперь готовы попиксельно вместить весь дизайн, который был отрисован в Фигме.#лайфхак
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
А вот и тот самый анонс по итогу голосования! 😎 Победил макет "Книжный лендинг" (Шаблон-1). Именно его мы будем с вами верстать на очередном, уже 5-м по счёту стриме, в рамках клуба Train IT — Прожарке макетов. Стрим пройдёт 27 июля в 16:00. ⏩ Участвовать…
Какие ваши ощущения, когда вам прилетает макет в Фигме со сложными элементами, которые, как кажется, нереально собрать на Геткурсе? Хочется при этом передать макет "более опытному" товарищу, а у вас самих опускаются руки?
Если вам знакомы эти ощущения, то мой стрим 27 июля в 16:00 специально для вас😎
⏩ Участвовать на стриме и посмотреть программу
Путём голосования был выбран макет "Книжного лендинга", который мы будем верстать в прямом эфире с кучей сложных элементов и нестандартных блоков. Я научу вас грамотному подходу к сложным макетам, правильной вёрстке и стилизации таких элементов. Постепенно избавимся от страха подобных макетов, ведь мы его прожарим в свойственной мне манере в прямом эфире!😎
В данный момент действуют льготные цены до 24 июля 23:59:
Для счастливых обладателей GTFcard — 1790р.
Обычная льготная цена — 1990р.
А уже 25 июля цена изменится и станет 2590р. для всех.
⏩ Участвовать на стриме и посмотреть программу
Так же, если вы не сможете посетить эфир в этот день, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT🔥
P.S. Важные моменты по GTFcard смотрите в закреплённом посте в самом низу сообщения.
Если вам знакомы эти ощущения, то мой стрим 27 июля в 16:00 специально для вас
Путём голосования был выбран макет "Книжного лендинга", который мы будем верстать в прямом эфире с кучей сложных элементов и нестандартных блоков. Я научу вас грамотному подходу к сложным макетам, правильной вёрстке и стилизации таких элементов. Постепенно избавимся от страха подобных макетов, ведь мы его прожарим в свойственной мне манере в прямом эфире!
В данный момент действуют льготные цены до 24 июля 23:59:
Для счастливых обладателей GTFcard — 1790р.
Обычная льготная цена — 1990р.
А уже 25 июля цена изменится и станет 2590р. для всех.
Так же, если вы не сможете посетить эфир в этот день, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT
P.S. Важные моменты по GTFcard смотрите в закреплённом посте в самом низу сообщения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Многим был интересен механизм работы "Читать далее". В этом посте я раскрою одну из его механик работы. Экспериментировать я буду на своём любимом блоке "Карточек".
Если вы хотите разметить много текста в описании вашего продукта в карточке, то логичнее не делать "портянку", а придерживаться единого ритма текстового контента, например, показывать лишь 3 строчки текста, чтобы всё остальное было скрыто. Но как так сделать?🧐
Демонстрирую один из возможных вариантов:
1) Ставим блок карточек (см. скриншот)
2) Делаем описание карточки с подобной внутренней разметкой:
😉
#полезная_фишка #лёгкая_кастомизация
Если вы хотите разметить много текста в описании вашего продукта в карточке, то логичнее не делать "портянку", а придерживаться единого ритма текстового контента, например, показывать лишь 3 строчки текста, чтобы всё остальное было скрыто. Но как так сделать?
Демонстрирую один из возможных вариантов:
1) Ставим блок карточек (см. скриншот)
2) Делаем описание карточки с подобной внутренней разметкой:
<p>... Очень много вашего текста...</p>
<p class="readmore"><a style="font-weight: bold;">Читать далее...</a></p>
3) Вставляем стили в Стили блока в "Подробные настройки":.lt-tsr-content .description p {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.lt-tsr-content .description p.opened {
-webkit-line-clamp: initial;
}
.lt-tsr-content .description p.changed a {
font-size: 0;
}
.lt-tsr-content .description p.changed a:before {
content: 'Скрыть';
font-size: 16px;
}
4) В самом низу страницы или под блок с карточками ставим блок с JS-кодом:$(function() {
let readBtns = document.querySelectorAll('.readmore');
readBtns.forEach(el => {
el.addEventListener('click', function() {
this.classList.toggle('changed');
this.previousElementSibling.classList.toggle('opened');
})
})
})
И наслаждаемся чудесным механизмом "Читать далее", который безумно сильно сокращает полотна текста на карточках, а так же делает эстетически приятный однородный вид элементов #полезная_фишка #лёгкая_кастомизация
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM