Каморка Геткурсовода 💻 | Канал Максима Елисеева – Telegram

Каморка Геткурсовода 💻 | Канал Максима Елисеева

2.38K subscribers

194 photos

18 videos

10 files

107 links

Остались вопросы? Пишите — @Isagaya

Этот уютный канал посвещён фишкам и нестандартным решениям по дизайнам, интерфейсам и функционалам платформы от Куратора школы Магии Геткурса — Максима Елисеева.

Мой второй канал обо всём - https://t.me/closetmax ;)

Download Telegram

About

Blog

Apps

Platform

Каморка Геткурсовода 💻 | Канал Максима Елисеева

2.38K subscribers

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Мне многие пишут, особенно уже когда мой стрим прошел, что хотели бы приобрести запись. Стримы в моём клубе Train IT это эксклюзивный контент, который не продаётся в свободном доступе, и его можно приобрести только в течение 3-4 недель после анонса до дня…

Совсем забыл осветить прошлое напоминание в канале. Поэтому напоминаю сейчас и один раз 😜

Осталось всего 7 часов до конца распродажи стримов!
Событие СтримоБУМ 💥 начинает подходить к концу. А вместе с ним перестанут продаваться и записи стримов.

Все неоплаченные заказы будут отменены сегодня в 23:59.

💣 https://train-it.ru/stream-boom 💣

Все самые сочные практики ждут вас ещё совсем немного, а потом отправятся отдыхать в закрытом режиме без возможности покупки 😊

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views14:02

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Тема кнопок всегда будет актуальна, ведь как-то надо привлекать внимание пользователей, верно? 😌

Из необычных эффектов на кнопке вот такое светлое пятно, которое придаёт соблазна на неё тыкнуть. В принципе можно положить заранее заготовленную подобную картинку на бэкграунд, правда тут есть "но". Картинка это растр. И если ваша кнопка достаточно большая, то при адаптации этот растр "пережмёт" в такое кривое нечто, что это будет безумно криво смотреться.

Такой эффект достигается с помощью радиального градиента на самой кнопке. Вот пример CSS, который используется для кнопки на скриншоте к посту, и прочие стили, которые задают подобный формат кнопке:

