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

Мастер класс по HTML CSS/SCSS верстке главной страницы интернет магазина с JavaScript интерактивом, табами и Swiper слайдером, и мобильной адаптацией. Использование новых CSS функций clamp, свойства aspect-ration, CSS переменными и retina оптимизацией графики в HTML и CSS.

Макет: https://www.figma.com/file/2AS6R8XC1GPENt5LxwoRLJ
Готовый код в ТГ канале. Пост за 26.11.2023: https://t.me/+9XtDDNBdHAk4Yjhi
Чат верстальщиков: https://t.me/+QAxmsKj2HyWfEKzz

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews

ТАЙМ КОДЫ

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 Завершение