STALKMET - Официальный сайт

Современный минималистичный сайт строительной компании на Vanilla JS без фреймворков.

📁 Структура проекта

web/
├── index.html               # Главная страница (разделена на блоки)
├── construction.html        # Страница "Строительство" (детали услуги)
├── design.html              # Страница "Проектирование" (детали услуги)
├── works.html               # Страница "Наши работы" (портфолио проектов)
├── contacts.html            # Страница "Контакты" (форма, карта, сертификаты)
├── css/
│   └── style.css            # Все стили проекта
├── js/
│   └── main.js              # Весь JavaScript проекта
├── images/                  # Папка для изображений (пустая)
├── BLOCKS-TEMPLATES.html    # Шаблоны блоков для копирования
└── README.md                # Этот файл

🎨 Основные разделы сайта

Страницы сайта:

index.html - Главная страница:

1. Navigation - Навигационное меню
2. Hero Section - Главный экран с видео
3. Why Us Section - Почему выбирают нас (6 преимуществ)
4. Services Section - Наши услуги (4 услуги)
5. About Section - О компании
6. Stats Section - Статистика и цифры
7. CTA Section - Призыв к действию
8. Contact Section - Форма обратной связи
9. Footer - Подвал сайта

construction.html - Страница "Строительство":

1. Navigation - Навигационное меню
2. Hero Section - Заголовок услуги
3. About Construction - Подробно о строительстве
4. Our Approach - Наш подход (6 пунктов)
5. How We Work - Как мы работаем (7 этапов)
6. Related Services - Сопутствующие услуги (6 услуг)
7. FAQ - Часто задаваемые вопросы (5 вопросов)
8. CTA Section - Призыв к действию
9. Contact Section - Форма обратной связи
10. Footer - Подвал сайта

design.html - Страница "Проектирование":

1. Navigation - Навигационное меню
2. Hero Section - Заголовок услуги
3. About Design - О проектировании
4. Modern Home Features - Возможности современного дома (6 зон)
5. Design Process - Процесс работы (5 этапов)
6. Benefits - Преимущества работы с архитектором (6 пунктов)
7. Certificates - Наши сертификаты (2 карточки)
8. Clients - Нам доверяют профессионалы отрасли
9. CTA Section - Призыв к действию
10. Contact Section - Форма обратной связи
11. Footer - Подвал сайта

works.html - Страница "Наши работы":

1. Navigation - Навигационное меню
2. Hero Section - Заголовок страницы
3. Portfolio Grid - Сетка проектов (12 карточек)
4. Load More - Кнопка загрузки еще проектов
5. CTA Section - Призыв к действию
6. Certificates - Наши сертификаты (2 карточки)
7. Clients - Нам доверяют профессионалы отрасли
8. Footer - Подвал сайта

contacts.html - Страница "Контакты":

1. Navigation - Навигационное меню
2. Hero Section - Заголовок страницы
3. Contact Info & Form - Контактная информация и форма заявки
4. Location Map - Карта местоположения офиса
5. Certificates - Наши сертификаты (2 карточки)
6. Clients - Нам доверяют профессионалы отрасли
7. Footer - Подвал сайта

🎯 CSS модули (css/style.css):

• Reset & Base Styles
• Navigation
• Hero Section
• Buttons
• Container & Grid
• About Section
• Expertise Section
• Projects Gallery
• Philosophy Section
• Core Values
• CTA Section
• Contact Section
• Footer
• Animations
• Responsive Design

🚀 JavaScript функции (js/main.js):

• initNavigation() - Эффект прокрутки для навигации
• initSmoothScroll() - Плавная прокрутка по якорям
• initScrollAnimations() - Анимации при прокрутке
• initContactForm() - Обработка формы обратной связи

🧩 Универсальные блоки

В файле BLOCKS-TEMPLATES.html находятся готовые блоки, которые можно копировать на любую страницу:

1. Наши сертификаты

• 2 карточки с сертификатами
• Анимация при наведении
• Адаптивный дизайн

2. Нам доверяют профессионалы отрасли

• Сетка логотипов клиентов
• Автоматическое выравнивание
• Эффект при наведении

Пример использования:
Откройте BLOCKS-TEMPLATES.html, скопируйте нужный блок <section>...</section> и вставьте в любое место вашей страницы.

🛠️ Как редактировать

Изменить содержимое:

Откройте index.html - все блоки четко разделены комментариями

Изменить стили:

Откройте css/style.css - файл разделен на модули с комментариями

Изменить функциональность:

Откройте js/main.js - каждая функция документирована

Добавить блоки на страницу:

Откройте BLOCKS-TEMPLATES.html - скопируйте готовые блоки

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

Вариант 1: Python сервер

cd /Users/ivanov/dev/website/web
python3 -m http.server 8000

Откройте: http://localhost:8000

Вариант 2: Node.js сервер

npx http-server -p 8000

Вариант 3: VS Code Live Server

Установите расширение "Live Server" и нажмите "Go Live"

🎨 Цветовая схема

--bg-primary: #FAFAFA     /* Основной фон */
--text-primary: #1A1A1A   /* Основной текст */
--text-secondary: #6B6B6B /* Вторичный текст */
--white: #FFFFFF          /* Белый */

📝 Шрифты

• Inter - основной шрифт (300, 400, 500)
• Playfair Display - заголовки (400, 500, 600)

📦 Зависимости

Проект не использует npm/yarn зависимости. Все работает на чистом JavaScript и CSS.

Единственная внешняя зависимость:

• Google Fonts (Inter & Playfair Display)

🌐 Браузерная поддержка

• Chrome (последние 2 версии)
• Firefox (последние 2 версии)
• Safari (последние 2 версии)
• Edge (последние 2 версии)

📱 Адаптивность

Сайт полностью адаптивен для:

• Десктоп (1920px+)
• Планшет (768px - 1024px)
• Мобильные (320px - 767px)

🔧 Технологии

• HTML5
• CSS3 (Grid, Flexbox, Custom Properties)
• Vanilla JavaScript (ES6+)
• Intersection Observer API
• CSS Animations

📸 Медиа файлы

Изображения и видео используются из папки ../example_site/:

• /images/ - изображения
• /media/ - видео файлы

🚀 Деплой

Для деплоя на хостинг просто загрузите содержимое папки web/ на сервер.

Рекомендуемые хостинги:

• Netlify
• Vercel
• GitHub Pages
• любой хостинг с поддержкой статических сайтов

📞 Контакты

• Email: stalkmet@stalkmet.com
• Телефон: +372 56 88 72 98
• Адрес: Peterburi tee 23, Väike Paala 1, Tallinn, Estonia

---

Разработано в 2025 году