Dental

«Dental» — для стоматологической клиники, которой нужен спокойный сайт-визитка без конструктора и сборки. Из файлов получается одна адаптивная страница: кабинет на первом экране, услуги, врачи, прайс, ответы на вопросы и форма знакомства.

Страницы и секции

В комплекте одна страница — index.html. Секции сверху вниз:

• Верхняя полоса. «Стоматология для всей семьи» и график: пн–пт 09:00–20:00, сб 10:00–16:00. На узком экране остаётся только первая строка.
• Шапка. Логотип «Dental», меню якорями: Клиника, Услуги, Врачи, Цены, Контакты и кнопка «Записаться». До 800px меню сворачивается в кнопку.
• Герой. Заголовок «Ваша улыбка. Наша забота.», короткий текст, переход к записи и к услугам, примечание «Без спешки. Без осуждения.». Рядом иллюстрация кабинета с подписью «Здесь можно выдохнуть».
• Полоса обещаний. Четыре пункта: план лечения до начала, комфорт, стоимость без неожиданностей, забота обо всей семье.
• Услуги (#services). Шесть карточек: диагностика, гигиена и профилактика, лечение зубов, ортодонтия, восстановление зубов (коронки, реставрации, имплантация), детская стоматология. Клик открывает форму и подставляет услугу в список.
• О клинике (#about). Иллюстрация зуба, текст философии и три пункта: пожелания гостя, смета до процедур, уход после лечения.
• Команда (#team). Три иллюстрированных портрета: Олена Коваль (терапия), Андрій Мельник (хирургия), Марія Бондар (ортодонтия). Под сеткой указано, что имена демонстрационные.
• Первый визит. Три шага без пункта в меню: выбрать время, рассказать о себе, получить план. В первом шаге сказано, что администратор согласует визит только после подключения сервиса заявок.
• Стоимость (#prices). Шесть позиций «от … ₴»: консультация 600, гигиена 1 800, кариес 1 500, реставрация 2 500, ортодонт 800, знакомство ребёнка с врачом 500. Рядом примечание, что прайс демонстрационный и не является офертой.
• Вопросы. Пять раскрывающихся ответов: первая консультация, страх стоматолога, визит с ребёнком, подготовка к осмотру, этапы лечения.
• Запись (#appointment). Поля: имя, телефон, услуга, пожелания. После «Попробовать запись» страница благодарит и прямо пишет, что данные не отправлены и визит не забронирован.
• Контакты (#contact). Демоадрес «Київ, вул. Прикладна, 12», часы работы (воскресенье — выходной) и декоративная схема вместо карты.
• Подвал. Логотип, слоган, ссылка «Наверх», год (скрипт подставляет текущий) и строка о том, что данные клиники и цены приведены для примера.

Технически

• Чистый HTML, один css/style.css и один js/main.js: библиотек, фреймворков и сборки нет.
• Шрифты системные: Arial и Helvetica для текста, Georgia для акцентов в заголовках, цитатах врачей и номерах шагов. Вебшрифты не подключаются.
• Адаптив в CSS: на 1000px сетки плотнее, до 800px появляется бургер (закрытие по Escape, клику вне шапки и после перехода по ссылке), до 600px блоки выстраиваются в одну колонку. Если в системе отключена анимация, переходы тоже отключаются.
• Форма работает только в браузере: проверяет имя и телефон, не имеет адреса отправки, после сабмита очищает поля и показывает демо-сообщение. Кнопка включается скриптом; без JavaScript остаётся текст о том, что сайт заявки не принимает.
• Для просмотра интернет не нужен. Стили, скрипт, логотип, фавикон и иллюстрация кабинета лежат в папке шаблона. Внешних запросов, карт, аналитики и виджетов записи нет.

Как использовать

1. Распакуйте архив. В папке должны быть index.html, css/style.css, js/main.js и img/ с тремя файлами: logo.svg, favicon.svg, clinic.svg.
2. Откройте index.html в браузере. Сборка не нужна: стили, скрипт и картинки подключены относительными путями.
3. Тексты меняйте в index.html: title и description в шапке документа, слоган и часы в верхней полосе, герой, карточки услуг, блок о клинике, команда, шаги визита, прайс, вопросы, подписи формы, адрес и подвал. Портреты врачей — встроенные SVG в секции #team.
4. Цвета собраны в начале css/style.css в переменных: --paper (фон), --ink (текст), --muted, --green (кнопки и акценты), --sage, --line, --white. Рядом --radius и --container (ширина содержимого до 1180px). Несколько цветов наведения и обводка фокуса прописаны отдельными значениями ниже по файлу.
5. Логотип замените файлом img/logo.svg: он стоит в шапке и в подвале. Фавикон — img/favicon.svg, иллюстрация кабинета в герое — img/clinic.svg. Слово «лінія» нарисовано текстом внутри SVG, поэтому название клиники измените и там, и в alt.