Skip to content

Instantly share code, notes, and snippets.

/index.html

Created January 28, 2015 05:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/af6d74c3306c8e3ffe2c to your computer and use it in GitHub Desktop.
Save anonymous/af6d74c3306c8e3ffe2c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html {
background: #fff;
}
section {
margin: 50px;
width: 200px;
height: 50px;
background-color: #F7F7F7;
border: 1px solid #D2D2D2;
border-radius: 5px;
background: linear-gradient(to bottom, #f8f8f8, #ddd);
}
div {
width: 49%;
height: 100%;
float: left;
font: 12px Lato;
}
.first {
height: 100%;
border-right: 1px solid #d2d2d2;
}
section > div+div {
border-left: 1px solid #fff;
}
.tag {
height: 30%;
width: 100%;
text-transform: uppercase;
letter-spacing: 3px;
padding-top: 5%;
text-align: center;
color: #888;
}
.desc {
width: 100%;
height: 70%;
padding-top: 3%;
text-transform: uppercase;
font-weight: 900;
font-size: 14.5px;
text-align: center;
color: #444;
}
.desc {
text-shadow: 1px 1px 0px #fff;
}
</style>
</head>
<body>
<section>
<div class="first">
<div class="tag">Sign Up</div>
<div class="desc">
<span>Monthly</span>
</div>
</div>
<div class="second">
<div class="tag">Start</div>
<div class="desc">Live Chat</div>
</div>
</section>
<script id="jsbin-source-css" type="text/css">html {
background: #fff;
}
section {
margin: 50px;
width: 200px;
height: 50px;
background-color: #F7F7F7;
border: 1px solid #D2D2D2;
border-radius: 5px;
background: linear-gradient(to bottom, #f8f8f8, #ddd);
}
div {
width: 49%;
height: 100%;
float: left;
font: 12px Lato;
}
.first {
height: 100%;
border-right: 1px solid #d2d2d2;
}
section > div+div {
border-left: 1px solid #fff;
}
.tag {
height: 30%;
width: 100%;
text-transform: uppercase;
letter-spacing: 3px;
padding-top: 5%;
text-align: center;
color: #888;
}
.desc {
width: 100%;
height: 70%;
padding-top: 3%;
text-transform: uppercase;
font-weight: 900;
font-size: 14.5px;
text-align: center;
color: #444;
}
.desc {
text-shadow: 1px 1px 0px #fff;
}</script>
</body>
</html>
Raw
jsbin.wajefi.css
html {
background: #fff;
}
section {
margin: 50px;
width: 200px;
height: 50px;
background-color: #F7F7F7;
border: 1px solid #D2D2D2;
border-radius: 5px;
background: linear-gradient(to bottom, #f8f8f8, #ddd);
}
div {
width: 49%;
height: 100%;
float: left;
font: 12px Lato;
}
.first {
height: 100%;
border-right: 1px solid #d2d2d2;
}
section > div+div {
border-left: 1px solid #fff;
}
.tag {
height: 30%;
width: 100%;
text-transform: uppercase;
letter-spacing: 3px;
padding-top: 5%;
text-align: center;
color: #888;
}
.desc {
width: 100%;
height: 70%;
padding-top: 3%;
text-transform: uppercase;
font-weight: 900;
font-size: 14.5px;
text-align: center;
color: #444;
}
.desc {
text-shadow: 1px 1px 0px #fff;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment