Team:Heidelberg/StartPage Test
From 2013.igem.org
(Difference between revisions)
Nils.kurzawa (Talk | contribs) m |
Nils.kurzawa (Talk | contribs) m |
||
Line 113: | Line 113: | ||
<h3 style="font-size:21px; float:right; margin-right:5%">Check out our Highlights:</h3> | <h3 style="font-size:21px; float:right; margin-right:5%">Check out our Highlights:</h3> | ||
- | + | <div class="clock-example daily-counter clearfix flip-clock-wrapper"> | |
+ | <span class="flip-clock-divider days"> | ||
+ | <span class="flip-clock-label">Days</span> | ||
+ | </span> | ||
+ | <ul class="flip"> | ||
+ | <li class="flip-clock-active" data-digit="0"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="1"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="2"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="3"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="down"> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="4"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="down"> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="5"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="6"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="7"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="8"> | ||
+ | <a href="#"> | ||
+ | </li> | ||
+ | <li data-digit="9"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="flip play"> | ||
+ | <li data-digit="0"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="1"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="2"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="3"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="4"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="5"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="6"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="7"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="8"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="9"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <span class="flip-clock-divider hours"> | ||
+ | <span class="flip-clock-label">Hours</span> | ||
+ | </span> | ||
+ | <ul class="flip play"> | ||
+ | <li class="" data-digit="0"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="1"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="2"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="3"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="4"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="5"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="6"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="7"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="8"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="9"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="flip play"> | ||
+ | <li class="" data-digit="0"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="1"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="2"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="3"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="4"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="5"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="6"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="7"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="8"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="9"> | ||
+ | <a href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <span class="flip-clock-divider minutes"> | ||
+ | <span class="flip-clock-label">Minutes</span> | ||
+ | <span class="flip-clock-dot top"></span> | ||
+ | <span class="flip-clock-dot bottom"></span> | ||
+ | </span> | ||
+ | <ul class="flip play"> | ||
+ | <li class="flip-clock-before" data-digit="0"> | ||
+ | <a class="flip-clock-before" href="#"> | ||
+ | <div class="up flip-clock-before"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="1"> | ||
+ | <a class="flip-clock-before" href="#"> | ||
+ | <div class="up flip-clock-before"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="2"> | ||
+ | <a class="flip-clock-before" href="#"> | ||
+ | <div class="up flip-clock-before"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="3"> | ||
+ | <a class="flip-clock-before" href="#"> | ||
+ | <div class="up flip-clock-before"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="4"> | ||
+ | <a class="flip-clock-before" href="#"> | ||
+ | <div class="up flip-clock-before"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="5"> | ||
+ | <a class="flip-clock-before" href="#"> | ||
+ | <div class="up flip-clock-before"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow flip-clock-before"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="flip play"> | ||
+ | <li class="" data-digit="0"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="1"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="2"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="3"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="4"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-digit="5"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="6"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="7"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="8"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="9"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <span class="flip-clock-divider seconds"> | ||
+ | <span class="flip-clock-label">Seconds</span> | ||
+ | <span class="flip-clock-dot top"></span> | ||
+ | <span class="flip-clock-dot bottom"></span> | ||
+ | </span> | ||
+ | <ul class="flip play"> | ||
+ | <li class="" data-digit="0"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="1"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="2"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="3"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="4"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="5"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <ul class="flip play"> | ||
+ | <li class="" data-digit="0"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">0</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="1"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">1</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="2"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">2</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="3"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">3</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="4"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">4</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-active" data-digit="5"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">5</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="flip-clock-before" data-digit="6"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">6</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="7"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">7</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="8"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">8</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li class="" data-digit="9"> | ||
+ | <a class="" href="#"> | ||
+ | <div class="up"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | <div class="down"> | ||
+ | <div class="shadow"></div> | ||
+ | <div class="inn">9</div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
Line 119: | Line 996: | ||
<div> | <div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | var clock = $('.clock').FlipClip(3600 * 24 * 3, { | + | var clock = $('.clock-example').FlipClip(3600 * 24 * 3, { |
clockFace: 'DailyCounter', | clockFace: 'DailyCounter', | ||
countdown: true | countdown: true |
Revision as of 15:49, 3 October 2013