Adriano/InsanityLab-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hero a piena altezza con testo sovrapposto come da figma

Browse Source
This commit is contained in:
AdrianoDev
2026-07-02 14:40:15 +02:00
parent 2d5ff1816d
commit ecdf12ee0e
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/home/HeroSlider.astro
+10 -3
View File
@@ -30,13 +30,20 @@ const slides = [
repeating-linear-gradient(to bottom, transparent 0 10px, rgba(0,0,0,.05) 10px 11px) left top / 40% 60% no-repeat, #fff; } repeating-linear-gradient(to bottom, transparent 0 10px, rgba(0,0,0,.05) 10px 11px) left top / 40% 60% no-repeat, #fff; }
.hero__slide { display: none; } .hero__slide { display: none; }
.hero__slide.is-active { display: block; } .hero__slide.is-active { display: block; }
.hero__in { display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; min-height: calc(100vh - var(--header-h)); gap: 30px; } /* Come nel Figma: figure a piena altezza ancorate in basso a destra,
testo sovrapposto sulla sinistra. */
.hero__in { position: relative; display: flex; align-items: center; min-height: calc(100vh - var(--header-h)); }
.hero__line { display: block; } .hero__line { display: block; }
.hero__text { position: relative; z-index: 1; max-width: 46%; }
.hero__text h1 { font-weight: 500; } .hero__text h1 { font-weight: 500; }
.hero__img { object-fit: contain; object-position: center bottom; height: 100%; max-height: calc(100vh - var(--header-h)); width: 100%; } .hero__img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: 80%; object-fit: contain; object-position: right bottom; }
.hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 3rem; color: var(--c-heading); cursor: pointer; } .hero__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 3rem; color: var(--c-heading); cursor: pointer; }
.hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; } .hero__arrow--prev { left: 12px; } .hero__arrow--next { right: 12px; }
@media (max-width: 991px) { .hero__in { grid-template-columns: 1fr; padding-block: 40px; min-height: 0; } } @media (max-width: 991px) {
.hero__in { flex-direction: column; align-items: flex-start; padding-block: 40px; min-height: 0; gap: 24px; }
.hero__text { max-width: none; }
.hero__img { position: static; max-width: 100%; height: auto; }
}
/* Ingresso al load stile Slider Revolution del template */ /* Ingresso al load stile Slider Revolution del template */
@keyframes hero-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } } @keyframes hero-up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }