Проект 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

Проект 6: Прикольный scroll без JS

HTML - 1 часть

Этот блок HTML создает контейнер с классом wrapper, который содержит несколько абзацев (<p>). Каждый абзац содержит несколько элементов <span>, каждый из которых имеет стиль с переменной --x, определяющей горизонтальное положение буквы. Эта часть html создает первый "слой" скролла.

Made in HTML/CSS

Проект 6: Прикольный scroll без JS

HTML - 2 часть

Этот блок HTML создает контейнер с классом wrapper, который содержит несколько абзацев (<p>). Каждый абзац содержит несколько элементов <span>, каждый из которых имеет стиль с переменной --x, определяющей горизонтальное положение буквы. Эта часть html создает второй "слой" скролла.

Также этот блок HTML создает контейнер с классом support-message, который отображает сообщение о том, что браузер пользователя не поддерживает анимацию scroll().

Made in HTML/CSS