codeithuman/layout.html

## layout.html
<!DOCTYPE html>
<head>
	<title>Responsive 2 Column Layout by AJ Robertson</title>
</head>
<body>
	<style>
		body {
			font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
			font-size: 0.9em;
			margin: 0;
		}
		.page {
			margin: 0 auto;
			max-width: 62em;
			padding: 1em;
		}
		header  {
			margin-bottom: 2em;
		}
		header h1 {
			margin-top: 0;
		}
		li {
			list-style: none;
		}
		ul {
			margin: 0;
			padding: 0;
		}
		nav li {
			display: inline;
			margin-right: 2em;
		}
		.column_main {
			display: inline-block;
			margin-bottom: 4em;
			width: 75%;
		}
		article {
			padding-right: 2em;
		}
		.column_sidebar {
			display: inline-block;
			width: 25%;
			vertical-align: top;
		}
		.column_sidebar li {
			margin-bottom: 1em;
		}

		/* 767px */
		@media(max-width:47.938em) {

			.column_main {
				display: block;
				width: 100%;
			}
			.column_sidebar {
				display: block;
				width: 100%;
			}
			nav li {
				display: block;
				margin-bottom: 0.5em;
				margin-right: 0em;
			}
		}
	</style>
	<div class="page">
		<header>
			<h1>Responsive 2 Column Layout</h1>
			<nav>
				<ul>
					<li>
						<a href="http://www.smashingmagazine.com/" target="_blank">
							Smashing Magazine
						</a>
					</li>
					<li>
						<a href="https://github.com/" target="_blank">
							Github
						</a>
					</li>
					<li>
						<a href="http://usesthis.com/" target="_blank">
							The Setup
						</a>
					</li>
					<li>
						<a href="http://www.tomshardware.com/" target="_blank">
							Tom's Hardware
						</a>
					</li>
				</ul>
			</nav>
		</header>
		<section class="column_main">
			<article>
				<h2>
					Android's VP Of Engineering Will Also Run Chrome
					OS Engineering
				</h2>
				<span>By Lucian Armasu OCTOBER 17, 2014 3:00 PM</span>
				<div>
					<p>
						Back in 2009, Sergei Brin, Google's co-founder,
						said that Android and ChromeOS were likely to
						"converge over time." Last year, Google
						appointed Sundar Pichai, the head of Chrome,
						to also lead Android, instead of Andy Rubin.
						That was a clear sign that the Chrome OS
						and Android merger will begin soon after that.
					</p>
				</div>
			</article>
			<article>
				<h2>
					MasterCard Working On Contactless Payment Card
				</h2>
				<span>By Kevin Parrish OCTOBER 17, 2014 2:20 PM</span>
				<div>
					<p>
						On Friday, Ajay Bhalla, President of
						Enterprise Security Solutions at MasterCard,
						said that consumers should be able to
						identify themselves without having to use
						PIN numbers and passwords. Biometric
						authentication is expected to be the key
						technology for this type of security, which
						is what the company is using in its
						partnership with Zwipe.
					</p>
				</div>
			</article>
			<article>
				<h2>Lepa's New LPC501 Lacking Newer Features</h2>
				<span>By Niels Broekhuijsen OCTOBER 17, 2014 1:50 PM</span>
				<div>
					<p>
						We first saw Lepa's new LPC501 mid-tower
						enclosure at Computex, and now the company
						is following with the official release.
						The LPC501 is a simple, albeit slightly
						out-of-date case, which arrives at a
						relatively friendly price point.
					</p>
				</div>
			</article>
		</section><!-- Removes non-breaking space between inline-block elements
		--><section class="column_sidebar">
			<h2>
				Most Popular Articles
			</h2>
			<ul>
				<li>
					<a href="#">
						This Box Encrypts Your Data Before Hitting The Network
					</a>
				</li>
				<li>
					<a href="#">
						Dell P2815Q 28-Inch 4K Ultra HD Monitor Review
					</a>
				</li>
				<li>
					<a href="#">
						Philips' New 27-Inch Monitor Has G-Sync Support
					</a>
				</li>
				<li>
					<a href="#">
						DeepCool's Pangu SW-RD Comes With Remotely Controlled LEDs
					</a>
				</li>
				<li>
					<a href="#">
						Asus PadFone X Mini Brings Intel LTE To US For $200
					</a>
				</li>
			</ul>
		</section>
	</div>
