src/index.html

<!DOCTYPE html>
<html>

<head>
	<title>ES6+ and TypeScript: What You Need to Know</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
	<style>
		body {
			/* background-color: #F6525D; */
			background-color: #779ecb;
			color: #FDFCFD;
			font-family: 'Roboto Slab', serif;
			padding: 2em;
			text-align: center;
		}

		button {
			background-color: #6E6182;
			border: 0;
			border-radius: 2px;
			box-shadow: 2px 2px 3px 0px rgba(16, 16, 16, 0.25);
			color: #DDDCEC;
			font-size: 24px;
			font-weight: bold;
		}

		button:hover {
			color: #EEEDF7;
			cursor: pointer;
		}

		button:active {
			outline: 0;
		}

		button:focus {
			outline: 0;
		}

		button:disabled {
			background-color: #86779E;
			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
			color: #A9A8AD;
			cursor: auto;
		}

		.article {
			text-align: left;
			display: flex;
			margin: 10px 0;
		}

		.article .image {
			display: inline-block;
			flex-grow: 0;
		}

		.article .image img {
			max-height: 100px;
		}

		.article .content {
			vertical-align: top;
			display: inline-block;
			flex-grow: 1;
			padding: 0 10px;
		}

		.article .date {
			font-size: 0.9em;
			font-weight: normal;
		}

		.article .header {
			font-weight: bold;
			font-size: 1.2em;
		}

		.article .description {
			font-size: 0.9em;
		}

		a,
		a:link,
		a:visited {
			color: #FFFFFF;
			text-decoration: none;
		}
	</style>
</head>

<body>
	<h1>ES6+ and TypeScript: What You Need to Know</h1>
	<button type="button" name="load_articles" id="load_articles" disabled>Load Articles</button>

	<div id="articles"></div>
</body>

</html>