battery789, либо вы накосячили с расширением сайта, либо с закрытием тега, из-за чего ваш код обрабатывается как текст внутри другого тега. Последний вариант, конечно, возможен, но всё равно добиться такого контекста вложенности очень сложно, обычно только часть кода превращается в текст из-за такой ошибки.
Без понимания кода и расширения вашего файла сказать точно невозможно.
Роман Вопроскин, помимо этого, хочу сказать, что ваша идея с этими классами повсюду -- может сыграть злую шутку при адаптивности, если злоупотреблять ими и использовать их неверно.
Антон Добрынин, будут возможны всякие казусы, связанные с тем, что flexbox не умеет управлять сразу и строкой, и строчкой. Если данные в одной колонке на одной строке будут сильно больше другой, он будет расстягивать эту колонку в строке, соответственно, из-за этого в эта колонка будет отличаться по ширине от других аналогичных в других строках.
Либо всё задавать опять в пикселях, процентах и т. п. Что как бы решает вышеизложенную проблему, но не очень.
Sam Fises, как такового курса не найдёте, так как вам надо знать CSS и HTML, как минимум. Большинство анимаций основаны на CSS-свойствах, но не все, более сложные анимации и взаимодействия делаются на JS и SVG (к примеру, GSAP) как дополнение к CSS.
В вашем случае вам можно сделать с помощью тупой смены значение свойств элементов по смене класса через JS. Почему JS: класс должен меняться не только при наведении (hover), но и оставаться в случае активного (focus) поля ввода и если в поле есть данные.
Иными словами, курсом «как работают transition и keyframes в CSS» вам не обойтись.
