Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 8, 2018 15:23
Show Gist options
  • Save anonymous/9c454958cc22c71adf5c0225f1ff10d5 to your computer and use it in GitHub Desktop.
Save anonymous/9c454958cc22c71adf5c0225f1ff10d5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/hereziwono
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.counter {
font-family: sans-serif;
font-weight: bold;
background: #3a3a3a;
border-radius: .25em;
padding: .5em;
display: inline-block;
color: #fff;
text-align: center;
font-size: 1rem;
position: relative;
background: linear-gradient(to bottom, #3a3a3a 0%, #111 50%, #444 51%, #3a3a3a 52%, #111 100%);
}
.counter:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0 ;
display: block;
content: '';
background: linear-gradient(to bottom, #3a3a3a00 0%, #11111100 50%, #444444aa 51%, #3a3a3a00 52%, #11111100 100%);
border-radius: .25em;
}
.counter__digit {
font-size: 2em;
}
.counter__label {
font-size: .75em;
}
</style>
</head>
<body>
<div class="counter">
<div class="counter__digit">10</div>
<div class="counter__label">days</div>
</div>
<script id="jsbin-javascript">
111#
</script>
<script id="jsbin-source-css" type="text/css">.counter {
font-family: sans-serif;
font-weight: bold;
background: #3a3a3a;
border-radius: .25em;
padding: .5em;
display: inline-block;
color: #fff;
text-align: center;
font-size: 1rem;
position: relative;
background: linear-gradient(to bottom, #3a3a3a 0%, #111 50%, #444 51%, #3a3a3a 52%, #111 100%);
}
.counter:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0 ;
display: block;
content: '';
background: linear-gradient(to bottom, #3a3a3a00 0%, #11111100 50%, #444444aa 51%, #3a3a3a00 52%, #11111100 100%);
border-radius: .25em;
}
.counter__digit {
font-size: 2em;
}
.counter__label {
font-size: .75em;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">111#</script></body>
</html>
Raw
jsbin.hereziwono.css
.counter {
font-family: sans-serif;
font-weight: bold;
background: #3a3a3a;
border-radius: .25em;
padding: .5em;
display: inline-block;
color: #fff;
text-align: center;
font-size: 1rem;
position: relative;
background: linear-gradient(to bottom, #3a3a3a 0%, #111 50%, #444 51%, #3a3a3a 52%, #111 100%);
}
.counter:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0 ;
display: block;
content: '';
background: linear-gradient(to bottom, #3a3a3a00 0%, #11111100 50%, #444444aa 51%, #3a3a3a00 52%, #11111100 100%);
border-radius: .25em;
}
.counter__digit {
font-size: 2em;
}
.counter__label {
font-size: .75em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment