Hero-Area
CODE
×
HTML
<div class='hero-area'> <div class='image-2'> <div class='img-hero'></div> <div class='hero-img-teaser'><span class='teaser-label-white'>Grüessech z'Bärn:</span><h2 class="hero-area white">Alles, was du bruuchsch, online!</h2> <div class="copyright-box inside"><span class="cb-1">Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen</span><span class="cb-2">©</span></div></div> <div class='copyright-box'><span class="cb-1">Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen</span><span class="cb-2">©</span></div> </div> <div class='hero-area-right-col'> <div class='right-hero-teaser red'><span class='teaser-label-white'>Kanton Bern</span><h2 class="hero-area important">Notfallnummern</h2></div> <div class='right-hero-teaser'><span class='teaser-label'>E-Service</span><h2 class="hero-area">Ausweise</h2></div> <div class='right-hero-teaser big'><span class='teaser-label'>Informationen</span><h2 class="hero-area">Abstimmungen, Wahlen und politische Geschäfte</h2></div> </div> <div class='hero-area-sub clearfix'> <div class='sub-hero-teaser'><span class='teaser-label'>E-Service</span><h2 class="hero-area">Statistikportal</h2></div> <div class='sub-hero-teaser v2'><span class='teaser-label'>E-Service</span><h2 class="hero-area">Karten (Geoportal)</h2></div> <div class='sub-hero-teaser v2 v3'><span class='teaser-label'>Kanton Bern</span><h2 class="hero-area">Stellenmarkt</h2></div> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.hero-area { margin-left: 30px; margin-right: 30px; } } @media screen and (max-width: 767px) { div.hero-area { margin-left: 20px; margin-right: 20px; margin-bottom: 36px; } } span.teaser-label { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(0,0,0,1); } span.teaser-label-white { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(255,255,255,1); } h2.hero-area { font-size: 34px; line-height: 41px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: rgba(0,0,0,1); position:absolute; left:0; bottom:0; overflow:hidden; text-overflow:ellipsis; margin-bottom: 30px; margin-left: 25px; width: calc(100% - 48px); } h2.hero-area.important { font-family: 'Roboto'; font-style: normal; font-weight: 400; color: rgba(255,255,255,1); margin-bottom: 30px; margin-left: 25px; } span.teaser-label-white { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(255,255,255,1); } h2.hero-area.white { font-family: 'Roboto'; font-style: normal; font-weight: 300; color: rgba(255,255,255,1); position:relative; margin-top: 24px; margin-right: 0; margin-bottom: 0; margin-left: 0; max-height: none; } @media screen and (max-width: 1119px) { div.image-2 { clear:both; width: 100%; height: auto; } div.hero-area-right-col { clear:both; width: 100%; height: auto; } } span.teaser-label { display:block; font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 26px; letter-spacing: 0.01rem; word-spacing: 0.025rem; line-height: 125%; margin-bottom: 15px; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; color: rgba(0,0,0,1); } h2.hero-area { font-size: 34px; line-height: 41px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: rgba(0,0,0,1); position:absolute; left:0; bottom:0; overflow:hidden; text-overflow:ellipsis; margin-bottom: 30px; margin-left: 25px; width: calc(100% - 48px); } div.clearfix:before { display:table-cell; } div.clearfix:after { position:-webkit-sticky;position:sticky; } .context-column + .clearfix { height: 15px; width: 100%; display: inline-block; } div.img-hero { -webkit-transition: transform 1800ms ease-in-out; transition: transform 1800ms ease-in-out; background-image: url('../img/bern-switzerland-shutterstock_1845136612.jpg_ecb4c93750.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; width: 100%; height: 623px; } div.hero-img-teaser { background-color: rgba(78,78,78,1); cursor:pointer; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; padding-top: 30px; padding-right: 25px; padding-bottom: 30px; padding-left: 25px; width: calc(50% - 8.5px); min-height: 143px; } div.right-hero-teaser { background-color: rgba(247,233,210,1); cursor:pointer; position:relative; white-space:nowrap; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; margin-bottom: 17px; padding-top: 30px; padding-right: 25px; padding-bottom: 30px; padding-left: 25px; width: 100%; height: 143px; } div.right-hero-teaser.big { white-space: normal; height: 303px; } div.right-hero-teaser.red { background-color: var(--red); max-width: 800px; } div.sub-hero-teaser { cursor:pointer; background-color: rgba(247,233,210,1); float:left; position:relative; white-space:nowrap; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; margin-right: 17px; padding-top: 30px; padding-right: 25px; padding-bottom: 30px; padding-left: 25px; width: calc(33.3% - 11.34px); height: 143px; } div.copyright-box { color: var(--black); background-color: rgba(255,255,255,0.42); font-family: 'Roboto'; font-style: normal; font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 0; word-spacing: 0; cursor:pointer; padding-top: 5px; padding-right: 12px; padding-bottom: 5px; padding-left: 12px; } div.image-2 > div.hero-img-teaser { position: absolute; bottom: 0px; left: 0px; } div.image-2 > div.copyright-box { position: absolute; top: unset; bottom: 0px; right: 0px; left: unset; z-index: +1; } div.hero-img-teaser:hover, div.hero-img-teaser:focus { background-color: rgba(64,64,64,1); } div.right-hero-teaser:hover, div.right-hero-teaser:focus { background-color: rgba(242,224,195,1); } div.right-hero-teaser.red:hover, div.right-hero-teaser.red:focus { background-color: var(--dark-red); } div.sub-hero-teaser:hover, div.sub-hero-teaser:focus { background-color: rgba(242,224,195,1); } div.image-2:hover > div.img-hero, div.image-2:focus > div.img-hero { -webkit-transform: scale(1.03); transform: scale(1.03); } div.image-2:hover > div.hero-img-teaser, div.image-2:focus > div.hero-img-teaser { background-color:#404040; } div.hero-img-teaser:last-of-type { margin-right: 0; } div.right-hero-teaser:last-of-type { margin-bottom: 0; } div.right-hero-teaser.big:last-of-type { margin-bottom: 0; } div.right-hero-teaser.red:last-of-type { margin-bottom: 0; } div.sub-hero-teaser:last-of-type { margin-right: 0; } @media screen and (max-width: 1119px) { div.hero-img-teaser { width: 100%; } div.right-hero-teaser.big { white-space:nowrap; } div.sub-hero-teaser { margin-bottom: 17px; width: 100%; } div.hero-area-right-col > div.right-hero-teaser.red { float: left; margin-right: 17px; width: calc(50% - 8.5px); } div.hero-area-right-col > div.right-hero-teaser { float: right; width: calc(50% - 8.5px); } div.hero-area-right-col > div.right-hero-teaser.big { clear: both; width: 100%; height: 143px; } } @media screen and (max-width: 767px) { div.img-hero { max-height: 64vh; } div.hero-img-teaser { padding-top: 25px; padding-right: 20px; padding-bottom: 25px; padding-left: 20px; min-height: auto; } div.right-hero-teaser { padding-top: 25px; padding-right: 20px; padding-bottom: 25px; padding-left: 20px; } div.right-hero-teaser.big { white-space: normal; height: auto; } div.hero-area-right-col > div.right-hero-teaser.red { clear: both; margin-right: 0px; width: 100%; } div.hero-area-right-col > div.right-hero-teaser { clear: both; width: 100%; } } div.hero-img-teaser > div.copyright-box { display: none; position: absolute; top: -35px; bottom: unset; right: 0; z-index: +1; } span.cb-1 { display: none; } span.cb-2 { font-size: 1.5rem; font-weight: 700; line-height: 1 } div.copyright-box.open { background-color: rgba(255,255,255,0.68); } div.copyright-box.open span.cb-1 { display: inline; } div.copyright-box.open span.cb-2 { display: none; } @media screen and (max-width: 1119px) { div.hero-img-teaser + div.copyright-box { display: none; } div.hero-img-teaser > div.copyright-box { display: block; } }
JS
Hero-Area
×
Grüessech z'Bärn:
Alles, was du bruuchsch, online!
Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen
©
Foto: Herbert von Grafingen - www.fotostock-archiv.ch/grafingen
©
Kanton Bern
Notfallnummern
E-Service
Ausweise
Informationen
Abstimmungen, Wahlen und politische Geschäfte
E-Service
Statistikportal
E-Service
Karten (Geoportal)
Kanton Bern
Stellenmarkt