Наступна секція проекту "Україна незламна" буде реалізована у вигляді карток. Які є способи реалізації карток описано тут
В цьому проекті картки будуть горизонтальними: зображення і текст.Блок буде світлого кольору, тому можна скористатися раніше стилізованим блоком .light.
Блок .light світлого кольору буде займати всю доступну ширину сторінки. Цей блок буде містити дочірній блок .light-container, який буде виконувати функцію флекс-контейнера для флекселементів і цей блок буде обмежений блоком .container, який задає ширину 1200рх і описаний раніше в style.css.
Блок містить заголовок другого рівня та параграф, стилізувати їх не потрібно, це було зроблено в попередніх секціях проекту.
Наступним у блоці .light-container після описової частини (заголовку та параграфу) розміщується горизонтальна картка .light-card - це флекс-контейнер, який вміщує два флекс-елементи: блок з зображенням .image та блок з текстом .text-container. Щоб ці блоки стали флекс-елементами їм присовєно ще один клас .item.
Картки чергують порядок блоків зображення-текст на текст-зображення.
Загалом, html-код секції виглядає наступним чином:
Для стилізація флекс-контейнера .light-card застосовані властивості, які безпjсередньо перетворюють блок у флекс-контейнер, дозволяють флекс-елементам переходити на наступний рядок, якщо вони не поміщаються по розміру екрана, розподіляє рівномірно по горизонталі флекс-елементи та центрує по вертикалі (це потірбно для тексу у блоці .text-container):
Для флек-елементів з класом .item потірбно визначити ширину блоку. Щоб блоки займали маскимальну ширину на великих екранах і картка з цими блоками розтягувалась на всю доступну ширину екрану, варто застосувати у якості значення властивості ширини width - калькулятор, який буде обчислювати ширину у % для двох блоків і ділити її порівну в залежності від розміру екрану, а вистота буде формуватись автоматично, в залежнсоті від вмісту блоку:
Щоб зображення у блоці .image було адаптивним, йому потрібно присвоїти ширину у відсотках та зробити блочним елементом:
Наступний крок: стилізація тексту у блоці .text-container. Текст буде центрованим у блоці по вертикалі та горизонталі завдяки застосованій властивості align-items: center; для флекс-контейнера.
Текст має внутрішні відступи, та курсивне накреслення
У текстовому блоці ще додано горизонтальну лінію перед параграфом та після за допомогою тегу <hr>, стилізпція цих ліній описується такими властивостями:
Остаточний вигляд секції з картками буде такий:
