HTML CSS верстка сайта главной страницы интернет-магазина Panto. Swiper, retina, CSS clamp, табы

Мастер класс по HTML CSS/SCSS верстке главной страницы интернет магазина с JavaScript интерактивом, табами и Swiper слайдером, и мобильной адаптацией. Использование новых CSS функций clamp, свойства aspect-ration, CSS переменными и retina оптимизацией графики в HTML и CSS. Макет: Готовый код в ТГ канале. Пост за : 9XtDDNBdHAk4Yjhi Чат верстальщиков: QAxmsKj2HyWfEKzz :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс “Создай свой первый сайт на HTML5 и CSS3“ От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Курс по созданию и верстке сайтов: Обучение с наставником, 3 месяца, результат, гарантия. Научим создавать веб-сайты и зарабатывать на этом. 💻 Курс “Frontend разработчик. JavaScript React“: Обучение с наставником, 3 месяца, результат, гарантия. 💻 Курс “Разработка сайтов на PHP MySQL“: Создание сайтов с системой управления. Присоединиться к курсу можно прямо сейчас. 🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт школы ВебКадеми: 💈 Вступайте в группу Вконтакте: 💈 Подписывайтесь на Telegram: ТАЙМ КОДЫ 00:00 Введение 01:53 Экспорт графики 09:05 Стартовые проект. CSS переменные 20:09 Шрифты 42:47 Шапка, навигация. HTML разметка 52:28 CSS cтилизация шапки 59:56 Медиазапрос для retina графики в CSS 1:02:12 SCSS миксин для retina медиазапроса 1:04:46 Container 1:06:13 CSS стили для навигации 1:18:04 Иконка с корзиной 1:23:23 Контент в шапку. HTML разметка 1:27:48 CSS стили для контента в шапке 1:35:26 CSS стили для поиска 1:43:09 Интерактивные элементы. Позиционирование первой точки 1:55:17 Интерактивные элементы. Позиционирование остальных 2:01:00 Анимация точек 2:08:04 Фикс позиционирования точек 2:14:52 Подсказки. HTML размекта 2:22:02 CSS стили для подсказок 2:30:44 Скрываем нативные радиокнопки 2:35:14 Иконка для радиокнопки 2:38:42 Позиционирование подсказки 2:41:00 JS. Интерактив для подсказок 2:59:39 Объявление. Курс по JS 3:00:43 Секция c текстом. Разметка и стили 3:11:38 Ссылка more info. CSS стили 3:17:00 Секция с Товарами. Структура 3:21:18 Блок для ссылки read more 3:25:12 Табы. HTML верстка и CSS стили 3:35:03 Карточка товара. Пересохранение графики 3:39:25 Карточка. HTML разметка 3:45:40 Карточка. CSS стили для картинки 3:48:31 Карточка. CSS стили для контента 4:07:04 Карточка. Ссылка на всю карточку 4:10:30 Контент для разных карточек 4:17:05 Верстка кнопок для слайдера 4:22:23 Swiper слайдер. Разметка и подключение 4:34:35 Swiper слайдер. Точки перелома 4:36:15 Подвал. Структура 4:47:29 Подвал. Контент 5:04:59 Фикс. Ширина инпута в поиске 5:06:49 Табы. Подготовка разметки 5:14:28 Табы. JS cкрипт переключения 5:30:31 Табы. Update для слайдера 5:35:55 Табы. Кнопка All для всех товаров 5:37:25 Навигация в шапке. Стрелка вниз 5:40:54 Навигация в шапке. Выпадающее меню 5:56:27 Мобильная адаптация. Навигация в шапке 6:05:08 Верстка мобильной навигации 6:10:57 CSS стили для мобильной навигации 6:28:28 JS код для мобильной навигации 6:33:48 Фикс с position relative для шапки и позиционированием точек 6:39:56 Адаптация контента в шапке 7:04:53 Мобильная адаптация. Секция с текстом 7:18:03 Мобилка. Секция с товарами и слайдером 7:21:45 Мобилка. Слайдер 7:32:55 Мобилка. Подвал 7:42:51 Проверка всего макета на адаптивность 7:45:43 Докрутка шапки на мобилках 7:49:28 Завершение #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js