500 Internal Server Error

mark2013, комментарии визуально сверху-вниз.

Если нужна консультация или ответы на вопросы со скринами — дайте знать в ЛС, готов всё развёрнуто рассказать и объяснить, почему комментарии именно такие.

• В шапке есть пункты меню: целится для клика нужно в текст. Вёрстка — инструмент (способ?) заботы о пользователе. Поэтому лучше делать областью клика — всё пространство пункта меню. Теория — закон Фитса.
• Фон шапки сделан картинкой (гигантской, не горизонтальным паттерном в 1px). Хотя такой же эффект можно повторить, используя чистый CSS и не используя картинку: https://developer.mozilla.org/en-US/docs/We...linear-gradient
• Пункты меню, hover-эффекты. Класс ховера ставится через JS. Есть же стандартные :hover, :focus и т.п., которые прекрасно сделают всё то, что вы делали на JS.
• В пунктах меню — иконки лучше сделать не через псевдо-класс, а в обычной картиной через <img ... > и спокойно потом её использовать в мобильном виде
• Шапка. Логотип. Для текстового логотипа использован нестандартный шрифт Lobster. Если такого шрифта больше нет в макетах, то лучше логотип сделать картинкой. Также логотип нужно обернуть в ссылку: привычный паттерн для навигации по сайтам. Клик по логотипу уводит на морду сайта. Ткните, например, на форуме в лого.
• Карточки фотографий. Визуальная часть. Отступы — не такие, как задумывалось и/или кажется. Слева больше, чем справа. У самой картинки (<img ... >) есть не убранный отступ. Выключается он через https://developer.mozilla.org/ru/docs/Web/CSS/vertical-align
• Стили класса .image не предусматривают того, что картинка может быть очень гигантской и всё поломать. Посмотрите в сторону https://developer.mozilla.org/ru/docs/Web/CSS/object-fit, теоретическая часть клёвая есть у Вадима Макеева в этом видео: https://www.youtube.com/watch?v=aZJMOVpMhtc
• Для любых картинок нет заполненного атрибута alt. Это важная штука.
• Социальные иконки слишком сложно свёрстаны: лучше просто ссылка с картинкой. Стили hover- и active-состояний тоже делаются через JS, но можно проще.
• В подвале визуально всё странное, текст размещён справа и нет отступа вниз. Тег span лучше заменить на обычный текстовый абзац: <p>
• Отдельный гигантский лайк за использования гридов для раскладки фотографий. <3

Отдельным строками. Посмотрите в сторону наименований селекторов и их смысловой части (или для начала — визуальной). Начните с ссылки https://github.com/yoksel/common-words и https://ru.bem.info/.

на твердую тройку.

4enki хорошо все расписал, но добавлю от себя еще несколько моментов:
1. погуглите, что такое сетка и зачем она нужна при верстке. не понятие css гридов, а вообще, концептуально что есть сетка в верстке и какие виды существуют
2. не кроссбраузерно, отсутствуют префиксы
3. начать использовать на старте флексбоксы - окей, я понимаю, но гриды здесь уже лишнее
4. избавьтесь от привычки позиционировать блоки с помощью маржинов и никогда так не делайте, юзайте маржины только для того, чтобы банально задать отступ. (об этом чуть подробнее ниже на скриншоте)
5. макет достаточно дерьмовенький, пробуйте что-то поинтересней

Поясняю 4 пункт:

Всем огромное спасибо!

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.