.btn {
    background: radial-gradient(53.6% 103.93% at 28.4% 50.81%, #d58ecf 0%, #bb4056 100%);
    border-radius: 10px;
    font-size: 20px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    padding-left: 45px;
    padding-right: 45px;
}

В то же время важно в настройках кнопки оставить поля цветов пустыми (скриншот №2), и применить настройки. Тогда данный CSS вполне хорошо ляжет на саму кнопку. Вы можете поиграться и поставить свои цвета, которые являются главными у вас в проекте 😊

#полезная_фишка

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

2.5K views11:45

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Media is too big

VIEW IN TELEGRAM

Разбавим субботний вечер подборкой самых ужасных UI для регулирования громкости.

P.S.: Когда сказали, что проект должен "выделяться" среди всех по дизайну 😆

Please open Telegram to view this post

VIEW IN TELEGRAM

2.4K viewsedited 15:58

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Привет, друзья! И конечно же всех с наступившей пятницей и надвигающимися выходными.

Как многие заметили, в течение недели я не выкладывал ничего в канал, т.к. занят запуском достаточно крупного проекта (о котором я обязательно вам расскажу), а так же готовлюсь к конференции FARSH, о которой некоторые уже слышали, где я буду вещать хоть и не слишком высокотехнологичную тему, но зато одну из самых больных, которую я вижу чуть ли не во всех чатах с частой периодичностью 😦

Такой пост покаяния получился 😅

Всех с наступающими выходными, и отличного настроения! 😉

Please open Telegram to view this post

VIEW IN TELEGRAM

2.2K views10:14

Каморка Геткурсовода 💻 | Канал Максима Елисеева

В этот четверг (15 февраля), как вы знаете, я участвую на самой "мясной" конференции FARSH. Почему "мясной"? Потому что там будут самые сочные, как идеально приготовленный стейк технологии, которые помогают техническим специалистам и продюсерам привнести в проект технический БУМ.

Как я писал ранее, моя тема не является чем-то прям грандиозным из мира "высоких технологий". Я буду рассказывать про то, как кастомизировать скучные чекбоксы и радиокнопки на Геткурсе, ведь у самого Геткурса нет такой возможности в принципе. Зато эту самую боль я вижу во многих чатах, особенно там, где верстальщику или спецу дали необычный дизайн формы, где вместо чекбоксов и радиокнопок используются какие-то по истине красивые элементы выбора 😉

Я дам вам единый механизм работы, и покажу пару примеров использования чтобы решить эту проблему раз и навсегда 🤺

А тут скидка от меня на конференцию FARSH -10% !

Please open Telegram to view this post

VIEW IN TELEGRAM

1.7K views10:47

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Зачастую мне хочется поделиться бОльшим, но в основную тематику данного канал это было бы не актуально 😉

Я уже обмолвился после конференции FARSH что создам второй канал, где я буду выкладывать сторонние посты об всём, включая Геткурс, но так же затрагивая остальные технологии и платформы, с которыми я работаю. И ещё там я буду делиться моментами своей повседневной жизни ☀

В общем, приглашаю на мой второй канал — Чулан Макса Елисеева

😦

Please open Telegram to view this post

VIEW IN TELEGRAM

Чулан Максима Елисеева | Технически обо всём

Второй канал, где публикуются сторонние посты с разных платформ (AXL, Tilda, Wordpress, GetCourse и др.). А так же другие посты, который не относятся к тематике основного канала ;)

Остались вопросы? Пишите @Isagaya

Основной канал: https://t.me/closetgc

1.6K views12:38

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Существует такая проблема как "слишком много полей в форме регистрации". Да, я и сам с такой сталкивался, и зачастую превращали страницу, как я люблю называть, в рулон туалетной бумаги 😦

Подготовил для вас небольшой лайфхак с тем, как я решал эту проблему. Достаточно простенько, но элегантно 😉

В CSS стили блока с формой ставим:

.form-content .builder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.part-userField {
    flex: 1 0 49%;
}

.part-header, .part-button {
    flex-basis: 100%;
}

И вуаля, наши поля теперь расположены в 2 ряда. Если у вас нечётное количество полей, то может быть такое, что у вас останется лишнее некрасивое место. Чтобы решить эту проблему так же элегантно, то назовите поле вашим собственным классом, и добавьте ваш класс в последнее правило, где применяется свойство flex-basis: 100%;

Должно выглядеть так:

.part-header, .part-button, .вашкласс {
    flex-basis: 100%;
}

#лайфхак #полезная_фишка

Please open Telegram to view this post

VIEW IN TELEGRAM

2.0K views09:27

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Жиза?

Всех с пятницей, друзья!
И отличных выходных 😎

1.7K views15:49

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Привет, друзья!

Быть может кто-то ещё не знает, но я сделал страницу с бесплатным уроком оформления личного кабинета Геткурса к празднику 8-го марта ✨

Эту страницу буду периодически пополнять новым материалом, так что следите 😊

➡️

Посмотреть урок тут

⬅️

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views10:55

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Наши милые девушки! Я поздравляю вас с Международным женским днём 8 марта! И желаю чтобы каждая из вас была такая же красивая, обоятельная, чтобы доход вырос троекратно, и конечно же всегда были счастливы. Ну а мы, мужчины, сделаем всё, чтобы создать для вас счастье 😌

🌸

🌸

💐

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K viewsedited 08:39

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Кстати, если вы хотите прокачать свой скилл владением Геткурса, в частности овладеть красивыми эффектами на кнопках, поставить им анимации при наведении, сделать их необычной формы и заставить выполнять виртуозные трюки, то в Клубе Магии с понедельника (11 марта) стартует бесплатный марафон «Нажми на кнопку», который будет длиться 5 дней!

А это значит, что за 5 дней вы посмотрите 5 потрясающих практических уроков и виртуозно овладеете магией кода для преображения кнопок!

▶️

Регистрация на бесплатный марафон

◀️

А теперь всё вместе:
⏺ Подойдёт для начинающих, особенно тем, кто желает овладеть красивым оформлением
⏺ Один из уроков марафона представлен лично мной ✨
⏺ Старт марафона 11 марта (понедельник)

⏺

Зарегистрироваться можно здесь

😉

Please open Telegram to view this post

VIEW IN TELEGRAM

1.6K views14:02

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Сегодня решил поделиться с вами сочным дизайном корзины на ГК, чтобы как-то разнообразить её скучный вид 😉

Есть несколько состояний корзины: закрытая и раскрытая.

Для владеющих CSS людей я отделил комментариями в стилях части стилей, которые отвечают за разные состояния, можете попробовать подредактировать некоторые моменты под ваш проект

😏

Стили необходимо поставить на ту страницу, где находится ваша корзина, в самый верх страницы в отдельный CSS-блок.

Сами стили будут ниже этого поста. Так как они не вмещаются в него 😆

#полезная_фишка

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views13:40

Каморка Геткурсовода 💻 | Канал Максима Елисеева

/*** Стили закрытой корзины ***/

.lt-basket.basket-collapsed {
    border-radius: 10px;
    background: #fff;
    color: #000;
    box-shadow: 0 3px 5px 1px lightgrey;
}

.lt-basket .total-cost-str {
    font-size: 1.3em;
    font-weight: bold;
}

.lt-basket .old-total-cost-str {
  color: #bbb;
}

/*** Общий стиль кнопок ***/

.lt-basket .buttons button, 
.lt-basket .total-view button {
    border: none;
    background: #fff;
    color: #777;
    box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1), 
        0 5px 10px rgba(0, 0, 0, 0.1), 
        0 10px 15px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.1), 
        0 5px 10px rgba(0, 0, 0, 0.1), 
        0 10px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.lt-basket .total-view button {
  position: absolute;
    left: 50%;
    transform: translate(-50%, 50%);
    margin-left: 0 !important;
}

.lt-basket .buttons button:focus, 
.lt-basket .total-view button:focus {
  outline: none;
}

.lt-basket .buttons button:active:focus,
.lt-basket .total-view button:active:focus {
  box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
        inset 0 5px 10px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: inset 0 -7px 5px rgba(0, 0, 0, 0.0025),
        inset 0 5px 10px rgba(0, 0, 0, 0.15);
    background-color: #fff;
    color: #777;
    outline: none;
}

/*****************************************************/

/*** Стили раскрытой корзины ***/

.lt-basket {
  border-radius: 10px;
    background: #fff;
    color: #000;
    box-shadow: 0 3px 5px 1px lightgrey;
}

.lt-basket .positions-table {
  color: #777;
}

.lt-basket .positions-table .form-control {
  height: 37px !important;
    width: 37px !important;
    border-radius: 50%;
}

.lt-basket .positions-table .old-total-price {
  color: #bbb;
}

.lt-basket .positions-table .total-price, 
.lt-basket .positions-table .total-row .offer-title {
  font-weight: bold;
    font-size: 1.3em;
    color: #000;
}

@media (max-width: 430px) {
  .lt-basket .positions-table .total-price, 
  .lt-basket .positions-table .total-row .offer-title,
    .lt-basket .total-cost-str {
      font-size: 1em;
    }
}

1.6K views13:40

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Может кто-то уже знал, но для меня стало новостью, что Геткурс втихую уже перешел от использования FontAwesome 4.7 на 6.0 версию

✨

