<html>
  <head>
    <!--Open Sans Typeface-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <h1 class="title">iTunes Plasmid Clock</h1>
    <p class="description">
      Seconds hand is <em>Open Reading Frame</em><br/>
      Minutes hand is <em>Ribosome Binding Site</em><br/>
      Hours hand is <em>Promoter</em>
    </p>
    <div class="clock-container">
      <div class="itunes-plasmid">
        <p>
          The current time is <br/>
          <span class="now"></span>
        </p>
      </div>
      <div class="promoter-1">
        <div class="promoter-2"></div>
        <div class="promoter-3"></div>
      </div>
      <div class="RBS-1">
        <div class="RBS-2"></div>
      </div>
      <div class="ORF-1">
        <div class="ORF-2"></div>
      </div>
    </div>
  </body>
</html>
body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  background: black;
  
}

body, p {
  font-family: 'Open Sans', 'sans-serif';
  color: rgba(255,255,255,1)
}

div.clock-container {
  position: relative;
  margin: auto;
  width: 250px;
  height: 250px;
  padding-top:50px;
}
  
p.description {
  text-align: center;
  position: relative;
  width: 100%;
  color: rgba(255,255,255,0.85);
}

      div.itunes-plasmid {
        width: 200px;
        height: 200px;
        //border: 40px solid rgb(10, 179, 186);
        border: 10px solid rgb(64,64,64);
        //padding: 20px;
        padding: 35px;
        margin-left: 15px;
        margin-top: 15px;
        border-radius: 50%;
        position: absolute;
      }

      div.itunes-plasmid > p {
        font-family: 'Open Sans', 'sans-serif';
        font-weight: normal;
        margin: auto;
        padding-top: 35%;
        text-align: center;
      }

      div.ORF-1 {
        width: 200px;
        height: 200px;
        border: 40px solid transparent;
        border-top-color: rgba(75, 97, 218, 0.75);
        padding: 20px;
        border-radius: 50%;
        position: absolute;

      }

      div.ORF-2 {
        border: 20px solid rgba(75, 97, 218, 0.75);
        border-right-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
        margin-left: 193px;
        margin-top: -5px;
        position: absolute;
        transform: rotate(45deg);
      }

      div.RBS-1 {
        width: 200px;
        height: 200px;
        border: 40px solid transparent;
        border-top-color: rgba(250, 175, 66, 1);
        padding: 20px;
        border-radius: 50%;
        position: absolute;
      }

      div.RBS-2 {
        border: 20px solid maroon;
        border-bottom-color: transparent;
        border-right-color: transparent;
        margin-left: 80px;
        margin-top: -78px;
        position: absolute;
        border-radius: 50%;
        transform: rotate(45deg);
      }

      div.promoter-1 {
        width: 200px;
        height: 200px;
        border: 40px solid transparent;
        border-top-color: rgba(255, 105, 180, 1);
        padding: 20px;
        border-radius: 50%;
        position: absolute;
      }

      div.promoter-2 {
        border: 20px solid maroon;
        border-right: transparent;
        border-bottom: transparent;
        width: 20px;
        height: 20px;
        position: absolute;
        margin-left: 80px;
        margin-top: -98px;
      }

      div.promoter-3 {
        border: 20px solid maroon;
        border-right-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
        position: absolute;
        margin-left: 120px;
        margin-top: -108px;
      }
      var s = document.getElementsByClassName('ORF-1')[0];
      var m = document.getElementsByClassName('RBS-1')[0];
      var h = document.getElementsByClassName('promoter-1')[0];

      var time = document.getElementsByClassName('now')[0];

      clockMove();


      setInterval(function() {
        clockMove();
      }, 1000);

      function clockMove(){
        var today = new Date();
        //s.style.transform = 'rotate('+(Math.floor(Date.now()/1000)%60)*6+'deg)';
        s.style.transform = 'rotate('+(today.getSeconds())*6+'deg)';
        m.style.transform = 'rotate('+(today.getMinutes())*6+'deg)';
        h.style.transform = 'rotate('+(today.getHours()%12)*30+'deg)';
        time.innerHTML = today.toTimeString();
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.