Не адаптируется таблица в моем проекте?

https://github.com/kristina3531/SunTour
https://kristina3531.github.io/SunTour/

Как сверстать такой блок с треугольником?

Xочу использовать это решение, понравилось, что адаптируется под разные расширения экрана, но не понимаю как настроить. Подставляю свою картинку, она у меня разрешением 1040x553. Она растягивается, меняю ширину и высоту - не то.

Как сверстать такой блок с треугольником?

Xорошее решение, не совсем то, после треугольника идет наклонная линия:

Как сверстать такой блок с треугольником?

На уме пока два варианта: треугольник через псвевдоэлемент или трансформация.
Там сложность, после треугольника скошенная линия

Как исправить ошибку при выполнении команды "gulp pug"?

Проблема решилась: было неправильно написано "buld", а надо было "build", и вторая проблема что файлы index.pug и gulpfile.js создавались в консоли и у ниx была другая кодировка.

Как сделать переключение класса active между ссылками на чистом JS?

Спасибо

Как сформировать такой блок при помощи Masonry?

Спасибо огромное! Получилось!
Но есть один ньюанс: если подключаешь плагин imagesloaded - ничего не работает, подключен один Masonry.

let $grid = $('.grid').imagesLoaded( function() {
        $grid.masonry({
            // указываем класс элемента являющегося блоком в нашей сетке
            itemSelector: ".grid-item",
            gutter: 3,
            // true - если у вас все блоки одинаковой ширины
            singleMode: false,
            // columnWidth: 119,
            // перестраивает блоки при изменении размеров окна
            isResizable: true,
            // анимируем перестроение блоков
            isAnimated: true,
            // опции анимации - очередь и продолжительность анимации
            animationOptions: {
                queue: false,
                duration: 500
            }
          });

Странно почему так. Маленькие картинки становятся как надо, в консоли конечно ошибка, так как не подключен плагин:

Почему не выводится значение в поле input?

Не работает, помогла замена тега input на p, вместо name - class и все заработало. Почему с input не работает?

Как сделать выпадающее меню с отступом, чтобы оно не пропадало?

Спасибо, получилось!

Как сделать выпадающее меню с отступом, чтобы оно не пропадало?

У меня почему-то псевдоэлемент распологается внутри родителя. Вот код:

.dropdown {
	position: absolute;
	left: -15px;
	width: 244px;
	padding: 15px 0;
	box-shadow: 2px 3px 1px rgba(108, 104, 10, 0.33);
	border-radius: 3px;
	border: 1px solid #dddfdf;
	background-color: #fff;
	&::before {
		content: '';
		display: block;
		background-color: #333;
		height: 12px;
	}
}

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

Спасибо за ответ. Благодаря вашему ответу я поняла принцип, сделала немного по-другому:

.btn {
  color: #191919;
  font-family: "DIN Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: inline-block;
  padding: 30px 74px;
  border-top: 1px solid #191919;
  border-bottom: 1px solid #191919;
  position: relative;
}

.btn:before, .btn:after {
  content: '';
  display: block;
  width: 55%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.btn:before {
  bottom: 100%;
}

.btn:after {
  top: 100%;
}

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

вот я и хочу набраться опыта, поэтому и спрашиваю