Demo.
- Отправка данных пользователя из модального окна, вызываемого кликом по 'Let’s Talk' в одноименном разделе
- Валидация формы: Кнопка Submit разблокируется после проверки на пустые поля и валидации полей.
- Поле Full Name - удаляются множественные пробелы и запрет ввода имени короче 3 символов
- Поле E-mail - блокируется ввод пробелов и кириллицы, валидация по маске
- Поле Message - удаляются множественные знаки препинания
- Уведомление пользователя при успешной/ошибочной отправке данных на сервер
- Закрытие popup кликом на "крестик" или мимо формы (оверлей)
- Автозакрытие popup-уведомления через 5 секунд
- Очистка popup формы после успешной отправки
- Плавный скролл при навигации по странице - выпадающее меню в header и навигационные ссылки в footer (в примере ссылки на соцсети заменены "якорями" в начало страницы).
- Отключение скролла при открытии модального окна
- Формирование навигационных ссылок в header/footer и блока Our Clients с помощью скриптов.
- Настройки навигации и api-ссылки отправки данных юзера в файле
env.json
; - Модульная структура скриптов /src;
- Сборка webpack;
- Отправка данных на сервер rest-api;
- Адаптивная верска, без учета IE;
- SVG изображения и SVG-спрайт иконок;
- Использование SCSS для стилизации;
- Адаптивность с помощью flex/grid и медиа-запросов;
- Использование CSS-функции clamp() для плавного иземения отступов и шрифтов заголовков;
- CSS анимация;
- Деплой демо на Google Firebase.
- Скопировать содержимое репозитория в рабочую папку
- В терминале выполнить команду
npm install
- Для использования ES12 синтаксиса, после установки 'node_modules' выполнить в консоли команду
./node_modules/.bin/babel src --out-dir lib
- Запуск режима разработчика командой
npm run dev
- Открыть
https://localhost:3000
для просмотра в браузере - Для сборки приложения команда
npm run build
. Готовый проект будет в папкеbuild
рабочей директории