Треугольник верстаются:
- бордерами
- градиентами
- повернутым псевдо квадратиком
- svg
- ещё пачкой способов, которая легко гуглится по словам "css треугольники" и "css треугольники генератор"
Я тут уже 100500 раз писала об этом.
Reset устарел еще до normalize (классические версии).
В reset сначала всё обнуляется, потом пишется своё. Вопрос, зачем эти развлечения?
Имеет смысл сделать свой собственный файлик начальных стилей.
1. после margin:0 нет ;
2. bordder-box пишется не так.
3. В calc указаны 3rem. 2 из них уходят на марджин у pre. А третий должен компенсировать полосу прокрутки. Но этого мало.
Вывод: не стоит задавать фикс ширины трем блокам. Если двум нужна фикс, третьему оставляйте что осталось. Можно использовать flex-grow. Но я предпочитаю гриды.
Разбейте задачу на составляющие мелки задачи.
Гуглите по одной.
Типа того:
1. События input
2. Считывание значений input
3. Сравнение в js
4. Дальше не понятно, потому что кто его знает куда должна прийти страница. Возможно, "открыть ссылку на js".
