Вадим

Ну как-то так. Набросал на коленке.

.pic {
  display: inline-block;

}

.pic img {
  opacity: 1;
  transition: opacity 1s linear;  
}

.pic img.invisible {
  opacity: 0;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}

document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) return
  
  const img = document.querySelector('.pic img')
  
  img.classList.add('invisible')
  
  img.ontransitionend = () => {
    img.onload = () => img.classList.remove('invisible')
    img.src = e.target.dataset.src
    
    document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
    e.target.classList.add('active')
  } 
})

P.s. недостатком данного кода является то, что загрузка следующей картинки начинается только после того, как первая исчезла. Это можно оптимизировать, но не всёж за Вас решать :-)
А ещё не обязательно каждый раз искать элементы в DOM, если они не динамически генерируются.

да и немного непонятно почему две навигационных панелей

А код вообще Вы писали? А то уже начинает выглядеть так будто бы "я ничего не знаю, скопиравал откуда-то, но не работает, исправьте за меня, у меня лапки".

Смотрим в разметку, видим:

<div class="navigation-auto">
            <div class="auto-btn1"></div>
            <div class="auto-btn2"></div>
            <div class="auto-btn3"></div>
            <div class="auto-btn4"></div>
        </div>

<div class="navigation-manual">
            <label for="radio1" class="manual-btn"></label>
            <label for="radio2" class="manual-btn"></label>
            <label for="radio3" class="manual-btn"></label>
            <label for="radio4" class="manual-btn"></label>
          </div>

у меня именно не идет свайп

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

Ну и снова нужно лишь внимательно прочитать код.
Смотрим в консоль - ошибок нет. JS работает.
Каков механизм переключения слайдов у Вас? Через html и css на радиокнопках. Отлично. Смотрим что может пойти не так.
Читаем CSS:

#radio1:checked ~ .first {
  margin-left: 0;
}
#radio2:checked ~ .first {
  margin-left: -20%;
}
#radio3:checked ~ .first {
  margin-left: -40%;
}
#radio4:checked ~ .first {
  margin-left: -60%;
}

Читаем HTML:

<div class="slides">
        <!--radio buttons start-->
        <input type="radio" name="radio-btn" id="radio1">
        <input type="radio" name="radio-btn" id="radio2">
        <input type="radio" name="radio-btn" id="radio3">
        <input type="radio" name="radio-btn" id="radio4">
        <!--radio buttons end-->

        <!--slide images start-->
        <div class="slide-first">
          <img src="https://placehold.co/800x500" alt="" >
        </div>

        <div class="slide">
          <img src="https://placehold.co/801x501" alt="" >
        </div>

        <div class="slide">
          <img src="https://placehold.co/802x502" alt="" >
        </div>

Вы видите тут блок, у которого был бы класс .first, который ожидается в css?
Нет, его нет. Есть slide-first.
Классы разделяются пробелом, а не тире. Соответственно нужно либо в css либо в html внести правки чтобы было одинаково и заработает.

На все Ваши вопросы есть ответы прямо в браузере, если Вы научитесь пользоваться инструментами разработчика.
В данном случае - инспектор разметки. Информации в интернете достаточно.

почему веб страница выводит в подпункт 1.1. откуда вторая 1?

Её добавляет вот этот код:

ol ol li:before {
 counter-increment: list2; 
 content: counter(list1) "." counter(list2) ". "; 
}

ol ol к какому дочернему элементу идет обращение?

Ко всем ol которые вложены на любом уровне в другой ol. Поэтому если Вы во вложенный ol добавите ещё один ol, то нумерация у них будет одинаковая.

как правильно присвоить доп класс, чтобы это работало

Во-первых, не существует "правильно". Если работает и никого это не смущает - значит решение приемлемое.
Во-вторых, зависит от того, придерживаетесь ли Вы какой-то методологии или нет. Поэтому ответ будет в наиболее распространённом варианте - будто бы придерживаетесь БЭМ.

.block-name { // название класса блока - block-name
  // основные стили
}

.block_type_codestyle{ // добавляем модификатор type со значением codestyle (потому что блок про кодстайл, хотя это не лучший подход для выбора названия класса, но для примера пойдёт)
  // стили, специфичные для этого блока. Например, конкретное фоновое изображение.
}

Однако, такой подход подойдёт для статических сайтов, но не подойдёт для сайтов, у которых контент может меняться через систему управления контентом - CMS.
В таком случае, ссылка на изображение должна устанавливаться не в стилях напрямую, а где-то в HTML. Как правило - inline стилях.
То есть:

<div class="block-name" style="background-image: url('...')" >...</div>

.

Однако, так же стоит учесть нюанс, что изображение могут быть контентно значимыми (но вроде бы не Ваш случай). То есть изображение, которое насёт полезную нагрузку для информирования пользователя.
В таком случае, это должны быть не фоновые картинки, а img.

list-style-type: none

а загуглить это быстрее чем задать тут вопрос..

https://developer.mozilla.org/en-US/docs/Web/CSS/-...

Как...?

Научиться элементарному инспектированию разметки.
Увидеть что стили применяются по селектору
.gantt .tick и .gantt .tick.thick.

Ну а дальше пойти в эти стили и поменять на что нужно. Цвет, толщину и тд.

Ну и ещё можно пойти почитать документацию по библиотеке, которая строит диаграмму - https://frappe.io/gantt может там будет что-то про стилизацию.

И то и то на css не сделать.
Можно найти svg через js, взять его разметку, прогнать через encode и по аналогии как base64 картинку задать в переменную, или напрямую в свойство. То есть url("data:image/svg+xml;utf8...
https://stackoverflow.com/questions/10768451/inlin... тут есть примеры.

В качестве background-image можно разве что сделать её или контент абсолютом и разрулить z-index

ну а почему бы не присвоить ему класс-модификатор, а не id?

а так... если Вы один на проекте и\или нет никаких соглашений, можете использовать id как хотите.
Только держите в голове его особенности и ограничения:
- Должен быть уникальным в рамках страницы
- Специфичность селектора по id выше чем по классу.

Tereverda,

Сделал простой код ниже, но тогда увеличивается длина страницы - все съезжает вниз.
Как сделать, чтобы исчезающий блок накладывается как бы на контент и был выше?

Знаете что такое поток в вёрстке?
Как убрать элемент из потока?
Вот это и нужно сделать.

Причём я же Вам сказал что нужно сделать, зачем Вы полезли в display?
Накидал демку:

https://www.youtube.com/watch?v=khjVPkO35F0&list=W...

Через css, пожалуй только с помощью :not(:has) - браузерная поддержка не полная. Проверяйте перед использованием.
Либо поправить шаблон чтобы не было переноса строки внутри пустого селекта, тогда будет работать :empty.



Иначе только на js обходить селекты, возможно через mutation observer и накидывать нужный класс для стилизации

sirenko, Для первого раза не плохо.
Но есть ряд нюансов:
1) Дивы нельзя вкладывать в списки. Это не валидно
2) Вы хардкодите значения для каждого элемента. Это лишнее.
3) Если текста будет другое количество, то всё поплывёт.
4) Не нужно два псевдоэлемента, чтобы нарисовать 2 линии. Достаточно одного для длинной линии и другого для цифры поверх.

Переписал на скорую руку (какие то стили для Вас могут оказаться лишними. Прописаны исключительно для демки):

Автор экспортировал изображение с прозрачностью снизу. По факту изображение растягивается как положено. Просто нижняя часть это как раз прозрачность.

1) Не существует HTML элемента wrapper.
2) Судя по всему Вы не закрыли header и разместили в нём main. Это не корректно. У Вас же тело не в голову вложены, а между ними шея ещё. То есть они идут друг за другом.
3) Интерактивные элементы не стоит вкладывать друг в друга. Это плохая практика. Поэтому не нужно ложить кнопки в ссылки и наоборот.
4) Про див судя по всему у Вас где-то не соответствие количество открытых и закрытых дивов.
5) Не закрытый main

- Ошибку про ссылку в списке Вы не показываете. (Хотя в первом li ссылка не закрыта)
- Часто ошибки имеют каскадный эффект. Исправляешь одну - исправляется десяток.

P.s.

Мой первый сайт дался мне непросто

Это нормально

nth-child

.app__block:nth-child(3) {
  margin-bottom: 8px;
}

.app__block:nth-child(3) .item-hr {
  display: none
}

Что значит "не задаётся бэкграунд"? Всё накидывается и работает в соответствии с тем, что указано в css.
У nav белый фон, у списка внутри - серый, согласно универсальному селектору

* {
    box-sizing: border-box;
    background: #E5E5E5;
}

(без чёткого понимания всех нюансов этого селектора использовать его не рекомендуется).

ul {
  list-style-position: inside;
}

Можно конечно отключать poiner-events, но если включать его для текста, то это всё равно приведёт к той же проблеме. Что под текстом не будет работать.

Поковырял немного:


Основное что изменил - отслеживание событий mousemove не на канвасе, а на всей секции и e.offsetX на e.clientX

Для этого есть nth-child

Таким образом:

.photoblock .nav:nth-child(1) { color: red }
.photoblock .nav:nth-child(2) { color: green }
.photoblock .nav:nth-child(3) { color: blue }

и так далее