Clock

by mattslay

HTML

<div class="main">
<h1>Parker's Clock</h1>  
 
<div class="face">

<div class="digit">
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
</div>

<div class="digit">
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
    
    <div style="float:left;">
        <div class="place hor-top"></div>
        <div class="place hor-mid"></div>
        <div class="place hor-btm"></div>
    </div>
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
</div>
<div class="digit">
    <div style="float:left;">
        <div class="place colon"></div>
        <div class="place colon" style="margin-top: 60px;"></div>
    </div>

</div>
<div class="digit">
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
    
    <div style="float:left;">
        <div class="place hor-top"></div>
        <div class="place hor-mid"></div>
        <div class="place hor-btm"></div>
    </div>
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
</div>

<div class="digit">
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
    
    <div style="float:left;">
        <div class="place hor-top"></div>
        <div class="place hor-mid"></div>
        <div class="place hor-btm"></div>
    </div>
    <div style="float:left;">
        <div class="place"></div>
        <div class="place"></div>
    </div>
</div>
<div style="clear:both">
    &nbsp;
</div>

    </div>
<div style="clear:both">
    &nbsp;
</div>    
    </div>

CSS

.main { background-color: #000000; height:1200px; width: 100%;}

.face {width: 530px; margin: 0px auto;}

h1 {color: red; font-size: 50px; margin-bottom: 70px; text-align: center;}

.place { width: 20px; height: 100px; background-color: #101010   ; 
   border:1px solid; border-radius:7px; border-color: #202020  ;}

.place.green { background-color: #00cc00; }

.hor-top, .hor-mid, .hor-btm{ width:80px; height: 20px; margin-top: -7px;}
.hor-mid, .hor-btm {margin-top: 77px; margin-left:-2px; width:84px; margin-right:-4px; }

.digit {padding: 10px; float:left;}

.colon {margin-top: 40px; height: 30px;}

JavaScript

$(".place").click(function() {
    $(this).toggleClass("green");
});