Ankhena

Если не получается подобрать, то вырезаете картинку и в генератор ее www.colorzilla.com/gradient-editor

Используйте множественный фон и градиенты
https://jsfiddle.net/g0886jxz/1/

Цвета и углы настраивайте под себя

1.
Если menu, то ul лишний https://webref.ru/html/menu
Если хочется ul, то nav

2.
Чаще всего не надо 2 раза писать меню.
Меню одно и меняется только его положение выстраивание с помощью CSS (например, flex).
Делается кнопочка, бутербродик, скрытая на десктопах, видимая на мобильных.
На мобильных меню сначала скрыто и открывается по кнопочке.

Фотошопом и дизайнерскими качествами не обладаю, верстал именно с готовых psd. Какие шаги необходимы к построению портфолио?

Если считаете, что заказчикам интересен только код, а до дизайна все равно, то просто выберите хороших шрифт и сочетание цветов фон/текст/обводки.

Или адаптируйте под себя любой из понравившихся шаблонов.

Или позовите дизайнера.

У Вас нет изменения цвета с красного на зеленый.
Есть 2 блока, один красный, другой зеленый и у них меняется display. (Правда в Вашем коде появления красного блока я не добилась)
display не анимируется с помощью transition, только opacity, либо JS/JQ.

Таблица одна.
Ячейки с "6" не объединять, писать 6 transparent или цветом фона. При наведении - показывать.
Либо показывать с помощью JS.

Видимо, потому что, у Вас есть правая и нижняя граница, а закругляете Вы левый нижний угол.

Если content будет не пустой, то угол закруглится.

Если content пустой, то не понятно зачем такую фигуру делать с помощью border'ов.

Расскажите подробнее чего нужно добиться.

UPD: https://jsfiddle.net/vqs960bz/
codepen.io/anon/pen/JbOxyV

В общем случае значения высоты и ширины применяются к блочным элементам, а у Вас инлайновые.

UPD:
Заменить .registerfrom > input {} на .registerfrom input {}

input:checked + span {}

И я бы span заменила на label

.first()
Возвращает первый элемент из всех выбранных. Эквивалентно .eq(0). Метод имеет один вариант использования:
.first():jQueryv:1.4
Метод не имеет параметров.

Примеры использования:
$("div").first() вернет первый div-элемент на странице.
$("div.bigBlock").first() вернет первый div-элемент с классом bigBlock.

goo.gl/YivVZF

ширина 100vw
высота 100vh