Шаблон:Main page/Aavikko/styles.css: различия между версиями
Материал из Aavikko
DeRecnad (обсуждение | вклад) мНет описания правки Метка: отменено |
DeRecnad (обсуждение | вклад) мНет описания правки |
||
(не показаны 2 промежуточные версии этого же участника) | |||
Строка 1: | Строка 1: | ||
#home-featured { | |||
width: 100%; /* Ширина на всю страницу */ | |||
height: 200px; | |||
display: block; /* Чтобы блок занял всю ширину */ | |||
position: relative; /* Если элементы внутри будут позиционированы */ | |||
overflow: hidden; /* Чтобы скрыть выходящие за границы элементы */ | |||
} | } | ||
#home-featured .home-card__background a { | |||
display: block; | |||
.home- | |||
height: 100%; | height: 100%; | ||
} | } | ||
#home- | #home-featured .home-card__background:after { | ||
background: # | top: unset; | ||
height: 60%; | |||
background: linear-gradient( to top, #000, transparent ); | |||
} | } | ||
.home- | #home-featured .home-card__foreground { | ||
top: unset; | |||
} | } | ||
#home- | #home-featured .home-card__background img { | ||
width: 100%; /* Изображение будет адаптироваться по ширине */ | |||
max-width: 100%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */ | |||
height: auto; /* Автоматическая подгонка высоты */ | |||
} | } | ||
.home-card__items { | |||
font- | position: absolute; | ||
top: 50%; /* Центрируем по вертикали */ | |||
left: 50%; /* Центрируем по горизонтали */ | |||
transform: translate(-50%, -50%); /* Корректируем смещение для абсолютного центрирования */ | |||
display: flex; | |||
justify-content: center; /* Центрируем текст по горизонтали */ | |||
align-items: center; /* Центрируем текст по вертикали */ | |||
width: 100%; | |||
height: 100%; | |||
font-size: 8em; /* Изменяй размер текста по необходимости */ | |||
color: white; /* Цвет текста */ | |||
text-align: center; | |||
} | } |
Текущая версия от 16:28, 10 сентября 2024
#home-featured {
width: 100%; /* Ширина на всю страницу */
height: 200px;
display: block; /* Чтобы блок занял всю ширину */
position: relative; /* Если элементы внутри будут позиционированы */
overflow: hidden; /* Чтобы скрыть выходящие за границы элементы */
}
#home-featured .home-card__background a {
display: block;
height: 100%;
}
#home-featured .home-card__background:after {
top: unset;
height: 60%;
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%; /* Ограничение максимальной ширины, чтобы не было выхода за пределы */
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: 8em; /* Изменяй размер текста по необходимости */
color: white; /* Цвет текста */
text-align: center;
}