Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
eNdzmr
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.