Способів створення галерей зображень є декілька, ці способи описані тут.
Для реалізації наступного блоку .light світлого кольору у макеті проекту "Україна незламна!" буде застосовано найпростіший спосіб: флекс-котейнер з флекс-елементами у вигляді блоків в яких містяться зображення.
Структура html-коду блоку .light світлого кольору буде наступна:
Блок .light світлого кольору буде займати всю доступну ширину сторінки. Цей блок буде містити дочірній блок .light-container, який буде виконувати функцію флекс-контейнера для флекселементів і цей блок буде обмежений блоком .container, який задає ширину 1200рх і описаний раніше в style.css
Блок .light-container має внутрішні відступи 10рх та містить заголовок другого рівня і параграф
Тому стилізація цього блоку виглядає так:
У стилізації заголовку <h2> та <p> є відміннсті в порівнянні з блоком .dark: це колір тексту, тому щоб оптимізувати код стилізації і не повторювати більшість властивостей, які були уже застосовані для заголовку <h2> у блоці .dark-text, потрібно підкорегувати раніше написаний код таким чином:
Окремо для заголовку <h2> у блоці .light-container додати властивості
Стилізацію параграфу <p> для .light-container потрібно теж оптимізувати з раніше стилізованим параграфом у блоці .dark-text, деякі властивості будуть однаковими:
Для параграфу у блоці .light-container p потрібно додати окремо властивості, які обмежать ширину блоку параграфу до 775рх, розмістять текст по центру і сам параграф по центру веб-сторінки, а зовнішній відступ параграфа буде 20рх
Для флекс-контейнера задається набір властивостей, які власне зроблять його флекс-контейнером, розмістять флекс-елементи в ряд, дозволять флекс-елементам при дефіциті ширини флекс-контейнера переміщатись на новий рядок і розмістить флекс-елементи рівномірно по всій ширині флекс-контейнера. Сам флекс-контейнер потрібно відцентрувати на сторінці властивісю margin: 0 auto
Для флекс-елементів потірбно встановити ширину кожного елемента 35%, дозволити цим елементам при зміні розміру контейнера зменшуватись та збільшуватись, додати зовнішній відступ 5рх:
Далі потрібно зробити зображення у галереї адаптивними, задати їм максимальну ширину у 100% та зробити блоковими:
