Текст
Страница с текстовым содержимым, в котором я старался использовать максимальное количество различных тегов, не забывая про семантику.
ПерейтиДобрый день, читающий это. Я благодарен за возможность поучаствовать в конкурсе. Задачи оказались интересными. По мере выполнения мне пришлось вспоминать уже подзабытые вещи, а так же понять, что всего знать невозможно) Всегда есть что-то, что можно положить в свою копилочку.
При старте думал о стеке много. Изначально хотель сделать всё на react. Но для таких задач он был бы избыточен. Поэтому решил использовать обычную связку Vite+Vanilla. Выбор сделан в пользу того, что это современно, удобно.
Vite имеет дев-сервер с hmr, легко собирает проект. А так же позволяет не превращять в адские муки жизнь)) Я имею в виду форматирование.
В проект я поставил Eslint и Prettier. Эти инструменты позволяют не думать о форматировании. Достаточно запустить пару команд и код выровнен как надо.
И ещё раз хочу поблагодарить за возможность. Мне всё понравилось. Пусть у меня и не получилось всё идеально, но я действительно старался.
Форма
Вёрстка формы. Да, не получилось реализовать pixel perfect, но я старался. Форму сделал полностью функциональной. При сабмите она собирает данные и выводит в модальном окне. Выход из модального окна осуществляется при клике на кнопку или при клике за пределами модального окна. Сам контент решил генерировать через создание элементов в JS и подключение его к контейнеру. Валидацию полей решил оставить браузерную (проверка обязательных полей).
ПерейтиКнопки
Вёрстка кнопок в различных состояних: статична, ховер, активная и отклено. Для удобства добавил скрипт и свитчер для выключения всех кнопок. Была мысль сделать генерацию всех кнопок полностью через JS (с входными параметрами нужной кнопки).
ПерейтиСхема
Вёрстку схемы сделал на гридах. Думаю, что есть альтернативный путь - через canvas в JS.
ПерейтиСлайдер
Простой слайдер на html и css, который адаптируется под ширину экрана.
ПерейтиЧёрная страница
Это действительно вызов. Мои глаза сломались в первые пару минут. Но потом со второго подхода что-то получилось. У меня, конечно, остались вопросики... Да и не уверен, что полученный мной результат верен :) Но вроде выглядит как страница чего-то.
ПерейтиКрасота
Реализаци кнопки и свитчера. К сожалению добить свитчер не получилось. Найдена точка для роста: реализация 3D-элементов в css.
Перейти