Адаптивный код для секции primer-1
Адаптивный код для секции primer-1 Где будет галерея из 10 картинок каждая имеет под картинкой описание. фот секции - красный, фон для описания - синий. Описание выравнено по центру и является ссылкой
HTML:
<section class="primer-1">
<div class="gallery">
<div class="gallery-item">
<img src="/i/1.jpg" alt="Image 1">
<div class="description">
<a href="link1.html">Описание 1</a>
</div>
</div>
<!-- Добавьте остальные элементы галереи здесь -->
</div>
</section>
CSS:
.primer-1 {
background-color: red;
}
.gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px;
}
.gallery-item {
background-color: white;
}
.description {
background-color: blue;
text-align: center;
padding: 10px;
}
@media (min-width: 768px) {
.gallery {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.gallery {
grid-template-columns: repeat(5, 1fr);
}
}
Пожалуйста, укажите путь к изображениям и ссылкам, вставите остальные элементы галереи и настройте CSS стили по своему усмотрению. Этот код обеспечивает адаптивную сетку галереи для различных размеров экрана, где каждая картинка имеет описание с ссылкой, а фон секции и описания соответствует требованиям - красный и синий соответственно.
