style.css

@import 'https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i';

/* ⇢ style for " Page Footer Reveal" demo. ⇠ */

body>footer {
	width: 100%; height: 200px;
	position: fixed;
	bottom: 0;
	z-index: -1;
	background-color: #DD5632;
}

html.demo1,
body.demo1 {
	background-color: #fff;
}

body.demo1 {
	margin: 0;
	margin-bottom: 200px; /* = footer hgt */
}

/* ⇢ style for "Footer Reveal on Elements" demo. ⇠ */


article {
	background-image: linear-gradient(to bottom, #FEF9F3 calc(100% - 120px), transparent 0);
	/* 120px = 100px (footer hgt) + 20px (padding) */
	padding: 20px 40px;
	margin-bottom: 80px; /* = footer's bottom value */
}

article>footer {
	height: 100px;
	position: -webkit-sticky;
	position: sticky;
	bottom: 80px;
	z-index: -1;
	background-color: #DD5632;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2) 5%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bolder;
	color: #fff;
}


/* ⇢ style for page decoration ⇠ */

body {
	font-family: Crimson Text;
	font-size: 13pt;
	margin: 0;
}

#-demo-title :link {
	color: #A3FBD1;
	text-shadow: -2px 0 4px #0F316C;
}

main {
	padding: 50px;
	width: 75%;
	margin: auto;
	min-width: 460px;
}

#-demo-wrapper {
	padding-top: 50px;
	width: 500px;
	margin: auto;
}

#-demo-title {
	position: fixed;
	top: 0;
	width: 100%;
	height: 36px;
	background-color: #D5FFD1;
	color: #0F316C;
	line-height: 36px;
	font-weight: bold;
	font-size: 16pt;
	text-align: center;
}

#-demo-profile {
	float: left;
	height: 100%;
	opacity: .4;
}

#-demo-profile:hover {
	opacity: 1;
}