by chris

В каких именно?

Id, но с классами. Сверху есть кнопка tidy, которая правильно форматирует код. https://jsfiddle.net/vpy7sn26/2/

Ну, а кто верстал) Мануалов про спрайты в интернете в изобилии. Картинки - 263х270 Сетка есть всегда. На alexis она самописная и не заточена под отзывчивый дизайн.

1. При адаптации использовать свойство overflow для скрытия горизонтальной прокрутки считается правилом плохо тона. Размер блоков в сумме не должен превышать ширину вьюпорта. 2. Лого всегда кликабельно с перенаправлением на главную страницу, а так же картинка выводится элементом. Правильнее такая разметка - <div class="logo"> <a href="/"><img src="img/logo.png" alt=""></a> </div> 3. В шапке элементы списка визуально имеют картинки по отдельности, но физически прописаны одной сплошной. Если я добавлю еще один элемент li, то придется вклеивать дополнительное изображение в sprites.png. Тут либо иконки в html разметку, либо фоны для псевдоэлементов li, уже с правильным использованием спрайтов. 4. В местах где картинки заглушки, как я написал уже - это картинки а не фоны) Далее вся страница имеет схожие проблемы. Основная проблема отсутствие сетки как таковой. Дизайн современный, но подход к верстке устаревший на флоатах и марджинах. Такая система очень плохо поддается адаптации. ) Стоит пройти курсы на htmlacademy и снова сверстать. Там учат хорошему.

Подпункты меню никуда не денутся. Станет понятно, что проблема в скрипте. Других вариантов я не представляю.

Я имел ввиду только для данного сайта, а не в целом. В нашем случае один анимируемый объект не оставишь. Рационально полностью отключить анимацию.

Дополнительная нагрузка на CPU, как следствие быстрее садится батарейка. На xperia открываю главную wowjs и все анимируется с тормозами. Кстати, заодно проверил и сайт автора. Анимация отсутствует.

В ie в подвале верстка едет. На устройствах анимации быть не должно. Плюс в секции WHAT PEOPLE SAY ABOUT US блоки перекрывают стрелку "toTop"

@EntAlex, если отключить jquery.nav.js и попробовать походить по сайту?

Да, немножко поспешил с контейнером. Конечно же из-за бордера под телефонами такая разметка не сойдет. 1. У header__top при скролле можно изменять стейт яваскриптом удаляя класс модификатор при прокрутке. А по умолчанию задать (header__top) цвета инвертированные с transition. Или наоборот. Актуально для фиксированного блока. 2. Модификатор с цветом бордера, по умолчанию возможен другой, или его отсутствие. Возможны еще какие-то кастомные стили. 3. Для header__bottom по умолчанию паддинги, а header__bottom--blue, лишь модификатор с фоном и цветом текста. Шапка сложнейший элемент на сайте, и его правильное структурирование поможет быстро развертывать похожую разметку на любом проекте, по подготовленным патернам. <header class="header"> <div class="header__top header__top--translucent-bg"> // 1 <div class="header__row header__row--border-bottom"> // 2 <div class="container"></div> </div> <div class="header__row"> <div class="container"></div> </div> </div> <div class="header__middle"> <div class="container"></div> </div> <div class="header__bottom header__bottom--blue"> // 3 <div class="container"></div> </div> </header> Действительно, все хорошо. После фильма настроил режим, который засветил маленький пробел и я его не заметил. Показалось все в одну строку, по сравнению с классами contacts__list контраст сильнейший. И сейчас открываю, действительно не видно пробелы). Да, это хорошо, что ты так критично подошел к моему посту. Из тебя получиться, отличный разработчик. Скажу по секрету. Я так и работаю. В моей компании, дают только дизайн под десктоп, а дальше сам все додумываю. Мне интересно просматривать чужие работы, на свои уже устал созерцать.) Отлично, буду ждать. В предыдущем посте я ошибся 2 раза. Все ошибаются.

Элемент <div> блочный. https://webref.ru/layout/howtocodeinhtml/chapter10

@MadSandwich, забыл только упомянуть. Сильно отвык от фиксированных сайтов. Верстать без адаптивности с нынешним рынком , занятие сомнительное)

@0nline, Напомнил. Заходят в бар php-разработчик и два программиста...

- У атрибута href для ссылки одного лишь "tel:" недостаточно. Номер тоже необходим. - У кнопки поиска так же, как и у социальных кнопок, узел с текстом должен его содержать. - Контейнер с паддингами по 15 пикселей по бокам в связке с content-box сделает отступы более явными. Сейчас их видимость зависит от минимальной ширины тела страницы, что не организуешь на адаптивном макете. Поэтому, отступы стоит учитывать сразу. БЭМ - Элемент header__translucent-bg не помешает изменить на container, а header__border-bottom именовать, как header__row... Т.е примерно такая разметка, на мой взгляд рациональнее - <header class="header"> <div class="container"> <div class="header__row header__row--border-bottom"></div> <div class="header__row"></div> </div> </header> - Лого, чаще всего независимый блок, я делаю его отдельно. Ведь, часто лого встречается и в футере. Каким боком туда попал логотип джумлы?) - Блок contacts размечен по-бэмски, а вот блок social, что-то безумное. Плюс от этого класса - search-tour__field-wrapper search-tour__field-wrapper--icon-search, голова пошла кругом. Есть объяснения?) - Заголовки пусть то же живут отдельной жизнью, лучше их оформить блоками с цветовыми модификаторами. - В целом сверстано на славу. Только если использовать абстракцию по БЭМу, то немножко усерднее. Чтобы добиться модульности для копирования в наступные проекты).

@hike, - https://jsfiddle.net/a2zmjw4p/

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

$('.slider').slick({ infinite: true, slidesToShow: 3, slidesToScroll: 3, dots: true, prevArrow: '<img src="тут ссылка на левую картинку">', nextArrow: '<img src="тут ссылка на правую картинку">' });

Можно

В объекте с настройками плагина prevArrow: '<button type="button"><img src="#"></button>', nextArrow: '<button type="button"><img src="#"></button>' Либо задать свой класс для кнопки и заменить картинку через псевдоэлемент.

@Endorphin, так - https://jsfiddle.net/cy792dmr/1/ ?

не осилил логику.

Программирование - это не магия.

ага)

Сейчас мы не можешь получить полную коллекцию картинок, т.к. .item-masonry не является родителем для всех сразу. Вот идентификатор gallery, подойдет.

@Endorphin, нужен код с подставленными значениями, чтобы отследить где ошибка.