Countdown

by Nicolas PUJOL

HTML

<div class="countdown">
    <div class="countdown-bloc">
        <div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div><div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div><div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div><div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div><div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div><div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div><div class="dot-line">
            <span class="dot first"></span>
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>

        </div>
    </div>
</div>

CSS

.countdown-bloc .dot {
    border-radius: 50%;
    background-color:lightgrey;
    width: 5px;
    height: 5px;
    display:block;
    float:left;
    margin-left:1px;
}
.dot-line {
  height: 5px;
  margin-top: 1px;
  width: 23px;
}
.countdown-bloc .dot.first {
    margin-left:0;
}