Три в ряд 🕹
Поделюсь с вами одним лайфхаком, который упрощает жизнь при популярном запросе о том, что нужно расположить 3 видео в ряд и чтобы они были адаптивны.
Многие начнут вспоминать, что можно JS кодом вставлять блоки куда угодно... Да, можно, но это безумно неудобно и сложно. Есть способ проще!
Мы просто возьмём и обманем блочную систему Геткурса! Просто поставим эти блоки с видео в один ряд. При этом мы не трогаем их структуру, вследствие чего они не будут терять свою адаптивность ;)
Я поставлю 3 блока с видео один за другим, растяну каждому их ширину на все 12 колонок, и добавлю каждому блоку класс
После этого я в CSS-блоке вверху страницы пропишу единственное правило для этого класса:
Соответственно для 4 видео, то это 25% ширины, но всегда призываю делать погрешность в 1% от непредвиденных ситуаций с адаптацией 😁
#лайфхак
Поделюсь с вами одним лайфхаком, который упрощает жизнь при популярном запросе о том, что нужно расположить 3 видео в ряд и чтобы они были адаптивны.
Многие начнут вспоминать, что можно JS кодом вставлять блоки куда угодно... Да, можно, но это безумно неудобно и сложно. Есть способ проще!
Мы просто возьмём и обманем блочную систему Геткурса! Просто поставим эти блоки с видео в один ряд. При этом мы не трогаем их структуру, вследствие чего они не будут терять свою адаптивность ;)
Я поставлю 3 блока с видео один за другим, растяну каждому их ширину на все 12 колонок, и добавлю каждому блоку класс
video-block
(смотрите скриншоты)После этого я в CSS-блоке вверху страницы пропишу единственное правило для этого класса:
.video-block {Таким образом, мои блоки с видео будут делить между собой по 33% расстояния в одной строке.
flex: 1 1 33%;
}
Соответственно для 4 видео, то это 25% ширины, но всегда призываю делать погрешность в 1% от непредвиденных ситуаций с адаптацией 😁
#лайфхак
Друзья, всем привет 😉
У нас там происходит нечто...
А именно Чёрная Пятница!
Не простая, а совместная с партнёрскими проектами 👍
🔥 Школа Магии Геткурса
🔥 «Тонкая настройка» Оли Скороходовой
🔥 Мой клуб Train IT
🔥 КПД клуб Оли Скороходовой и Петра Петипака
🔥 PRO.Design School Веры Кулешовой
Общая распродажа тут
👉 https://gcwithme.ru/bf21 👈
Распродажа длится до 28 ноября, 23:59
Это ещё одна прекрасная возможность приобрести с большой скидкой доступ в клуб Train IT, где я учу понимать и писать CSS/HTML/JS, а так же делюсь секретами и фишками на Тильде, и собственными авторскими решениями 😉
У нас там происходит нечто...
А именно Чёрная Пятница!
Не простая, а совместная с партнёрскими проектами 👍
🔥 Школа Магии Геткурса
🔥 «Тонкая настройка» Оли Скороходовой
🔥 Мой клуб Train IT
🔥 КПД клуб Оли Скороходовой и Петра Петипака
🔥 PRO.Design School Веры Кулешовой
Общая распродажа тут
👉 https://gcwithme.ru/bf21 👈
Распродажа длится до 28 ноября, 23:59
Это ещё одна прекрасная возможность приобрести с большой скидкой доступ в клуб Train IT, где я учу понимать и писать CSS/HTML/JS, а так же делюсь секретами и фишками на Тильде, и собственными авторскими решениями 😉
Каморка Геткурсовода 💻 | Канал Максима Елисеева pinned «Друзья, всем привет 😉 У нас там происходит нечто... А именно Чёрная Пятница! Не простая, а совместная с партнёрскими проектами 👍 🔥 Школа Магии Геткурса 🔥 «Тонкая настройка» Оли Скороходовой 🔥 Мой клуб Train IT 🔥 КПД клуб Оли Скороходовой и Петра Петипака…»
Друзья, привет всем 😉
Хотел поделиться с вами двумя новостями:
Первая.
Сегодня последний день совместной распродажи. Закончится она сегодня (28 ноября) в 23:59, и ровно в 0:00 страницы распродажи закроются и нельзя будет оплатить созданные заказы.
Поэтому, кто хотел, но никак не мог решиться, у вас есть последняя возможность:
👉 https://gcwithme.ru/bf21 👈
Вторая.
Может быть для кого-то это всё ещё секрет, но мы проводим с 29 ноября очередную Неделю Магии 6 в Школее Магии Геткурса!
В этот раз мы сделали так, что у вас есть шанс побороться за призовой денежный фонд, который будет разделён между прошедшими Неделю Магии 6 участниками. Такое предложение доступно тем, кто выберет тариф "Экстрим".
Запись на Неделю Магии 6 👉 https://gcwithme.ru/magicweek6
P.S. По секрету, первый день Недели Магии 6 открываю Я 😁 И подготовил для вас очень крутой урок по вёрстке, чтобы вы смотрели и кайфовали от того, на сколько на самом деле круто верстать и видеть все изменения на странице 😊 А так же почерпнули для себя огромнейшие знания и фишки в вёрстке 👍
Хотел поделиться с вами двумя новостями:
Первая.
Сегодня последний день совместной распродажи. Закончится она сегодня (28 ноября) в 23:59, и ровно в 0:00 страницы распродажи закроются и нельзя будет оплатить созданные заказы.
Поэтому, кто хотел, но никак не мог решиться, у вас есть последняя возможность:
👉 https://gcwithme.ru/bf21 👈
Вторая.
Может быть для кого-то это всё ещё секрет, но мы проводим с 29 ноября очередную Неделю Магии 6 в Школее Магии Геткурса!
В этот раз мы сделали так, что у вас есть шанс побороться за призовой денежный фонд, который будет разделён между прошедшими Неделю Магии 6 участниками. Такое предложение доступно тем, кто выберет тариф "Экстрим".
Запись на Неделю Магии 6 👉 https://gcwithme.ru/magicweek6
P.S. По секрету, первый день Недели Магии 6 открываю Я 😁 И подготовил для вас очень крутой урок по вёрстке, чтобы вы смотрели и кайфовали от того, на сколько на самом деле круто верстать и видеть все изменения на странице 😊 А так же почерпнули для себя огромнейшие знания и фишки в вёрстке 👍
Привет, друзья 😉
Вчера (29 ноября 2021 года) был мой первый открывающий день в Неделю Магии 6. Хотелось бы собрать немного фидбеков о своём дне проведении урока. Он получился довольно длинным, на 45 минут. Но в него я вложил душу и дал вам максимально плотную и полезную информацию по прокачке ваших навыков в вёрстке. 😊
Всё буквально снималось одним дублем. Всего около 2х раз я останавливал видео, чтобы хотя бы дать отдохнуть своему голосу на 1 минуту 😁 Честно признаться, я очень боялся, что подобный формат не зайдет)
Полезно ли вам было окунуться в такую наглядную вёрстку с нуля? Много ли вы для себя узнали? Делитесь впечатлениями 😊
Вчера (29 ноября 2021 года) был мой первый открывающий день в Неделю Магии 6. Хотелось бы собрать немного фидбеков о своём дне проведении урока. Он получился довольно длинным, на 45 минут. Но в него я вложил душу и дал вам максимально плотную и полезную информацию по прокачке ваших навыков в вёрстке. 😊
Всё буквально снималось одним дублем. Всего около 2х раз я останавливал видео, чтобы хотя бы дать отдохнуть своему голосу на 1 минуту 😁 Честно признаться, я очень боялся, что подобный формат не зайдет)
Полезно ли вам было окунуться в такую наглядную вёрстку с нуля? Много ли вы для себя узнали? Делитесь впечатлениями 😊
Показать всё, что скрыто 🙄
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
1. Сам класс
2. Контейнер контента
#лайфхак
Довольно частый запрос со стороны дизайна о том, что нужно показывать картинку за пределами блока (скриншот №1). И чаще всего этот блок является блоком "Карточек", а конкретно "Картинка - подзаголовок - заголовок - текст".
Но, скруглив картинку, поместив её по центру и передвинув по координатам вверх, мы можем обнаружить, что наша картинка будет урезанной (скриншот №2).
Это происходит, потому что есть ограничение свойства
overflow
. И его нужно перевести в состояние visible
сразу в нескольких местах. И сейчас я расскажу в каких:1. Сам класс
.image-wrapper
, в котором находится наша картинка с классом .image
, мешает нам добиться нужного результата. Ставим в классе .image-wrapper
свойство overflow: visible;
В итоге мы отключим первое урезание (скриншот №3).2. Контейнер контента
.lt-tsr-content
тоже урезает нам выпадение контента за пределы себя, поэтому тут тоже прописываем overflow: visible;
И теперь выпадению картинки за пределы блока ничто не будет мешать ;)#лайфхак
Показ сторонних страниц на Геткурсе? Легко ✅
Многие знают: чтобы показать другую страницу в пределах аккаунта, нужно поставить блок из раздела "Вставка" => "Другая страница".
Но что делать, если, например, нам нужно показать какой-либо тест вне аккаунта, или какую-либо информацию совершенно с другого домена? 🧐
На помощь придёт HTML-блок с довольно простой разметкой внутри. На примере, у себя на проекте я вывел главную страницу Геткурса. Сделано это так, в HTML-блок нужно вставить такую конструкцию:
Данное решение будет полезно тем, кто делает какие-либо квизы или интерактивные материалы на сторонних сервисах, но не хотел бы уводить людей со своего проекта 😉
#полезная_фишка
Многие знают: чтобы показать другую страницу в пределах аккаунта, нужно поставить блок из раздела "Вставка" => "Другая страница".
Но что делать, если, например, нам нужно показать какой-либо тест вне аккаунта, или какую-либо информацию совершенно с другого домена? 🧐
На помощь придёт HTML-блок с довольно простой разметкой внутри. На примере, у себя на проекте я вывел главную страницу Геткурса. Сделано это так, в HTML-блок нужно вставить такую конструкцию:
<iframe style="height: 100vh; width: 100%;" src="https://getcourse.ru">
Текст в случае, если айфрейм не прогрузится.
</iframe>
В атрибут src
вставляется ссылка той страницы, которую мы будем тянуть к себе на проект :) В стилях iframe
можете легко подредактировать размер окна, который вам удобен и нужен.Данное решение будет полезно тем, кто делает какие-либо квизы или интерактивные материалы на сторонних сервисах, но не хотел бы уводить людей со своего проекта 😉
#полезная_фишка
Двигаем недвижимое 😜
В Геткурсе все элементы довольно гибко настраивают своё местоположение в блоке. Но существуют такие блоки, где поменять элементы местами не предоставляется возможным. Один из таких блоков – это блок "Картинка - подзаголовок - заголовок - текст", иначе говоря "Карточки".
Поделюсь с вами полезным лайфхаком, если вам по дизайну нужно изменить порядок элементов в них:
1) Для начала включим флексбокс у контента и приведём в исходный вид элементы:
Всего в контенте этой карточки несколько классов:
На скриншоте к посту я выдвинул заголовок выше картинки, вместе с подзаголовком. Сделано это так:
#лайфхак
В Геткурсе все элементы довольно гибко настраивают своё местоположение в блоке. Но существуют такие блоки, где поменять элементы местами не предоставляется возможным. Один из таких блоков – это блок "Картинка - подзаголовок - заголовок - текст", иначе говоря "Карточки".
Поделюсь с вами полезным лайфхаком, если вам по дизайну нужно изменить порядок элементов в них:
1) Для начала включим флексбокс у контента и приведём в исходный вид элементы:
.lt-tsr-content {
display: flex;
flex-direction: column;
}
2) Теперь мы можем выстраивать порядок элементов как нам нужно с помощью свойства order
. Чем меньше значение свойства order
, тем главнее элемент. Проще всего это сравнить с последовательностью чисел: 1 — первый, 2 — второй, 3 — третий и т.д.Всего в контенте этой карточки несколько классов:
image-card
, subheader
, header
, description
и button
(если был выбран такой же блок, но с кнопкой).На скриншоте к посту я выдвинул заголовок выше картинки, вместе с подзаголовком. Сделано это так:
.header {
order: 1;
}
.image-card {
order: 2;
}
.description {
order: 3;
}
То есть я просто выстроил элементы в таком порядке, как мне нужно. Сабхедер встал выше заголовка, потому что если не назначать order
, он будет считаться в приоритете по порядку.#лайфхак
Друзья, вот и подходит к концу этот непростой 2021 год. Во всю несётся к нам 2022! 🎄
Год был действительно не простым, но и много всего хорошего случилось в нём. Например, был основан данный канал, который набрал уже больше 1500+ подписчиков 😉
Я хотел сделать полезный канал, который давал бы техническим специалистам новые знания и нестандартные преображения и решения. Людям, которым интересно делать не просто стандартные настройки Геткурса (настройки аккаунта, дефолтные блоки, и т.д.), а сделать всё по-своему и красиво 👍
И вот, получился такой канал, с вашей помощью 😉
Мне стали очень часто писать в личные сообщения по поводу моих уроков в Клубе Магии Геткурса, в частности то, как я вообще всё это придумываю, делаю. Как я вообще понимаю весь тот код, который я пишу, и где этому научиться? То есть сформировалась проблема, что людям интересно и самим творить подобные вещи. И это реально вдохновляюще и очень круто!
Поэтому стал мыслить шире, и подумал, что я могу поделиться всеми знаниями, которыми владею я сам. Таким образом, в этом же 2021 году в августе, я основал клуб Train-IT, где с радостью делюсь своими знаниями с вами в своей манере обучения, рассказывая сложные вещи простыми словами 😉 Клуб ещё достаточно молодой, но уже насчитывает аж 44 резидента!
Уроки продолжат выходить в Клубе после новогодних праздников, сейчас нужно перевести дух и немного отдохнуть. А после новогодних праздников вас ждёт много чего интересного)
Подводя итоги:
Для меня год вышел продуктивным. Я вырос над самим собой. И стараюсь делиться своими знаниями, чтобы вы росли вместе со мной 😉 Появился прекрасный канал, который ценят технические специалисты. Появился мой собственный клуб, который потихоньку растёт, где люди углублённо изучают код и уже применяют эти знания на многих платформах, не только на Геткурсе 😊
Я очень рад, что мы сформировали такое крутое сообщество. И я хочу пожелать вам в наступающем Новом Году благополучия, финансовых успехов. И ещё несколько главных вещей: здоровья и роста над самим собой! Не бойтесь расти, не бойтесь пробивать стены, которые кажутся вам непреодолимыми. Я сломал такую стену и не собираюсь на этом останавливаться 😉
Я желаю вам счастливого 2022 года! Ура! 🥳
Год был действительно не простым, но и много всего хорошего случилось в нём. Например, был основан данный канал, который набрал уже больше 1500+ подписчиков 😉
Я хотел сделать полезный канал, который давал бы техническим специалистам новые знания и нестандартные преображения и решения. Людям, которым интересно делать не просто стандартные настройки Геткурса (настройки аккаунта, дефолтные блоки, и т.д.), а сделать всё по-своему и красиво 👍
И вот, получился такой канал, с вашей помощью 😉
Мне стали очень часто писать в личные сообщения по поводу моих уроков в Клубе Магии Геткурса, в частности то, как я вообще всё это придумываю, делаю. Как я вообще понимаю весь тот код, который я пишу, и где этому научиться? То есть сформировалась проблема, что людям интересно и самим творить подобные вещи. И это реально вдохновляюще и очень круто!
Поэтому стал мыслить шире, и подумал, что я могу поделиться всеми знаниями, которыми владею я сам. Таким образом, в этом же 2021 году в августе, я основал клуб Train-IT, где с радостью делюсь своими знаниями с вами в своей манере обучения, рассказывая сложные вещи простыми словами 😉 Клуб ещё достаточно молодой, но уже насчитывает аж 44 резидента!
Уроки продолжат выходить в Клубе после новогодних праздников, сейчас нужно перевести дух и немного отдохнуть. А после новогодних праздников вас ждёт много чего интересного)
Подводя итоги:
Для меня год вышел продуктивным. Я вырос над самим собой. И стараюсь делиться своими знаниями, чтобы вы росли вместе со мной 😉 Появился прекрасный канал, который ценят технические специалисты. Появился мой собственный клуб, который потихоньку растёт, где люди углублённо изучают код и уже применяют эти знания на многих платформах, не только на Геткурсе 😊
Я очень рад, что мы сформировали такое крутое сообщество. И я хочу пожелать вам в наступающем Новом Году благополучия, финансовых успехов. И ещё несколько главных вещей: здоровья и роста над самим собой! Не бойтесь расти, не бойтесь пробивать стены, которые кажутся вам непреодолимыми. Я сломал такую стену и не собираюсь на этом останавливаться 😉
Я желаю вам счастливого 2022 года! Ура! 🥳
Друзья, всем привет 👋
Надеюсь, первая рабочая неделя после праздников у вас проходит продуктивно и хорошо 👌
В начале создания своего канала я говорил о том, что в будущем планирую даже проводить стримы. Похоже, такой момент настал)
Я хочу провести эксклюзивный стрим в рамках своего клуба Train IT, где я буду собирать один из выбранных вами макетов лендинга на платформе Геткурс. На стриме я буду давать огромное количество знаний, покажу вам фишки, которые я использую при вёрстке, много секретов, как делать сложные элементы и общаться, конечно же, с вами в открытом формате😉
Поскольку стрим будет давать просто целый клад знаний, я планирую сделать участие в нём за символическую цену (500-990 р.) и данный эксклюзивный стрим останется у вас в кабинете моего клуба с доступом навсегда🔥😎
Вы сможете пересматривать и применять те крутые фишки и знания кода, которые я вам покажу 🥳
Трансляцию планирую провести к концу января. Придёте ко мне на стрим? 😇 Пишите в комментарии)
Надеюсь, первая рабочая неделя после праздников у вас проходит продуктивно и хорошо 👌
В начале создания своего канала я говорил о том, что в будущем планирую даже проводить стримы. Похоже, такой момент настал)
Я хочу провести эксклюзивный стрим в рамках своего клуба Train IT, где я буду собирать один из выбранных вами макетов лендинга на платформе Геткурс. На стриме я буду давать огромное количество знаний, покажу вам фишки, которые я использую при вёрстке, много секретов, как делать сложные элементы и общаться, конечно же, с вами в открытом формате😉
Поскольку стрим будет давать просто целый клад знаний, я планирую сделать участие в нём за символическую цену (500-990 р.) и данный эксклюзивный стрим останется у вас в кабинете моего клуба с доступом навсегда🔥😎
Вы сможете пересматривать и применять те крутые фишки и знания кода, которые я вам покажу 🥳
Трансляцию планирую провести к концу января. Придёте ко мне на стрим? 😇 Пишите в комментарии)
Всем отличных выходных 😉
А кому-то ещё и продуктивного трудового дня. Я с вами 😁
Почти доделал лендинг с возможностью записи на мой стрим, выложу сюда на канал в понедельник)
Стрим планирую провести 26 января (среда), а вот со временем проведения пока не определился, делать днём или вечером. Поэтому опрос сделаю ниже этого поста 😌
Хочу напомнить, что даже если у вас не получается прийти на стрим и посмотреть его вживую, покупая участие на стриме, после его проведения запись останется у вас в личном кабинете клуба Train IT навсегда! 🥳
А кому-то ещё и продуктивного трудового дня. Я с вами 😁
Почти доделал лендинг с возможностью записи на мой стрим, выложу сюда на канал в понедельник)
Стрим планирую провести 26 января (среда), а вот со временем проведения пока не определился, делать днём или вечером. Поэтому опрос сделаю ниже этого поста 😌
Хочу напомнить, что даже если у вас не получается прийти на стрим и посмотреть его вживую, покупая участие на стриме, после его проведения запись останется у вас в личном кабинете клуба Train IT навсегда! 🥳
Всем привет, друзья! И бодрых сил вам на всю неделю 😉
Вот и пошла жара! Я доделал лендинг своего стрима. Записаться на стрим можно здесь:
💥👉 https://train-it.ru/frying-layouts 👈💥
В данный момент действует льготная цена всю неделю! В понедельник 24 января цена повысится!
"Прожарка 🔥 макетов" — это первый в своём цикле стрим, для которого вы выбираете один из макетов, который в последствии мы с вами будем верстать в прямом эфире 😁
По итогам голосования с небольшим перевесом проголосовали за старт стрима 26 января в 16:00. Хочу напомнить ещё раз: даже если у вас не получается поучаствовать на стриме в живую, покупая участие на стриме, запись останется с вами навсегда в личном кабинете клуба Train IT 🔥
Опрос по времени закрываю. Но открываю новый 😉 А именно теперь вам предстоит выбрать макет, который мы будем "прожаривать" на стриме😁
Я покопался в различных источниках и нашел парочку более-менее привлекательных макетов, которые я предоставляю вам на выбор. Сами макеты я скину файлами изображений под этим постом и, соответственно, голосование за макет, который было бы интересно сверстать в эфире 😉
Голосование по выбору макета продлится до пятницы включительно (21 января 23:59).
Вот и пошла жара! Я доделал лендинг своего стрима. Записаться на стрим можно здесь:
💥👉 https://train-it.ru/frying-layouts 👈💥
В данный момент действует льготная цена всю неделю! В понедельник 24 января цена повысится!
"Прожарка 🔥 макетов" — это первый в своём цикле стрим, для которого вы выбираете один из макетов, который в последствии мы с вами будем верстать в прямом эфире 😁
По итогам голосования с небольшим перевесом проголосовали за старт стрима 26 января в 16:00. Хочу напомнить ещё раз: даже если у вас не получается поучаствовать на стриме в живую, покупая участие на стриме, запись останется с вами навсегда в личном кабинете клуба Train IT 🔥
Опрос по времени закрываю. Но открываю новый 😉 А именно теперь вам предстоит выбрать макет, который мы будем "прожаривать" на стриме😁
Я покопался в различных источниках и нашел парочку более-менее привлекательных макетов, которые я предоставляю вам на выбор. Сами макеты я скину файлами изображений под этим постом и, соответственно, голосование за макет, который было бы интересно сверстать в эфире 😉
Голосование по выбору макета продлится до пятницы включительно (21 января 23:59).
Каморка Геткурсовода 💻 | Канал Максима Елисеева pinned «Всем привет, друзья! И бодрых сил вам на всю неделю 😉 Вот и пошла жара! Я доделал лендинг своего стрима. Записаться на стрим можно здесь: 💥👉 https://train-it.ru/frying-layouts 👈💥 В данный момент действует льготная цена всю неделю! В понедельник 24 января…»