ВВЕДЕНИЕ

Технологии этого модуля: HTML5, CSS3, граф. дизайн
Время на выполнение: 6 часов

В современном мире с каждым днём появляется всё больше и больше новых технологий. В настоящее время сложно представить организацию, у которой нет веб-сайта.
К вам обратилась компания «Titanicc» - новая и энергичная туристическая компания, предоставляющая морские пассажирские перевозки небольшими малогабаритными судами. Главная цель компании - развить связность между странами путем организации морских пассажирских перевозок на непостоянной основе по мере накопления запросов. 
Основные принципы работы сервиса: 
1.	Выбрать удобную дату отправления.
2.	Накопить больше 50% бронирований на рейс.
3.	Получить снижение стоимости.
Призыв: Мы сближаем города, вы - путешествуете там, где хотите.
Вам необходимо использовать все имеющиеся навыки в дизайне и верстке чтобы сверстать LandingPage, а также все остальные страницы. Используйте анимацию для привлечения внимания посетителя к акцентам и основным объектам сервиса. 
Заказчик хочет, чтобы сайт был современный и энергичный, а также удобный, простой и не менял свои качества при различных разрешениях экрана.
Заказчик отметил, что услугами компании, в основном, пользуются люди в возрасте от 17 до 40 лет.
Компания не хочет разбираться со сторонними авторскими правами на материалы, поэтому вы можете использовать только то, что предоставляет заказчик в медиафайлах или ваши личные дизайнерские разработки. 
ВНИМАНИЕ! Проверяться будут только работы, загруженные на сервер! 

Работы будут проверяться с применением автоматической оценки 
(см. пункт инструкция для конкурсанта)	

ОПИСАНИЕ ПРОЕКТА И ЗАДАЧ
Ваша задача – сверстать следующие страницы веб-сайта:
●	Главная страница - LandingPage
●	Страница входа в личный кабинет
●	Страница регистрации в личном кабинете
●	Страница личного кабинета
●	Страница с результатами поиска
●	Страница ввода данных о пассажирах
●	Страница выбора мест для пассажиров
●	Страница просмотра бронирования
●	Страница изменения выбранного места
	
Главная страница (landingpage)
Главная страница должна содержать следующие блоки:
●	Шапка сайта
○	Логотип компании < .test-0-logo >
○	Меню навигации
■	Акции < .test-0-nav-1 >,
■	Поиск < .test-0-nav-2 >, 
■	Регистрация на рейс < .test-0-nav-3 >,
■	Личный кабинет < .test-0-nav-4 >
●	Секция(и) описания принципа накопления бронирований для осуществления рейса с целью снижения его стоимости. Три принципа необходимо визуализировать при помощи анимированной инфографики на основе вводимых демо данных посетителем. Например, выбор условной даты, ввод числа бронирований и демонстрация изменения стоимости и вероятности отправления. 
●	Секция о доверии компании.
●	Форма поиска. Должна содержать следующие поля ввода:
○	Откуда – место или порт отправления < .test-0-fd >
○	Куда – место или порт назначения < .test-0-fa >
○	Туда – дата отправления туда < .test-0-fdt- >
○	Обратно – дата отправления обратно < .test-0-fat >
○	Количество пассажиров (от 1 до 8 включительно) < .test-0-fnp >
○	Кнопка для поиска билетов < .test-0-fbs >
●	Акции (список акций доступен в медиафайлах). Каждая акция должна содержать следующую информацию:
○	Изображение < .test-0-ai >
○	Название акции < .test-0-an >
○	Краткое описание акции < .test-0-ad >
○	Кнопка для просмотра акции < .test-0-abm >
●	Форма для подписки на закрытые акции. Должна содержать следующие поля:
○	Поле для ввода Email< .test-0-sie >
○	Кнопка для подписки < .test-0-sbs >
●	Подвал сайта
○	Телефон “8 (800) 100-10-10” < .test-0-phone >
○	Навигация по сайту (список ссылок для навигации будет предоставлен в медиафайлах)
○	
○	Пример списка из медиафайлов (формат может отличаться):
Возврат : http://xxxxxx-m1.wsr.ru/return
Обратная связь : http://xxxxxx-m1.wsr.ru/feedback	
	
Это значит, что в вашей верстке должны быть следующие ссылки:
<a href=”http://xxxxxx-m1.wsr.ru/return”>Возврат</a>
<a href=”http://xxxxxx-m1.wsr.ru/feedback”>Обратная связь</a>	
где xxxxxx - ваш логин.

