Задача: Header на профилната страница

Най-важното: подредба на елементи в един ред с адаптивно поведение

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

Стъпка по стъпка: как да изградите хедъра

1. Създайте HTML структура с общ контейнер за хедъра и две вътрешни секции – лява (иконка, име, длъжност) и дясна (адрес, телефон, имейл).
2. Подредете двете секции на един ред чрез подходящ модел на оформление (напр. flex).
3. Задайте разстояние от левия и десния край, така че съдържанието да не опира в ръбовете и да се адаптира при преоразмеряване.
4. Ограничете ширината на текста за името и добавете поведение за съкращаване с многоточие при недостиг на място.
5. Направете изображението кръгло чрез подходящи CSS стилове.

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

• display: flex; – подрежда елементите в един ред
• justify-content – контролира разпределението по хоризонтала
• text-overflow: ellipsis; – добавя многоточие при скрит текст
• overflow: hidden; – скрива излизащото съдържание
• border-radius – създава кръгла иконка (напр. 50%)

Задача

Изградете собствен header на профилна страница със същите изисквания:
- две групи на един ред
- адаптивно поведение при различни резолюции
- съкращаване на дълго име с многоточие
- кръгла профилна снимка

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