A Pen by Surjith.

index.html

<div class="top-banner">
<div class="fix-width">
<h2>The Ultimate Design Companion</h2>
<span>One membership. Thousands of resources. The ultimate life-saver for designers and developers.</span>
<div class="banner-link">
<a href="http://medialoot.com/join/" class="blue-btn">Pricing &amp; Features</a>
<span>OR</span>
<a href="http://medialoot.com/browse/" class="grey-btn">Browse our Resources</a>
</div>
</div>
</div>

Media-Loot-Header-Template.markdown

Media Loot Header Template

Media Loot Header Template

A Pen by Surjith on CodePen.

License.

style.css

body {
color: rgb(164, 164, 164);
font: 13px/18px 'Helvetica Neue',Helvetica,Arial,Helvetica,sans-serif;
  margin:0;
  padding:0;
}

a {
color: rgb(0, 0, 0);
text-decoration: none;
}

.top-banner {
background: rgb(0, 0, 0);
overflow: hidden;
padding: 0;
position: relative;
text-align: center;
}

.top-banner {
background: rgb(17, 17, 17) url(//medialoot.com/new-code-assets/img/_dev/placeholders/home-banner.jpg) center 0 no-repeat;
height: 220px;
padding: 175px 0 0;
}

div.fix-width {
margin: 0 auto;
position: relative;
width: 1140px;
}

div.fix-width:after {
clear: both;
content: '';
display: block;
}

h2 {
color: rgb(255, 255, 255);
font: 61px/63px "lft-etica-n4","lft-etica",Arial,Helvetica,sans-serif;
margin: 0;
padding: 0 0 7px;
}

.top-banner h2 {
letter-spacing: -1px;
}

.top-banner span {
color: rgb(255, 255, 255);
font: 17px/19px "lft-etica-i7","lft-etica","lft-etica",Arial,Helvetica,sans-serif;
text-shadow: 0 -1px 1px rgb(0, 0, 0);
}

.top-banner .banner-link {
margin: 38px 0 0;
width: 100%;
}


a.blue-btn {
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px #000;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
background: #00AEEF;
background: -webkit-gradient(linear,0 0,0 bottom,from(#00AEEF),to(#1392c1));
background: -webkit-linear-gradient(#00AEEF,#1392c1);
background: -moz-linear-gradient(#00AEEF,#1392c1);
background: -ms-linear-gradient(#00AEEF,#1392c1);
background: -o-linear-gradient(#00AEEF,#1392c1);
background: linear-gradient(#00AEEF,#1392c1);
-pie-background: linear-gradient(#00AEEF,#1392c1);
border-radius: 3px;
border-top: 1px solid #6ed1f6;
box-shadow: 0 1px 3px #000;
color: #fff;
display: inline-block;
font: bold 18px/20px 'Helvetica Neue',Helvetica,Arial,Helvetica,sans-serif;
min-width: 232px;
padding: 17px 10px;
position: relative;
text-shadow: 0 1px 0 #086d93;
behavior: url(css/PIE.htc);
}

.top-banner .banner-link span {
color: #fff;
font: bold 11px/54px 'Helvetica Neue',Helvetica,Arial,Helvetica,sans-serif;
margin: 0 15px;
}


a.grey-btn {
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px #000;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #000;
background: -webkit-gradient(linear,0 0,0 bottom,from(#FFFFFF),to(#d6e5ea));
background: -webkit-linear-gradient(#FFFFFF,#d6e5ea);
background: -moz-linear-gradient(#FFFFFF,#d6e5ea);
background: -ms-linear-gradient(#FFFFFF,#d6e5ea);
background: -o-linear-gradient(#FFFFFF,#d6e5ea);
background: linear-gradient(#FFFFFF,#d6e5ea);
-pie-background: linear-gradient(#FFFFFF,#d6e5ea);
border-radius: 3px;
border-top: 1px solid #fff;
box-shadow: 0 1px 3px #000;
color: #50626c;
display: inline-block;
font: bold 18px/20px 'Helvetica Neue',Helvetica,Arial,Helvetica,sans-serif;
min-width: 232px;
padding: 17px 10px;
position: relative;
text-shadow: 0 1px 0 #fbfcfd;
behavior: url(css/PIE.htc);
}