A Pen by Kevin Lesht on CodePen.
Created
October 7, 2015 13:50
-
-
Save anonymous/400d83042bf9113b8c91 to your computer and use it in GitHub Desktop.
Typography Experiment
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300|Open+Sans:400' rel='stylesheet' type='text/css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment