eNdzmr ('-' * 6)
A Pen by Jon Earley on CodePen.
Created
May 21, 2015 14:33
-
-
Save jonearley/6a5197ce3ada08de3f6f to your computer and use it in GitHub Desktop.
eNdzmr
This file contains hidden or 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="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> |
This file contains hidden or 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
| /* 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