nmx-banner-test

index.jade

.banner
	.banner_container
		img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/banner-product.png")
		div
			h1 Make This Your<br><span>BEST YEAR</span>
			h2 NutraMetrix Prime Astaxanthin
			button Learn More
	

nmx-banner-test.markdown

nmx-banner-test

A Pen by Farid Mokraoui on CodePen.

License.

style.scss

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300,700);

.banner{
	background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/159363/banner-bg.jpg);
	background-size: cover;
	color: #fff;
	font: 300 14px 'Roboto Condensed', sans-serif;
	display: flex;
	justify-content: center;
	min-height: 300px;
	min-width: 320px;
	padding: 10px;
	width: 100%;
	
	&_container{
		align-items: center;
		display: flex;
		flex-wrap: wrap;	
		min-height: 300px;
		max-width: 960px;
		width: 100%;
	}
	
	*{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	h1{
		font-size: 3.45em;
		font-weight: 300;
		line-height: 1.25em;

		span{
			font-size: 1.35em;
			font-weight: 800;
			line-height: .75em;
		}
		
		@media (min-width:480px){
			font-size: 4em;
			font-weight: 300;
			line-height: 1.25em;

			span{
				font-size: 1.35em;
				font-weight: 800;
				line-height: .75em;
			}
		}
	}
	
	h2{
		font-size: 1.75em;
		font-weight: 300;
		line-height: .5em;
	}
	
	button{
		background: none;
		border: 1px solid #fff;
		color: #fff;
		font-size: 1.25em;
		margin-top: 10px;
		padding: 6px 40px;
	}
}