Страница с результатами поиска
Попасть на эту страницу можно с главной (из формы поиска рейсов). На этой странице необходимо отобразить все найденные рейсы (туда и обратно), а именно:
●	Номер рейса < .test-4-fn >
●	Судно (корабль)< .test-4-at >
●	Дата отправления< .test-4-dd >
●	Время отправления< .test-4-dt >
●	Время прибытия< .test-4-at >
●	Время в пути < .test-4-ft >
●	Стоимость < .test-4-fp >
●	Вероятность отправления< .test-4-fh >
Вероятность отправления - это визуальное отображение зависящие от заполненности рейса в указанную дату. Если корабль заполнен на половину (30 из 60 пассажиров), то вероятность отправления - 100%. Если корабль заполнен на четверть (15 из 60 пассажиров), то вероятность отправления - 50% и т.д.
Предусмотрите способ для выбора понравившихся рейсов (один рейс “туда” и один рейс “обратно”) и кнопку для перехода к вводу данных о пассажирах < .test-4-bsb >.

Страница ввода данных о пассажирах
Данная страница отображается сразу после страницы с результатами поиска. На этой странице необходимо отобразить форму для сбора данных пассажиров, а именно:
●	Данные о рейсах (для каждого рейса)
○	Номер рейса < .test-5-fc >
○	Название места отправления < .test-5-fcity >
○	Название порта отправления < .test-5-from >
○	Дата отправления< .test-5-dd >
○	Время отправления< .test-5-dt >
○	Название места назначения < .test-5-tcity >
○	Название порта назначения < .test-5-to >
○	Время прибытия< .test-5-at >
○	Стоимость < .test-5-fp >
●	Данные о пассажирах (для каждого пассажира)
○	Имя < .test-5-name >
○	Фамилия < .test-5-last >
○	Дата рождения < .test-5-dob >
○	Номер документа < .test-5-doc >
○	Необходимость места в багажном отделении < .test-5-lug >
●	Кнопка для добавления пассажира < .test-5-add > для добавления еще одного пассажира в бронирование
●	Кнопка для удаления пассажира < .test-5-remove >
●	Финальная стоимость < .test-5-price >
●	Кнопка для подтверждения ввода данных о пассажирах и переходе на следующую страницу < .test-5-book >

Страница выбора мест для пассажиров
Данная страница отображается сразу после страницы ввода данных о пассажирах. На этой странице необходимо отобразить форму для выбора конкретного пассажира, палубы на корабле и свободного места на палубе для выбранного пассажира.
На этой странице необходимо отобразить схему морского судна (корабля) с возможностью выбрать палубу корабля и свободное место на ней для бронирования пассажиром. В компании используется пассажирский теплоход «Проект 544-III» который имеет 3 палубы по 13 рядов по 6 мест в ряду (компоновка 2х3). Первые четыре ряда расположены на носу корабля, следующие четыре ряда расположены в центре корабля и ещё пять рядов расположены на корме корабля.
Должна быть возможность выбрать разные палубы и не соседние места для пассажиров.
После выбора места для каждого пассажира становится доступна кнопка для оформления бронирования, нажатие на которую позволяет перейти на страницу просмотра созданного бронирования.

Страница просмотра бронирования
На этой странице необходимо отобразить всю информацию о бронировании, а именно:
●	Информация о бронировании
○	Код бронирования < .test-6-code >
○	Стоимость бронирования < .test-6-tp >
●	Информация об отправлении (для каждого рейса)
○	Номер рейса < .test-6-fc >
○	Судно< .test-6-ac >
○	Название места отправления < .test-6-fcity >
○	Название порта отправления < .test-6-from >
○	Дата отправления < .test-6-dd >
○	Время отправления < .test-6-dt >
○	Название места назначения < .test-6-tcity >
○	Название порта назначения < .test-6-to >
○	Время прибытия < .test-6-at >
○	Время в пути < .test-6-ft >
○	Вероятность отправления < .test-6-fh >
●	Информация о пассажирах (для каждого пассажира)
○	Имя < .test-6-name >
○	Фамилия < .test-6-last >
○	Дата рождения < .test-6-dob >
○	Номер документа < .test-6-doc >
○	Необходимость места в багажном отделении < .test-6-lug >
○	Номер палубы туда  < .test-6-tв  >
○	Место на палубе судна туда  < .test-6-ts  >
○	Номер палубы обратно  < .test-6-bd  >
○	Место на палубе судна обратно  < .test-6-bs >
●	Кнопка для изменения выбранного места < .test-6-select >

