Проект 5: Форма авторизации

HTML - 1 часть

1. Основной контейнер:
- Вся форма обернута в главный контейнер, который служит основным каркасом интерфейса.

2. Форма входа:
- Включает приветственный заголовок с текстом "С возвращением".
- Содержит два поля для ввода: одно для ввода почты, другое — для пароля. Каждое поле имеет соответствующий текстовый ярлык.
- Есть текст для пользователей, которые забыли пароль, предлагающий восстановление.
- Включает две кнопки: одна для входа с введенными данными, другая — для входа через Telegram.

3. Субконтейнер:
- Этот раздел позволяет пользователям переключаться между формами входа и регистрации.
- Содержит текстовые блоки с подсказками для тех, кто впервые на сайте, и для тех, у кого уже есть аккаунт.

Made in HTML/CSS

Проект 5: Форма авторизации

HTML - 2 часть

1. Форма регистрации:
- Включает заголовок с просьбой заполнить необходимые данные.
- Содержит три поля для ввода: имя, почта и пароль, каждое с соответствующим текстовым ярлыком.
- Также есть две кнопки: одна для регистрации с введенными данными, другая — для регистрации через Telegram.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 1 часть

Описание:

Эта часть включает общие стили для всех элементов, тела документа и входных элементов (input, button). Это базовые стили, для дальнейшего украшения.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 2 часть

Описание:

Эта часть содержит стили для основного контейнера .cont, который имеет фиксированную ширину и высоту, а также центрированное расположение.

Также включает стили для формы .form и подконтейнера .sub-cont, которые имеют анимации перехода и используют миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 3 часть

Описание:

Эта часть содержит стили для кнопок, которые имеют закругленные углы и анимации перехода.

Также эта часть включает стили для изображений, которые имеют анимации и используют миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 4 часть

Описание:

Эта часть содержит стили для текста внутри изображений, который также имеет анимации и использует миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 5 часть

Описание:

Эта часть включает стили для кнопок внутри изображений, которые имеют анимации и используют миксин signUpActive для изменения положения при активном состоянии регистрации.


Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 6 часть

Описание:

Эта часть содержит стили для заголовков (h2), меток (label) и входных полей (input). Заголовки имеют центрированное расположение и фиксированный размер шрифта.

Метки имеют блочное отображение, центрированное расположение и фиксированную ширину.

Входные поля имеют блочное отображение, центрированное расположение, фиксированную ширину, размер шрифта и нижнюю границу.

Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 7 часть

Описание:

Эта часть включает стили для ссылки "Забыли пароль?" (.forgot-pass), кнопки отправки (.submit) и кнопки Facebook (.fb-btn).

Ссылка "Забыли пароль?" имеет центрированное расположение, фиксированный размер шрифта и цвет. Кнопка отправки имеет фиксированные отступы, фоновый цвет и заглавные буквы. Кнопка Telegram имеет границу, цвет текста и стили для вложенного элемента span.


Made in HTML/CSS

Проект 5: Форма авторизации

CSS - 8 часть


Описание:

Эта часть содержит стили для переходов между формами входа (.sign-in) и регистрации (.sign-up).
Формы имеют анимации перехода и используют миксин signUpActive для изменения положения при активном состоянии регистрации.

Made in HTML/CSS

Проект 5: Форма авторизации

JavaScript - 1 часть

Описание:

Этот JavaScript код добавляет обработчик события click к элементу с классом .img__btn.
Когда пользователь нажимает на этот элемент, выполняется функция, которая переключает класс s--signup на элементе с классом .cont.

Made in HTML/CSS