Готовый промпт
Адаптивный лендинг с профессиональным дизайном
Получите готовый адаптивный лендинг с профессиональным дизайном за 5 минут! Код HTML+CSS включает все стили и компоненты: от header с мобильным меню до формы обратной связи. Чистый код с валидацией и плавными переходами — просто скопируйте и используйте!
Текст промпта
# Напиши полный, готовый к использованию код (HTML + CSS) для адаптивного лендинга. Сайт должен выглядеть профессионально, с акцентом на читаемость и современный дизайн. ## Цветовая палитра: * Основной цвет (акценты, кнопки, заголовки): [ #2A5B8F ] * Акцентный цвет (вторичные кнопки, акценты): [ #FF6B35 ] * Цвет фона страницы: [ #F8F9FA ] * Цвет основного текста: [ #333333 ] * Цвет текста на кнопках: [ #FFFFFF ] * Цвет фона для блоков: [ #FFFFFF ] ## Типографика: * Подключи шрифт Montserrat с Google Fonts (начертания 400 и 700). * h1: font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 3rem; * h2: font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2.25rem; * p: font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 1rem; line-height: 1.6; ## Структура страницы: ### Header: * Контейнер на всю ширину. * Внутри: логотип (текст или заполнитель) слева, навигационное меню (ссылки «[ Главная ], [ О нас ], [ Услуги ], [ Контакты ]») справа. * Меню должно становиться гамбургер‑меню на мобильных устройствах. ### Hero Section: * Центрированный контент. * Заголовок h1: «[ Ваш успех — наша цель ]». * Подзаголовок p: «[ Предоставляем качественные услуги с 2010 года ]». * Кнопка: «[ Связаться с нами ]», стиль: фон [ #2A5B8F ], белый текст, отступы, скругление углов 8px, при наведении — затемнение фона (filter: brightness(90%)). ### About Section: * Заголовок h2: «[ О нашей компании ]». * Два абзаца текста. * Справа — заполнитель для изображения (img с классом, фиксированная ширина/высота). ### Services Section: * Заголовок h2: «[ Наши услуги ]». * Три колонки (на десктопе), в каждой — иконка (используй Unicode‑символы или простые SVG), заголовок h3 и краткое описание. ### Contact Form: * Заголовок h2: «[ Свяжитесь с нами ]». * Форма с полями «[ Имя ]» (type=“text”), «[ Email ]» (type=“email”), «[ Сообщение ]» (textarea), кнопка «[ Отправить ]» (фон [ #FF6B35 ]). * Стилизация полей ввода: граница 1px solid #ddd, скругление 4px, отступы. ### Footer: * Цвет фона: [ #2A5B8F ]. * Текст копирайта белым цветом, центрирован. * Иконки социальных сетей (заполнители) по центру. ## Технические требования: * Полная мобильная адаптация (используй медиа‑запросы @media (max-width: 768px)). * Код должен быть валидным HTML5 и CSS3. * Используй Flexbox или Grid для вёрстки. * Добавь плавные переходы (transition) для кнопок и ссылок при наведении. * Обеспечь достаточные контрасты для доступности. ## Проверка результата Проверь читаемость, контраст, состояния элементов и мобильный вариант. Не заменяй задачу пользователя декоративными эффектами. Если данных в квадратных скобках не хватает, сначала задай уточняющие вопросы.
Как использовать этот промпт
Замените значения в квадратных скобках на свои данные и добавьте контекст задачи.