Вот то, что по моему мнению я не смог сделать или сделал с помощью “костылей”:
Фоновая картинка с блоке перед футером имеет сверху прозрачный цветной слой. Мне не удалось сделать наложение на фоновую картинку так, чтобы этот слой не перекрывал элементы формы обратной связи - делал через псевдоэлемент. Пришлось сделать вторым фоновым изображением.
2.Почему-то когда делаешь input’ы формы активными цвет рамки имеет синеватый оттенок, хотя в коде указан белый цвет. Во всех браузерах одинаково. Можно ли как-то это обойти? С кнопкой в форме обратной связи те же странности - непонятная рамка, которой нет в коде.
На фоновую картинку в блоке перед футером наложен фильтр. Почитайте тут.
Рамка у полей формы - это стили по умолчанию при фокусе (:focus). Рамка у кнопки убирается, если дописать border: none. О других стилях по умолчанию почитайте в блоге.
Замечания по верстке:
Не изменили title документа.
В body кроме шрифта по макету должен быть указан еще хоть один из безопасных системных и семейство (serif, sans-serif).
Черта под заголовком STRICT сделана с помощью дополнительного div-a без содержимого. Это могла быть рамка снизу для заголовка, мог быть псевдоэлемент, на ваш выбор.
Размерами кнопок лучше управлять с помощью padding, а не width и height.
Почему-то не вижу тега header, хотя main и footer присутствуют. Кстати, зачем несколько main, не поняла. Поясните. Возможно, вы хотели использовать section.
В блоке преимуществ есть спрайт, но иконки не меняются (забыли дописать background-position для каждой).
Экономите на классах, есть безымянные элементы (заголовки, списки, параграфы). В идеале почти у каждого элемента на странице должен быть класс.
Блок gallery имеет нулевую высоту (не дописали распорку).
Кнопки, которые появляются при наведении на каждом photo должны быть выравнены по горизонтали и вертикали. Почитайте, как делать правильно.
Размеры голубого слоя-маски можно не прописывать явно, если знать, как растянуть абсолютно спозиционированный элемент на всю ширину и высоту родителя (задать нулевые координаты со всех сторон).
Хотелось бы обратить ваше внимание на то, что не для всех элементов на странице шрифт наследуется. Посмотрите на кнопку отправки формы. Без записи font: inherit; шрифт там совсем не Lato.
Высота блока container в футере равна нулю. Не забывайте, что распорка вешается на непосредственный родитель плавающих элементов, то есть в данном случае на сам container.
Copyright
Пробелы между ссылками на соцсети никуда не делись, потому что шрифт должен обнуляться у родителя .social.
В целом неплохо, отдельный плюс за использование github. Если есть еще вопросы, задавайте.
Спасибо за развернутый отзыв. Большинство замечаний учел и обновил файлы на гитхаб (пришлось чистить историю Оперы, чтобы изменения отобразились).
Не смог переопределить стиль рамки у полей формы при фокусе, в статье и файле normalize.css не нашел ответа. Упорно выводится синяя рамка. Решил оставить так.
Также не получается с помощью свойства background-blend-mode наложить фильтр такого же цвета на картинку в блоке перед футером. Мне кажется тут надо что-то другое использовать, чтобы добиться точного соответствия оттенка.
Теперь по некоторым пунктам:
3. Заменил заголовок h1 на див с текстом и нижней рамкой. Мне кажется, так удобнее и быстрее настроить ширину черты
4. Вопрос: Это чтобы при изменении количества символов кнопка автоматически масштабировалась?
8. Я правильно помню, что распорка нужна везде, где элементы вырываются из общего потока?
9. Использовал один из способов выравнивания, приведенных по ссылке. Пришлось вложить кнопки в еще один див и выравнивать по центру его, т.к. в без него кнопки накладывались одна на другую. Это верно?
Размеры голубого слоя не надо прописывать явно чтобы в этом случае не возникло проблем, если изменится размер родительского изображения?
11. Как так? В курсе было явно сказано, что распорку надо вешать не на контейнер-центровщик, а на его родителя. Во всех блоках у меня так и сделано. Почему здесь высота контейнера равна нулю не понял совсем…
Стили рамки текстовых полей при фокусе должны меняться при условии использования
Исходя из предложенных стилей для чекбокса могу сказать, что он должен быть сделан с помощью псевдоэлемента к label (у вас label не связана с полем). Поскольку сам чекбокс не стилизуется:
Почему заголовок пришлось менять на div? h1 - это тоже блочный элемент.
Вы правы. Стоит только ограничить максимальную ширину. 8. Да, распорка нужна там, где все дочерние элементы одного родительского блока вырываются из потока. 9. Правильно, только вторая иконка что-то не по центру квадрата. Проверьте background-position. На счет голубого слоя вы абсолютно правы. 11. Если внутри блока все дочерние элементы вырваны из потока и высота не прописана явно, то блок схлопывается по вертикали. Помните? И распорка на родителе родителя в этом случае ничего не дает.
Безопасный шрифт не добавили, только семейство. Почитайте.
Тег main должен включать всё, кроме шапки и подвала. Подробнее тут.
Оттенок на картинку с помощью псевдоэлемента не ставится. Получилось сделать, создав дополнительный див.color-layer и применив к нему цветной фон.
Они меняются, но я прописал белую рамку, а на деле она голубая (значение по умолчанию видимо).
Чекбокс стилизовал, прошу оценить (понимал принцип, но сам реализовать с ходу не смог, поэтому нашел решение в сети, немного добавив от себя - форму галочки и реакцию на наведение курсора).
Не понял, то есть все блоки section надо поместить внутрь тега main?
Да, забыл еще реализовать стрелочку-ссылку для перемотки страницы. Реализовал с помощью ссылки блочного типа (класс .fwd)