BonsaiNerd Under Construction Page

bonsainerd-under-construction-page.markdown

BonsaiNerd Under Construction Page

A Pen by Connor Kennedy on CodePen.

License.

index.html

<div id="main" class="is-loading">
	<div class="text">
		<span class="main">Bonsai Nerd</span>
		<span class="subtext">
			<small>under construction</small>
			<small>check back soon</small>
		</span>
	</div>
</div>

script.js

$(document).ready(function() {
	$("#main").removeClass("is-loading");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Raleway|Lato');
body {
	background: #445;
	color: #FFF;
	margin: 0;
}

#main {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66) 100%, transparent), url('https://i.imgur.com/wAz3EYp.jpg?1');
	background-size: cover, cover;
	background-position: center, center;
	height: 100vh;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.text {
	text-align: center;
	font-family: 'Raleway';
	font-size: 2rem;
	display: inline-block;
	padding: 1rem 1rem 1.2rem;
	font-weight: 400;
	position: relative;
	opacity: 1;
	transform: scale(1);
	transition: transform 0.5s ease, opacity 1s ease;
	
	.main {
		font-family: 'Lato';
		font-weight: bold;
		letter-spacing: 4px;
		text-transform: uppercase;
		display: block;
		margin: 0 0 0.125em;
		font-size: 1.5em;
	}
	
	.subtext{
		font-size: 0.75em;
		
		small{
			display: block;
		}
	}
	
	&:before {
		top: 0;
		left: 0;
	}
	
	&:after {
		bottom: 0;
		right: 0;
	}
	
	&:before,
	&:after {
		height: 2px;
		width: 100%;
		content: '';
		background: white;
		display: block;
		position: absolute;
		transition: width 0.4s ease;
		transition-delay: 0.8s;
		margin: 0 auto;
	}
}


.is-loading .text {
	transform: scale(0.9);
	opacity: 0;
	
	&:before,
	&:after {
		width: 0;
	}
}