-
-
Save Yexiaoxing/6657491 to your computer and use it in GitHub Desktop.
This file contains 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
/** | |
* "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; | |
} |
This file contains 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
<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> |
This file contains 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
// alert('Hello world!'); |
This file contains 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
{"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