Евгения

Не оттуда пляшете.

Давайте я вам как девочка девочке всё объясню. На примере джинсов.
Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

Так вот, с сайтами аналогичная история.
10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

Кроме этого есть аспекты адаптивности.
И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

Поэтому, хороший дизайнер либо сопровождает работу верстальщика, либо пишет сопроводительное письмо с указанием зависимостей, либо и то и другое.

И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.

Студентам в начале курса говорила, кто хорошо в детстве играл в лайнс, тетрис и подобное, тот будет хорошо верстать.
Верстка это обычная геометрия средней школы записанная с помощью тегов и раскрашеная/подвинутая стилями. Всё.
Всякие JS и т.д. это просто следующий этап.

План действий может быть таким:
1. Берете/получаете макет
2. Внимательно рассматриваете его, мысленно разбивая на блоки. Думаете что куда может/должно растягиваться или уменьшаться при изменениях экрана и увеличении/уменьшении контента.
3. Если п.2. сразу не осилился, идете гулять или спать.
4. Возвращаетесь к п.2.
5. Верстаете понятные большие блоки, затем их заполняете. Разбивайте задачи более простые.

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

А совсем без проблем не выйдет, потому что экранов много, браузеров много, хотелок у заказчиков еще больше. Хорошо, когда эти хотелки интересные :)

Любые сайты, в том числе доски объявлений делаются так.
1) Все данные, объявления, пользователи и прочие хранятся в базе данных, например mysql, postgre sql и т.д.
2) Есть серверный язык программирования, php, python и т.д, самый популярный php.

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

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

Кратко работает примерно так. Определяется урл страницы, по урлу программный код на серверном языке определяет, это страница списка объявлений, или страница детального объявления.
Если это страница списка объявлений, то делается запрос к базе данных вывести список объявлений по таким-то условиям, затем серверный язык программирования выводит эти объявления в шаблоне списка объявлений.
Если это страница объявления детально, то делается запрос к базе данных получить конкретное объявление, выводится шаблон страницы объявления детально.

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

Как в такой системе работает форма создания объявления? На сервере пишется программный код, который получает данные из формы, и добавляет в базу данных новое объявление, соответственно, оно выводится на сайте по уже запрограммированному механизму.

Через чистый CSS никак не заменить. Только если вешать JS обработчик на input и менять класс label.

Если бы убрать :before, то можно было бы использовать

Нельзя. Селектор с :has у вас относится к label, а без него - к input.

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

попробуй position: absolute для контейнера с кнопками

.buttons{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    padding: 15px;
    background-color: rgb(78, 76, 76);
}

Проверил, работает

Правильная идея.
Объект, в котором каждая цифра будет ключом для четырёх значений - текст для единиц в мужском и женском роде, текст для десятков и сотен. Дополнительно текст для чисел 10-19.
Объект, в котором номер триады будет ключом для склонений и рода (тысяча, тысячи, тысяч, ж).
Функция, которая переводит триаду (три цифры) в текст нужного рода (м/ж).
Функция, которая по числу выбирает склонение (одна тысяча, две тысячи, одиннадцать тысяч).
Основная функция, которая разбирает число на триады, для каждой вызывает две другие функции и склеивает всё в строку.

На фронтенде это куки, localStorage, но как только пользователь почистит браузер или использует другой или еще что-то такое, он будет вынужден снова ставить эти галочки. Более корректно хранить данные в базе и запрашивать бэкенд.

<link rel="stylesheet" href="style.css">

почитай https://htmlbook.ru/content/dobavlenie-css

const array = [1, 255, 639, 9, 7, 8, 5, 4, 2];

const randomIndex = arr => Math.round(Math.random() * (arr.length-1));

const randomEl = arr => {
    let index = randomIndex(arr), prev = arr[index];
    return () => {
        do {
          index = randomIndex(arr);
        }
  	while(prev === arr[index]);
        prev = arr[index];
        return arr[index];
    }
}

const getRandomEl = randomEl(array);

for(let i = 0; i < 10; i++) {
    console.log(getRandomEl());
}

(random-размышления с привкусом кольца вычетов)
вариант без дополнительных попыток в случае повторов:

function createRandom(arr) {
    const uniqArr = [...new Set(arr)]; // выкидываем дубликаты из массива

    let size = uniqArr.length;
    let index = -1;

    return () => {
        const rand = Math.floor(Math.random() * size);
        index = (rand + index + 1) % uniqArr.length;
        size = uniqArr.length - 1;
        return uniqArr[index];
    };
}

// использование
const getRand = createRandom([0, 1, 2, 3]);

for (let i = 0; i < 15; ++i) {
    console.log(getRand());
}

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

Надо просто фон вынести в отдельный элемент тоже:

Вместо perspective: 15000px; нужно значение поменьше: perspective: 700px;

Лучше возьмите готовый слайдер.

Как делается зацикливание:
Берется последний слайд, создается его копия и помещается в начало.
Это можно повторять бесконечно.
А можно только для одного крайнего слайда и после перехода на него, слайдер без анимаций перестраивается в начальное состояние, незаметно для глаза.

У нас три координаты - XYZ. Для CSS все элементы на странице - плоские, у них нет толщины, и их размеры по оси Z нулевые. Поэтому CSS за нас не угадает, куда должен смещаться transform-origin по оси Z для кирпичика, который существует исключительно в нашем воображении. Вы смещаете грани кирпичика в отрицательные значения по оси Z, но точка transform-origin, через которую проходит ось вращения, остается в плоскости Z = 0.

Получается, что вам нужно как-то вручную совместить ось вращения и центр кирпичика. Тут два пути - либо сместить точку transform-origin на пол кирпичика вглубь по Z:

.cube {
    transform-origin: 50% 50% -25px;
}

Так ось вращения будет проходить через его текущий центр. Либо сместить грани кирпичика, чтобы он изначально собирался не "весь вглубь экрана", а "половина вглубь, половина к нам". Его центр сразу будет в плоскости Z = 0, где по умолчанию находится transform origin, и не нужно будет ничего дополнительно двигать.

transform-origin: center center -25px; для .cube
проблема в том, что "брусок" ниже плоскости Z, вокруг которой по умолчанию и происходит итоговое вращение — вот его при 3Д трансформации и плющит

Нужно сделать так называемый стек из svg, а не символьный спрайт.
И его можно вставлять куда угодно, как обычно в use или в img или в CSS (псевдо, фоны, маски...).
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

Если вы имеете в виду вставку непосредственно в свойство content псевдоэлемента, то да, тоже можно, но прямо скажем неудобно потом с этим работать. Но это верно и для всего остального, отличного от текста.

Обернуть вызов функции в Promise и использовать await.
И забудьте уже про var. Переходите на let/const.

Для импортирования JSON-файлов нужен какой-нибудь сборщик, который сможет зарезолвить их. Вы можете получить свои данные обычным запросом:

const response = await fetch('data.json');
const data = await response.json();

console.log(data);

Также, для работы Вам потребуется локальный сервер, например: live-server или serve. Запускать можно при помощи npx, например: npx serve.