mrjasonweaver/mediaboxes.html

## mediaboxes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;">
<title>Media Boxes</title>
<style>
/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: clean, sans-serif;
}
/* Globals */
a {text-decoration: none;}
a:hover {text-decoration: underline;}
h1,h2 {font-family: georgia, serif;}
h1 {font-size: 21px;margin-bottom: 10px;}
h2 {font-size: 16px;margin-bottom: 5px;}
p {font-size: 12px;margin-bottom: 5px;}
.site-title {font-size: 26px;text-align: center;}
.container {margin: 10% auto;width: 90%;}

/* Media Boxes */
.mb-inner {
	overflow: hidden;
	margin: 10px 5%;
}
.mb-img {
	float: left;
	margin: 0 10px 10px 0;
	max-width: 100px;
	height: auto;
}
.mb-foot {
	clear: both;
}
/* End Media Boxes */

@media all and (min-width: 640px) {
	/* Media Boxes for larger screens */
	.example  {
        background: #f5f5f5;
        float: left;
        margin: 2%;
        width: 29.333%;
	}
	.mb-img {
		width: 33%;
	}
	/* End Media Boxes for larger screens */
}
</style>
</head>
  <body>
	<div class="container">
		<h1 class="site-title">Media Boxes for Mobile-First Responsive Web Design</h1>

		<!--// Begin the media boxes //
			* The idea here is to use common class names
			* for each element in a media box and declare
			* only once in your css. This speeds css load time
			* and keeps your css code super clean and maintainable.
			* Credit: Nicole Sullivan @stubbornella. Her talk "Our Best Practices Are Killing Us"
			* was the inspiration for this code. http://www.stubbornella.org -->

		<section class="media-boxes">
			<article class="media-box example">
				<div class="mb-inner">
					<header class="mb-head">
						<h1>Media Box Heading</h1>
					</header>
					<a href="https://twitter.com/RWD" class="mb-link">
						<img src="https://twimg0-a.akamaihd.net/profile_images/1695501054/book-responsive.gif" alt="rwd" class="mb-img" width=100px height=100px />
						<h2>Media Box Subheading</h2>
						<p class="mb-content">This is media box content. It is awesome content.</p>
					</a>
					<footer class="mb-foot">
						<p>Supporting Media Box information</p>
					</footer>
				</div>
			</article>

			<article class="media-box example">
				<div class="mb-inner">
					<header class="mb-head">
						<h1>Media Box Heading</h1>
					</header>
					<a href="https://twitter.com/mediaqueries" class="mb-link">
						<img src="https://twimg0-a.akamaihd.net/profile_images/1212882641/avatar.gif" alt="mediaqueries" class="mb-img" width=100px height=100px />
						<h2>Media Box Subheading</h2>
						<p class="mb-content">This is media box content. It is awesome content.</p>
					</a>
					<footer class="mb-foot">
						<p>Supporting Media Box information</p>
					</footer>
				</div>
			</article>

			<article class="media-box example">
				<div class="mb-inner">
					<header class="mb-head">
						<h1>Media Box Heading</h1>
					</header>
					<a href="https://twitter.com/bdconf" class="mb-link">
						<img src="https://twimg0-a.akamaihd.net/profile_images/1158518703/twitter.png" alt="breaking development" class="mb-img" width=100px height=100px />
						<h2>Media Box Subheading</h2>
						<p class="mb-content">This is media box content. It is awesome content.</p>
					</a>
					<footer class="mb-foot">
						<p>Supporting Media Box information</p>
					</footer>
				</div>
			</article>
		</section>
	</div>
</body>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0;">
	<title>Media Boxes</title>
	<style>
	/* Reset */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: clean, sans-serif;
	}
	/* Globals */
	a {text-decoration: none;}
	a:hover {text-decoration: underline;}
	h1,h2 {font-family: georgia, serif;}
	h1 {font-size: 21px;margin-bottom: 10px;}
	h2 {font-size: 16px;margin-bottom: 5px;}
	p {font-size: 12px;margin-bottom: 5px;}
	.site-title {font-size: 26px;text-align: center;}
	.container {margin: 10% auto;width: 90%;}

	/* Media Boxes */
	.mb-inner {
	overflow: hidden;
	margin: 10px 5%;
	}
	.mb-img {
	float: left;
	margin: 0 10px 10px 0;
	max-width: 100px;
	height: auto;
	}
	.mb-foot {
	clear: both;
	}
	/* End Media Boxes */

	@media all and (min-width: 640px) {
	/* Media Boxes for larger screens */
	.example {
	background: #f5f5f5;
	float: left;
	margin: 2%;
	width: 29.333%;
	}
	.mb-img {
	width: 33%;
	}
	/* End Media Boxes for larger screens */
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1 class="site-title">Media Boxes for Mobile-First Responsive Web Design</h1>

	<!--// Begin the media boxes //
	* The idea here is to use common class names
	* for each element in a media box and declare
	* only once in your css. This speeds css load time
	* and keeps your css code super clean and maintainable.
	* Credit: Nicole Sullivan @stubbornella. Her talk "Our Best Practices Are Killing Us"
	* was the inspiration for this code. http://www.stubbornella.org -->

	<section class="media-boxes">
	<article class="media-box example">
	<div class="mb-inner">
	<header class="mb-head">
	<h1>Media Box Heading</h1>
	</header>
	<a href="https://twitter.com/RWD" class="mb-link">
	<img src="https://twimg0-a.akamaihd.net/profile_images/1695501054/book-responsive.gif" alt="rwd" class="mb-img" width=100px height=100px />
	<h2>Media Box Subheading</h2>
	<p class="mb-content">This is media box content. It is awesome content.</p>
	</a>
	<footer class="mb-foot">
	<p>Supporting Media Box information</p>
	</footer>
	</div>
	</article>

	<article class="media-box example">
	<div class="mb-inner">
	<header class="mb-head">
	<h1>Media Box Heading</h1>
	</header>
	<a href="https://twitter.com/mediaqueries" class="mb-link">
	<img src="https://twimg0-a.akamaihd.net/profile_images/1212882641/avatar.gif" alt="mediaqueries" class="mb-img" width=100px height=100px />
	<h2>Media Box Subheading</h2>
	<p class="mb-content">This is media box content. It is awesome content.</p>
	</a>
	<footer class="mb-foot">
	<p>Supporting Media Box information</p>
	</footer>
	</div>
	</article>

	<article class="media-box example">
	<div class="mb-inner">
	<header class="mb-head">
	<h1>Media Box Heading</h1>
	</header>
	<a href="https://twitter.com/bdconf" class="mb-link">
	<img src="https://twimg0-a.akamaihd.net/profile_images/1158518703/twitter.png" alt="breaking development" class="mb-img" width=100px height=100px />
	<h2>Media Box Subheading</h2>
	<p class="mb-content">This is media box content. It is awesome content.</p>
	</a>
	<footer class="mb-foot">
	<p>Supporting Media Box information</p>
	</footer>
	</div>
	</article>
	</section>
	</div>
	</body>