shonir-analog-clock/shonir-analog-clock/0.1/css/shonir_analog_clock.css

Multiple Timezone Simple Analog Clock Using HTML , CSS And Javascript

.clock_label {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-weight: 700;
    font-size: medium;
  }
  .analog_clock {
    width: 216px;
    height: 216px;
    margin: 8% auto 0;
    border-radius: 50%;
    border: 8px solid goldenrod;
    position: relative;
  }
  
  .analog_clock .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: goldenrod;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    z-index: 10;
    box-shadow: 0 2px 4px -1px black;
  }
  
  .analog_clock .hour-hand {
    position: absolute;
    z-index: 5;
    width: 6px;
    height: 45px;
    background: goldenrod;
    top: 50px;
    transform-origin: 50% 51px;
    left: 50%;
    margin-left: -2px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
  }
  
  .analog_clock .minute-hand {
    position: absolute;
    z-index: 6;
    width: 4px;
    height: 65px;
    background: goldenrod;
    top: 30px;
    left: 50%;
    margin-left: -2px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform-origin: 50% 70px;
  }
  
  .analog_clock .second-hand {
    position: absolute;
    z-index: 7;
    width: 2px;
    height: 80px;
    background: red;
    top: 12px;
    lefT: 50%;
    margin-left: -1px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    transform-origin: 50% 85px;
  }
  
  .analog_clock span {
    display: inline-block;
    position: absolute;
    color: goldenrod;
    font-size: 22px;
    font-family: 'Poiret One';
    font-weight: 700;
    z-index: 4;
  }
  
  .analog_clock .h_12 {
    top: 22px;
    left: 50%;
    margin-left: -9px;
  }
  .analog_clock .h_3 {
    top: 84px;
    right: 28px;
  }
  .analog_clock .h_6 {
    bottom: 20px;
    left: 50%;
    margin-left: -5px;
  }
  .analog_clock .h_9 {
    left: 28px;
    top: 84px;
  }
  
  .analog_clock .diallines {
    position: absolute;
    z-index: 2;
    width: 2px;
    height: 15px;
    background: gold;
    left: 50%;
    margin-left: -1px;
    transform-origin: 50% 100px;
  }
  .analog_clock .diallines:nth-of-type(5n) {
    position: absolute;
    z-index: 2;
    width: 4px;
    height: 25px;
    background: gold;
    left: 50%;
    margin-left: -1px;
    transform-origin: 50% 100px;
  }
  
  .analog_clock .info {
    position: absolute;
    width: 120px;
    height: 20px;
    border-radius: 7px;
    background: #ccc;
    text-align: center;
    line-height: 20px;
    color: #000;
    font-size: 11px;
    top: 200px;
    left: 50%;
    margin-left: -60px;
    font-family: "Poiret One";
    font-weight: 700;
    z-index: 3;
    letter-spacing: 3px;
    margin-left: -60px;
    left: 50%;
  }
  .analog_clock .date {
      top: 63px;
    }
    .analog_clock .time {
      top: 120px;
  }