kverner-100-980x300
<!DOCTYPE html>
<html lang="no">
<head>
<title>Kværner 100 år</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mykje har skjedd på 100 år" />
<style>
@import url("https://use.typekit.net/pyx7ujx.css");html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.clear{*zoom:1}.clear:before,.clear:after{display:table;content:" "}.clear:after{clear:both}*,*:before,*:after{-webkit-box-sizing:border-box;box-sizing:border-box}img{max-width:100%;height:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{font:400 1em/1.3 'sofia-pro', Geneva, Tahoma, Verdana, sans-serif;color:#fff}h1{font-size:3.8em;margin-bottom:0.5em}h2{font-size:3.12em;margin-bottom:0.5em}p{font-size:1.66em;margin-bottom:1em}a{color:#fff;text-decoration:none}a:visited,a:hover,a:active,a:focus{text-decoration:underline}section.kvaerner-100{position:relative;background:#fff;width:100%;max-width:100%;height:100%;padding:0;margin:0;overflow:hidden}section.kvaerner-100.banner-980-300{width:980px;height:300px}section.kvaerner-100.banner-1068-300{width:1068px;height:300px}section.kvaerner-100.banner-950-150{width:950px;height:150px}section.kvaerner-100>a{display:block;width:100%;height:100%}.banner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:100%}.banner .banner-logo{position:relative;float:left;width:30.44%;height:100%}.banner .banner-content{position:relative;float:left;width:69.56%;height:100%}.banner-logo{position:relative}.banner-logo img{position:absolute;top:0;right:0;bottom:0;left:0;width:60%;margin:auto}.banner-content{overflow:hidden}.banner-content .banner-content-inner{height:auto;min-height:100%;position:absolute;top:0%;left:0;-webkit-transition:top 2500ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 3.5s;-o-transition:top 2500ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 3.5s;transition:top 2500ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 3.5s}.banner-content .banner-content-inner.loaded{top:-1374.5%}.banner-980-300 .banner-content .banner-content-inner.loaded{top:-4123px}.banner-1068-300 .banner-content .banner-content-inner.loaded{top:-4466px}.banner-content .inner-item{width:100%}.banner-content .inner-item.item-1{background:#00ACB6;height:300px;text-align:center;padding:4em 1em 0}.banner-content .inner-item.item-2{height:auto}.banner-content .inner-item.item-2 img{margin-bottom:-3px}.banner-content .inner-item.item-3{background:#373C82;height:300px;text-align:center;padding:4em 1em}.fade-in{opacity:0;-webkit-transition:opacity 1s ease-in 6s;-o-transition:opacity 1s ease-in 6s;transition:opacity 1s ease-in 6s}.fade-in.loaded{opacity:1}
</style>
</head>
<body>
<main>
<section class="kvaerner-100 banner-980-300">
<a href="https://kvaerner100.no/" target="_blank">
<div class="banner">
<div class="banner-logo">
<img src="https://dev.zpirit.no/annonser/kvaerner-100/assets/img/kvaerner-100-logo.svg" alt="Kværner 100 år">
</div>
<div class="banner-content">
<div class="banner-content-inner">
<div class="inner-item item-1">
<h1>Mykje har skjedd<br> på 100 år</h1>
</div>
<div class="inner-item item-2">
<img src="https://dev.zpirit.no/annonser/kvaerner-100/assets/img/historisk-lr.jpg" alt="historiske bilder" />
</div>
<div class="inner-item item-3">
<div class="fade-in">
<h2>Bli med og skriv historie</h2>
<p>Del bilete og historiar frå livet på verftet<br> i vårt digitale museum</p>
</div>
</div>
</div>
</div>
</div>
</a>
</section>
</main>
<script type="text/javascript">
window.addEventListener("load",function(){var e=document.querySelector(".banner-content-inner");if(e){var n=Math.round(e.getBoundingClientRect().height),t=Math.round(e.parentNode.getBoundingClientRect().height);n=n-2*n+t,e.style.top=n+"px",e.className="banner-content-inner loaded"}document.querySelector(".fade-in").className="fade-in loaded"},!1);
</script>
</body>
</html>