ALOObr

aloobr.markdown

ALOObr

A Pen by erikpantzar on CodePen.

License.

index.html

<nav></nav>

<article>
	<h2>Vi jobbar for att alla ska minnas</h2>
</article>
<article>
	<h2>Bara forskning kan stoppa alzheimers sjukdom</h2>
</article>
<article>
	<h2>About alaaa la aa a aaa</h2>
</article>

<section></section>

style.scss

body, html {
	display: block;
	height: 100%;
	width: 100%;
	background: #666;
	font: 4vh/5vh sans-serif;
}

h2 { margin: 0; }

nav {
	height: 60px;
	width: 100%;
	background: #aaa;
	display: block;
}

article {
	height: 25%;
	width: 100%;
	background: pink;
	display: block;
	box-sizing: border-box;
	position: relative;
	
	h2 {
		position: absolute;
		top: 50%;
		left: 20px;
		transform: translate(10px, -50%);
	}
}

article:nth-of-type(2) {
	background: darken(pink, 5%);
}

article:nth-of-type(3) {
	background: darken(pink, 10%);
}

section {
	height: 90px;
	width: 100%;
	background: purple;
}