Шаблон:Main page/Aavikko/styles.css: различия между версиями

Материал из Aavikko
мНет описания правки
Метка: отменено
мНет описания правки
Метка: отменено
Строка 9: Строка 9:
#home-featured .home-card__background a {
#home-featured .home-card__background a {
display: block;
display: block;
height: 200%;
height: 20%;
}
}


Строка 23: Строка 23:


#home-featured .home-card__background img {
#home-featured .home-card__background img {
     width: 50%; /* Изображение будет адаптироваться по ширине */
     width: 100%; /* Изображение будет адаптироваться по ширине */
     max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */
     max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */
    top: 50%;
     height: auto; /* Автоматическая подгонка высоты */
     height: auto; /* Автоматическая подгонка высоты */
}
}

Версия от 15:59, 10 сентября 2024

#home-featured {
	width: 100%; /* Ширина на всю страницу */
	height: 200px;
    display: block; /* Чтобы блок занял всю ширину */
    position: relative; /* Если элементы внутри будут позиционированы */
    overflow: hidden; /* Чтобы скрыть выходящие за границы элементы */
}

#home-featured .home-card__background a {
	display: block;
	height: 20%;
}

#home-featured .home-card__background:after {
	top: unset;
	height: 120%;
	background: linear-gradient( to top, #000, transparent );
}

#home-featured .home-card__foreground {
	top: unset;
}

#home-featured .home-card__background img {
    width: 100%; /* Изображение будет адаптироваться по ширине */
    max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */
    top: 50%;
    height: auto; /* Автоматическая подгонка высоты */
}

.home-card__items {
    position: absolute;
    top: 50%; /* Центрируем по вертикали */
    left: 50%; /* Центрируем по горизонтали */
    transform: translate(-50%, -50%); /* Корректируем смещение для абсолютного центрирования */
    display: flex;
    justify-content: center; /* Центрируем текст по горизонтали */
    align-items: center; /* Центрируем текст по вертикали */
    width: 100%;
    height: 100%;
    font-size: 3em; /* Изменяй размер текста по необходимости */
    color: white; /* Цвет текста */
    text-align: center;
}