Простий приклад галереї на семантичних тегах – частина 2

Продовжимо доопрацювання нашого прикладу галереї, який ми почали у попередній публікації під назвою  Простий приклад галереї на семантичних тегах – частина 1. HTML код ми залишаємо без змін, а от  CSS код ми дещо вдосконалимо. Нам потрібно, щоб при наведенні курсору мишки на зображення, воно збільшувалося разом з підписом, а інші зображення навпаки зменшувалися. /* Задаємо базові стилі для всіх […]

Продовжити читання »

Робочий метод вирівнювання в CSS Grid

Тема цієї публікації стосується вирівнювання контенту всередині пункту сітки CSS Grid. Як це можна вирішити простим методом і які методи центрування в CSS Grid не варто застосовувати ми також розглянемо на наочних прикладах. Для повного розуміння, як працює центрування в контейнері сітки, важливо спочатку зрозуміти структуру та область компонування сітки. Структура HTML контейнера grid має три рівні: контейнер пункт контент […]

Продовжити читання »

Простий приклад галереї на семантичних тегах – частина 1

Сьогодні починаємо розгляд прикладу простої галереї на семантичних HTML тегах. Сам приклад буде складатися з кількох частин. Пропонується перша частина прикладу. Галерея складається з дев’яти малюнків, розміщених сіткою, зі стилізованими підписом до кожного малюнку. Дана галерея презентується як навчальний приклад для виконання практичного завдання. Код HTML <main> <figure> <img src=”img/flamingo.png” alt=””> <figcaption>Фламінго</figcaption> </figure> <figure> <img src=”img/flamingo.png” alt=””> <figcaption>Фламінго</figcaption> </figure> <figure> <img […]

Продовжити читання »