Алексей Скляров

Создаете контейнер:

.container{
    margin-left:-15px;
    margin-right:-15px;
}

Оборачиваете каждый блок, например:

.block {
 padding:15px;
}

Только не забываем про:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:after,:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Чтоб было проще понять, почитайте о Bootstrap.

Создаете треугольник (выше уже написано как делать), через :after,:before задаете абсолютное позиционирование: bottom:0px;right:0px; и все.

Для того, чтобы сайт "переставал адаптироваться" при ширине > 768 нужно писать правила в css файле, а не извращаться таким способом. Если речь идет о bootstrap, то проще, как по мне, убрать адаптивность вообще и прописать стили для ширины < 768

https://www.kunkalabs.com/mixitup/

Вряд ли вы найдете подобное. Верстка под телефоны/планшеты не отличается от обычно верстки под стандартные мониторы.

Я бы рекомендовал не пытаться отыскать экраны, которыми пользуются чаще всего, вместо это проще верстать сразу так, чтобы при сжатии окна все плавно трансформировалось. Все что для этого требуется - сжать браузер до определенной ширины, найти интервал, где блоки (или что-то другое) ведет себя не так как нужно и для этого интервала дописать ваш класс. В общем и все.

Почитайте про addeventlistener в javascript, это самый просто способ сделать анимацию, которая вам нужна. Готовое решение никто вам не покажет, потому что нужно четко понимать, что нужно сделать.

Коротко могу сказать про этот eventlistener: с помощью него можно отловить начало/финиш анимации (в вашем случае это движение от и до), после чего просто добавить/убрать css класс вашей анимации.

Полагаю, что тут:

style="-moz-transition: 16000ms cubic-bezier(0.32, 0.64, 0.45, 1);-o-transition: 16000ms cubic-bezier(0.32, 0.64, 0.45, 1);-webkit-transition: 16000ms cubic-bezier(0.32, 0.64, 0.45, 1);transition: 16000ms cubic-bezier(0.32, 0.64, 0.45, 1); backface-visibility: hidden;">

1600 ms это скорость протекания анимации, чтобы анимация быстро начиналась и потом замедлялась используют еще свойство ease-out.

Что-то типа такого:

$( "#menu-id" ).click(function() {
  $( "#drop-down" ).css("opacity", "1");
});

При клике на меню с id="menu-id" добавляется свойство CSS {opacity:1} для блока с id="drop-down". На сайт зайти не получилось, поэтому кинул пример, думаю, что разберетесь.

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

Если вы растяните сам баннер (картинку), сами знаете что будет. Самое простое решение в этом случае просто поместить баннер в блок с фоном, таким же, как у баннера.

Как создать такой блок - уже сказано выше.