Above-the-fold (Campaign-Site)
CODE
×
HTML
<div class='campaign-site'> <div class='campaign-header'> <img class='campaign-logo' src='img/Kampagne.svg'> <a class='hamburger-icon'></a> <a class='search-icon-mm-campaign'></a> <a class='main-menue-campaign v1 v2'>Menü-Element 3</a> <a class='main-menue-campaign v1'>Menü-Element 2</a> <span class='main-menue-campaign active'>Menü-Element aktiv</span> <a class='main-menue-campaign'>Menü-Element 1</a> </div> <div class='hero-area-campaign'> <div class='img-fullpage'></div> <div class='darken'></div> <div class='campaign-title'><b>Kampagne</b> - ein prägnanter Satz zum Thema!</div> <div class='scroll-down bounce'></div> </div> </div>
CSS
@media screen and (max-width: 1119px) { div.campaign-site { max-height: 960px; } } @media screen and (max-width: 767px) { div.campaign-site { max-height: 860px; } } a.main-menue-campaign:hover::after, a.main-menue-campaign:focus::after, a.main-menue-campaign:active::after { -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } a.hamburger-icon { background-image: url('../img/hamburger-icon.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 32px; height: 32px; display:inline-block; float:right; } div.darken { background: rgba(38,38,38,0.6); background: -moz-linear-gradient(top, rgba(38,38,38,0.6) 0%, rgba(68,68,68,0.2) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(38,38,38,0.6)), color-stop(100%, rgba(68,68,68,0.2))); background: -webkit-linear-gradient(top, rgba(38,38,38,0.6) 0%, rgba(68,68,68,0.2) 100%); background: -o-linear-gradient(top, rgba(38,38,38,0.6) 0%, rgba(68,68,68,0.2) 100%); background: -ms-linear-gradient(top, rgba(38,38,38,0.6) 0%, rgba(68,68,68,0.2) 100%); background: linear-gradient(to bottom, rgba(38,38,38,0.6) 0%, rgba(68,68,68,0.2) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#262626', endColorstr='#444444', GradientType=0 ); width: 100%; height: 100%; min-height: 250px; } div.img-fullpage { background-image: url('../img/Kampagnen-Image.jpg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: cover; width: 100%; height: 100%; } div.campaign-title { color: var(--white); font-size: 65px; line-height: 74px; letter-spacing: 0.02rem; word-spacing: 0.04rem; font-family: 'Roboto'; font-style: normal; font-weight: 300; line-height: 125%; text-align:center; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-right: 25%; padding-left: 25%; width: 100%; height: 100%; } div.scroll-down.bounce { background-image: url('../img/scroll-down.svg'); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; width: 100%; height: 32px; } a.main-menue-campaign { font-size: 18px; line-height: 21px; font-family: 'Roboto'; font-style: normal; font-weight: 300; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); text-decoration:none; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; margin-top: 34px; } span.main-menue-campaign.active { font-size: 18px; line-height: 21px; font-family: 'Roboto'; font-style: normal; font-weight: 400; letter-spacing: 0.01rem; word-spacing: 0.025rem; color: var(--black); text-decoration:none; display:inline-block; margin: 0 calc(1.1vw + 12px) 0 calc(1.1vw + 12px); height: 36px; line-height: 1.5; margin-top: 34px; } a.search-icon-mm-campaign { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzNjggMzY4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzNjggMzY4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBkPSJNMjk2LjcsMjcyLjRMMjM2LjMsMjEyYzI0LjgtMzQuOCwyMS42LTgzLjMtOS41LTExNC41Yy0zNC44LTM0LjgtOTEuMi0zNC44LTEyNS45LDBzLTM0LjgsOTEuMiwwLDEyNS45DQoJYzMxLjIsMzEuMiw3OS43LDM0LjMsMTE0LjUsOS41bDYwLjQsNjAuNGM1LjgsNS44LDE1LjIsNS44LDIxLDBDMzAyLjUsMjg3LjYsMzAyLjUsMjc4LjIsMjk2LjcsMjcyLjR6IE0xMjEuOCwyMDIuNA0KCWMtMjMuMi0yMy4yLTIzLjItNjAuOCwwLTg0czYwLjgtMjMuMiw4NCwwczIzLjIsNjAuOCwwLDg0UzE0NSwyMjUuNiwxMjEuOCwyMDIuNHoiLz4NCjwvc3ZnPg=='); background-repeat: no-repeat; background-attachment: scroll; background-position: center center; background-size: auto; background-position: center; background-repeat: no-repeat; background-size: 32px 32px; width: 60px; height: 60px; margin-top: 18px; margin-right: 2.4vw; margin-left: 0.6vw; display:inline-block; vertical-align:middle; } img.campaign-logo { width: 190px; } div.hero-area-campaign > div.img-fullpage { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } div.hero-area-campaign > div.darken { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } div.hero-area-campaign > div.campaign-title { position: absolute; top: calc(50vh - 170px); } div.hero-area-campaign > div.scroll-down.bounce { position: absolute; bottom: 74px; } div.campaign-header > img.campaign-logo { float: left; margin-top: 22px; margin-left: 45px; } div.campaign-header > a.hamburger-icon { display: none; } div.campaign-header > a.search-icon-mm-campaign { float: right; } div.campaign-header > a.main-menue-campaign.v1.v2 { float: right; } div.campaign-header > a.main-menue-campaign.v1 { float: right; } div.campaign-header > span.main-menue-campaign.active { float: right; } div.campaign-header > a.main-menue-campaign { float: right; } a.hamburger-icon:hover, a.hamburger-icon:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.search-icon-mm-campaign:hover, a.search-icon-mm-campaign:focus { -webkit-animation-name: hvr-pop; animation-name: hvr-pop; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } a.main-menue-campaign:after { display: block; content: ''; border: 1px solid #000; border-radius: 3px; height: 2px; background-color: #000; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } span.main-menue-campaign.active:after { display: block; content: ''; border: 1px solid #EA161F; border-radius: 3px; height: 2px; background-color: #EA161F; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } @media screen and (max-width: 1119px) { div.campaign-title { font-size: 54px; line-height: 62px; padding-right: 10%; padding-left: 10%; } div.campaign-header > img.campaign-logo { margin-left: 30px; } div.campaign-header > a.hamburger-icon { display: block; float: right; margin-top: 32px; margin-right: 30px; } div.campaign-header > a.search-icon-mm-campaign { display: none; } div.campaign-header > a.main-menue-campaign.v1.v2 { display: none; } div.campaign-header > a.main-menue-campaign.v1 { display: none; } div.campaign-header > span.main-menue-campaign.active { display: none; } div.campaign-header > a.main-menue-campaign { display: none; } } @media screen and (max-width: 767px) { div.campaign-title { font-size: 32px; line-height: 38px; margin: 45px 0 24px -1px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-right: 5%; padding-left: 5%; } div.campaign-header > img.campaign-logo { margin-left: 20px; } div.campaign-header > a.hamburger-icon { margin-right: 20px; } } a { color: var(--black); } a:hover, a:focus { color: var(--black); }
JS
Above-the-fold (Campaign-Site)
×
Menü-Element 3
Menü-Element 2
Menü-Element aktiv
Menü-Element 1
Kampagne
- ein prägnanter Satz zum Thema!