Typography Experiment

index.html

<div class="container">

	<h2>Our Services</h2>
	<ul>
		<li>
			<h3><span>Brand Development</span></h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci, sed libero. Iste asperiores suscipit, consequatur debitis animi impedit numquam facilis iusto porro labore dolorem, maxime magni incidunt delectus est!</p>
		</li>
		<li>
			<h3><span>Experience Design</span></h3>
			<p>Totam at eius excepturi deleniti sed, error repellat itaque omnis maiores tempora ratione dolor velit minus porro aspernatur repudiandae labore quas adipisci esse, nulla tempore voluptatibus cupiditate, provident, atque.</p>
		</li>
		<li>
			<h3><span>Strategic Insight</span></h3>
			<p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio illum dolore laudantium similique harum. Eveniet quis, libero eligendi delectus repellendus repudiandae ipsum.</p>
		</li>
		<li>
			<h3><span>Content Strategy</span></h3>
			<p>Vel nam odio dolorem, voluptas sequi minus quo tempore, animi est quia earum maxime. Reiciendis quae repellat, modi non, veniam natus soluta at optio vitae in excepturi minima eveniet dolor debitis inventore ad eveniet.</p>
		</li>
	</ul>

</div>

style.css

@import "bourbon";

$color: #e2cef9;

@mixin MQ {
	@media only screen and (min-width: 700px) { @content; }
}

* {
	@include box-sizing(border-box);
}

.container {
	margin: 3em auto;
	width: 90%;
	max-width: 1100px;
}

h2 {
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-size: 1em;
	font-weight: 400;
	text-transform: uppercase;
	color: #959595;
	&:after {
		content: "";
		position: absolute;
		left: 0; right: 0;
		bottom: -10px;
		border-bottom: 3px solid $color;
		width: 30px;
	}
}

ul {
	list-style: none;
	margin: 4em 0 0;
	padding: 0;
	@include clearfix;

	li {
		margin-bottom: 2em;
		@include MQ {
			float: left;
			width: 47.5%;
			margin-right: 5%;
			&:nth-child(2n) {
				margin-right: 0;
			}	
		}

		h3 {
			position: relative;
			z-index: 1;			
			margin: 0;
			font-family: 'Ubuntu', sans-serif;
			font-size: 1.25em;
			line-height: 2.5em;
			font-weight: 300;
			letter-spacing: 1px;
			&:before {
				content: "";
				position: absolute;
				z-index: -1;
				background-color: $color;
				width: 2.5em;
				height: 2.5em;
				border-radius: 50%;					
			}

			span {
				padding-left: 15px;
			}		
		}

		p {
			padding-left: 15px;
			font-family: 'Open Sans', sans-serif;
			font-size: 1.1em;
			line-height: em(27);
			font-weight: 400;
			color: #959595;
		}
	}
}

styles

<link href="https://fonts.googleapis.com/css?family=Ubuntu:300|Open+Sans:400' rel='stylesheet' type='text/css" rel="stylesheet" />

Typography Experiment.markdown

Typography Experiment

A Pen by Kevin Lesht on CodePen.

License.