Sensei

Так как блок «right» идет ниже по коду, он отрисовывается поверх блока «main». Соответственно, перекрывает тень. Добавьте .main { position: relative;}

https://learn.javascript.ru/document

Если вы знаете про метод toggleClass, вам также должны быть известны addClass и hasClass. Используйте их.

Пора уже «флекс» применять http://jsfiddle.net/umjpv4e1/ (для старья деградация до таблицы)

Тогда так http://jsfiddle.net/99a2t2az/1/ В ие8 работать не будет, если это критично)

Клик здесь не подходит, есть же событие «change» Я бы примерно так сделал http://jsfiddle.net/99a2t2az/ Значения атрибутов «name» и «data-js-name» должны быть идентичны.

А чего там комментировать? Два псевдоэлемента белого цвета и со скругленными углами наложены на зеленый фон. Можно упростить и обойтись одним http://jsfiddle.net/c63hw6ar/2/

http://jsfiddle.net/c63hw6ar/1/

http://jsfiddle.net/yvtstxjv/

https://jsfiddle.net/gw5ruw9b/

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

Как вариант http://jsfiddle.net/674fpLwe/

Можно и без js http://jsfiddle.net/suxc9312/

http://jsfiddle.net/bdek7qgy/

Вариант без jquery http://jsfiddle.net/zq3wvc45/

Может соотношение сторон кадра не совпадает с оберткой и появляются полосы? Если так, то помогло бы свойство «object-fit: cover» для видео. Правда, оно в ИЕ не поддерживается.

Я так понимаю ситуация не изменилась. Во всяком случае в Firefox до сих пор работает только свойство для печати.

Чтобы секции не разрывало, можно применить к ним специальное свойство «break-inside: avoid-column»

http://www.mydevice.io/devices/

Дизайн нужно разрабатывать под CSS пиксели (device width), а не под физическое разрешение.

Этот макет устарел. Он не очень дружелюбен к CSS своими отсветами и переходами сделанными наложением слоев. Думаю, нет смысла мытарствовать, я бы сделал все картинками. Сейчас развитие технологий и тренды в дизайне позволяют практически полностью обходиться без растровой оформительской графики. Поищите более актуальные макеты и тренируйтесь на них.

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

http://jsfiddle.net/bet6npqj/

Таблицами http://jsfiddle.net/8vnz55uk «Флеском» http://jsfiddle.net/8vnz55uk/1/ Все вместе http://jsfiddle.net/8vnz55uk/2/

Как по мне, в идеале логотип должен быть в векторе. SVG или шрифты. В CSS нет средств для кернинга, поэтому шрифты не очень подходят, разве что каждый символ в отдельный элемент вкладывать. Для каждого используемого начертания загрузится один шрифтовой файл. Даже если в логотипе два начертания это все равно гораздо меньше 4mb.