Адаптивная верстка на SCSS с JS скриптами. Макет LoftHouse. Карта, lightbox, маска для номера

Адаптивная HTML SCSS верстка сайта из Figma лендинга жилого комплекса LoftHouse.

Верстка по пакету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. JS скрипты для маски номера телефона, скрипт для youtube lightbox видео, скрипт для yandex карты с кастомным пином, тонкой CSS стилизацией и JS настройкой карты.

Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.

Видео урок

Макет

• Макет в Figma

Материалы к уроку

Ссылки

• Плагин LiveSass Compiler для сборки SCSS в VS Code
• Сброс стилей reset.css
• Сниппеты в VS Code
• Набор CSS сниппетов VS Code
• Быстрое копирование CSS классов. Плагин eCSStractor
• Моя настройка VS Code

Мои настройки для Live SASS Compiler

"liveSassCompile.settings.showOutputWindowOn": "None",
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"extensionName": ".css",
		"savePath": "/css/"
	}
],

Сниппет для миксина с медиазапросом

/* Media Tablet */
"mediaTablet": {
	"scope": "css,scss",
	"prefix": "tablet",
	"body": ["@include mediaTablet {", "    ${1}", "}"],
	"description": "mediaTablet"
},

Готовый код с урока

• Скачать готовый код верстка LoftHouse