markheath/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
        <div class="container">
        <div class="header"><h1>Header</h1></div>
        <div class="blog">
            <h3>Blog 1</h3>
            <p>Nelsons folly pressgang overhaul carouser yawl cutlass fire in the hole capstan draft aye Jack Ketch execution dock main sheet nipperkin bowsprit. Wherry furl pillage hornswaggle chase hogshead quarterdeck parley sheet hail-shot chase guns killick pirate barkadeer spike. Man-of-war hail-shot no prey, no pay scourge of the seven seas Jack Ketch Corsair topgallant lugger chantey transom gibbet piracy Jolly Roger come about squiffy. Spirits matey Arr gun transom plunder brigantine pirate Spanish Main belaying pin squiffy gally scuppers poop deck clipper. Sea Legs starboard grapple matey sloop mizzenmast ahoy nipper jack league strike colors squiffy splice the main brace bilge rat no prey, no pay. Six pounders chandler tender yo-ho-ho tackle crimp driver sheet rope's end bilged on her anchor hands walk the plank black spot hang the jib Shiver me timbers.
            <p>Square-rigged trysail boom port jib take a caulk knave landlubber or just lubber cackle fruit reef Davy Jones' Locker piracy mizzenmast avast pressgang. Booty fire ship Yellow Jack landlubber or just lubber ye code of conduct spirits yawl chase bilge water jolly boat gabion run a shot across the bow tackle yardarm. Black spot case shot scuppers gangplank chantey hearties league fire in the hole fire ship American Main clap of thunder bowsprit rigging smartly bilged on her anchor. Cable shrouds sloop Sink me pinnace parley knave gaff grapple crimp haul wind cackle fruit killick interloper loot. Lookout six pounders chase guns gaff bilge rat provost red ensign sloop run a rig jib swing the lead American Main long boat case shot Chain Shot. Transom killick scuttle come about belaying pin salmagundi six pounders jury mast Buccaneer lateen sail tackle Jack Ketch quarterdeck avast Chain Shot.
            <p>Rutters clap of thunder dance the hempen jig careen draft cackle fruit gally long clothes heave down measured fer yer chains topsail grog blossom jury mast Plate Fleet gibbet. Barbary Coast Jolly Roger clap of thunder boom quarterdeck reef bucko tackle ballast hail-shot aye gangway warp belaying pin yard. Furl chase loot brig lee transom gibbet clipper Pieces of Eight trysail wench hulk barque landlubber or just lubber lugsail. Coxswain tack quarter bilge rat splice the main brace Jack Ketch aft swab skysail loot heave to barkadeer Cat o'nine tails yawl holystone. Reef barque Chain Shot gibbet six pounders pillage gaff doubloon haul wind wherry chase yard wench weigh anchor Sea Legs. Pink Corsair Chain Shot ho swab fire in the hole cutlass bilge water gibbet rutters pillage keel Davy Jones' Locker crimp skysail.
            <h3>Blog 2</h3>
            <p>Provost gabion black spot bring a spring upon her cable list lad Arr American Main squiffy Brethren of the Coast. Yo-ho-ho loaded to the gunwalls cable lee pink transom sutler skysail marooned sloop. Six pounders hulk scuppers jury mast American Main cable gibbet sutler Letter of Marque cog.
            <p>Fluke dance the hempen jig overhaul measured fer yer chains walk the plank ho shrouds tender haul wind take a caulk. Carouser code of conduct list ho lanyard overhaul piracy bowsprit Jack Tar ye. Ho bilge rat Brethren of the Coast wherry Pirate Round strike colors Jack Tar spyglass draft lanyard.
            <p>Tack cog code of conduct Jack Ketch plunder nipperkin cackle fruit bilge water Letter of Marque mizzenmast. Strike colors grapple tender landlubber or just lubber Yellow Jack bucko Gold Road gabion me cog. Lee Yellow Jack chase spyglass yo-ho-ho pillage long clothes American Main loot booty.
        </div>
        <div class="sidebar">
            <h3>Some things</h3>
            <ul>
                <li>Thing 1</li>
                <li>Thing 2</li>
                <li>Thing 3</li>
            </ul>
            <h3>More things</h3>
            <ul>
                <li>Thing 1</li>
                <li>Thing 2</li>
                <li>Thing 3</li>
            </ul>
            <h3>Many things</h3>
            <ul>
                <li>Thing 1</li>
                <li>Thing 2</li>
                <li>Thing 3</li>
                <li>Thing 4</li>
                <li>Thing 5</li>
                <li>Thing 6</li>
                <li>Thing 7</li>
                <li>Thing 8</li>
                <li>Thing 9</li>
                <li>Thing 10</li>
                <li>Thing 11</li>
                <li>Thing 12</li>
                <li>Thing 13</li>
                <li>Thing 14</li>
                <li>Thing 15</li>
                <li>Thing 16</li>
                <li>Thing 17</li>
                <li>Thing 18</li>
                <li>Thing 19</li>
                <li>Thing 20</li>
                <li>Thing 21</li>
            </ul>
        </div>
        <div class="footer">Footer</div>
        </div>
    </body>
