css-experiments/clock/index.html at e454e4fc2f8ca22cc6abc8e85b3616fd1e243843 · fofr/css-experiments · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <!-- Article: https://paulrhayes.com/2009-03/an-analogue-clock-using-only-css/ -->
    <!-- Demo: https://paulrhayes.com/experiments/clock/ -->
    <!-- Originally posted: 24th March 2009 -->
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>CSS3 Analogue Clock &mdash; Paul Hayes</title>
    <meta name="author" content="Paul Hayes" />
    <link rel="canonical" href="https://paulrhayes.com/experiments/clock/" />
    <link rel="stylesheet" href="../experiment-styles.css" />

    <link rel="stylesheet" href="css/experiment.css" />
</head>
<body class="experiment">
    <div class="wrapper">
        <p class="learn">
            This is a demo –  <a href="https://paulrhayes.com/2009-03/an-analogue-clock-using-only-css/">learn how it works</a>
        </p>

<div id="experiment">
    <p class="start"><a href="#clock" id="start">Start the Clock</a></p>
    <div id="clock">
        <div id="hour"><img src="images/hourHand.png" /></div>
        <div id="minute"><img src="images/minuteHand.png" /></div>
        <div id="second"><img src="images/secondHand.png" /></div>
    </div>
</div>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="js/experiment.js"></script>
</body>
</html>