Ankhena

Можно использовать гриды. Контейнер с высотой 100vh и 2 строки. min-content и 1fr

Просто нарисовать фоновыми градиентами к одному блоку.
https://jsfiddle.net/02hfmet3
Адаптивный и с контентом внутри https://jsfiddle.net/kn3ha48d/

Есть еще вариант с 2мя псевдоэлементами, но подходит только для однотонного фона и фикс ширины. Во-первых, из-за обводки, во-вторых, из-за округления. Если блок будет иметь фикс ширину, то округление не важно, просто нужно скорректировать в зависимости от четности или нечетности.
https://jsfiddle.net/xm91ny4q/

.image:hover .but
Внутри элемента с классом .image нет элемента с классом .but -срабатывать не на чем.

Так вам нужно? https://jsfiddle.net/Ln20rckx/

funkydance,

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

relative, transform и ширину указать.

https://jsfiddle.net/2nh0xbvo/

Простейшая вариация
https://jsfiddle.net/pd7segt0/

Только у себя в head добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0">

без него @media не будут работать.

Градиентом

Количество введенных символов считайте на js и подставляйте в --color-width

body {
margin: 0
}

Можно открыть спецификацию и посмотреть из чего состоит свойство box-shadow

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

И вставить свои параметры

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.45);

Меняется, начните вводить текст и увидите.
Цвет placeholder меняется через псевдоэлемент ::placeholder

P.S. Чтобы по сто раз не писать цвет: белый, можно использовать слово inherit, тогда поля унаследуют цвета от родителя (у вас белый задан форме, от него и унаследуют)

h1 {
  position: relative;
  width: fit-content;
  padding:  0 10px;
}

h1::before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  background: #fff;
  animation: foo 3s;
}

@keyframes foo {
  0% {
    left: 0;
    right: 100%;
  }

  50% {
    left: 0;
    right: 0;
  }

  100% {
    left: 0;
    right: 100%;
  }
}

Зачем вы хедеру задали ширину 100px? Он ведь должен тянуться на всю ширину страницы.
Абсолют вам, вероятно, тоже не нужен. Возможно, sticky.

И если привести ваш код в порядок, то всё будет работать
https://jsfiddle.net/0vsk4qyf/

P.S. Навигацию хорошо бы делать списком, вложенным в nav.

UPD:
Модифицированный вариант, разбитый на 2 псевдо. Будет работать для любой ширины ссылок


OLD
Примерно так, градиент нужно доводить до ума (это самостоятельно) или заменить на SVG

Примерно так

Почему

Потому что float нужно использовать для обтекания одного элемента другим. Например, чтобы картинка обтекалась текстом.
А вовсе не для сеток.

Для сеток придуманы флексы (https://jsfiddle.net/pc4tyex8/) и гриды.
И, кстати, тогда можно будет избавиться от лишних оберток photorow

p.s. margin-left: 170px; не поставит блок по центру страницы. Используйте margin: 0 auto.

Обычное центрирование абсолютов

position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);

Либо родителю, если хочется оставить его в потоке

display: flex;
justify-content: center;
align-items: flex-end;

только убрать нижний padding

linear-gradient в сочетании с calc
css.yoksel.ru/linear-gradients

columns https://webref.ru/css/columns