Advanced Search

Countdown flip clock CSS + jQuery

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1.  
  2. <div class="container">
  3.     <ul class="flip minutePlay">
  4.         <li>
  5.             <a href="#">
  6.                 <div class="up">
  7.                     <div class="shadow"></div>
  8.                     <div class="inn">0</div>
  9.                 </div>
  10.                 <div class="down">
  11.                     <div class="shadow"></div>
  12.                     <div class="inn">0</div>
  13.                 </div>
  14.             </a>
  15.         </li>
  16.         <li>
  17.             <a href="#">
  18.                 <div class="up">
  19.                     <div class="shadow"></div>
  20.                     <div class="inn">1</div>
  21.                 </div>
  22.                 <div class="down">
  23.                     <div class="shadow"></div>
  24.                     <div class="inn">1</div>
  25.                 </div>
  26.             </a>
  27.         </li>
  28.         <li>
  29.             <a href="#">
  30.                 <div class="up">
  31.                     <div class="shadow"></div>
  32.                     <div class="inn">2</div>
  33.                 </div>
  34.                 <div class="down">
  35.                     <div class="shadow"></div>
  36.                     <div class="inn">2</div>
  37.                 </div>
  38.             </a>
  39.         </li>
  40.         <li>
  41.             <a href="#">
  42.                 <div class="up">
  43.                     <div class="shadow"></div>
  44.                     <div class="inn">3</div>
  45.                 </div>
  46.                 <div class="down">
  47.                     <div class="shadow"></div>
  48.                     <div class="inn">3</div>
  49.                 </div>
  50.             </a>
  51.         </li>
  52.         <li>
  53.             <a href="#">
  54.                 <div class="up">
  55.                     <div class="shadow"></div>
  56.                     <div class="inn">4</div>
  57.                 </div>
  58.                 <div class="down">
  59.                     <div class="shadow"></div>
  60.                     <div class="inn">4</div>
  61.                 </div>
  62.             </a>
  63.         </li>
  64.         <li>
  65.             <a href="#">
  66.                 <div class="up">
  67.                     <div class="shadow"></div>
  68.                     <div class="inn">5</div>
  69.                 </div>
  70.                 <div class="down">
  71.                     <div class="shadow"></div>
  72.                     <div class="inn">5</div>
  73.                 </div>
  74.             </a>
  75.         </li>
  76.     </ul>
  77.     <ul class="flip secondPlay">
  78.         <li>
  79.             <a href="#">
  80.                 <div class="up">
  81.                     <div class="shadow"></div>
  82.                     <div class="inn">0</div>
  83.                 </div>
  84.                 <div class="down">
  85.                     <div class="shadow"></div>
  86.                     <div class="inn">0</div>
  87.                 </div>
  88.             </a>
  89.         </li>
  90.         <li>
  91.             <a href="#">
  92.                 <div class="up">
  93.                     <div class="shadow"></div>
  94.                     <div class="inn">1</div>
  95.                 </div>
  96.                 <div class="down">
  97.                     <div class="shadow"></div>
  98.                     <div class="inn">1</div>
  99.                 </div>
  100.             </a>
  101.         </li>
  102.         <li>
  103.             <a href="#">
  104.                 <div class="up">
  105.                     <div class="shadow"></div>
  106.                     <div class="inn">2</div>
  107.                 </div>
  108.                 <div class="down">
  109.                     <div class="shadow"></div>
  110.                     <div class="inn">2</div>
  111.                 </div>
  112.             </a>
  113.         </li>
  114.         <li>
  115.             <a href="#">
  116.                 <div class="up">
  117.                     <div class="shadow"></div>
  118.                     <div class="inn">3</div>
  119.                 </div>
  120.                 <div class="down">
  121.                     <div class="shadow"></div>
  122.                     <div class="inn">3</div>
  123.                 </div>
  124.             </a>
  125.         </li>
  126.         <li>
  127.             <a href="#">
  128.                 <div class="up">
  129.                     <div class="shadow"></div>
  130.                     <div class="inn">4</div>
  131.                 </div>
  132.                 <div class="down">
  133.                     <div class="shadow"></div>
  134.                     <div class="inn">4</div>
  135.                 </div>
  136.             </a>
  137.         </li>
  138.         <li>
  139.             <a href="#">
  140.                 <div class="up">
  141.                     <div class="shadow"></div>
  142.                     <div class="inn">5</div>
  143.                 </div>
  144.                 <div class="down">
  145.                     <div class="shadow"></div>
  146.                     <div class="inn">5</div>
  147.                 </div>
  148.             </a>
  149.         </li>
  150.         <li>
  151.             <a href="#">
  152.                 <div class="up">
  153.                     <div class="shadow"></div>
  154.                     <div class="inn">6</div>
  155.                 </div>
  156.                 <div class="down">
  157.                     <div class="shadow"></div>
  158.                     <div class="inn">6</div>
  159.                 </div>
  160.             </a>
  161.         </li>
  162.         <li>
  163.             <a href="#">
  164.                 <div class="up">
  165.                     <div class="shadow"></div>
  166.                     <div class="inn">7</div>
  167.                 </div>
  168.                 <div class="down">
  169.                     <div class="shadow"></div>
  170.                     <div class="inn">7</div>
  171.                 </div>
  172.             </a>
  173.         </li>
  174.         <li>
  175.             <a href="#">
  176.                 <div class="up">
  177.                     <div class="shadow"></div>
  178.                     <div class="inn">8</div>
  179.                 </div>
  180.                 <div class="down">
  181.                     <div class="shadow"></div>
  182.                     <div class="inn">8</div>
  183.                 </div>
  184.             </a>
  185.         </li>
  186.         <li>
  187.             <a href="#">
  188.                 <div class="up">
  189.                     <div class="shadow"></div>
  190.                     <div class="inn">9</div>
  191.                 </div>
  192.                 <div class="down">
  193.                     <div class="shadow"></div>
  194.                     <div class="inn">9</div>
  195.                 </div>
  196.             </a>
  197.         </li>
  198.     </ul>
  199. </div>
  200.  
  201. <div id="social"><p>
  202.   <a target="_blank" href="http://ademilter.com/lab/countdown_clock/">http://ademilter.com/lab/countdown_clock/</a></p></div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.