У цьому уроці зверстаємо блок з кошиком. У файлі index.html запишіть наступний код для даного блоку:
Ми створили два блоки: для шапки
і для тематичної частини . Тепер перейдемо до файлу зі стилями і запишемо властивості для шапки, тобто для селектора .header:Тут ми вказали відступи всередині блоку, зліва зробили відступ, рівний 35px для того, щоб там вмістилася іконка. Вказали радіус заокруглення кутів, а саме верхнього лівого кута і верхнього правого кута. Вказали властивості для шрифту: накреслення, розмір, інтервал між рядками, колір.
Допишемо властивості для фонового зображення background-position і background-repeat:
Так як у кожного блоку в лівій колонці є своя іконка, то ми для цих блоків додамо свій клас, наприклад, для блоку з кошиком це буде клас basket.
:У файлі зі стилями пропишемо шлях до зображення для блоку з кошиком:
Коли блок має два і більше класів, то ви можете записати в файлі зі стилями або один селектор класу, або все разом без пробілів, як в прикладі вище .block.basket
Для блоку з класом content. що знаходиться всередині блоку з класом block. ми запишемо такі властивості:
І властивості для абзацу всередині блоку:
Переходимо до блоку з формою для пошуку.