Спойлер JS display:none, как сделать?

LRN,

Тогда пока не понимаю, что не так

Смотрите какие ещё скрипты подключены и мешают.

Спойлер JS display:none, как сделать?

LRN, тогда пора делать песочницу с демонстрацией проблемы на codepen.io или jsfiddle.net или аналоге

Спойлер JS display:none, как сделать?

LRN, так ищите, кто это дописывает.
.slideToggle использует overflow, но исключительно во время анимации открытия или закрытия. Когда анимация завершена, этих свойств не остается.

И уж точно не дописывает list-item. Это только нерадивый кодописец может такое заинлайнить.

Спойлер JS display:none, как сделать?

LRN, почему вы не можете поменять в скрипте добавляемые и убираемые классы?
Или убрать overflow из тех классов, которые используются сейчас?

$('.id-011, .id-012, .id-013, .id-014, .id-015, .id-016, .id-017, .id-018, .id-019, .id-020')

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

Как научиться решать логические задачи?

hint000, спасибо, у меня это уже было в детстве.

Как научиться решать логические задачи?

pclv_ktrn,

Заметила, что интуитивно часто иду в сторону верного решения, но дожать до конца не выходит, теряюсь в своих догадках, вывод не могу сделать. Есть проблема с выстраиванием алгоритма решения

Может отступить на шаг или несколько назад? К более простым задачам, которые сможете решить до конца. А потом усложнять. Взять хоть самую классику, Математическую смекалку Кордемского.

Нужен плагин вертикального меню?

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

Как изобразить остаток в бутылке через CSS, JS?

А как бы вы закрашивали цветом обычный прямоугольный столбик?
Вот тоже самое, только поверх бутылка с прозрачной частью или маска.

Скажите пожалуйста, как сделать одинаковое расстояние между блоками?

Флекс тут не поможет.
1. Самый простой вариант это CSS columns
2. Можно использовать любой готовый скрипт из семейства masonry. Легко гуглится.
3. Либо считать высоту на JS и тогда можно и флекс.
4. Вариант из очень будущего (всё таки вопросы тут живут долго, на всякий напишу): раскладка masonry в grid.

Нужны ли везде дивы и как должна выглядеть верстка?

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

Отсюда вопрос: какая цель у той обертки, которую вы хотите сделать? Чего ради?

Конкретно про лого: обычно лого это ссылка на главную страницу сайта, т.е. как-то условно так <a class="logo" href="/"><img></a>

Я бы сформулировала правило так: чем проще, тем лучше, если нет аргументов делать иначе.

Например: меню сайта.
Проще: накидать ссылок россыпью.
Но есть аргументы доступности, поэтому россыпью не делают, а оборачивают в список, а его в свою очередь в nav

Т.е. решаем в каждой конкретной ситуации.

Как реализовать такой эффект CSS?

поменять форму clip-path

Как именовать по бэм?

Как-то так

Можно выделить в блоки заголовки, подзаголовки и т.д. и им давать модификаторы. Либо плясать от секций.
Почитайте в спеке про уровни переопределения.

<section class="team">
    <div class="container">
      <header class="team__header"> <!-- не ясно зачем вообще эта обертка -->
        <h2 class="team__title"></h2>
        <h3 class="team__subtitle"></h3>
      </header>
      <ul class="team__list">
        <li class="team__item"> <!-- Можно выделить в блок, если зачем-то нужно -->
          <img class="team__image" src="" alt=""> <!-- наверное с оберткой будет -->
          <h4 class="item__title"></h4>
          <p class="item__position"></p>
          <ul class="team__social social">
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
            <li class="social__item">
              <a href="" class="social__link">
                <span class="visually-hidden">Наш аккаунт в Instagram</span>
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </section>

Как в GitHub выполнить поиск в коде по ключевому слову?

MishaXXL, залогиньтесь чтоль..

Почему не работает hover в css?

:hover не работает, потому что пробел лишний.
Должно быть так a:hover {}

Почему не работает hover в css?

Примите правки вопроса или отформатируйте код с помощью <code></code>

Почему в justifiedGallery первая фото заполняет всю ячейку?

Андрей,

сделал в 3 колонки

нужно так

Ну так на скрине не 3 колонки...

Почему в justifiedGallery первая фото заполняет всю ячейку?

Андрей,

Та. наполнять будет человек, для него делать пропорции,кадрировать то темный лес

Тогда брать плагин и не парить мозг. Как лягут, так и лягут.

Если должно быть как-то "именно так", то делать сетку гридом (или подкручивать на js) и object-fit.
Если при этом кому-то отрежет голову, то будет повод задуматься об использовании человека из цитаты в тех сферах, где он силен, а на эту работу поставить кого-то другого.
Чудес не бывает.

Возможно, вы ещё забыли об aspect-ratio в пару к object-fit

Почему в justifiedGallery первая фото заполняет всю ячейку?

Андрей,

по каким параметрам мне их готовить? я не въезжаю вооообще

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

Почему в justifiedGallery первая фото заполняет всю ячейку?

Андрей, потому что при указанной минимальной высоте, фотка может занять всю ширину, а вторая не помещается.
Уменьшите минимальную утрированно, например, до 300 или 200.

Почему в justifiedGallery первая фото заполняет всю ячейку?

Андрей,
Оригинальная высота 427, плагин вы попросили сделать минимальную высоту 590 => фотка растянулась и прекрасно заняла всю строку.
По всей видимости, плагин начинает считать от исходных размеров первой фотки в строке. Берет её высоту..