Адаптивная верстка сайта CSS HTML 2025. Макет BodyShape. Подробный урок. CSS Grid

Адаптивная HTML CSS верстка сайта из Figma лендинга спорт фитнес клуба BodyShape. Макет, материалы и готовый код: https://t.me/+9XtDDNBdHAk4Yjhi
(пост за 13.01.2025) Верстка по пакету из Figma, CSS, переменные, fexbox и css grid. Медиазапросы и адаптивная верстка. Подробно с объяснениями для начинающих. Готовый код к уроку. Материалы ВебКадеми на всех площадках: https://webcademy.ru/taplink/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3" От установки редактора, до публикации в сети. 👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: Мои авторские курсы: 💻 Профессия HTML верстальщик Для начинающих. Курс по созданию и верстке сайтов. 👉 https://webcademy.ru/htmlstart/
💻 Курс "Frontend разработчик. JavaScript + React" Станьте frontend разработчиком за 3 месяца. 👉 https://webcademy.ru/jscourse/
💻 Курс "Разработка сайтов на PHP + MySQL" Сможете создавать сайты с любым функционалом. 👉 https://webcademy.ru/phpcourse/
🏁 Обучение с нуля 💁‍♂️ Обучение с наставником 🎯 Доведение с нуля до результата 🏢 Помощь с трудоустройством 💵 Поможем взять первый заказ на фрилансе 💳 возможна рассрочка 💳 если курс не понравится, вернём деньги в первую неделю :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 💈 Сайт ВебКадеми: https://webcademy.ru/
💈 Группа Вконтакте: https://vk.com/webcademy
💈 Telegram канал: https://t.me/webcademynews
ТАЙМ КОДЫ 00:00 Введение 00:37 Курс по верстке 01:18 Макет 02:24 Сохранение графики 10:42 Шрифты 12:48 Создание проекта 26:26 CSS переменные 29:47 Верстка шапки 40:02 Контейнер, навигация 58:49 Контент в шапке 01:01:46 Мобильная адаптация шапки 01:14:33 Секция "Персональные тренера" 01:24:30 Верстка карточки с тренерами 01:41:24 Сетка с карточками 01:44:06 Адаптация под мобилку 01:54:37 Секция CTA "Режим зверя" 02:00:09 Скошенные края у секции 02:02:49 Верстка контента 02:05:18 Верстка кнопки 02:14:30 Секция "Программы и секции" 02:17:10 Карточка с программой 02:21:49 Сетка для карточек 02:22:20 Адаптация под мобилку 02:30:53 Секция "Написать нам" 02:33:06 Верстка формы 02:35:55 Стили 02:40:19 Стили для формы 02:51:50 Подвал 02:58:42 Фавиконка 03:00:20 Финальные правки 03:03:34 Завершение