Оцените верстку, соответствие ТЗ

[Mixail.09]

Здравствуйте.
Нашел простенький макет в глубинах форума. Как раз для новичка пойдет. Прошу оценить верстку и соответствие ТЗ.

Верстал по JPEGу, если это важно, хотя и PSD прилагается.

 

Текст задания:

1. Сверстать макет в html. Использовать можно любые технологии. Знание php в этом задании не требуется.
2. При наведении на пункт меню в шапке его фон затемняется как показано на макете.
3. При клике на логотип страница обновляется.
4. Надписи "Just do it" вместе с прозрачным белым фоном по умолчанию не должно быть видно. Она должна появляться при наведении на плашку (черный рисунок с разлетающимися фигурами).
5. Верхняя часть (шапка, меню, логотип, надпись, плашка) - "резиновые", то есть тянутся на всю ширину. Ширина контентной части фиксированная (940px).

Так же хорошо, но не обязательно, если будут реализованы следующие вещи:
1. Footer всегда прижат к низу страницы.
2. Шрифт Pt Sans (как на макете). Взять его можно на google fonts.
3. Кроссбраузерная верстка.
4. Плавная анимация появляющихся и исчезающих объектов.

 

http://test13.meximas.com/  тестовый домен

 моя верстка

 

Вот ссылка на оригинал: клик

 

 

Вот кстати код если нужен http://codepen.io/mikhail09/pen/mVxNLy

[abrahadabra]

что-то всё иначе: шрифты, размеры, даже порядок пунктов в меню. Хотя ваш вариант лучше дружит со здравым смыслом.

 

Большая-большая просьба всем верстальщикам.

Не делайте, пожалуйста, так:

* {	margin: 0;	padding: 0;}

Потом же у клиента секретарша Леночка начинает из ворда копировать в визуальный редактор, а там все абзацы и списки в кашу смешаны. И получается скандал на ровном месте. Да и крутые пацаны что-то про производительность говорят, что это плохо.

[ishurgaya]

* { margin: 0; padding: 0; }

 

это значит эти стили ко всем тегам применяются?)

 

к своему стыду я этого не знаю , вот и спрашиваю)

[abrahadabra]

ага, именно ко всем элементам на странице.

Вообще лучше normalize.css использовать, или какую-либо свою производную, если стандартный не устраивает.

[Mixail.09]

что-то всё иначе: шрифты, размеры, даже порядок пунктов в меню. 

 

Порядок пунктов переделал, про шрифты - это мой косяк забыл написать что с ними не стал пока связываться потому что там  в ТЗ предложено скачать какой то шрифт (а я так понимаю его потом еще и как то подключать придется чего пока я делать не умею), по этому шрифты оставил по умолчанию. 

 

А вот про размеры если можно поподробнее. Где их нужно брать, или просто по картинке пиксели считать, или чисто визуально? Я просто примерно по картинке смотрел что где должно находится и верстал, чтоб все более менее пропорционально было. Видимо тут допустил фатальную ошибку)))

[abrahadabra]

в ТЗ предложено скачать какой то шрифт (а я так понимаю его потом еще и как то подключать придется чего пока я делать не умею)

google fonts — это просто. На самом сервисе выбираете нужный шрифт и получаете css, который нужно подключить. А затем в своих стилях пишете font-family: 'PT Sans', и всё работает.

А вот про размеры если можно поподробнее. Где их нужно брать, или просто по картинке пиксели считать

да просто по макету замеряются размеры и всё. Хоть инструментом выделения в фотошопе. А можно ещё в браузер расширение pixelperfect поставить, в веб-инспекторе подгонять размеры, и что получится, писать в код. А потом рефакторить, да…

[Mixail.09]

 

в ТЗ предложено скачать какой то шрифт (а я так понимаю его потом еще и как то подключать придется чего пока я делать не умею)

google fonts — это просто. На самом сервисе выбираете нужный шрифт и получаете css, который нужно подключить. А затем в своих стилях пишете font-family: 'PT Sans', и всё работает.

А вот про размеры если можно поподробнее. Где их нужно брать, или просто по картинке пиксели считать

да просто по макету замеряются размеры и всё. Хоть инструментом выделения в фотошопе. А можно ещё в браузер расширение pixelperfect поставить, в веб-инспекторе подгонять размеры, и что получится, писать в код. А потом рефакторить, да…

 

Значит будем замерять пиксели) так понимаю делать это по JPEGу не желательно, лучше PSD?

Со шрифтами вроде тоже разобрался, размеры подгонять после буду. 

Еще какие косяки?

[abrahadabra]

да размеры-то можно и по жпегам замерять. PSD нужен уже когда макет на слои разбирать.

[Get to heaven]

верстка разъехалась при отдалении, браузер мозилаfirefox