Journey Form (fourth task)

+ доповненно макет завданням з JS(реалізація іконок "Показати пароль")

Stack: HTML, CSS, JS

Завдання

Зверстати макет psd. Також дано другий варіант макету, на якому показано, як повинні виглядати різні елементи при наведенні на них курсору миші.

Технічні вимоги:

• Фонова картинка має бути розтягнута на весь екран незалежно від розміру екрана, з дотриманням усіх пропорцій (читаємо про властивість background-size);
• Верхня смуга з іконками повинна мати прозорість, як на макеті;
• Всі іконки в хедері повинні бути зроблені з використанням спрайтів і поміщені в один файл;
• Форма логіна повинна бути по центру сторінки горизонтально і вертикально, незалежно від розміру екрана (вертикально - за вирахуванням висоти хедера);
• Додати зелений квадрат зліва від тексту Sign Up угорі модального вікна;
• Кнопки логіна через гугл та фейсбук мають бути зверстані вручну, не картинкою;
• Поля для введення тексту повинні виділятися так як перше поле на макеті при натисканні на них курсором миші (не по ховеру), поки користувач вводить текст у це поле;
• Чекбокс має відзначатися також при натисканні на текст поряд з ним.

Технічні вимоги для завдання з JS:

• Після натискання на іконку поруч із конкретним полем - мають відображатися символи, які ввів користувач, іконка змінює свій зовнішній вигляд.
• Коли пароля не видно - іконка поля має виглядати як "fa-eye"
• Коли натиснута іконка, вона має виглядати, як "fa-eye-slash"
• Після натискання на кнопку Підтвердити, потрібно порівняти введені значення в полях
• Якщо значення збігаються – вивести модальне вікно (можна alert) з текстом – You are welcome;
• Якщо значення не збігаються - вивести під другим полем текст червоного кольору Потрібно ввести однакові значення
• Після натискання на кнопку сторінка не повинна перезавантажуватись
• Можна міняти розмітку, додавати атрибути, теги, id, класи тощо.

Не обов'язкове завдання просунутої складності:

• Додати transition для ховеру;
• Зробити чекбокс таким як на макеті.