.l-wrapper
	header.l-header.main-header.content-center Soy el Header
	.l-container
		main.l-main.main.content-center Content
		nav.l-nav.main.nav.content-center Nav
		aside.l-aside.main-aside.content-center Aside
	footer.l-footer.main-footer.content-center
		a(href="https://www.facebook.com/richirrim/", target="_blank") @richirrim
View Compiled
* { box-sizing: border-box; } 
:root {
	--primary-color: #00bcd4;	
	--secondary-color: #00838f;
	--accent-color: #ffc400;
	--text-color: #263238;
	--bg-color: #e0f7fa;
}


.content-center {
	display: flex;
	justify-content: center;
	align-items: center;
}


/*---------------------------*\
	Variables
\*---------------------------*/





/*---------------------------*\
	Layout
\*---------------------------*/
.l-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.l-header { height: 4rem; }
.l-container {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	
	.l-main { flex-grow: 1; }
	.l-nav { 
		order: -1;
		flex-basis: 4rem;
	}
	.l-aside { flex-basis: 6rem; }
	
	@media screen and (min-width: 600px) {
		& { flex-direction: row; }
		.l-nav { order: 0; }
		.l-nav,
		.l-aside { flex-basis: 8rem; }
	}
}
.l-footer { height: 6em; }




/*---------------------------*\
	Theme
\*---------------------------*/
body { 
	color: var(--text-color);
	background-color: var(--bg-color); 
}
.main-header { background-color: var(--primary-color); }
.main,
.main-nav,
.main-aside {
	border: .1em solid #eee;
	background-color: var(--secondary-color);
}
.main-footer {
	color: #fff;
	background-color: var(--text-color);
}
.main-footer a:visited { color: var(--accent-color); }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.