Страница изменения выбранного места
На этой странице необходимо отобразить схему морского судна (корабля) с возможностью выбрать палубу корабля и свободное место на ней для бронирования пассажиром. В компании используется пассажирский теплоход «Проект 544-III» который имеет 3 палубы по 13 рядов по 6 мест в ряду (компоновка 2х3). Первые четыре ряда расположены на носу корабля, следующие четыре ряда расположены в центре корабля и ещё пять рядов расположены на корме корабля.

Страница регистрации в личном кабинете
На этой странице вам необходимо сделать форму со следующими полями:
●	Имя < .test-2-name >
●	Фамилия < .test-2-last >
●	Номер документа < .test-2-doc >
●	Адрес электронной почты < .test-2-email >
●	Пароль < .test-2-pass >
●	Повтор пароля < .test-2-pass2 >
●	Кнопка для регистрации < .test-2-btn >

Страница входа в личный кабинет
На этой странице вам необходимо сделать форму со следующими полями:
●	Адрес электронной почты < .test-1-fem >
●	Пароль < .test-1-fps >
●	Кнопка для входа < .test-1-fbs >

Страница личного кабинета
На этой странице необходимо отобразить информацию о пользователе, а именно:
●	Имя < .test-3-name >
●	Фамилия < .test-3-last >
●	Количество рейсов< .test-3-num >
●	Кнопка выхода из личного кабинета < .test-3-logout >
●	Предстоящие бронирования. Каждое бронирование должно отражать следующую информацию:
○	Код бронирования < .test-3-code >
○	Дата отправления< .test-3-d1 >
○	Время отправления< .test-3-t1 >
○	Время прибытия< .test-3-t2 >
○	Название порта отправления< .test-3-from >
○	Название порта назначения < .test-3-to >

ИНСТРУКЦИЯ ДЛЯ КОНКУРСАНТА
Сверстанный веб-сайт должен быть доступен по адресу http://xxxxxx-m1.wsr.ru/, где xxxxxx - логин участника (указан на индивидуальной карточке).
Сохраните сверстанные страницы со следующими именами:
●	Главная страница - LandingPage – index.html
●	Страница входа в личный кабинет – login.html
●	Страница регистрации в личном кабинете – register.html
●	Страница личного кабинета – profile.html
●	Страница с результатами поиска – search.html
●	Страница ввода данных о пассажирах – passengers.html
●	Страница выбора мест для пассажиров – seats.html
●	Страница просмотра бронирования – booking_view.html
●	Страница изменения выбранного места – seat_change.html

Все страницы указанные выше должны быть доступны к просмотру по соответствующим адресам: http://xxxxxx-m1.wsr.ru/index.html , http://xxxxxx-m1.wsr.ru/login.html и т.д. 
Проверяются только работы, загруженные на сервер! Страницы расположенные в других местах или с ошибками в названии проверяться не будут!
Ваш HTML/CSS должен быть валидным.
Оценка будет производиться в браузере GoogleChrome.
Использование любых фреймворков и библиотек (bootstrap, например) запрещено.

Автоматическая оценка
Работы будут проверяться с применением автоматической оценки. Для этого вам необходимо указать требуемые по заданию селекторы для соответствующих элементов в вашей верстке.
В задании вы можете встретить следующую запись: Логотип < .test-logo> - это значит, что в вашей верстке вы должны указать для логотипа класс test-logo. 
В таблице ниже продемонстрированы примеры того, как необходимо использовать селекторы.
Формулировка в задании	Код	
Логотип < .test-logo>	<imgsrc=”...” class=”logo class1 class2 test-logo”>	
Меню навигации
Акции < .test-nav-1 >,
Бронирование < .test-nav-2 >,
Регистрация на рейс < .test-nav-3 >, 
Личный кабинет < .test-nav-4 >
	<ul>
<li>
<a href=”#” class=”test-nav-1”>Акции</a>
</li>
<li>
<a href=”#” class=”test-nav-2”>Бронирование</a>
</li>
<li>
<a href=”#” class=”test-nav-3”>Регистрация на рейс</a>
</li>
<li>
<a href=”#” class=”test-nav-4”>Личный кабинет</a>
</li>
</ul>	

СИСТЕМА ОЦЕНКИ
Секция	Критерий	Сумма	
A	Организация работы и управление	1,50	
B	Коммуникация и навыки межличностного общения	1,50	
C	Графический дизайн	16,00	
D	Верстка	17,00	
E	Программирование на стороне клиента	2,00	
F	Программирование на стороне сервера	0,00	
G	CMS	0,00	
Всего		38,00