lenagroeger/.block

## .block
height: 800
scrolling: yes

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Single sticky image</title>
	<style type="text/css">


		body {
			margin: 0px;
		}
		.wrapper-box {
			height: 300vh;
		}

		.image-box {
			position: sticky;
			top: 0;
			height: 100vh;
		}

		img {
			width: 100%;
    	object-fit: cover;
    	height: 100%;
		}

		.text-box {
			height: 100vh;
    	position: relative;
    	z-index: 1;
    	-webkit-transform: translate3d( 0, 0, 0 );
		}

		.text-box p {
			width: 90%;
			max-width: 650px;
			margin: 15px auto;
			font-size: 1.3em;
			line-height: 1.5em;
			font-family: Tiempos Text;
			color: #fff;
		}

		.copy {
			height: 50vh;
		}

	</style>
</head>

<body>

<div class="copy"></div>

<div class="wrapper-box">

	<div class="image-box">
		<img src="http://propublica.s3.amazonaws.com/projects/charts/12199932.jpg">
	</div>
	<div class="text-box">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue eget arcu dictum varius duis. Faucibus nisl tincidunt eget nullam non nisi est sit. Ut morbi tincidunt augue interdum velit euismod in. Ultricies tristique nulla aliquet enim. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Quam nulla porttitor massa id neque aliquam. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Quis auctor elit sed vulputate mi. Aliquam id diam maecenas ultricies mi eget mauris. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Nunc sed blandit libero volutpat. Neque egestas congue quisque egestas diam in arcu.

<p>Ipsum a arcu cursus vitae congue mauris rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui. Volutpat odio facilisis mauris sit amet. Urna nunc id cursus metus aliquam eleifend. Vitae congue eu consequat ac felis donec et odio pellentesque. Vulputate mi sit amet mauris commodo quis imperdiet. Turpis egestas maecenas pharetra convallis posuere morbi leo. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Pulvinar mattis nunc sed blandit libero. Scelerisque eleifend donec pretium vulputate sapien nec. Tempor nec feugiat nisl pretium fusce.

<p>Quam elementum pulvinar etiam non quam lacus. A iaculis at erat pellentesque adipiscing commodo. Id neque aliquam vestibulum morbi blandit cursus risus at. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Egestas pretium aenean pharetra magna ac placerat. Blandit volutpat maecenas volutpat blandit aliquam etiam. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper. Eleifend mi in nulla posuere sollicitudin aliquam. Aliquet nibh praesent tristique magna sit amet purus. Risus sed vulputate odio ut. Urna cursus eget nunc scelerisque. Odio eu feugiat pretium nibh ipsum consequat. Ut sem viverra aliquet eget sit. Tempor id eu nisl nunc. Tincidunt arcu non sodales neque sodales ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Ultrices neque ornare aenean euismod. Morbi tristique senectus et netus et malesuada fames ac. Eget velit aliquet sagittis id consectetur purus ut faucibus. Lorem mollis aliquam ut porttitor.

<p>Quam viverra orci sagittis eu. Commodo sed egestas egestas fringilla phasellus. Quam nulla porttitor massa id neque aliquam. Porttitor lacus luctus accumsan tortor. Pellentesque dignissim enim sit amet venenatis. Accumsan tortor posuere ac ut consequat semper viverra. Ac ut consequat semper viverra nam libero justo. Amet massa vitae tortor condimentum lacinia. Condimentum id venenatis a condimentum. Ac turpis egestas maecenas pharetra convallis.

<p>Sed felis eget velit aliquet sagittis. Sit amet cursus sit amet dictum sit amet justo donec. Sit amet risus nullam eget felis eget nunc lobortis mattis. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Consequat id porta nibh venenatis. At quis risus sed vulputate odio ut. Porttitor eget dolor morbi non arcu. Curabitur vitae nunc sed velit dignissim sodales ut eu. Aliquet bibendum enim facilisis gravida neque convallis a. Aenean pharetra magna ac placerat. Viverra orci sagittis eu volutpat. Iaculis at erat pellentesque adipiscing. Urna et pharetra pharetra massa massa ultricies mi quis. Non pulvinar neque laoreet suspendisse. Porta nibh venenatis cras sed felis eget velit. Eu tincidunt tortor aliquam nulla facilisi. Nisi porta lorem mollis aliquam.
	</div>

</div>

<div class="copy"></div>


</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Single sticky image</title>
	<style type="text/css">


	body {
	margin: 0px;
	}
	.wrapper-box {
	height: 300vh;
	}

	.image-box {
	position: sticky;
	top: 0;
	height: 100vh;
	}

	img {
	width: 100%;
	object-fit: cover;
	height: 100%;
	}

	.text-box {
	height: 100vh;
	position: relative;
	z-index: 1;
	-webkit-transform: translate3d( 0, 0, 0 );
	}

	.text-box p {
	width: 90%;
	max-width: 650px;
	margin: 15px auto;
	font-size: 1.3em;
	line-height: 1.5em;
	font-family: Tiempos Text;
	color: #fff;
	}

	.copy {
	height: 50vh;
	}

	</style>
	</head>

	<body>

	<div class="copy"></div>

	<div class="wrapper-box">

	<div class="image-box">
	<img src="http://propublica.s3.amazonaws.com/projects/charts/12199932.jpg">
	</div>
	<div class="text-box">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue eget arcu dictum varius duis. Faucibus nisl tincidunt eget nullam non nisi est sit. Ut morbi tincidunt augue interdum velit euismod in. Ultricies tristique nulla aliquet enim. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Ac feugiat sed lectus vestibulum mattis ullamcorper velit. Quam nulla porttitor massa id neque aliquam. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Quis auctor elit sed vulputate mi. Aliquam id diam maecenas ultricies mi eget mauris. Viverra ipsum nunc aliquet bibendum enim facilisis gravida. Nunc sed blandit libero volutpat. Neque egestas congue quisque egestas diam in arcu.

	<p>Ipsum a arcu cursus vitae congue mauris rhoncus. Erat pellentesque adipiscing commodo elit at imperdiet dui. Volutpat odio facilisis mauris sit amet. Urna nunc id cursus metus aliquam eleifend. Vitae congue eu consequat ac felis donec et odio pellentesque. Vulputate mi sit amet mauris commodo quis imperdiet. Turpis egestas maecenas pharetra convallis posuere morbi leo. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Pulvinar mattis nunc sed blandit libero. Scelerisque eleifend donec pretium vulputate sapien nec. Tempor nec feugiat nisl pretium fusce.

	<p>Quam elementum pulvinar etiam non quam lacus. A iaculis at erat pellentesque adipiscing commodo. Id neque aliquam vestibulum morbi blandit cursus risus at. Sagittis aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Egestas pretium aenean pharetra magna ac placerat. Blandit volutpat maecenas volutpat blandit aliquam etiam. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper. Eleifend mi in nulla posuere sollicitudin aliquam. Aliquet nibh praesent tristique magna sit amet purus. Risus sed vulputate odio ut. Urna cursus eget nunc scelerisque. Odio eu feugiat pretium nibh ipsum consequat. Ut sem viverra aliquet eget sit. Tempor id eu nisl nunc. Tincidunt arcu non sodales neque sodales ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Ultrices neque ornare aenean euismod. Morbi tristique senectus et netus et malesuada fames ac. Eget velit aliquet sagittis id consectetur purus ut faucibus. Lorem mollis aliquam ut porttitor.

	<p>Quam viverra orci sagittis eu. Commodo sed egestas egestas fringilla phasellus. Quam nulla porttitor massa id neque aliquam. Porttitor lacus luctus accumsan tortor. Pellentesque dignissim enim sit amet venenatis. Accumsan tortor posuere ac ut consequat semper viverra. Ac ut consequat semper viverra nam libero justo. Amet massa vitae tortor condimentum lacinia. Condimentum id venenatis a condimentum. Ac turpis egestas maecenas pharetra convallis.

	<p>Sed felis eget velit aliquet sagittis. Sit amet cursus sit amet dictum sit amet justo donec. Sit amet risus nullam eget felis eget nunc lobortis mattis. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Consequat id porta nibh venenatis. At quis risus sed vulputate odio ut. Porttitor eget dolor morbi non arcu. Curabitur vitae nunc sed velit dignissim sodales ut eu. Aliquet bibendum enim facilisis gravida neque convallis a. Aenean pharetra magna ac placerat. Viverra orci sagittis eu volutpat. Iaculis at erat pellentesque adipiscing. Urna et pharetra pharetra massa massa ultricies mi quis. Non pulvinar neque laoreet suspendisse. Porta nibh venenatis cras sed felis eget velit. Eu tincidunt tortor aliquam nulla facilisi. Nisi porta lorem mollis aliquam.
	</div>

	</div>

	<div class="copy"></div>



	</body>
	</html>