В этом задании вам нужно будет сверстать две формы: для авторизации и для регистрации. Формы представлены в макете по ссылке:
Форма авторизации/создания аккаунта
Форма регистрации
Для каждой формы должны быть созданы свой html-файл и свой файл стилей, подключенный к странице.
Мы умеем верстать лишь статические макеты, поэтому все размеры должны быть указаны в абсолютных единицах измерения. Цвета, расстояние между элементами, размер шрифта и другие параметры должно строго соответствать тем параметрам, которые представлены в макете.
Шрифты можно подключить из Google Fonts, не скачивая файлы шрифтов, и не помещая их в папку с лабораторной работой.
Когда ширина окна аналогична ширине макета, страница должна выглядеть ровно так, как показано на макете. Лучше всего перед началом работы сразу выставить нужные размеры окна.
Квадраты на фоне абсолютно спозиционированы. Не нужно добиваться того, чтобы при любых размерах страницы они выглядели аналогично;
Квадраты могут быть добавлены на страничку в виду div-ов, или при помощи тегов <img>;
Ссылка внизу формы должна реагировать на наведение мыши. Вы можете посмотреть, как это должно выглядеть в состояниях соответствующего компонента.
Главная сложность верстки этой формы состоит в том, чтобы грамотно обрабатывать все состояния отдельных компонентов. Для каждого из ссостояний уже предусмотрен точный дизайн:
Иконки справа в текстовых полях дожны быть сверстаны при помощи псевдоэлементов;
Состояние focus можно проверить, перемещаясь по форме с помощью клаиши Tab.
Как делать элемент toggle, можно узнать из дополнительных материалов.