eikeland
1/9/2019 - 11:39 AM

kverner-100-980x300

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>