angry_yum

https://bennettfeely.com/clippy/
SVG, SVG mask

Если ИЕ10, то вообще через border-radius
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://9elements.github.io/fancy-border-radius/fu...

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

В swiper это Multi Row Slides Layout - устанавливается свойством slidesPerColumn
https://idangero.us/swiper/demos/170-slides-per-co...
https://github.com/nolimits4web/Swiper/blob/master...
все остальное настраивается и стилизуется под ваши нужды

P.S. На том сайте используют https://elfsight.com/instagram-feed-instashow/

https://codepen.io/tyzberd/pen/LgMgej
padding-right больше и box-sizing

Зачем вы сделали так???
Позиционируйте саму кнопку button.owl-prev, а не внутренний span и всё будет работать.
Кстати на айфонах смотрели? Вангую, что там тоже не робит. В общем не надо так делать.

OWL-Carousel самый оптимальный. Отлично работает в адаптивном дизайне, на мобильных устройствах четкая работа, без проблем. Есть своя стилизация, можете стилизовать по своему.

Здравствуйте!
Можно создать 2 элемента (1 на который будут наводится (1), другой , который будет появляться (2)). И прописать второму элементу(2) display: noneИ при наведении на первый элемент (1) будем изменять display на block
То есть примерно это будет смотреться так:

#1:hover #2 {
   display: block
}

Но желательно это сделать на jQuery, чтобы хоть какая-то анимация была.
Но если она должна не появляться, а просто делать такой эффект, то просто добавляем тень, меняем высоту. А с текстом, создаем <p id="top">Lorem</p>, делаем

#top {
    display: none
}

. По такому же принципу делаем кнопки снизу

https://codepen.io/Vestride/pen/dABHx
я больше люблю когда input внутри label

Как то так

таблица 3 строки на 4 столбца, во второй строке для каждой ячейки - красная рамка слева.

создавать шаблоны страниц й

https://codepen.io/ViktoriaKorneva/pen/OQZxYm

Почитать: https://habrahabr.ru/post/313938/

Думаю как-то так:

$('.gallery').slick({
            slidesToShow: 2,
            slidesToScroll: 2,
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });

П.С Надеюсь все понятно :)

два прямоугольника
.......... у верхнего border-bottom:none;
.......... у нижнего border-top:none;

Очень просто, как всегда
https://jsfiddle.net/7yLkaqyp/1/

Накидал быстренько, можете поиграться и получить нужный эффект https://codepen.io/anon/pen/qXvdNP

Как раз верстал этот шаблончик для практики) Я пользовался Bootstrap но можно использовать Flex. годные вводные видеоуроки тут
Конкретно по твоему вопросу, тебе нужно было бы сделать 2 div один под другим и в каждом div сделать еще два div аля колонки равной между собой ширины. С помощью Flex это делается очень просто.