🎯 Новый демонстрационный лендинг на z1z.org/demo1: адаптивный, анимированный и полностью на чистом HTML/CSS/JS

В рамках экспериментов с версткой и фронтендом я создал еще один демонстрационный лендинг, который можно посмотреть по адресу:

👉 https://z1z.org/demo1/

Этот лендинг — тренировочная площадка. Его цель — показать, как может выглядеть сайт услуг с примерами работ, контактной формой, кнопкой прокрутки наверх, модальными окнами и адаптивной версткой без использования каких-либо фреймворков или библиотек. Всё написано вручную: чистый HTML + CSS + JavaScript.

✨ Ключевые особенности:

🧠 1. Простой, но современный дизайн

Использованы классические цвета — темно-синий фон #004080, светло-голубой #b7dbff для акцентов и мягкий фон #f9f9f9, который не бьёт по глазам. Это сознательный отход от моих привычных тёмных интерфейсов, потому что, цитирую начальника: «Хватит уже делать эти мрачные сайты, как будто это панель управления подвалом!» 😅 Так что — встречайте: светлая тема, приятные оттенки, читаемый контент, максимум воздуха и минимум агрессии. Даже заголовки и кнопки при наведении подсвечиваются мягко, без кислотных вспышек.

🖱️ 2. Анимация появления секций

При прокрутке разделы плавно проявляются с эффектом fadeInUp. Это реализовано через IntersectionObserver API и кастомную CSS-анимацию:

@keyframes fadeInUp {  from {    opacity: 0;    transform: translateY(30px);  }  to {    opacity: 1;    transform: translateY(0);  }}

🔍 3. Зум изображений

Скриншоты можно увеличить по клику. Работает через модальное окно, которое плавно появляется и исчезает:

img.addEventListener('click', () => {  modal.style.display = 'flex';  modalImg.src = img.getAttribute('data-large') || img.src;});

⬆️ 4. Кнопка "Наверх"

Если прокрутить страницу более чем на 200px — появляется плавающая кнопка. Нажатие плавно возвращает на верх страницы.

🌐 5. Контакты, карта и форма обратной связи

• Кастомный <iframe> от Яндекс.Карт
• Простая форма с валидацией через required
• Соцссылки (VK, Telegram)
• Email скрыт, но раскрывается по клику (mailto: подставляется через JS)

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

Сайт отлично смотрится и на десктопе, и на мобильных. Использованы Media Queries для ширин 600px и ниже:

@media (max-width: 600px) {  .screenshots {    flex-direction: column;  }}

🔧 Технологии

• HTML5 + семантика (<section>, <header>, <nav>, <footer>, <main>, aria-labelledby)
• CSS переменные (:root) для цветовой схемы
• JavaScript без библиотек — всё на Vanilla JS
• Оптимизация скорости загрузки: loading="lazy" у изображений и карты

📦 Кодовая структура:

/demo1/├── index.php       ← HTML и PHP-заготовка├── css/│   └── style.css   ← Основной стиль├── js/│   └── script.js   ← Весь JavaScript

🛠 Возможные доработки:

• 📨 Обработка формы через PHP или интеграция с Telegram-ботом
• 💬 Раздел FAQ или чат поддержки
• 🎨 Темная тема через prefers-color-scheme
• 🏗 Перевод на компоненты с использованием Vue или React (опционально)

🚀 Зачем это всё?

Такой демонстрационный сайт — это отличный способ:

• показать заказчику, как может выглядеть его будущий лендинг;
• протестировать приемы адаптивной верстки, UI/UX-паттерны;
• сохранить основу для будущих быстрых запусков типовых сайтов.

🔗 Ссылка на демо:

👉 https://z1z.org/demo1/

Заключение

Если вы хотите лендинг "под ключ" — с простым админом, формой обратной связи, подключением карты, с эффектами и адаптацией под все экраны — такой шаблон можно взять за основу. А я, как разработчик, легко подстрою его под нужды любого микробизнеса: от нотариуса до службы доставки или телемедицинской консультации.

Если интересно — пишите в Telegram, ссылки есть внизу этого блога.

🏁 Резюме

Хочешь свой лендинг? Свяжись со мной — сделаю под твои задачи.