Hello , I want to show you my other simple project . It called jQuery Realtime Clock Flat Style.

I Create realtime clock from html and jquery and make the layout flat styled .
The main function is to display the time taken from the time on your computer with Jquery, Hours minutes and seconds will change dynamically every seconds follow the time on your computer.

Here i give you the main code , Simple and easy to use

Javascript 

HTML 


<div id="box-wrapper">
<body onload="GetClock(); setInterval('GetClock()', 1000 )">

<div class="main-wrapper">
  <div class="clock-header">
    <div class="clock-title">Time Is Money!</div>
    <div class="add-button"></div>
  </div>
  <div class="clock-wrapper">
    <div class="clock">
      <div class="hours-wrapper">
        <span id="hours"> </span>
        <div class="hours-text">HOUR</div>
      </div>
      <div class="separator">:</div>
      <div class="minutes-wrapper">
        <span id="minutes"> </span>
        <div class="hours-text">MIN</div>
      </div>
      <div class="separator">:</div>
      <div class="seconds-wrapper">
        <span id="seconds"> </span>
        <div class="hours-text">SEC</div>
      </div>
      <div class="separator2"></div>
      <div class="AMPM-wrapper">
        <span id="AMPM"> </span>
      </div>

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

CSS 


body {
 margin: 0;
 font-family: helvetica;
 background-color: #eaedf1;
}

.main-wrapper {
 margin: 0 auto;
 overflow: auto;
 width: 350px;
}

.clock-header {
 margin-top: 30px;
 background-color: #203133;
 height: 50px;
 width: 350px;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
}

.clock-title {
 padding: 12px;
 font-size: 18px;
 color: #e3e4e6;
 font-weight: normal;
 text-align: center;
}

.clock-wrapper {
 background-color: #14b9d6;
 border-bottom-left-radius: 3px;
 border-bottom-right-radius: 3px;
 padding-bottom: 10px;
}

.clock {
 width: 78%;
 margin: 0 auto;
 font-size: 40px;
 color: white;
 text-align: center;
 font-weight: 800;
 padding-top:20px; 
 height:80px;
}

.separator {
 font-size: 40px;
 color: white;
 float: left;
 margin-left: 10px;
 margin-right: 10px;
}

.separator2 {
 width: 10px;
 height: 100%;
 float: left;
}


.hours-wrapper {
 float: left;
}

.hours-text {
 font-size: 14px;
 font-weight: normal;
}


.minutes-wrapper {
 float: left;
}

.minutes-text {
 font-size: 14px;
 font-weight: normal;
}

.seconds-wrapper {
 float: left;
}

.seconds-text {
 font-size: 14px;
 font-weight: normal;
}

.AMPM-wrapper {
 float: left;
}

.AMPM-text {
 font-size: 14px;
 font-weight: normal;
}



/*======================================FOOTER=============================================*/

.footer-links {
 margin-bottom: 20px;
 margin-top: 20px;
}

.footer-links a {
 color: #3498DB;
 text-decoration: none;
}

#footer {
 font-size: 12px;
 padding-top: 30px;
 margin: 0 auto;
 text-align: center;
 color: #555;
}

#footer a{
 color: #3498DB;
 text-decoration: none;
}
For the demo you can download it , just click the "pay with tweet" button, and follow the instruction

Download for free if you pay with a Tweet!

This project created by the team of sevnteen sevn