Hiske v2.1

by PhilQ

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="subpage" id="home" data-url="">
	<div class="bgimage">
		<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel nibh vulputate, pellentesque tortor pulvinar, tempus mauris. Duis volutpat eros odio, ac fermentum nisl rhoncus volutpat. Etiam luctus, dui et dapibus lobortis, lacus est blandit erat, elementum lobortis nibh ipsum sed sem. Ut in laoreet sapien. Sed malesuada tellus dui, vel eleifend neque dapibus sit amet. Etiam in dui vitae velit gravida varius. Aenean elementum pulvinar lectus sed tempus. Etiam sit amet interdum ipsum. Phasellus vel dolor quis sem vulputate congue vel sed tortor. Nulla id dignissim augue, et lacinia libero. Maecenas rutrum placerat facilisis. Integer vel finibus sapien. Quisque purus ex, eleifend quis nibh nec, gravida accumsan augue.
		</div>
	</div>
</div>
<div class="subpage" id="some" data-url="some/">
	<div class="bgimage">
		<div class="content">
In eros orci, dignissim eget facilisis porttitor, finibus sed augue. Donec justo tellus, viverra ut suscipit ut, vestibulum sit amet neque. Quisque nec imperdiet metus. Integer libero lorem, auctor et mauris vel, scelerisque sodales ligula. In posuere, ligula ac posuere scelerisque, eros lorem accumsan ex, quis laoreet orci quam finibus dolor. Donec magna leo, imperdiet vel quam nec, luctus malesuada dolor. Sed ut purus erat. Fusce risus leo, auctor ac odio quis, rutrum tristique tortor. Pellentesque sagittis leo eget magna consequat pulvinar. Aliquam pulvinar vulputate scelerisque. Phasellus tincidunt elit vitae ante pretium, ac mollis felis volutpat. Sed bibendum dui in vehicula tincidunt. Nam ut imperdiet odio.
		</div>
	</div>
</div>
<div class="subpage" id="some2" data-url="some2/">
	<div class="bgimage">
		<div class="content">
Vestibulum cursus arcu augue, sit amet pharetra elit sollicitudin nec. Quisque at elementum neque, sit amet faucibus libero. Donec sed...

SCSS

html, body, body *,body *:before, body *:after { margin: 0; padding: 0; box-sizing: border-box; }

.subpage {
	display: inline-block;
	width: 100%;
	margin-top: -80px;
	&:first-child {
		margin-top: 0px;
	}
	&:nth-child(odd) {
		.bgimage {
			clip-path: polygon(0% 0px, 100% 80px, 100% 100%, 0% 100%);
			background-image: url(https://placeholdit.imgix.net/~text?txtsize=16&bg=7AA45E&txtclr=89B270&txt=100%C3%97100%0Apx&w=100&h=100);
		}
	}
	&:nth-child(even) {
		.bgimage {
			clip-path: polygon(0% 80px, 100% 0px, 100% 100%, 0% 100%);
			background-image: url(https://placeholdit.imgix.net/~text?txtsize=16&bg=C9785D&txtclr=E88C6A&txt=100%C3%97100%0Apx&w=100&h=100);
		}
	}		

	.bgimage {
		background-color: transparent;
		background-repeat: repeat;
		//background-size: cover;
		background-position: top left;
		padding: 100px 0px;

		.content {
			width: 100%;
			max-width: 960px;
			margin: 0px auto;
			
			text-align: justify;
			font-family: sans-serif;
			font-size: 18px;
			line-height: 1.5;
		}
	}
}