Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <ul class="counter">
    <li class="days">
      <div class="devider"></div>
      <span>99</span>
    </li>
    <li class="hours">
      <div class="devider"></div>
      <span>17</span>
    </li>
    <li class="minutes">
      <div class="devider"></div>
      <span>36</span>
    </li>
    <li class="seconds">
      <div class="devider"></div>
      <span>04</span>
    </li>
  </ul>
  <ul class="value">
    <li>Дней</li>
    <li>Часов</li>
    <li>Минут</li>
    <li>Секунд</li>
  </ul>
</div>
</body>
</html>
 
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700,800&subset=latin,cyrillic);
body{
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  background: #282e3a;
  color: #6f7786;
}
.container{
  width: 410px;
  margin: 100px auto;
}
.devider{
  position: absolute;
  width: 76px;
  height: 1px;
  top: 50%;
  margin-top: -1px;
}
ul.counter, ul.value{
  margin: 0;
  padding: 0;
}
ul.counter li{
  position: relative;
  display: inline-block;
  width: 76px;
  height: 82px;
  font: inherit;
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  border: none;
  border-radius: 15px;
  line-height: 76px;
  list-style: none;
  margin-right: 30px;
  text-align: center;
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.25), inset 1px 1px rgba(255,255,255,.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.25), inset 1px 1px rgba(255,255,255,.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,.25), inset 1px 1px rgba(255,255,255,.2);
}
ul.counter li span {
  position: relative;
}
ul.counter li:after, ul.counter li:before{
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 11px;
  background: #fff;
  content: '';
  top: 50%;
  margin-top: -6px;
  left: 5px;
}
ul.counter li:before {
  left: auto;
  right: 5px;
}
ul.counter li:last-child, ul.value li:last-child{
  margin-right: 0;
}
li.days{
  background: #fa565a;
}
li.hours{
  background: #2dcb73;
}
li.minutes{
  background: #f6bc57;
}
li.seconds{
  background: #3c67b0;
}
li.days>.devider{
  background: #d44a4d;
}
li.hours>.devider{
  background: #15ae59;
}
li.minutes>.devider{
  background: #e4a333;
}
li.seconds>.devider{
  background: #2e589f;
}
ul.value{
  margin-top: 10px;
}
ul.value li{
  display: inline-block;
  width: 76px;
  margin-right: 30px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers