Виталий Першин

В slick к этому нужно подходить иначе. Каждый слайд плотно прижат друг к другу и мы их не трогаем, мы управляем содержимым слайдов, то есть непосредственно нашими блоками. Тут нужно понимать как работают сетки по типу bootstrap и как пользоваться отрицательными отступами. Предположим нам необходимо сделать отступы 20px, это по 10 пикселей слева и справа от нашего блока то есть width: calc(100% - 20px); margin: 0 10px;
Блоку в котором находится слайдер мы задаем overflow: hidden; , а самому слайдеру мы задаем отрицательные отступы в те же 10 пикселей margin: 0 -10px
Похожий пример, который я делал ранее:

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

Это вопрос удобства лично для вас, поисковым системам без разницы как вы будете создавать страницы. Если вам нужно пару статических страниц, то можно просто залить html, но если вы собираетесь добавлять информацию, менять её и создавать новые страницы в большом количестве, то вы с ума сойдете делать это в ручную, еще хуже будут обстоять дела, когда вы решите изменить например какой-то кусочек кода, вы полезете во все файлы и будете менять каждый. Чтобы этого не случалось вам необходимо использовать какую-либо cms. Для начала установите подходящую cms посмотрите из чего состоит дефолтный шаблон и начинайте переносить свою разметку по урокам, документации или методом тыка.

Один из вариантов. Одно изображение повторяем 2 раза, второе со смещением на 50% от размера изображения


Второй вариант это повторяющийся патерн, который нужно научится вырезать. Уроков на эту темы найти не сложно

lizaposhlaia, "Просто на уроке физики учитель сказал мол зачем учить HTML, CSS, JS, если есть конструкторы."
Откуда ему знать зачем учить, если он даже не учитель информатики... в двух словах конструктор, это конструктор в прямом смысле этого слова, в нем есть какие-то детали из которых можно сделать что-то, но не все, причем можно сделать как-то, но никак по другому. Кроме того конструкторы пишут такие же "Физики", кто сказал, что эти физики вообще понимают что делают, есть десятки популярных технологий и методологий, конструктор решает за вас, что использовать, список можно продолжать бесконечно. Про бекенд я вообще молчу это тачанка запряженная овцами и машины из неё не выйдет, но итоговая цена просто космос. Любой более менее удавшийся стартовый бизнес съезжает с конструктора при первой же возможности, как только понимаем в какой заднице он оказался.

Все правильно работает...
Псевдокласс :active действует только в момент когда вы жмете на элемент, до момента когда вы его не отпустите.
В первом примере у вас у вас transition-duration (Продолжительность перехода) равна 0 а задержка (transition-delay) равна 1 секунде, но в состоянии :active задержка рана 0. Поэтому в момент клика мы моментально делаем кнопку невидимой так как нет ни задержки ни продолжительности и после того как отпускаем, кнопка появляется через 1 секунду, потому что :active {transition-delay: 0s;} больше нет, а значит время задержки снова равно 1s и мы возвращаемся в исходное положение.

Второй пример работает так же, но transition-duration (Продолжительность перехода) у нас есть и вот сколько вы удерживали кнопку во время клика, на столько она успела стать прозрачной, после чего мы возвращаемся в обратное состояние через 1 секунду, поставьте transition-duration например 5 секунд и увидите что за один клик ничего не происходит, но чем дольше держим тем прозрачнее становится кнопка и начинает возвращаться в исходное положение через секунду


Отсюда вопрос: Какое поведение вы ожидаете?

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

Раньше не замечал этого. Интересный вопрос. В общем блок который имеет overflow: hidden в вашем случае types-carousel имеет свойство position: static, а вот его родитель position: relative и меню позиционируется относительно него. Нужно изучить этот вопрос, но у меня получилось повторить, возможно так будет понятнее:

parallax

https://matthew.wagerfield.com/parallax/

В Slider Revolution он вроде 3d parallax называется, но нет смысла платить за их дополнения, если есть готовые решения отличного качества. Просто в слайд вставляете нужный код и готово.

Но, насколько я понимаю, написана она опираясь на старый стандарт.

Новый стандарт основан на старом, поэтому вы ничего лишнего не узнаете, а такого детального и понятного разбора, как например про this я не встречал нигде. Однозначно стоит.

Судя по документации это ресурсы заключенные между build и endbuild:

<!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->

В данном блоке у нас подключаемые css файлы которые будут объединены в один combined.css

Нужно добавить padding ко всему слайдеру, потому что у всех слайдеров контейнер со слайдами имеет свойство overflow, вот оно и режет вашу тень. Либо добавить тень на сам контейнер со слайдами. Чтобы сказать что-то конкретное нужно смотреть код.

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

Каждый салайд сделайте пустым дивом без стилей и в него свою карточку вставляйте, а уже её позиционируйте как хотите внутри дефолтного слайда

html, body {padding: 0; margin: 0;font-size: 16px; font-family: Arial;}
body { margin: 20px; }

.accordion-menu { list-style-type: none; background-color: #eee; }

.accordion-menu ul li {
	list-style-type: none;
	cursor: pointer; }

.accordion-menu a,
.accordion-menu a:visited { border: none; cursor: pointer; color: #45a030; }

.accordion-menu .menu-item-has-children>a:hover:before,
.accordion-menu a:hover { color: #f59525; }

.accordion-menu .menu-item { padding-left: 7px; position: relative; }
.accordion-menu .menu-item-has-children >a:before {
	position: absolute;
	display: block;
	cursor: pointer;
	color: #45a030;
	left: -7px;
	content: 'X'; }
.accordion-menu .menu-item-has-children.show:before {
	content: '>';
	left: -9px; }

.accordion-menu .current-menu-item a { color: #f59525; cursor: default; }
/*
.accordion-menu .menu-item-has-children .sub-menu { overflow: hidden; height: 0; opacity: 0; transition: all 0.4s ease-in; }
.accordion-menu .menu-item-has-children.show > .sub-menu { overflow: visible; height: auto; opacity: 1; }
*/
.accordion-menu .sub-menu { padding-left: 7px; position: relative; }

На чистом css не получится. и без дополнительных тегов тоже. Нужно через js отследить событие окончания загрузки изображения и после этого плавно показать блок в котором оно помещено

Не надо увеличивать больше реального размера... Увеличивайте из уменьшенного в реальное:

@keyframes post-get {
  0% {
    -webkit-transform: scale(.5);
            transform: scale(.5);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}