Skip to content

Instantly share code, notes, and snippets.

@artmsilva
Created March 21, 2012 13:37
Show Gist options
  • Save artmsilva/2146928 to your computer and use it in GitHub Desktop.
Save artmsilva/2146928 to your computer and use it in GitHub Desktop.
Untitled
* { margin: 0; padding: 0; }
body { margin: 10px 0 0; font: 16px/24px Helvetica; color: #333; }
h1 { font-size: 48px; line-height: 60px; }
h2 { font-size: 22px; line-height: 32px; padding: 0 0 5px;}
p { padding: 0 0 15px; }
.row { width: 990px; margin: 0 auto; padding: 30px; }
.infinity { background: #00b1db;}
header { height: 50px; }
header h1 { float: left; font-size: 36px; margin-right: 40px; }
li:first-child { padding: 10px 10px 10px 0; }
li { list-style: none; float: left; padding: 10px; margin: 10px 0 0 10px; font-size: 18px;}
.feature { width: 990px; color: #fff; height: 330px; margin: 0 auto; padding: 20px 0 15px; }
hgroup { width: 330px; margin: 10px 0 0 20px;}
hgroup h1 { margin-bottom: 10px; }
.feature img { padding: 10px; }
article { width: 480px; margin: 0 30px; padding: 10px 10px 0; background: #ccc;}
aside { width: 195px; padding: 10px 10px 0; background: #f2f2f2; }
.left { float: left; } .right { float: right; }
<header class="row"><h1>Lowe's</h1><nav><ul><li>Press Releases</li><li>Company Info</li><li>Media Resources</li><li>Contact Us</li></nav></header>
<section class="infinity">
<section class="feature">
<hgroup class="left"><h1>Lowe's Pressroom</h1><h4>I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know how I sometimes have really brilliant ideas?</h4></hgroup><img class="right" src="http://placehold.it/600x300/333/fff" />
</section></section>
<section class="row content">
<aside class="right first"><h2>Media Resources</h1><p>I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know how I sometimes have really brilliant ideas?</p></aside>
<article class="right"><h2>Press Releases</h1><p>I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know how I sometimes have really brilliant ideas?</p>
<p>I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know how I sometimes have really brilliant ideas?</p></article>
<aside class="right second"><h2>Contact Lowe's</h1><p>I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. *Insistently* Bow ties are cool! Come on Amy, I'm a normal bloke, tell me what normal blokes do! You know how I sometimes have really brilliant ideas?</p></aside>
</section>
{"view":"split","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment