Заказчик — отель (название не указано, но из макетов видно: есть детские заезды, номера разных типов, цены в белорусских рублях, возможность проживания с питомцами).
Что нужно было сверстать:
Мне прислали макеты следующих страниц и блоков:
Страница бронирования с выбором дат (заезд/выезд), количества взрослых и детей
Блок доступности номеров (с сообщением «Доступные номера отсутствуют» и календарём)
Карточки номеров с характеристиками (Апартаменты Студио №1, Двухкомнатные №2, №3, Однокомнатные №4)
Таблицы цен по датам
Форма оставления заявки, если номеров нет на выбранные даты
Блок контактов (телефон, мессенджеры, Viber, WhatsApp, Telegram)
Задача: Сверстать чистый, адаптивный интерфейс бронирования, подготовить к натяжке на бэкенд (логика поиска свободных номеров, расчёт цен, отправка заявок).
Я взял все макеты и сверстал страницы бронирования и каталог номеров с нуля.
Что сделал:
Полностью свёрстал форму поиска:
Выбор даты заезда и выезда (27-28 марта 2026 как пример)
Выбор количества взрослых и детей (плюс/минус)
Кнопка «+ ДОБАВИТЬ НОМЕР» для добавления нескольких комнат в один заказ
Поле для промокода
Свёрстал блок доступности номеров:
При отсутствии номеров на выбранные даты выводится сообщение «Доступные номера отсутствуют» и предлагается посмотреть календарь или оставить заявку
Кнопка «ОСТАВИТЬ ЗАЯВКУ» для отправки запроса менеджеру
Свёрстал карточки номеров (пример из макета):
Апартаменты Студио №1 — 40 м², 5 спальных мест, душевая кабина, техника, 230 BYN
Двухкомнатные апартаменты №2 — 34 м², 6 спальных мест, 240 BYN
Двухкомнатные апартаменты №3 — 210 BYN
Однокомнатные апартаменты №4 — 180 BYN
В карточках добавил характеристики: количество комнат, площадь, спальные места, что есть в ванной и на кухне, окна выходят на улицу/двор, этаж, возможность проживания с питомцами
Свёрстал таблицу цен по датам:
Доступные даты
Цены для каждого типа номера на каждую дату (210, 220, 180 BYN)
Сделал адаптив — форма и карточки корректно отображаются на мобильных устройствах (чтобы гости могли бронировать с телефонов)
Добавил блок контактов:
Телефон
Ссылки на Viber, WhatsApp, Telegram
Упоминание сертификатов
Подготовил вёрстку к натяжке на бэкенд — все формы имеют правильные атрибуты, данные готовы к отправке на сервер
Сайт отеля свёрстан полностью — форма бронирования, календарь доступности, карточки всех номеров, таблица цен по датам, форма заявки.
Адаптив работает — гости могут бронировать с любых устройств.
Реализован сценарий «номеров нет на даты» — пользователь не уходит в никуда, а оставляет заявку и видит альтернативные даты.
Вёрстка чистая, готова к передаче в разработку — осталось добавить бэкенд (проверку реальной занятости номеров, расчёт итоговой стоимости, отправку заявок на почту отеля).
Заказчик получил полностью рабочий интерфейс бронирования, который можно интегрировать с любой CMS или самописной системой управления отелем.
Пожаловаться
