Итоговое испытание, верстка главной странцы


#1

Подскажите, пожалуйста, с итоговым испытанием, где система проверяет разметку, сетку и оформление.

  1. Каким образом нужно разместить картинку с айпадом? Сейчас она вставлена так:

.header__info:after {
content: ‘’;
position: absolute;
top: -14px;
left: 375px;
width: 653px;
height: 451px;
background-image: url("…/img/header–Ipad.png");
background-repeat: no-repeat;
}

При просмотре в браузере картинка есть, однако система ее не видит.

  1. Никак не могу довести разметку во втором блоке с фичами до выполнения, на сравнении с образцом есть какая-то черная рамка, хотя в макете ее нет. Что это и как это пройти?

Спасибо!


#2

Прикрепите ссылку на задание, пожалуйста.


#3

Вот ссылка.


#4

Опубликуйте код испытания через песочницу или отправьте архив целиком на почту inusia91@mail.ru.


#5

Отправил на почту архив. Спасибо.


#6

Небольшие различия в разметке шапки связаны с незаполненным атрибутом href у ссылок меню.
Картинка с айпадом не отображается, потому что имя файла не совпадает с тем, что прописано в background-image. Координаты расположения картинки кстати тоже не совпадают.
Размеры элементов во втором блоке одинаковы (320px), а вы прописываете для каждого ширину отдельно. Также обратите внимание, что и отступы между ними тоже одинаковы (30px) и они меньше, чем в вашем варианте.
Обязательно смотрите пошаговые демонстрации. Там показано много хороших приемов. В частности то, как строится сетка на блочно-строчных элементах. Обычно здесь не обходится без удаления пробелов между ними и обнуления отступа справа у последнего элемента в ряду. Еще для этого блока вам потребуется выравнивание по горизонтали с помощью text-align. Если вы выполняли последнее испытание в курсе “Сетки”, то должны понимать, что я имею в виду.
Не занимайтесь подгонкой картинки под образец с помощью странных отступов. Например, 4px слева или вдруг 1px снизу. И не пользуйтесь пипеткой для определения цветов, если хотите добиться полного соответствия. Она не всегда дает точный результат.
Черная линия по низу блока скорее всего обозначает его границу. Если ее не видно, значит получается, что высота блока не совпадает с образцом. Это хорошо видно при сравнении страницы целиком.


#7

Огромное спасибо за помощь и за замечания! Все сделал, все работает. А с айпадом вы меня спасли, хоть я и не понял, как так вышло, ведь у меня в браузере показывалась эта картинка, то есть, видимо, здесь регистр не учитывался, а здесь учитывается. В любом случае, все работает, спасибо!