MediaWiki: LandingPage.css: Unterschied zwischen den Versionen

Aus Joachim Camerarius (1500-1574)
Wechseln zu: Navigation, Suche
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…“
 
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
#fadein,
.hero {
.jumbotronScroll a {
  position: relative;
display: inline-block;
  width: 100vw;
color: #fff
  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);
}
}


.jumbotron {
.hero h2 {
margin-top: 0;
  font-weight: 700;
padding-top: 15%;
  font-size: 2.5rem;
padding-bottom: 15%;
  animation: fadeIn 1.7s cubic-bezier(.55,.085,.68,.53) both;
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 {
.hero h5 {
position: absolute;
  font-size: 1.25rem;
bottom: 20px;
  font-style: normal !important;
left: 50%;
  animation: fadeIn 2s cubic-bezier(.55,.085,.68,.53) both;
z-index: 2;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
font: 400 20px/1 sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s
}
}


.jumbotronScroll a:hover {
/* --- Fade-in animation --- */
opacity: .5
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
}


#fadein {
/* --- Optional: scroll hint link if you re-add it --- */
margin-top: 0;
.hero-scroll a {
text-align: left;
  position: absolute;
-webkit-animation: 1.7s cubic-bezier(.55, .085, .68, .53) alternate-reverse both text-blur-out;
  bottom: 20px;
animation: 1.7s cubic-bezier(.55, .085, .68, .53) alternate-reverse both text-blur-out
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .1em;
  transition: opacity .3s;
}
}


.full-width {
.hero-scroll a:hover {
width: 100vw;
  opacity: .6;
margin-top: 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw
}
}

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;
}