Skip to content

Instantly share code, notes, and snippets.

@JGallardo
Created February 20, 2014 04:26
Show Gist options
  • Save JGallardo/9107094 to your computer and use it in GitHub Desktop.
Save JGallardo/9107094 to your computer and use it in GitHub Desktop.
A Pen by Juan Gallardo.
<div class="outside">
<div class="container">
<a class="button" href="#">
Get Started
</a>
</div> <!--/ .container -->
</div> <!--/ .outside -->
/*resets */
body { margin:0; padding: 0; }
/* containers */
.outside {
background: #d2d1d0; height: 100%; width: 100%;
position: fixed; top: 0; left: 0;
z-index: -10;
}
.container { /* color */
background-color: rgb(246, 246, 246);
background-image: url('http://31.media.tumblr.com/tumblr_lxx81sbsSm1qbd38ro1_500.jpg');
background-position: bottom center;
width: 360px;
height: 360px;
max-width: 100%;
margin: 0 auto;
position: absolute;
top: 24px;
left:0;bottom:0; right:0;
}
/* button styles
======================== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.button { /* modify in production */
position:absolute;
bottom: 24px;
right: 60px;
}
.button {
background-color: #f3f3f3;
border-radius: 6px;
color: rgb(30, 30, 30);
font-family: 'Open Sans', sans-serif;
letter-spacing: 0.133px;
padding: 6px 12px;
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment