eNdzmr ('-' * 6)
A Pen by Jon Earley on CodePen.
eNdzmr ('-' * 6)
A Pen by Jon Earley on CodePen.
<div class="hero"> | |
<section class="hero-cover"> | |
<div class="tint"></div> | |
<div class="hero-container"> | |
<div class="page-info"> | |
<ul> | |
<li>home</li> | |
<li>css</li> | |
<li>verticle flex hero</li> | |
</ul> | |
<h1>Page heading</h1> | |
</div> | |
<div class="hero-content"> | |
<h2>Sub heading</h2> | |
<p>In an ideal world this website wouldn’t exist, a client would acknowledge the importance of having web copy before the design starts. Needless to say it’s very important, content is king and people are beginning to understand that.</p> | |
</div> | |
<div class="featured clearfix"> | |
<span>FEATURE</span> | |
<div class="clearfix"></div> | |
<a href="#">Printing and typesetting text of the printing and typesetting industry. Check it out!</a> | |
</div> | |
</div> | |
</section> | |
</div> |
/* Martin Wolf CodePen Standard */ | |
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700); | |
* { | |
margin: 0; | |
padding: 0; | |
@include box-sizing(border-box); | |
} | |
body { | |
font-family: 'Open Sans', Arial, sans-serif; | |
color: #594A41 ; | |
background: #fbfafa ; | |
} | |
/* END Martin Wolf CodePen Standard */ | |
.hero { | |
position: relative; | |
} | |
.hero-cover { | |
background: url(http://www.airpano.ru/files/iceland_fjallabak_09_big.jpg) no-repeat center; | |
background-size: cover; | |
width: 100%; | |
min-height: 360px; | |
} | |
.hero-container { | |
margin: 0 auto; | |
max-width: 50em; | |
} | |
.tint { | |
position: absolute; | |
content: ''; | |
left: 0; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
background: rgba(255, 255, 255, .8); | |
} | |
.page-info { | |
position: relative; | |
padding: 1em; | |
} | |
.page-info h1 { | |
margin: 0; | |
} | |
.page-info ul { | |
padding: 0; | |
list-style: none; | |
} | |
.page-info ul li { | |
display: inline-block; | |
padding-right: 0.5em; | |
} | |
.page-info ul li:not(:first-child):before { | |
content: "\00bb"; | |
padding-right: 0.5em; | |
} | |
.hero-content { | |
position: relative; | |
padding: 1em; | |
} | |
.hero-content:after { | |
display: block; | |
content: " "; | |
height: 7.5em; | |
} | |
.hero-content p { | |
max-width: 40em; | |
} | |
.featured { | |
position: absolute; | |
max-width: 50em; | |
margin: 0 auto; left: 0; right: 0; | |
bottom: 1em; | |
right: 0; | |
padding: 1em; | |
max-height: 6em; | |
overflow: hidden; | |
} | |
.featured span { | |
font-size: 90%; | |
} | |
.featured span, .featured a { | |
float: right; | |
text-align: right; | |
} | |
.featured a { | |
margin-top: 0.25em; | |
} | |
.clearfix:after { | |
content: " "; | |
display: block; | |
height: 0; | |
clear: both; | |
} |