Как в Swiper js настроить такие стрелки?

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

Естественно, слайдер не должен быть зацикленным.

Как сделать что бы картинка сдвигала соседние боковые элементы?

Kostylev2021, но вы всё таки делайте песочницы самостоятельно, чтобы было что просто отредактировать, а не делать за вас.

Как сделать что бы картинка сдвигала соседние боковые элементы?

Kostylev2021, гридами без js на данный момент не выйдет, мне кажется.
А вот флексами получится.

Почему при загрузке на хостинг стили бутстрап остаются, а прописанные css стили слетают?

Any_dobrik,

Да, я сразу не достаточно полно описала, слетают не абсолютно все css стили, а только некоторые, вот фон, например, слетел, а цвет ссылок в футере нет ))

Правильный вопрос залог правильного ответа.

Ответ очевидный: неверно прописаны пути к картинкам в вашем файле стилей.

Что делать:
1. Читать https://htmlacademy.ru/blog/html/links
2. Смотреть что написано на вкладке Console в инструментах разработчика. Браузер там пишет где ищет картинку. Нужно сравнить с тем, где она на самом деле и исправить применив знания из статьи.

Как сделать что бы картинка сдвигала соседние боковые элементы?

1. Где песочница с вашими попытками и видимой проблемой?
2. Что должно происходить с другими строками?
3. Если строка одна, зачем для этого грид?

Можно ли задавать в инпутах одинакые имена для id и name в разных формах?

godsplane,

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

Кнопка ниже input CSS HTML. Как исправить?

Алескей Дворяшин, псевдоэлементом.
Мне просто иногда надоедает писать один и тот же трактат полностью, поэтому написала просто про фон.
Но на самом деле, декоративные элементы желательно делать стилями, а не держать их в разметке (по возможности). Т.е. если прям нельзя решить задачу стилями, например, анимации или при разных состояниях меняется много цветов в svg, тогда да, в разметку, спрайты..

Т.е. фонами, масками, псевдоэлементами.
Иконку лучше взять в SVG, а не шрифтовую.
Можно использовать кастомные свойства.

Если при изменении состояний иконка должна менять цвет, то масками https://codepen.io/noahblon/post/coloring-svgs-in-...

Кнопка ниже input CSS HTML. Как исправить?

Алескей Дворяшин,

А в input у меня иконка не вставляется, поэтому използовал button.

Вот вот.
Поэтому имеет смысл всюду button.

Хотя, иконку можно и фоном вставлять. И даже разумнее так делать.

Как сделать такой ховер в навигации?

Может кто-то уже делал такой или видел решение

Так вы же сами говорите, что это сделано

вот на этом сайте

Откройте инструменты разработчика и посмотрите.

И вообще это легко гуглится по чему-то типа "hover effects"

Кнопка ниже input CSS HTML. Как исправить?

Инпутам задали шрифт, а у кнопки остался по умолчанию, т.е. в разных браузерах разный.
И vertical-align по умолчанию baseline. Поменяйте на что-нибудь другое.

Но вообще, разумнее сетку сделать гридами и хлопот не знать.

И совсем не понятно, почему del это кнопка, а остальное инпуты.
Input с типом button использовали, когда тега button не было.
Сейчас нет смысла так писать, button и семантичнее и удобнее стилизовать.

Что не так со слайдером?

niklazh, мне как-то неловко это объяснять

Ваша анимация

0% {left: 0px;}
10% {left: -230px;}
20% {left: -460px;}
30% {left: -690px;}
40% {left: -920px;}
50% {left: -920px;}
60% {left: -920px;}
70% {left: -690px;}
80% {left: -460px;}
90% {left: -230px;}
100% {left: 0;}

Кадр шириной 230px

Первое положение - 0 - видим первый слайд
Второе -230 - задвинули на один слайд - видим второй,
Третье -460 - задвинули на ширину двух слайдов - видим третий
Четвертое -690 - задвинули на 3 слайда - не видим ничего

Так зачем туда задвинули-то?

Почему main все игнорирует?

Можно просто посчитать количество открывающий и закрывающих div.

Вы даже подписи им ставите.
Это у вас открывающая конструкция

<div class="container"> <!-- container начало -->
                    <div class="box">
                        <div class="slider middle"><!-- Слайдео начало -->

Это закрывающая

</div><!-- Сладйер конец -->

                </div><!-- container конец -->

p.s. и не очень понятно зачем столько оберток.

Что не так со слайдером?

niklazh, и флоат на флекс замените. Не могу смотреть :)

Что не так со слайдером?

niklazh,

за экран ничего не должно уезжать, на странице всегда должна быть 1 из 3 картинок

Я об этом и говорю, а у вас уезжает.
Поправьте анимацию так, чтобы не уезжало.

Что не так со слайдером?

Значит, на последнем кадре оно не должно уезжать за экран?

GitHub: Как настроить url адрес для многостраничного сайта?

Писать пути начиная с точки не вариант?

Почему не получается сделать РЕАЛЬНЫЙ размер шрифта меньше 16px при верстке сайта?

Aleksandr-Borisevich,

Вот в чем "минус" выставления "минимума шрифта" - не уменьшается шрифт, меньше заданного нами же, минимального.

Если пользователь плохо видит, то у него в настройках будет стоять такой увеличенный шрифт (или другими настройками, не важно). И вы, верстая, должны это понимать и предусматривать правила так, чтобы при этом ничего не развалилось.

Почему не получается сделать РЕАЛЬНЫЙ размер шрифта меньше 16px при верстке сайта?

Aleksandr-Borisevich,

А нужно ставить - минимальный!)))

Но имейте в виду, что у пользователя там может стоять что угодно.

И подключение всё таки поправьте, если я права.

Почему не получается сделать РЕАЛЬНЫЙ размер шрифта меньше 16px при верстке сайта?

Решать проблему в настройках вашего браузера.

Но вот это var(--font-family-bold) наводит на мысль о том, что шрифты вы всё таки подключаете неверно. Работать будут, но коллеги вас проклянут.
Шрифты разных жирностей подключаются с одним именем, а не с разными, как похоже сделано у вас.

Надо так:

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        }

Как при нажатие на li выводить ul список?

Гуглить "javascript accordeon".