Сверстала по шаблону Brightw из рассылки, в шапке фон отличается от оригинала по цвету, чтобы были видны иконки соц.сетей.
Сам проект: https://codepen.io/Smet/pen/jwbWBN
Макет:
Подтвердите адрес почты на codepen, пожалуйста. Не разрешает смотреть работу в полноэкранном режиме.
подтвердила
Буду писать всё, что вижу.
Учитывая однородность фона страницы, можно было вырезать небольшой фрагмент (раппорт) и задать его в качестве фона, повторив по горизонтали и вертикали. Создавать картинку высотой в целую страницу нецелесообразно.
Суммарная высота .wrapper меньше чем высота блока .main-header. Не нужно ограничивать высоту .main-header. Логотип в данном случае можно спозиционировать абсолютно.
Непонятно, для чего изображение логотипа делать блочным, если вы оборачиваете его в блок.
Псевдораспорку можно было повесить на .wrapper и не использовать лишнюю блок-обертку .header-top.
Внутренние отступы, определяющие размеры пунктов меню, лучше задавать ссылкам, чтобы увеличить возможную область для клика.
Отступы между ссылками в блоке .social-icon определяются пробелами в html-коде. Это нехорошо. Пробелы лучше убрать, и выставить свои отступы.
Наклонную черту / между элементами фильтра в блоке .tab-menu можно было делать с помощью псевдоэлементов, к каждому пункту li кроме последнего.
Высота ссылки, в которую обернуто изображение элемента каталога, меньше, чем высота самого изображения. Ссылку в данном случае надо сделать блочной.
Заголовок внутри элемента каталога не может быть первого уровня. Заголовок первого уровня на всю страницу только один.
В формуле :nth-child для обнуления отступа у каждого четвертого элемента каталога можно было писать просто 4n.
Блок с классом .zoom - это скорее декоративный элемент. Картинка в нем - это фон, расположение которому вы сможете задать с помощью background-position.
В блоке .paginator снова отступы между ссылками - это пробелы в коде.
Заголоdrb в блоках .find, .information и .search-by не могут быть первого уровня. Задавать высоту для заголовка не стоит. Лучше допишите padding-bottom.
Параграфы без классов.
Поле поиска - это input type=“search”. Отступ между полем и кнопкой снова сделан с помощью пробела в коде. Размеры поля и кнопки лучше задавать с помощью padding.
В блоке .search-by вы могли сделать два отдельных списка - это и были бы две колонки. Используйте свойства с частичной поддержкой осторожно.
В блоке .copyRIGHT параграф без класса.
Спасибо!
Вижу, что немаловажную роль в появлении ошибок играет невнимательность.
Потихоньку исправляю эти “недоразумения”.
Вот с картинкой бэкграунда я совсем не подумала, что она весит прилично.
На момент написания поста исправляю этот пунктик: “Наклонную черту / между элементами фильтра в блоке .tab-menu можно было делать с помощью псевдоэлементов, к каждому пункту li кроме последнего.”. на последнем li почему-то не работает
.tab-menu li:after{
content:"\002f";
}
.tab-menu li:last-child{
content:"";
}
Вы должны выбрать псевдоэлемент у последнего li, а этот селектор выбирает просто последний li.
Наконец я исправила свои недочеты, да и вообще как оказалось, ошибок было даже больше, чем вы описали.
Список в блоке .search-by все равно не выходит таким, какой есть в макете, а именно - пунктирные линии под каждым пунктом li. Фишка в том, что размер этой линии не должен совпадать с длиной li.
По ходу появились некоторые вопросы, например при уменьшении окна браузера, синий блок меняет свой размер, хотя явных размеров ему не задавала:
Вы писали [quote=“Ineska, post:4, topic:6170”]
Блок с классом .zoom - это скорее декоративный элемент. Картинка в нем - это фон, расположение которому вы сможете задать с помощью background-position.
[/quote]
я пыталась это реализовать, но картинка прячется за ссылкой:
Проблему воспроизвести не удалось. В моем браузере блок ведет себя предсказуемо правильно.
В вашем коде меню спозиционировано относительно. Можно обойтись без позиционирования, задать margin-left.
Если логотип вы позиционируете абсолютно, то не забывайте родительскому элементу задавать относительное позиционирование, чтобы координаты положения логотипа рассчитывались не от левого верхнего угла браузера.
Выровняйте изображение по вертикали, по верху - vertical-align: top;
Попробуйте позиционировать элемент абсолютно.
А зачем флоты? Есть же флексы