</html>

## style.css
/* see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
.container {
    display: flex;
    flex-flow: row wrap; /* we'll wrap */
}

.header, .blog, .sidebar, .footer {
    flex: 1 100%;
}

.header {
    background: #f0f080;
    text-align: center;
}

.sidebar {
    background: #80f0f0;
    padding: 10px;
}

.footer {
    background: #f080f0;
    padding: 10px;
    text-align: center;
}

.blog {
    background: #80f080;
    padding: 10px;
}

/* medium screen */
@media all and (min-width: 600px) {
    /* if screen > 600px sidebar appears alongside blog getting 1/3rd of space */
  .blog { flex: 2 0px; }
  .sidebar { flex: 1 0px; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* On bigger screens, sidebar now only gets 1/4 of space */
  .blog { flex: 3 0px; }
  .sidebar { flex: 1 0px; }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title></title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="style.css" rel="stylesheet">
	</head>
	<body>
	<div class="container">
	<div class="header"><h1>Header</h1></div>
	<div class="blog">
	<h3>Blog 1</h3>
	<p>Nelsons folly pressgang overhaul carouser yawl cutlass fire in the hole capstan draft aye Jack Ketch execution dock main sheet nipperkin bowsprit. Wherry furl pillage hornswaggle chase hogshead quarterdeck parley sheet hail-shot chase guns killick pirate barkadeer spike. Man-of-war hail-shot no prey, no pay scourge of the seven seas Jack Ketch Corsair topgallant lugger chantey transom gibbet piracy Jolly Roger come about squiffy. Spirits matey Arr gun transom plunder brigantine pirate Spanish Main belaying pin squiffy gally scuppers poop deck clipper. Sea Legs starboard grapple matey sloop mizzenmast ahoy nipper jack league strike colors squiffy splice the main brace bilge rat no prey, no pay. Six pounders chandler tender yo-ho-ho tackle crimp driver sheet rope's end bilged on her anchor hands walk the plank black spot hang the jib Shiver me timbers.
	<p>Square-rigged trysail boom port jib take a caulk knave landlubber or just lubber cackle fruit reef Davy Jones' Locker piracy mizzenmast avast pressgang. Booty fire ship Yellow Jack landlubber or just lubber ye code of conduct spirits yawl chase bilge water jolly boat gabion run a shot across the bow tackle yardarm. Black spot case shot scuppers gangplank chantey hearties league fire in the hole fire ship American Main clap of thunder bowsprit rigging smartly bilged on her anchor. Cable shrouds sloop Sink me pinnace parley knave gaff grapple crimp haul wind cackle fruit killick interloper loot. Lookout six pounders chase guns gaff bilge rat provost red ensign sloop run a rig jib swing the lead American Main long boat case shot Chain Shot. Transom killick scuttle come about belaying pin salmagundi six pounders jury mast Buccaneer lateen sail tackle Jack Ketch quarterdeck avast Chain Shot.
	<p>Rutters clap of thunder dance the hempen jig careen draft cackle fruit gally long clothes heave down measured fer yer chains topsail grog blossom jury mast Plate Fleet gibbet. Barbary Coast Jolly Roger clap of thunder boom quarterdeck reef bucko tackle ballast hail-shot aye gangway warp belaying pin yard. Furl chase loot brig lee transom gibbet clipper Pieces of Eight trysail wench hulk barque landlubber or just lubber lugsail. Coxswain tack quarter bilge rat splice the main brace Jack Ketch aft swab skysail loot heave to barkadeer Cat o'nine tails yawl holystone. Reef barque Chain Shot gibbet six pounders pillage gaff doubloon haul wind wherry chase yard wench weigh anchor Sea Legs. Pink Corsair Chain Shot ho swab fire in the hole cutlass bilge water gibbet rutters pillage keel Davy Jones' Locker crimp skysail.
	<h3>Blog 2</h3>
	<p>Provost gabion black spot bring a spring upon her cable list lad Arr American Main squiffy Brethren of the Coast. Yo-ho-ho loaded to the gunwalls cable lee pink transom sutler skysail marooned sloop. Six pounders hulk scuppers jury mast American Main cable gibbet sutler Letter of Marque cog.
	<p>Fluke dance the hempen jig overhaul measured fer yer chains walk the plank ho shrouds tender haul wind take a caulk. Carouser code of conduct list ho lanyard overhaul piracy bowsprit Jack Tar ye. Ho bilge rat Brethren of the Coast wherry Pirate Round strike colors Jack Tar spyglass draft lanyard.
	<p>Tack cog code of conduct Jack Ketch plunder nipperkin cackle fruit bilge water Letter of Marque mizzenmast. Strike colors grapple tender landlubber or just lubber Yellow Jack bucko Gold Road gabion me cog. Lee Yellow Jack chase spyglass yo-ho-ho pillage long clothes American Main loot booty.
	</div>
	<div class="sidebar">
	<h3>Some things</h3>
	<ul>
	<li>Thing 1</li>
	<li>Thing 2</li>
	<li>Thing 3</li>
	</ul>
	<h3>More things</h3>
	<ul>
	<li>Thing 1</li>
	<li>Thing 2</li>
	<li>Thing 3</li>
	</ul>
	<h3>Many things</h3>
	<ul>
	<li>Thing 1</li>
	<li>Thing 2</li>
	<li>Thing 3</li>
	<li>Thing 4</li>
	<li>Thing 5</li>
	<li>Thing 6</li>
	<li>Thing 7</li>
	<li>Thing 8</li>
	<li>Thing 9</li>
	<li>Thing 10</li>
	<li>Thing 11</li>
	<li>Thing 12</li>
	<li>Thing 13</li>
	<li>Thing 14</li>
	<li>Thing 15</li>
	<li>Thing 16</li>
	<li>Thing 17</li>
	<li>Thing 18</li>
	<li>Thing 19</li>
	<li>Thing 20</li>
	<li>Thing 21</li>
	</ul>
	</div>
	<div class="footer">Footer</div>
	</div>
	</body>
	</html>
	/* see https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
	.container {
	display: flex;
	flex-flow: row wrap; /* we'll wrap */
	}

	.header, .blog, .sidebar, .footer {
	flex: 1 100%;
	}

	.header {
	background: #f0f080;
	text-align: center;
	}

	.sidebar {
	background: #80f0f0;
	padding: 10px;
	}

	.footer {
	background: #f080f0;
	padding: 10px;
	text-align: center;
	}

	.blog {
	background: #80f080;
	padding: 10px;
	}

	/* medium screen */
	@media all and (min-width: 600px) {
	/* if screen > 600px sidebar appears alongside blog getting 1/3rd of space */
	.blog { flex: 2 0px; }
	.sidebar { flex: 1 0px; }
	}

	/* Large screens */
	@media all and (min-width: 800px) {
	/* On bigger screens, sidebar now only gets 1/4 of space */
	.blog { flex: 3 0px; }
	.sidebar { flex: 1 0px; }
	}