"Google Now" Card
/** | |
* "Google Now" Card | |
*/ | |
body { | |
background: #e1e1e1; | |
min-height: 100%; | |
margin: auto; | |
} | |
ul.gNow { | |
width: 450px; | |
height: 100%; | |
float: left; | |
padding: 0; | |
} | |
ul.gNow li { | |
width: 430px; | |
float: left; | |
list-style: none; | |
padding: 10px; | |
} | |
div.card { | |
background: #fff; | |
width: 400px; | |
position: relative; | |
padding: 15px; | |
box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 ); | |
font-family: Open Sans; | |
color: #444; | |
font-size: 14px; | |
-moz-border-radius: 2px; | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
} | |
div.card p { | |
margin: 0 0 15px 0; | |
} | |
div.card p.card-title { | |
font-size: 28px; | |
} | |
div.card p.url { | |
border-top: 1px solid #e5e5e5; | |
background-image: url('http://www.eriklindemann.com/wp-content/uploads/2013/05/url.png'); | |
background-repeat: no-repeat; | |
padding: 6px 0 0 30px; | |
height: 30px; | |
display: block; | |
margin-bottom: -10px; | |
} | |
div.card p.url a { | |
color: #04bff4; | |
text-decoration: none; | |
top: 4px; | |
width: 385px; | |
display: block; | |
position: relative; | |
} | |
div.card img.full { | |
width: 430px; | |
margin: 0 0 15px -15px; | |
} |
<link href="http://fonts.googleapis.com/css?family=Open+Sans:500,400,300" rel="stylesheet" type="text/css"> | |
<ul class="gNow" id="col1"> | |
<li><div class="card"> | |
<p class="card-title">Google Now Card</p> | |
<p>Font is Open Sans. Title is 28px, whereas the body is 14px.</p> | |
<p>Font color is #444, on a #fff card. The page color is #e1e1e1. I got these from samples I took from Google's "Now" page.</p> | |
<p class="url"><a href="http://www.google.com/landing/now/">See the page</a></p> | |
</div></li> | |
<li><div class="card"> | |
<p class="card-title">The Card is Repeatable</p> | |
<p>We can have as many of these on a page as we like.</p> | |
</div></li> | |
</ul> | |
<ul class="gNow" id="col2"> | |
<li><div class="card"> | |
<p class="card-title">Picture</p> | |
<img src="http://www.eriklindemann.com/eMetro/images/full/helpless.jpg" class="full" /> | |
<p>When a card has a picture, it should almost always be full bleed width-wise.</p> | |
<p>There are a few exceptions to this which will be covered.</p> | |
</div> | |
</li> |
// alert('Hello world!'); |
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment