Продължаваме с втората част от нашата видео поредица, в която решаваме стъпка по стъпка практическа Задача 28 (Вариант 2) от изпита по Информационни технологии. След като в Част 1 изградихме хедъра, сега преминаваме към централната секция (Блок 3 и Блок 4).
В това второ видео ще разгледаме:
- Как да разположим Блок 3 и Блок 4 един до друг с точно 50% ширина чрез
display: flexна родителския клас.hero. - Центриране на основния текст (ширина 70%) на равни разстояния от ръбовете с
margin: 0 auto;. - Разплитане на казуса с „хипервръзка с плътен цвят“ и как да я направим с бял цвят на текста.
- Форматиране на изображението в Блок 4: горно отстояние (70px), рамка (3px), заобляне (10px) и разстояние между рамката и картинката (6px).
Специфични изисквания по МОН, които изпълняваме в това видео:
- Блок 3 и Блок 4: Еднакво форматиране – ширина 50%, височина 400px и тъмнозелен фон
#1B5E20. - Основен текст: Цвят
bisque, размер 18px и двустранно подравняване (text-align: justify;). - Хипервръзка: Текстът „Европейска агенция по околна среда“ води към зададения линк и е стилизиран с бял цвят.
- Изображение (blue_green_yellow.png): Центрирано хоризонтално със специфичен падинг от 6px за разстояние до рамката.
🎥 Видео урок: Част 2
Имате ли проблем с подреждането на двата блока един до друг?
Ако колоните ви се пренасят на нов ред или имате разминаване в пикселите, проверете вашия CSS или ми пишете.
Свържете се с мен