Map mark button

Проект предстовляет из себя промо-блок с фоновым изображением и закреплённых на нём кнопок.

Оглавление

• Обзор проекта
  • Задачи проекта
  • Функциональность проекта
  • Screenshot
  • Директории проекта
  • Запуск проекта
  • Ссылки
• Ход выполнения проекта
  • Используемые технологии
• Автор

Обзор проекта

Задачи проекта

Создать блок сайта с фоновым изображением и рассоложенными поверх него кнопками которые должны сохранять свою позицию при изменении ширины экрана в диапазоне от 1920px до 1280px.

Функциональность проекта

Функционально проект представляет из себя блок лендинга.

Функциональность:

• При клике на кнопку можно посмотреть информацию о постройке на изображении. При повторном клике на кнопку, или при клике на другую кнопку, либо на любое другое место на изображении, открытая информация скрывается. При этом на экране используется единственный обработчик события.
• Кнопки сохраняют свою позицию на изображении при изменении ширины экрана в диапазоне от 1920px до 1280px

Screenshot

Директории проекта

• src/blocks — директория с CSS файлами
• src/images — директория с файлами изображений
• src/pages — директория с файлами страниц
• src/utils — директория со вспомогательными JS файлами

Запуск проекта

• npm run build — запуск проекта в режиме продакшн, с формированием файлов подготовленных к деплою в директории /dist
• npm run dev — запуск проекта в режиме разработки

Ссылки

• Ссылка на демо-страницу проекта

Ход выполнения проекта

Используемые технологии

• HTML
• CSS
• JS
• Webpack
• БЭМ, включая использование схемы файловой структуры Nested
• Семантическая вёрстка

Автор

Данила Легкобытов

• e-mail: legkobytov-danila@yandex.ru
• Telegram: @danila_legkobytov
• LinkedIn: in/danila-legkobytov