</body>
	<!DOCTYPE html>
	<head>
	<title>Responsive 2 Column Layout by AJ Robertson</title>
	</head>
	<body>
	<style>
	body {
	font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
	font-size: 0.9em;
	margin: 0;
	}
	.page {
	margin: 0 auto;
	max-width: 62em;
	padding: 1em;
	}
	header {
	margin-bottom: 2em;
	}
	header h1 {
	margin-top: 0;
	}
	li {
	list-style: none;
	}
	ul {
	margin: 0;
	padding: 0;
	}
	nav li {
	display: inline;
	margin-right: 2em;
	}
	.column_main {
	display: inline-block;
	margin-bottom: 4em;
	width: 75%;
	}
	article {
	padding-right: 2em;
	}
	.column_sidebar {
	display: inline-block;
	width: 25%;
	vertical-align: top;
	}
	.column_sidebar li {
	margin-bottom: 1em;
	}

	/* 767px */
	@media(max-width:47.938em) {

	.column_main {
	display: block;
	width: 100%;
	}
	.column_sidebar {
	display: block;
	width: 100%;
	}
	nav li {
	display: block;
	margin-bottom: 0.5em;
	margin-right: 0em;
	}
	}
	</style>
	<div class="page">
	<header>
	<h1>Responsive 2 Column Layout</h1>
	<nav>
	<ul>
	<li>
	<a href="http://www.smashingmagazine.com/" target="_blank">
	Smashing Magazine
	</a>
	</li>
	<li>
	<a href="https://github.com/" target="_blank">
	Github
	</a>
	</li>
	<li>
	<a href="http://usesthis.com/" target="_blank">
	The Setup
	</a>
	</li>
	<li>
	<a href="http://www.tomshardware.com/" target="_blank">
	Tom's Hardware
	</a>
	</li>
	</ul>
	</nav>
	</header>
	<section class="column_main">
	<article>
	<h2>
	Android's VP Of Engineering Will Also Run Chrome
	OS Engineering
	</h2>
	<span>By Lucian Armasu OCTOBER 17, 2014 3:00 PM</span>
	<div>
	<p>
	Back in 2009, Sergei Brin, Google's co-founder,
	said that Android and ChromeOS were likely to
	"converge over time." Last year, Google
	appointed Sundar Pichai, the head of Chrome,
	to also lead Android, instead of Andy Rubin.
	That was a clear sign that the Chrome OS
	and Android merger will begin soon after that.
	</p>
	</div>
	</article>
	<article>
	<h2>
	MasterCard Working On Contactless Payment Card
	</h2>
	<span>By Kevin Parrish OCTOBER 17, 2014 2:20 PM</span>
	<div>
	<p>
	On Friday, Ajay Bhalla, President of
	Enterprise Security Solutions at MasterCard,
	said that consumers should be able to
	identify themselves without having to use
	PIN numbers and passwords. Biometric
	authentication is expected to be the key
	technology for this type of security, which
	is what the company is using in its
	partnership with Zwipe.
	</p>
	</div>
	</article>
	<article>
	<h2>Lepa's New LPC501 Lacking Newer Features</h2>
	<span>By Niels Broekhuijsen OCTOBER 17, 2014 1:50 PM</span>
	<div>
	<p>
	We first saw Lepa's new LPC501 mid-tower
	enclosure at Computex, and now the company
	is following with the official release.
	The LPC501 is a simple, albeit slightly
	out-of-date case, which arrives at a
	relatively friendly price point.
	</p>
	</div>
	</article>
	</section><!-- Removes non-breaking space between inline-block elements
	--><section class="column_sidebar">
	<h2>
	Most Popular Articles
	</h2>
	<ul>
	<li>
	<a href="#">
	This Box Encrypts Your Data Before Hitting The Network
	</a>
	</li>
	<li>
	<a href="#">
	Dell P2815Q 28-Inch 4K Ultra HD Monitor Review
	</a>
	</li>
	<li>
	<a href="#">
	Philips' New 27-Inch Monitor Has G-Sync Support
	</a>
	</li>
	<li>
	<a href="#">
	DeepCool's Pangu SW-RD Comes With Remotely Controlled LEDs
	</a>
	</li>
	<li>
	<a href="#">
	Asus PadFone X Mini Brings Intel LTE To US For $200
	</a>
	</li>
	</ul>
	</section>
	</div>
	</body>