В этом уроке мы сделаем табы, адаптируем их, если пунктов меню будет больше, настроим наш swiper слайдер так, чтобы он показывал по 4 блюда и напишем javascript-код для переключения слайдеров по табам. Тайм-коды: 🕐00:00 - Начало 🕐01:10 - Пишем HTML для табов 🕐05:05 - Пишем SCSS для табов 🕐17:00 - Стилизуем scrollbar 🕐20:00 - Пишем Javascript для табов 🕐25:00 - Пишем HTML слайдеров 🕐34:35 - Пишем SCSS слайдеров 🕐38:40 - Пишем Javascript переключения табов и слайдеров 🕐46:40 - Стилизуем блоки с блюдами 🕐54:20 - Настраиваем слайдер ➡️Ссылка на макет:
➡️Первый выпуск:
➡️Второй выпуск:
➡️Третий выпуск:
➡️Четвертый выпуск:
➡️Пятый выпуск:
➡️Шестой выпуск:
➡️Плейлист по верстке:
➡️Github-репозиторий:
Подписывайтесь на Telegram канал: 🔷Telegram-канал:
Подписывайтесь на Instagram канала: 🔷Instagram канала: / lectorweb ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 👉Задать вопрос:
👉Разбор ваших работ:
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 🤟Вступайте в чат и общайтесь с единомышленниками:
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 👍Получить доступ к различным плюшкам (доступы к макетам, скриптам, готовой верстке) + поддержка канала: ➡️ / lectorweb ➡️
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 👍Если вы хотите просто поощрить мои старания любой суммой, я буду вам предельно благодарен. Мои реквизиты: 💲ЮMoney(Яндекс Деньги): 41001858794127 💲Приват24: 5363 5420 1714 8058 💲Monobank: 4441 1144 2283 2244 ===================================================================== Всем привет! Меня зовут Алексей Перепелка. Я занимаюсь разработкой сайтов c 2008 года. На этом канале я буду делиться всеми своими знаниями от верстки до создания сайта под ключ. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Не забудь подписаться ниже: 👇👇👇👇👇👇👇👇👇👇👇👇👇 🔷Мой сайт:
🔷Я в VK:
https://vk.com/lector13 🔷Instagram канала: / lectorweb 🔷Мой Instagram: / perepelka.alexey 🔷Чат с коллегами:
🔷Telegram-канал:
🔷Личный Telegram:
🔷Профиль в Linkedin: / lector1982 🔷Я в Facebook: / lector1982 #swiper #tabs #табы #верстка #LectorWeb #css #scss #версткалендинга #урокиверстки #landing #swiperslider #slider #javascript #landingpage #css3
