HTML верстка. Креативная шапка сайта с Swiper слайдером на Gulp сборке
HTML SCSS верстка для креативной шапки сайта на Gulp сборке. Swiper слайдер с параллакс эффектом. Мобильная адаптация. Прелоадер. Онлайн урок по HTML верстке. Урок по Gulp сборке: https://youtu.be/D_HW-tvyKKE Готовый код и графика для урока: https://t.me/+9XtDDNBdHAk4Yjhi (пост за 15 Июля 2023) Макет в Figma: https://www.figma.com/file/CSZzjKraySkNCE9J7r7GWN/Travel-X---Swiper-Header Чат верстальщиков ВебКадеми: 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 Что мы сделаем 00:40 Курс по Frontend разработке 01:23 Обзор макета 04:10 Gulp сборка 05:36 Графика 06:19 Разметка для шапки 10:56 Стили для шапки 18:20 Контент для навигации 22:55 Стили для навигации 29:04 Hover эффект лдя ссылок 31:57 Позиционирование блоков внутри шапки 38:46 Соц сети 41:48 Ссылка SEE MORE 48:40 Контролы для слайдера 01:00:40 Отдельный файл для header__content 01:02:58 Верстка слайда 01:08:19 Стили для слайда 01:17:49 Заголовок слайда 01:27:40 Блок locations 01:37:22 Несколько блоков location 01:40:39 Подключение Swiper слайдера 01:48:24 Настройка Swiper слайдера 01:54:51 Стили для scrollbar элемента swiper 02:00:30 Параллакс эффекты в Swiper слайдере 02:04:20 Разные слайды 02:09:47 Текст с градиентом 02:16:52 Мобильная адаптация 02:27:05 Мобильная навигация 02:42:24 Прелоадер 02:51:16 Дополнительные секции 02:52:30 Правка багов. Пути к изображениям 02:55:22 Правка багов. Текст с градиентом 03:10:15 Финал #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #gulp #уроки #бесплатно #курс #rutube #Rutube #RUTUBE #рутуб #Рутуб #РУТУБ #ЮрийКлючевский
HTML SCSS верстка для креативной шапки сайта на Gulp сборке. Swiper слайдер с параллакс эффектом. Мобильная адаптация. Прелоадер. Онлайн урок по HTML верстке. Урок по Gulp сборке: https://youtu.be/D_HW-tvyKKE Готовый код и графика для урока: https://t.me/+9XtDDNBdHAk4Yjhi (пост за 15 Июля 2023) Макет в Figma: https://www.figma.com/file/CSZzjKraySkNCE9J7r7GWN/Travel-X---Swiper-Header Чат верстальщиков ВебКадеми: 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 Что мы сделаем 00:40 Курс по Frontend разработке 01:23 Обзор макета 04:10 Gulp сборка 05:36 Графика 06:19 Разметка для шапки 10:56 Стили для шапки 18:20 Контент для навигации 22:55 Стили для навигации 29:04 Hover эффект лдя ссылок 31:57 Позиционирование блоков внутри шапки 38:46 Соц сети 41:48 Ссылка SEE MORE 48:40 Контролы для слайдера 01:00:40 Отдельный файл для header__content 01:02:58 Верстка слайда 01:08:19 Стили для слайда 01:17:49 Заголовок слайда 01:27:40 Блок locations 01:37:22 Несколько блоков location 01:40:39 Подключение Swiper слайдера 01:48:24 Настройка Swiper слайдера 01:54:51 Стили для scrollbar элемента swiper 02:00:30 Параллакс эффекты в Swiper слайдере 02:04:20 Разные слайды 02:09:47 Текст с градиентом 02:16:52 Мобильная адаптация 02:27:05 Мобильная навигация 02:42:24 Прелоадер 02:51:16 Дополнительные секции 02:52:30 Правка багов. Пути к изображениям 02:55:22 Правка багов. Текст с градиентом 03:10:15 Финал #HTML #CSS #верстка #WebCademy #ВебКадеми #HTML5 #CSS3 #html #css #html5 #css3 #javascript #js #gulp #уроки #бесплатно #курс #rutube #Rutube #RUTUBE #рутуб #Рутуб #РУТУБ #ЮрийКлючевский