Mizutsune

Такую раскладку блоков можно сделать например с помощью библиотеки masonry или поискать аналоги.

Можно конечно и без библиотек сделать. Например вот статья в которой есть материал по этой теме.

Не особо уверен что это получится сделать адекватно и просто с помощью одного только CSS, поэтому предложу такой вариант с JS:



В примере используется Mutation Observer, который можно заменить setInterval или рекурсивным вызовом или чем-нибудь ещё... вариантов много.

Ещё как вариант, можете посмотреть библиотеку anime.js. Возможно с помощью неё, тоже можно решить данную задачу, но точного ответа дать не могу.

Например как-то так:



В примере выше для функционала Drag & Drop or Draggable - используется библиотека Sortable. С её помощью реализуется основная "магия". Всё остальное настраивается по вкусу и цвету.

<div class="container">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

.container {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;  
    grid-template-areas: 
      "A B"
      "A C";
}

.card:nth-child(1) {
    grid-area: A;
}

.card:nth-child(2) {
    grid-area: B;
}

.card:nth-child(3) {
    grid-area: C;
}

Или:

.container{
    display: grid;
    grid-gap: 10px;  
    grid-template-columns: repeat(2, 1fr);
}

.card:nth-child(1) {
    grid-row: 1 / span 2;    
}

Добавил бургер меню на свой сайт портфолио.

Если речь идёт об этом портфолио, то тут ошибка в этом:

<script src="/source/js/script.js"></script>

- <script src="/source/js/script.js"></script>
+ <script src="source/js/script.js"></script>

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

Пример:

const swiper = new Swiper('.swiper', {
      breakpoints: {
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 4,
        },
        1024: {
          slidesPerView: 5,
        },
      }
    });

Как вариант можете попробовать такой плагин Vanilla-JS-Magic-Line-Navigation.

Можно конечно и на CSS сделать, но функционал будет сильно урезан и вообще, сама реализация скорее всего будет не слишком норм.

Если нет опыта в создании подобных компонентов, то наверное стоит использовать какую-нибудь готовую библиотеку для аккордеонов. Например такую Accordion или такую metismenujs или поискать какие-нибудь ещё варианты. С помощью любой из этих двух библиотек, можно решить описанную в вопросе задачу.

Или можно сделать как-то так без библиотек:

В этом элементе нет ничего сложного. Карточка, внутри иконка, заголовок и текст с описанием.



В песочнице в качестве иконок используются Inline SVG. Разумеется их лучше заменить тегами <img /> с путями до иконок, атрибутом alt и другими нужными атрибутами.

function getAllNextSiblings(el, subElement, selectorFilter) {
     let collection = [];
     let target = el.nextElementSibling;

     while (target) {
          if (target.matches(subElement)) break;
          if (selectorFilter && !target.matches(selectorFilter)) {
               target = target.nextElementSibling;
               continue;
          }
          collection.push(target.textContent.trim());
          target = target.nextElementSibling;
     }
     return collection;
}

// собираем заголовки и параграфы в массив объектов 
// разбивая полученные данные на группы
[...document.querySelectorAll("h1")].map(target => {
     return {
          heading: target.textContent,
          paragraphs: getAllNextSiblings(target, "h1", "p")
     };
});

В итоге имея например такую HTML - разметку:

<div class="container">
    <h1>Глава 1</h1>
    <p>Текстовой блок - 1</p>
    <p>Текстовой блок - 2</p>
    <p>Текстовой блок - 3</p>
    <p>Текстовой блок - 4</p>

    <h1>Глава 2</h1>
    <p>Текстовой блок - 1</p>
    <p>Текстовой блок - 2</p>
    <p>Текстовой блок - 3</p>
  </div>

Получим такой результат:

[
   {
      "heading": "Глава 1",
      "paragraphs": [
         "Текстовой блок - 1",
         "Текстовой блок - 2",
         "Текстовой блок - 3",
         "Текстовой блок - 4"
      ]
   },
   {
      "heading": "Глава 2",
      "paragraphs": [
         "Текстовой блок - 1",
         "Текстовой блок - 2",
         "Текстовой блок - 3"
      ]
   }
]

Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

Однако если закрытие по клику не нужно, разумеется можно сделать и тенью и псевдоэлементами как вам подсказали в комментариях.

Или если всё же нужно закрытие по клику, тогда вариантов несколько.

Первый вариант:

Оборачиваете off-canvas меню в обертку для которой устанавливаете полупрозрачный темный фон. При открытии меню, делаете обертку и меню видимыми.

Второй вариант:

Создаёте отдельный элемент для оверлея, задав нужный полупрозрачный темный фон. При открытии меню, делаете оверлей и меню видимыми.

Есть ещё несколько вариантов, но эти два наиболее подходящие для решения подобных задач.

Вот как пример библиотека onoffcanvas.

Если кратко ответить на вопрос, то как-то так:

1. При нажатии на кнопку Отправить, делаем валидацию полей.
2. Если валидация прошла успешно, скрываем форму и переходим к следующему шагу.
3. Показываем popup окно с уведомлением или добавляем активный класс скрытому блоку с уведомлением.
4. Profit.

Вообще обычно используется вызов popup окна для подобных уведомлений, так как оно лучше привлекает внимание пользователя и сообщает что то или иное действие прошло, например, успешно.

Можно сделать примерно так: