MediaWiki: LandingPage.css: Unterschied zwischen den Versionen
Aus Joachim Camerarius (1500-1574)
Noeth (Diskussion | Beiträge) Die Seite wurde neu angelegt: „#fadein, .jumbotronScroll a { display: inline-block; color: #fff } .jumbotron { margin-top: 0; padding-top: 15%; padding-bottom: 15%; background-image: url(https://i.imgur.com/8O36OdH.jpg); background-size: cover; box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23); border-radius: 0 !important; } .jumbotronScroll a { position: absolute; bottom: 20px; left: 50%; z-index: 2; -webkit-transform: translate(0, -50%); trans…“ |
Noeth (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
.hero { | |||
. | position: relative; | ||
width: 100vw; | |||
margin-left: calc(50% - 50vw); | |||
background: url("https://i.imgur.com/8O36OdH.jpg") center center / cover no-repeat; | |||
color: #fff; | |||
padding: 10rem 1rem; | |||
text-align: center; | |||
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23); | |||
} | } | ||
. | .hero h2 { | ||
font-weight: 700; | |||
font-size: 2.5rem; | |||
animation: fadeIn 1.7s cubic-bezier(.55,.085,.68,.53) both; | |||
} | } | ||
. | .hero h5 { | ||
font-size: 1.25rem; | |||
font-style: normal !important; | |||
animation: fadeIn 2s cubic-bezier(.55,.085,.68,.53) both; | |||
} | } | ||
/* --- Fade-in animation --- */ | |||
@keyframes fadeIn { | |||
from { opacity: 0; transform: translateY(10px); } | |||
to { opacity: 1; transform: translateY(0); } | |||
} | } | ||
/* --- Optional: scroll hint link if you re-add it --- */ | |||
.hero-scroll a { | |||
position: absolute; | |||
bottom: 20px; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
color: #fff; | |||
text-decoration: none; | |||
font-weight: 500; | |||
letter-spacing: .1em; | |||
transition: opacity .3s; | |||
} | } | ||
. | .hero-scroll a:hover { | ||
opacity: .6; | |||
} | } | ||
Version vom 11. November 2025, 13:10 Uhr
.hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
background: url("https://i.imgur.com/8O36OdH.jpg") center center / cover no-repeat;
color: #fff;
padding: 10rem 1rem;
text-align: center;
box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
}
.hero h2 {
font-weight: 700;
font-size: 2.5rem;
animation: fadeIn 1.7s cubic-bezier(.55,.085,.68,.53) both;
}
.hero h5 {
font-size: 1.25rem;
font-style: normal !important;
animation: fadeIn 2s cubic-bezier(.55,.085,.68,.53) both;
}
/* --- Fade-in animation --- */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Optional: scroll hint link if you re-add it --- */
.hero-scroll a {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
text-decoration: none;
font-weight: 500;
letter-spacing: .1em;
transition: opacity .3s;
}
.hero-scroll a:hover {
opacity: .6;
}