geometriyasten

🏗️ Сайт штукатурных работ

Современный одностраничный сайт для компании, специализирующейся на штукатурных работах. Полностью адаптивный дизайн с Bootstrap 5 и интерактивными элементами.

🚀 Особенности

Адаптивный дизайн - корректно отображается на всех устройствах
Интерактивная галерея - модальные окна с каруселью изображений
Активное меню - автоматическое выделение текущего раздела при скролле
Форма обратной связи - модальное окно для заявок
Плавная анимация - современные переходы и эффекты
SEO-оптимизация - семантическая разметка и мета-теги

📱 Технологии

HTML5 - семантическая разметка
CSS3 - современные стили и анимации
Bootstrap 5 - адаптивная сетка и компоненты
JavaScript - интерактивность и DOM-манипуляции
jQuery - упрощение работы с DOM

Основные разделы:

Главная
Примеры наших работ
Механизированная или ручная штукатурка
Стоимость штукатурки стен
Стоимость дополнительных услуг
О нас
Наши преимущества
Как заказать
Требования к помещению
Частые вопросы
Контакты

Интерактивные элементы:

✨ Карусели изображений в галерее
🖼️ Модальные окна для просмотра фото
📝 Форма обратного звонка
📱 Адаптивное мобильное меню
🎭 Маски ввода для телефонов

🛠️ Установка и запуск

Клонируйте репозиторий:

git clone https://github.com/site100ru/geometriyasten
cd geometriyasten

Откройте файл в браузере:

# Просто откройте index.html в любом браузере
open index.html

📁 Структура файлов

project/
├── index.html              # Главная страница
├── css/
│   ├── bootstrap.min.css    # Bootstrap стили
│   ├── theme.css           # Основные стили темы
│   └── font.css            # Шрифты
├── js/
│   ├── bootstrap.bundle.min.js
│   ├── jquery-1.5.1.min.js
│   ├── menu-scroll.js      # Скрипт активного меню
│   ├── inputmask.min.js    # Маски ввода
│   └── telMask.js          # Маска телефона
├── img/
│   ├── ico/                # Иконки
│   ├── single-product-img/ # Изображения галереи
│   └── ...                 # Другие изображения
└── README.md

🎨 Кастомизация

Цвета

Основные цвета определены в css/theme.css:

:root {
	--primary-color: #your-color;
	--secondary-color: #your-color;
}

Шрифты

Подключите нужные шрифты в css/font.css.

📊 Производительность

Оптимизированные изображения - WebP где возможно
Минифицированные CSS/JS - сжатые файлы
Lazy loading - отложенная загрузка изображений
Semantic HTML - быстрая индексация поисковиками

🔧 Дополнительные скрипты

Отслеживание активного блока

Автоматически выделяет текущий раздел в меню при скролле:

// Простой скрипт в js/menu-scroll.js
window.addEventListener('scroll', function () {
	// Логика определения активного блока
});

📞 Поддержка

При возникновении вопросов или предложений:

📧 Email: v-liga62@mail.ru
📱 Telegram: @vasilyevr
☎️ Телефон: 8 (920) 951-81-78

📜 Лицензия

Схема архитектуры