Это значит что можно использовать более продвинутую библиотеку иконок при верстке. Гораздо больше выбор, быстрее отклик, в общем стало мега удобно 🤩

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views12:18

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Весна, середина сезона, а значит самое время и для моего сезонного стрима мастер-класса "Прожарки макетов" на тему "Конструктор тренингов" который состоится 15 мая в 16:00 в моём клубе Train IT.

➡️

Принять участие и посмотреть программу стрима

Как и всегда, в данный момент действуют льготные цены до 13 мая 23:59:
Для счастливых обладателей GTFcard — 2290р.
Обычная льготная цена — 2690р.

А уже 14 мая цена изменится и станет 3390р. для всех.
🗣Даже если у вас не получится посетить стрим, то приобретая участие запись останется у вас навсегда в личном кабинете клуба Train IT.

Мне кажется нет такого человека, у кого бы старый конструктор тренингов не вызывал ужас и боль. Непонятные настройки, странные блоки, ужасные классы и вложенности которые выносят мозг. А так хочется сделать что-нибудь красивое и стоящее... Знакомо?

На стриме мастер-классе мы укротим этот редактор так, что вы навсегда перестанете его бояться, и будете делать свои собственные блоки со своим дизайном и наводить красоту. Конструктор тренингов, иначе говоря "старый редактор" используется не только в тренингах, но ещё и на страницах Оплаты заказа, Регистрации/Логина в школе, странице обратной связи, странице успешной оплаты и это далеко не весь список!

Что конкретно будет на стриме? Рассказываю:
— Сделаем полнейший разбор "старого редактора" Геткурса
— Расскажу вам неочевидные моменты и лайфхаки работы с сеткой и блоками так, что вы с легкостью сможете построить даже самую сложную структуру страницы
— Поделюсь с вами секретными приёмами лёгкой стилизации таких структур
— Поверстаем красоту
— Отвечу на все интересующие вас вопросы
— Как и всегда пообщаемся с вами в неформальной и весёлой обстановке

➡️

Принять участие и посмотреть программу стрима

Важные моменты:
❕ Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.
❕ Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.
❕ Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.

Please open Telegram to view this post

VIEW IN TELEGRAM

1.6K views13:30

Каморка Геткурсовода 💻 | Канал Максима Елисеева

Давно ли вы пользовались блоком "Плитки картинок"?

🤔

Это достаточно устаревший блок с хорошим превьювером картинок, но выглядит он совершенно несовременно, и редко его используют на лендингах для презентации своих проектов. Его большой недостаток в том, что он не сохраняет свою колоночность, а переносит картинку за картинкой на следующую строчку. Так же если рассматривать этот блок при сжатии дальше, он достаточно странно принимает форму двух колонок с огромными отступами слева и справа, и очень рано приобретает свой одноколоночный вид аж на 640 и ниже пикселей.

Я пошаманил с этим блоком, и придал ему новую жизнь (скриншот №2, №3). Так же я добавил поверх немного своих стилизаций, но самое главное я сделал ему вменяемый колоночный вид без переносов картинок. То есть до 768 пикселей мы имеем стабильно 3 колонки, до 480 пикселей — 2, и ниже — 1.

Стили в CSS-блоке следующие:

.thumbnails-list {
    columns: 3;
    column-gap: 20px;
}

.thumbnails-list a {
  margin-right: 0;
  width: inherit;
  break-inside: avoid;
}

.thumbnails-list a img {
  max-width: 100%;
  border-radius: 15px;
}

@media (max-width: 768px) {
  .thumbnails-list {
    columns: 2;
  }
}

@media (max-width: 480px) {
  .thumbnails-list {
    columns: 1;
  }
}

Такой редизайн вполне гармонично и теперь уже деликатнее будет смотреться при верстке современных лендингов. Пользуйтесь ✨

P.S.: предварительно блок у меня растянут в настройках на 12 колонок в ширину.

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views08:25