Задача: Responsive сайт

Най-важното: responsive дизайнът е въпрос на подредба, не само на мащабиране

Добре изглеждащият сайт не е този, който просто се смалява, а този, който променя структурата си според екрана. Когато ширината стане малка, колоните трябва да се пренаредят логично, а менюто да се трансформира в компактна версия. Целта е съдържанието да остане четимо, подредено и удобно за навигация – независимо дали е на десктоп, таблет или телефон.

Как да изпълните задачата стъпка по стъпка

1. Запазете стандартния (desktop) изглед с две колони и хоризонтално меню.
2. Добавете @media заявка за по-малки екрани, при които средната колона започва да се „смачква“.
3. В този breakpoint:
   • Преместете съдържанието от дясната колона под елементите от лявата.
   • Подредете профилната информация (адреси, телефони) под името и снимката.
   • Поставете езиците, уменията и интересите под timeline секцията.
4. Трансформирайте хоризонталното меню в бутон (в горния десен ъгъл).
5. Направете менюто да се показва при hover върху бутона.
6. Добавете допълнителна @media заявка за още по-малки екрани, където съдържанието се подрежда в една колона.

Използвани техники

• @media – създава различни стилове според ширината на екрана
• display – контролира начина на подреждане на елементите
• float или flex – управление на колонно оформление
• :hover – показване на скрито меню при посочване с мишката

Задача

Създайте напълно responsive версия на вашето CV:

• Десктоп версия с две колони
• Мобилна версия с една колона
• Меню, което се трансформира в бутон при малък екран

Тествайте решението си, като променяте размера на браузъра и проверявате дали подредбата остава логична и четима.