-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
107 lines (81 loc) · 3.92 KB
/
index.html
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.9/css/mdb.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="./js/script.js" defer></script>
<title>Analog Clock - LiveDemo for this clock</title>
</head>
<body>
<div class="container">
<main class="main">
<div class="jumbotron" style="text-align: center;">
<h1 id="headerTitle">JavaScript Analog Clock okay</h1>
<svg id="clock" class="clockbox my-5" xmlns="http://www.w3.org/2000/svg" width="100%"
viewBox="0 0 600 600">
<g id="face">
<circle class="circle" cx="300" cy="300" r="253.9" />
<path class="hour-marks"
d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6" />
<circle class="mid-circle" cx="300" cy="300" r="16.2" />
</g>
<g id="hour">
<path class="hour-arm" d="M300.5 298V142" />
<circle class="sizing-box" cx="300" cy="300" r="253.9" />
</g>
<g id="minute">
<path class="minute-arm" d="M300.5 298V67" />
<circle class="sizing-box" cx="300" cy="300" r="253.9" />
</g>
<g id="second">
<path class="second-arm" d="M300.5 350V55" />
<circle class="sizing-box" cx="300" cy="300" r="253.9" />
</g>
</svg>
</div>
</main>
</div>
<!-- footer -->
<div class="grey heavy-rain-gradient">
<div class="container">
<!-- Grid row-->
<div class="row py-4 d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
<h6 class="mb-0 text-dark">Get connected with me on social networks!</h6>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 col-lg-7 text-center text-md-right">
<!-- Facebook -->
<a class="fb-ic" style="font-size: 1.25rem;" href="https://www.facebook.com/yann.mjl" target="blank">
<i class="fa fa-facebook fa-2x blue-text mr-4"> </i>
</a>
<!-- Twitter -->
<a class="tw-ic" style="font-size: 1.25rem;" href="https://twitter.com/YannMjl" target="blank">
<i class="fa fa-twitter fa-2x text-info mr-4"> </i>
</a>
<!--Linkedin -->
<a class="li-ic" style="font-size: 1.25rem;" href="https://www.linkedin.com/in/yannmjl/" target="blank">
<i class="fa fa-linkedin fa-2x blue-text mr-4"> </i>
</a>
<!--Instagram-->
<a class="ins-ic" style="font-size: 1.25rem;" href="https://www.instagram.com/yannmjl/" target="blank">
<i class="fa fa-instagram fa-2x pink-text"> </i>
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row-->
</div>
</div>
</body>
</html>