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

Квадратные накладки, которые вы сделали чтобы имитировать угол, в данном случае не подойдет. Поэкспериментируйте с filter: drop-shadow() и clip-path

path {
   fill:inherit;
}

svg:hover{
  fill:#ffff;
  background: red;
}

Судя по макету тут как минимум 3 варианта. Если придерживаться вашей версии, что все в одном блоке dashboard, то будет примерно такая картина с модификатром (ключ_значение):

<div class="dashboard">
	<div class="dashboard__container">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item dashboard__item_type_1">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
			<div class="dashboard__item dashboard__item_type_small">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
			<div class="dashboard__item dashboard__item_type_small">
				<div class="dashboard__pic dashboard__pic_size_smal">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title dashboard__title_size_small">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__container">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
		</div>
	</div>
</div>

Второй вариант это миксовать с родителем:

<div class="dashboard">
	<div class="dashboard__container subscribers">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="dashboard__list subscribers__list">
			<div class="dashboard__item subscribers__item">
				<div class="dashboard__pic subscribers__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title subscribers__title">lorem</div>
					<div class="dashboard__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__container subscribtions">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="dashboard__list">
			<div class="dashboard__item">
				<div class="dashboard__pic">
					<img src="" alt="" class="dashboard__img">
				</div>
				<div class="dashboard__content">
					<div class="dashboard__title">lorem</div>
					<div class="dashboard_desc">lorem</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

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

<div class="dashboard">
	<div class="dashboard__subscribers subscribers">
		<div class="dashboard__header">
			Your channels
		</div>
		<div class="dashboard__btn btn">
			<div class="btn__ico"></div>
			<div class="btn__content">Create a chanell</div>
		</div>
		<div class="subscribers__list ">
			<div class="subscribers__item">
				<div class="ubscribers__pic">
					<img src="" alt="" class="subscribers__img">
				</div>
				<div class="subscribers__content">
					<div class="subscribers__title">lorem</div>
					<div class="subscribers__url">lorem</div>
				</div>
			</div>
		</div>
	</div>
	<div class="dashboard__subscribtions subscribtions">
		<div class="dashboard__header">
			Subscriptions
		</div>
		<div class="subscribtions__list">
			<div class="subscribtions__item">
				<div class="subscribtions__pic">
					<img src="" alt="" class="subscribtions__img">
				</div>
				<div class="subscribtions__content">
					<div class="subscribtions__title">lorem</div>
					<div class="subscribtions_desc">lorem</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>

Каждый из этих вариантов можно еще доработать

Поместите каждый слайд в пустой div а у же внутри него вставляйте свои блоки slick-child_flex
Помимо этого необходимо ограничить .wrapper-content по ширине так как flex-basis: 75% позволяет тянуть блок на сколько угодно и ваши слайды его благополучно растягивают как хотят. Как минимум такому флекс элементу нужно задать размер min-width: 0;

Если я правильно понимаю задачу, то можно так:

А там есть только переключатель, флажки

Это оно и есть https://habr.com/ru/post/489476/

Вот пример можно под себя настроить как угодно:

filter: drop-shadow(0 0 55px #558ed1);

не надо трогать родные блоки slick. Свои кастомные блоки вставляйте внутрь пустого div

<div class="slider">
    <div>
        <!-- А тут свой блок -->
    </div>
    <div>
        <!-- А тут свой блок -->
    </div>
</div>

Для ссылок пропишите:

display: flex;
justify-content: center;
align-items: center;

Только через js. Например https://select2.org/

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

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

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


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

Все правильно работает...
Псевдокласс :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 и меню позиционируется относительно него. Нужно изучить этот вопрос, но у меня получилось повторить, возможно так будет понятнее:

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