Skip to content

Instantly share code, notes, and snippets.

@SamFleming

SamFleming/index.html

Created May 4, 2015 22:03
Show Gist options
  • Save SamFleming/979fc37fd682be0fde9b to your computer and use it in GitHub Desktop.
Save SamFleming/979fc37fd682be0fde9b to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/jeyisapoxu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
<style id="jsbin-css">
body {
background: #8bbec9;
background: -moz-linear-gradient(left, #8bbec9 0%, #97cbd6 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8bbec9), color-stop(100%,#97cbd6));
background: -webkit-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: -o-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: -ms-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: linear-gradient(to right, #8bbec9 0%,#97cbd6 100%);
font-family: 'Open Sans', Helvetica, Arial, Sans-serif;
}
.plans {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
max-width: 940px;
margin: 0 auto;
}
.box {
margin: 10px;
background-color: #fff;
padding: 25px 2%;
text-align: center;
width: 25%;
border-radius: 3px;
}
.title {
display: block;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 10px;
color: #53535b;
font-weight: 200;
}
.price {
font-size: 48px;
font-weight: bold;
display: inline-block;
}
small {
font-size: 14px;
display: block;
margin-top: -8px;
}
.fancy-bg {
color: #6c9cdd;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(40deg, #9385de, #3fb7db);
background-image: -webkit-linear-gradient(transparent, transparent),linear-gradient(50deg, #9385de, #3fb7db);
-webkit-background-clip: text;
}
.features {
list-style: none;
margin: 20px 0;
padding: 0;
font-size: 14px;
}
.features li {
color: #7c8a95;
font-weight: 200;
padding: 5px 15px;
}
.features strong {
color: #53535b;
font-weight: normal;
}
.btn {
padding: 12px 36px;
border-radius: 3px;
text-decoration: none;
display: inline-block;
color: #fff;
}
.btn-default {
background-color: #3db8db;
}
.btn-primary {
background-color: #7f64b5;
}
</style>
</head>
<body>
<div class="plans">
<div class="box">
<div class="title">Unlimited</div>
<div class="price fancy-bg">
$19
</div>
<small class="fancy-bg">/month</small>
<ul class="features">
<li>Unlimited for <strong>15 Callers</strong></li>
<li>Host as many conference calls as you want for just $19.00 a month!</li>
</ul>
<div>
<a href="#" class="btn btn-default">Select Plan</a>
</div>
</div>
<div class="box">
<div class="title">Unlimited XL</div>
<div class="price fancy-bg">
$39
</div>
<small class="fancy-bg">/month</small>
<ul class="features">
<li>Unlimited for <strong>50 Callers</strong></li>
<li>Host as many conference calls as you want for just $39.00 a month!</li>
</ul>
<div>
<a href="#" class="btn btn-default">Select Plan</a>
</div>
</div>
<div class="box">
<div class="title">PAY AS YOU GO</div>
<div class="price fancy-bg">
2¢
</div>
<small class="fancy-bg">minute/line</small>
<ul class="features">
<li>Maximum of <strong>300 Callers</strong></li>
<li>Dedicated dial-in with no minimums - 2¢ Tool or 5¢ Toll-Free (per minute/line)</li>
</ul>
<div>
<a href="#" class="btn btn-primary">Select Plan</a>
</div>
</div>
</div>
<script id="jsbin-source-css" type="text/css">body {
background: #8bbec9;
background: -moz-linear-gradient(left, #8bbec9 0%, #97cbd6 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8bbec9), color-stop(100%,#97cbd6));
background: -webkit-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: -o-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: -ms-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: linear-gradient(to right, #8bbec9 0%,#97cbd6 100%);
font-family: 'Open Sans', Helvetica, Arial, Sans-serif;
}
.plans {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
max-width: 940px;
margin: 0 auto;
}
.box {
margin: 10px;
background-color: #fff;
padding: 25px 2%;
text-align: center;
width: 25%;
border-radius: 3px;
}
.title {
display: block;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 10px;
color: #53535b;
font-weight: 200;
}
.price {
font-size: 48px;
font-weight: bold;
display: inline-block;
}
small {
font-size: 14px;
display: block;
margin-top: -8px;
}
.fancy-bg {
color: #6c9cdd;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(40deg, #9385de, #3fb7db);
background-image: -webkit-linear-gradient(transparent, transparent),linear-gradient(50deg, #9385de, #3fb7db);
-webkit-background-clip: text;
}
.features {
list-style: none;
margin: 20px 0;
padding: 0;
font-size: 14px;
}
.features li {
color: #7c8a95;
font-weight: 200;
padding: 5px 15px;
}
.features strong {
color: #53535b;
font-weight: normal;
}
.btn {
padding: 12px 36px;
border-radius: 3px;
text-decoration: none;
display: inline-block;
color: #fff;
}
.btn-default {
background-color: #3db8db;
}
.btn-primary {
background-color: #7f64b5;
}</script>
</body>
</html>
Raw
jsbin.jeyisapoxu.css
body {
background: #8bbec9;
background: -moz-linear-gradient(left, #8bbec9 0%, #97cbd6 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#8bbec9), color-stop(100%,#97cbd6));
background: -webkit-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: -o-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: -ms-linear-gradient(left, #8bbec9 0%,#97cbd6 100%);
background: linear-gradient(to right, #8bbec9 0%,#97cbd6 100%);
font-family: 'Open Sans', Helvetica, Arial, Sans-serif;
}
.plans {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap;
-ms-flex-flow: wrap;
flex-flow: wrap;
max-width: 940px;
margin: 0 auto;
}
.box {
margin: 10px;
background-color: #fff;
padding: 25px 2%;
text-align: center;
width: 25%;
border-radius: 3px;
}
.title {
display: block;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 10px;
color: #53535b;
font-weight: 200;
}
.price {
font-size: 48px;
font-weight: bold;
display: inline-block;
}
small {
font-size: 14px;
display: block;
margin-top: -8px;
}
.fancy-bg {
color: #6c9cdd;
-webkit-text-fill-color: transparent;
background-image: -webkit-linear-gradient(40deg, #9385de, #3fb7db);
background-image: -webkit-linear-gradient(transparent, transparent),linear-gradient(50deg, #9385de, #3fb7db);
-webkit-background-clip: text;
}
.features {
list-style: none;
margin: 20px 0;
padding: 0;
font-size: 14px;
}
.features li {
color: #7c8a95;
font-weight: 200;
padding: 5px 15px;
}
.features strong {
color: #53535b;
font-weight: normal;
}
.btn {
padding: 12px 36px;
border-radius: 3px;
text-decoration: none;
display: inline-block;
color: #fff;
}
.btn-default {
background-color: #3db8db;
}
.btn-primary {
background-color: #7f64b5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment