patrickhulce/layout-instability.html

## layout-instability.html
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html, body, h1 {
      margin: 0;
      font-size: 150%;
    }

    .elem {
      min-height: 200px;
      width: 100%;
    }

    .blue {
      background-color: blue;
    }

    .green {
      background-color: green;
    }

    .pattern {
      background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/swirl_pattern.png);
    }

  </style>
</head>
<body class="pattern">
  <div id="first">
  </div>
  <div id="second">
  </div>
  <div id="third">
    <div class="elem blue"><h1>Header Text</h1><p>I do like to have some header text when I read my articles.</div>
  </div>

  <script>
    let preamble = ''
    const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim congue lacinia. Aliquam pharetra iaculis lacus nec hendrerit. Quisque eu tempus nibh. Donec non mauris nec tortor facilisis aliquet. Maecenas commodo aliquam elit, at consequat massa laoreet in. Aenean felis nulla, gravida sit amet leo a, scelerisque blandit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
    function addTo(id, ...classes) {
      const element = document.createElement('div')
      element.textContent = ipsum.slice(0, 80);
      element.classList.add(...classes)
      document.getElementById(id).appendChild(element)
    }

    setTimeout(() => addTo('first', 'green'), 1000);
    setTimeout(() => addTo('second', 'blue'), 2000);
    setTimeout(() => addTo('first', 'pattern'), 3000);
    setTimeout(() => addTo('third', 'green'), 4000);
  </script>

  <!-- Added to delay load for at least 3 seconds -->
  <script src="go.js?delay=3000"></script>
</body>
</html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	html, body, h1 {
	margin: 0;
	font-size: 150%;
	}

	.elem {
	min-height: 200px;
	width: 100%;
	}

	.blue {
	background-color: blue;
	}

	.green {
	background-color: green;
	}

	.pattern {
	background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/swirl_pattern.png);
	}

	</style>
	</head>
	<body class="pattern">
	<div id="first">
	</div>
	<div id="second">
	</div>
	<div id="third">
	<div class="elem blue"><h1>Header Text</h1><p>I do like to have some header text when I read my articles.</div>
	</div>

	<script>
	let preamble = ''
	const ipsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim congue lacinia. Aliquam pharetra iaculis lacus nec hendrerit. Quisque eu tempus nibh. Donec non mauris nec tortor facilisis aliquet. Maecenas commodo aliquam elit, at consequat massa laoreet in. Aenean felis nulla, gravida sit amet leo a, scelerisque blandit mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
	function addTo(id, ...classes) {
	const element = document.createElement('div')
	element.textContent = ipsum.slice(0, 80);
	element.classList.add(...classes)
	document.getElementById(id).appendChild(element)
	}

	setTimeout(() => addTo('first', 'green'), 1000);
	setTimeout(() => addTo('second', 'blue'), 2000);
	setTimeout(() => addTo('first', 'pattern'), 3000);
	setTimeout(() => addTo('third', 'green'), 4000);
	</script>

	<!-- Added to delay load for at least 3 seconds -->
	<script src="go.js?delay=3000"></script>
	</body>
	</html>