fredericAerts

var myVariable = 'Hello';
window.alert(myVariable);

fredericAerts

.content-wrapper {
	width: 100%;
	padding: 0 15px;
}
/*  Media query
    ========================== */
@media (min-width: 750px) {
	.content-wrapper {
		width: 750px;
		margin-left: auto;

fredericAerts

.header {
	position: fixed;
	top: 0;

	width: 100%;

	background: #FFFFFF;
	box-shadow: 0 0 2px 3px #DDDDDD;

	z-index: 999;

fredericAerts

.footer {
	margin-top: 50px;

	text-align: center;

	background: #EEEEEE;
}

.footer .content-wrapper {
	position: relative;

fredericAerts

<footer class="footer">
	<div class="content-wrapper">
		made with <span class="footer-heart fa fa-heart"></span> by <a href="http://fredericaerts.com" target="_blank">Frederic Aerts*</a>
		<span class="footer-footnote">*replace with your name</span>
	</div>
</footer>

fredericAerts

.tab-links {
	margin-top: 40px;
	
	border-bottom: 1px solid #DDDDDD;
}

.tab-links-item {
	display: inline-block;
	padding: 10px 20px;

fredericAerts

.tab-panes-item {
	display: none;
	padding: 10px 20px;
}

.tab-panes-item.active {
	display: block;
}

fredericAerts

h3 {
	margin: 30px 0 20px;
	font-size: 25px;
}

fredericAerts

<section class="content-wrapper">
	<h2>Beginner program</h2>
	<p class="intro-text">
		Here's what you'll learn in the next 3 days.
	</p>
	<nav class="tab-links">
		<a href="#tab1" class="tab-links-item active">Day 1</a>
		<a href="#tab2" class="tab-links-item">Day 2</a>
		<a href="#tab3" class="tab-links-item">Day 3</a>
	</nav>

fredericAerts

.image-wide {
	display: block;
	width: 90%;
	max-width: 1000px;
	margin: 50px auto;
}