Четвърта и пета задача са ми на едно място. Не е най-добрия респонсив дизайн, но поне при различни екрани всичко се чете добре :) Мисля си, че трябва да може и по-умно да се направи, а не със толкова media-query-та, някой ако има идеи да казва.
Въпрос за втора задача: не видях да си сложил последната секция вдясно, където са хората от фейса на бял фон?
Кодът на задачите може да видите ТУК.
За пета задача, магията на Reponsive Design e в 05.Pretty-Website-Responsive.css
За да заработи на мобилни устройства трябва да се добави следния мета таг в HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Мисля, че се получи добре (само с две media-query-та). Може би търпи малко оптимизация, но не ми се разправяше повече.
Още един комплект решени задачи. Първите три се получиха много добре, четвърта: сайтът е респонсив за таблети и телефони с по-голям екран.
Първите три паднаха, остава трудната част:
1. http://codepen.io/Vallerious/pen/HrBlA
2. http://codepen.io/Vallerious/pen/LfIhK
3. http://codepen.io/Vallerious/pen/jchLE
Нереспонсив и респонсив сайтовете, в началото тръгнах много заобиколно, но изгледах едно видео от лекциите на Наков и се оправих за 1 час.
Нереспонсив: http://codepen.io/Vallerious/pen/rhxyq
Респонсив: http://codepen.io/Vallerious/pen/FlkIA
Това е моята версия на non responsive на PrettyWebsite (задачата, която най - много харесах от домашните работи, защото има завършеност (прилича си на цяла страница), освен това е близка до задача от изпит).
Реших просто да я споделя - точно тук, а не в нова тема, въпреки че не е вече актуална за хората, които са отворили тази тема.
Привет,
Цялото нещо с 2 break point-а - Pretty Reponsive Website
Един съвет:
Не правете media queries за всичките там device-и, те за безброй, не можем да направим . Идеята е да си направите Layout-a fluid and scalable , започнете да го resize-вате в browser-a и там където се чупи там слагайте break point. Правете breakpoints не за устройствата, а за съдържанието на сайтa (bootstrap е друга бира, говоря за custom code). Оптимизирайте за мобилни устройсва не само ширината на сайта, но и разстоянията, глемината на текстовете, image-ите.
Аз го направих изцяло с "em"'s и супер лесно се скалира целия дизайн пропорционално само с увеличаване на body фонта.
(Навигацията може да е по-добре, но за сега до там :))
Поздрави!
СК
Най-отдолу е в div class="fb-like-box".
Ясно, мерси!