Loading...
Tr00peR avatar Tr00peR 566 Точки

[Homework] Web Fundamentals - CSS Layout

  1. Website Header -   HTML    CSS
  2. Website Footer -    HTML    CSS
  3. Softuni News -      HTML    CSS
  4. Pretty Reponsive Website -  HTML    CSS

Четвърта и пета задача са ми на едно място. Не е най-добрия респонсив дизайн, но поне при различни екрани всичко се чете добре :) Мисля си, че трябва да може и по-умно да се направи, а не със толкова media-query-та, някой ако има идеи да казва.

11
Web Fundamentals - HTML5 08/03/2015 14:21:47
arsoman avatar arsoman 419 Точки

Въпрос за втора задача: не видях да си сложил последната секция вдясно, където са хората от фейса на бял фон?

 

0
Tr00peR avatar Tr00peR 566 Точки

Най-отдолу е в div class="fb-like-box".

0
arsoman avatar arsoman 419 Точки

Ясно, мерси!

0
ZvetanIG avatar ZvetanIG 907 Точки
  1. Website Header -  Demo
  2. Website Footer -    Demo
  3. Softuni News -      Demo
  4. Pretty  Website - Demo
  5. Pretty Reponsive Website

Кодът на задачите може да видите ТУК.

За пета задача, магията на Reponsive Design e в 05.Pretty-Website-Responsive.css

За да заработи на мобилни устройства трябва да се добави следния мета таг в HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">

Мисля, че се получи добре (само с две media-query-та). Може би търпи малко оптимизация, но не ми се разправяше повече.

14
BoniMislyashki avatar BoniMislyashki 36 Точки

Още един комплект решени задачи. Първите три се получиха много добре, четвърта: сайтът е респонсив за таблети и телефони с по-голям екран.

1
VenIT avatar VenIT 63 Точки

Здравейте,
ето малко задачки и от мен.

01.WebsiteHeader
-> HTML
->CSS
->
DEMO

 02.WebsiteFooter
->HTML
->CSS
->DEMO

03.SoftUiNews
->HTML
->CSS
->DEMO

04.PrettyWebsite
->HTML
->CSS
->DEMO

05.Ползвал съм Media Queries  за резолюции с ширина на екрана: 1024, 768, 600, 480 и по-малка от 380px  (320px).

05.ResponsiveWebsite
->HTML
->CSS
->DEMO

8
softuniobserver avatar softuniobserver 73 Точки

Това е моята версия на non responsive на PrettyWebsite (задачата, която най - много харесах от домашните работи, защото има завършеност (прилича си на цяла страница), освен това е близка до задача от изпит). 

Реших просто да я споделя - точно тук, а не в нова тема, въпреки че не е вече актуална за хората, които са отворили тази тема.

PrettyWebsiteNonResponsive

0
03/03/2015 21:15:37
kckfm avatar kckfm 15 Точки

Привет, 

Цялото нещо с 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 фонта.

(Навигацията може да е по-добре, но за сега до там :))

 

 

Поздрави!

СК 

1
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.