Сергей delphinpro

Сервер к которому идет обращение, должен отправить заголовки Access-Control-Allow-*

То есть проблема решается на стороне сервера апи, а не на клиенте.

как можно прописать нужна структура

вот такая структура вполне подойдёт

<div class="grid">
  <div class="image"><img src=""></div>
  <div class="image"><img src=""></div>
  <div class="image"><img src=""></div>
</div>

Далее делаете сетку 2 столба х 4 строки
И размещаете элементы в нужных ячейках сетки.

Дополнительная информация по гридам https://yandex.ru/search/?text=css+grid

https://yandex.ru/search/?text=javascript+custom+s...

Делать валидацию при каждом нажатии

doOrderBtn.addEventListener('click', function (el) {
    const phio = document.querySelector('#name')
    const phone = document.querySelector('#phone')
    const address = document.querySelector('#address')
    if (phio.value < 1 && phone.value < 1 && address.value < 1) {
        el.preventDefault()
    }
});

PS
Лучше вешать на submit формы.

.layout {
    width: 1660px;
+   max-width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 100px;
    margin: auto;
}

.layout {
-   width: 1660px;
+   width: 100%;
+   max-width: 1660px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    row-gap: 100px;
    margin: auto;
}

От обратного

form:has(:invalid) button {
  display: none;
}

-----------------------
Но вообще с точки зрения юзабилити, я считаю плохой практикой прятать или дизаблить кнопку.
Лишня когнитивная нагрузка на пользователя: "где кнопка? как отправить форму? почему она не нажимается? я же вроже все заполнил..."

Лучше оставить возможность нажатия кнопки отправки и прямо уведомлять юзера о его ошибках по нажатию.

Почему у вас код контроллера лежит в неймспейсе App\Http\Controllers (хотя и файла такого не видно)
В роутах вы запрашиваете из неймспейса \App\Http\Controllers\Api\V2
Это как-то странно.

PS

'password' => 'required|min:8|regex:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/',

Для валидации паролей есть специальные правила https://laravel.com/docs/11.x/validation#validatin...

нарисовать градиентом на фоне грид-контейнера

Нормально всё работает

window.addEventListener('DOMContentLoaded', function() {
    let game = localStorage.getItem('game');
    document.getElementById('game').innerHTML = game;
});

Посмотрите в dev-tools что реально записывается. Атрибут class там по-любому есть.

Скорее всего, вы просто ошиблись в наименовании класса, вот стили и не применяются.

pointer-events: none; - блок с таким стилем "невидим" для указателя (мышки), и никак на нее не реагирует

Я не вижу каких-то особых требований к разметке.
Поэтому два грид-контейнера

первые две строки
grid-template-columns: 100px repeat(3, 1fr);

вторые две строки
grid-template-columns: repeat(3, 1fr);

Нахер здесь бутстрап, мне непонятно. Он для жестко-заданной 12-колонной сетки только и подходит...

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

Однако, вы можете слушать событие oninput и проверять, что ввел пользователь.
далее проверять регуляркой наличие "ненужных" символов, и например, выводить сообщение

/[a-z0-9!@#$%^&*\(\)_\+]/i