Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.
Задача: Икона име и длъжност
Пълен достъп до курса: Не
За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.
Най-важното: подравняване и пропорции
Целта е да създадете елемент с икона, име и длъжност, подравнен вляво, с еднакво разстояние от левия край на браузъра и между иконата и текста. Името е на два реда и трябва визуално да „стъпва“ върху иконата – да започва от средата ѝ и да завършва в долния ѝ край. Длъжността е с по-малък размер и в син цвят. Използваният шрифт е Arial.
Стъпка по стъпка: как да изградите компонента
- Създайте HTML структура с контейнер, който съдържа:
- елемент за икона (например
img) - контейнер за текст (име и длъжност).
- елемент за икона (например
- Задайте шрифт Arial на целия компонент.
- Подравнете иконата и текстовия блок един до друг (например чрез подходящ CSS модел за подреждане).
- Осигурете еднакво разстояние:
- отляво на браузъра до иконата;
- между иконата и текстовия блок.
- Направете името на два реда и коригирайте размера му така, че да започва от средата на иконата и да завършва в долния ѝ край.
- Добавете длъжността под името:
- с по-малък размер на шрифта;
- със син цвят.
Използвани HTML и CSS елементи
font-family– задава шрифт (Arial).color– определя цвета на текста (син за длъжността).font-size– контролира размера на името и длъжността.margin– управлява външните разстояния.img– вмъкване на икона.
Задача
Изградете собствен вариант на компонента с различна икона и име, като запазите същите изисквания за подравняване, пропорции и стил.
