Ajax Loader
×
HTML 
   <div class="hero">
1
   <div class="hero">
2
      <div class="watch-case-frame">
3
         <div class="watch-strap-top-edge"></div>
4
         <div class="watch-strap-bottom top-strap">
5
            <div class="strap-stich-top-l">
6
               <div class="stich-l"></div>
7
               <div class="stich-l"></div>
8
               <div class="stich-l"></div>
9
               <div class="stich-l"></div>
10
               <div class="stich-l"></div>
11
               <div class="stich-l"></div>
12
               <div class="stich-l"></div>
13
            </div>
14
            <div class="strap-stich-top-r">
15
               <div class="stich-r"></div>
16
               <div class="stich-r"></div>
17
               <div class="stich-r"></div>
18
               <div class="stich-r"></div>
19
               <div class="stich-r"></div>
20
               <div class="stich-r"></div>
21
            </div>
22
            <div class="clear"></div>
23
         </div>
24
         <div class="watch-top-lugs">
25
            <div class="watch-left-lug">
26
               <div class="watch-left-lug-in"></div>
27
            </div>
28
            <div class="watch-right-lug">
29
               <div class="watch-right-lug-in"></div>
30
            </div>
31
            <div class="clear"></div>
32
         </div>
33
         <div class="dial">
34
            <div class="dial-edge">
35
               <div class="dial-in">
36
                  <div class="dial-center">
37
                     <div class="watch-numerals-top">
38
                        <div class="watch-numerals-eleven">11</div>
39
                        <div class="watch-numerals-twelve">12</div>
40
                        <div class="watch-numerals-one">1</div>
41
                        <div class="clear"></div>
42
                     </div>
43
                     <div class="watch-numerals-mid">
44
                        <div class="watch-numerals-ten">10 </div>
45
                        <div class="watch-numerals-two">2</div>
46
                        <div class="clear"></div>
47
                     </div>
48
                     <div class="watch-case-brand">
49
                        Patek Philippe
50
                     </div>
51
                     <div class="watch-case-city">
52
                        Geneve
53
                     </div>
54
                     <div class="time">
55
                        <div class="hr">
56
                           <div class="hr-needle">
57
                              <div class="hr-t"></div>
58
                              <div class="hr-disk"></div>
59
                              <div class="hr-shadow"></div>
60
                           </div>
61
                        </div>
62
                        <div class="min">
63
                           <div class="min-needle">
64
                              <div class="min-t"></div>
65
                              <div class="min-disk"></div>
66
                           </div>
67
                        </div>
68
                        <div class="sec">
69
                           <div class="sec-needle">
70
                              <div class="sec-t"></div>
71
                              <div class="sec-m"></div>
72
                              <div class="sec-disk"></div>
73
                              <div class="sec-b"></div>
74
                           </div>
75
                        </div>
76
                     </div>
77
                     <div class="watch-chronos">
78
                        <div class="watch-chronos-hands">
79
                           <div class="chrono-left-in">
80
                              <div class="watch-chrono-hand-left stopwatch">
81
                                 <div class="watch-chrono-hand">
82
                                    <div class="chrono-top-hand-top"></div>
83
                                    <div class="chrono-top-hand-btm"></div>
84
                                 </div>
85
                                 <div class="watch-chrono-disk"></div>
86
                                 <div class="watch-chrono-hand-btm">
87
                                    <div class="chrono-btm-hand-top"></div>
88
                                    <div class="chrono-btm-hand-btm"></div>
89
                                 </div>
90
                              </div>
91
                           </div>
92
                           <div class="chrono-right-in">
93
                              <div class="watch-chrono-hand-right stopwatch">
94
                                 <div class="watch-chrono-hand">
95
                                    <div class="chrono-top-hand-top"></div>
96
                                    <div class="chrono-top-hand-btm"></div>
97
                                 </div>
98
                                 <div class="watch-chrono-disk"></div>
99
                                 <div class="watch-chrono-hand-btm">
100
                                    <div class="chrono-btm-hand-top"></div>
101
                                    <div class="chrono-btm-hand-btm"></div>
102
                                 </div>
103
                              </div>
104
                           </div>
105
                           <div class="clear"></div>
106
                        </div>
107
                        <div id="ch-l" class="chronos-l">
108
                           <div class="chrono-l-t">
109
                              <span class="w0">50</span><span class="w1"> </span><span class="w2">60</span><span class="w3"> </span><span class="w4">10</span>
110
                           </div>
111
                           <div class="chrono-l-b">
112
                              <span class="w0">40</span><span class="w1"> </span><span class="w2">30</span><span class="w3"> </span><span class="w4">20</span>
113
                           </div>
114
                        </div>
115
                        <div id="ch-r" class="chronos-r">
116
                           <div class="chrono-l-t">
117
                              <span class="w0">25</span><span class="w1"> </span><span class="w2">30</span><span class="w3"> </span><span class="w4">5</span>
118
                           </div>
119
                           <div class="chrono-l-b">
120
                              <span class="w0">20</span><span class="w1"> </span><span class="w2">15</span><span class="w3"> </span><span class="w4">10</span>
121
                           </div>
122
                        </div>
123
                     </div>
124
                     <div class="numerals-btm">
125
                        <div class="numerals-btm-top">
126
                           <div class="watch-numerals-seven">7</div>
127
                           <div class="watch-numerals-five">5</div>
128
                        </div>
129
                        <div class="watch-numerals-six">6</div>
130
                     </div>
131
                     <div class="swiss-made">Swiss Made</div>
132
                  </div>
133
               </div>
134
            </div>
135
         </div>
136
         <div class="watch-btm-lugs">
137
            <div class="watch-left-lug-ft">
138
               <div class="watch-left-lug-ft-in"></div>
139
            </div>
140
            <div class="watch-right-lug-ft">
141
               <div class="watch-right-lug-ft-in"></div>
142
            </div>
143
            <div class="clear"></div>
144
         </div>
145
         <div class="watch-strap-bottom">
146
            <div class="strap-stich-btm-l">
147
               <div class="stich-l"></div>
148
               <div class="stich-l"></div>
149
               <div class="stich-l"></div>
150
               <div class="stich-l"></div>
151
               <div class="stich-l"></div>
152
               <div class="stich-l"></div>
153
               <div class="stich-l"></div>
154
               <div class="stich-l"></div>
155
               <div class="stich-l"></div>
156
               <div class="stich-l"></div>
157
               <div class="stich-l"></div>
158
            </div>
159
            <div class="strap-stich-btm-r">
160
               <div class="stich-r"></div>
161
               <div class="stich-r"></div>
162
               <div class="stich-r"></div>
163
               <div class="stich-r"></div>
164
               <div class="stich-r"></div>
165
               <div class="stich-r"></div>
166
               <div class="stich-r"></div>
167
               <div class="stich-r"></div>
168
               <div class="stich-r"></div>
169
               <div class="stich-r"></div>
170
               <div class="stich-r"></div>
171
            </div>
172
            <div class="clear"></div>
173
         </div>
174
         <div class="watch-strap-btm-edge"></div>
175
         <div class="side-btns">
176
            <a href="#" id="start-stop" class="chrono-top-btn" ></a>
177
            <div class="main-btn">
178
               <div class="main-btn-ridge"></div>
179
               <div class="main-btn-ridge"></div>
180
               <div class="main-btn-ridge"></div>
181
               <div class="main-btn-ridge"></div>
182
               <div class="main-btn-ridge"></div>
183
               <div class="btn-crest"></div>
184
            </div>
185
            <a href="#" id="reset" class="chrono-btm-btn"></a>
186
         </div>
187
         <div class="case-shine"></div>
188
         <div class="case-reflect"></div>
189
      </div>
190
   </div>
191
   <div class="watch-shadow"></div>
192
   <div class="watch-info">
193
      <h1>Patek Philippe</h1>
194
      <div class="reference">5170-<span class="variation">R</span> <span class="type">- Complications</span></div>
195
      <div class="winding">Manual Winding</div>
196
      <div class="validation">Pure {Valid} <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fvuild.com%2F5170r%2F">HTML</a> &amp; <a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fvuild.com%2F5170r%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en">CSS</a></div>
197
      <div class="watch-desc">
198
         Mechanical manually wound movement. Caliber CH 29-535 PS. Chronograph. Central chronograph hand and instantaneous 30-minute counter. Seconds subdial. Tachymeter scale. Dial: ebony black opaline dial, gold applied Breguet numerals. Alligator strap with square scales, hand-stitched, shiny black, fold-over clasp. Fold-over clasp. <strong>Case:</strong> rose gold. Sapphire-crystal case back. Water resistant to 30 m. <strong>Case diameter:</strong> 39.4 mm. <strong> Height:</strong>  10.9 mm.
199
 
200
         <div class="visit"><a href="https://vuild.com/5170r-parts/">See Pieces</a></div>
201
         <div class="visit"><a href="https://www.patek.com/en/collection/complications">Visit Patek</a></div>
202
    
203
</div>
204
   </div>
205
 
206
 
 
CSS 
/* Page styling/ reset */
1
/* Page styling/ reset */
2
 
3
body{text-align:center;padding:0;margin:0}
4
.hero{background:linear-gradient(#bf9056 0%, #d9b589 55%, #ebd8c0 69%, #e3c5a0 100%) #e3c5a0;padding:40px 0 60px;border-bottom:1px solid #bf9056}
5
h1 {text-transform:uppercase;margin:0 0 5px 0;color:#463527;font-weight:normal;font-size:1.6em}
6
.clear{clear:both}
7
.watch-desc {margin-bottom:90px;font-size:.8em}
8
.winding {text-transform:uppercase;font-size:.85em;letter-spacing:1px}
9
.type {text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
10
.reference {color:#ab947d}
11
.validation {color:#BADA55;margin-bottom:30px;font-size:.8em}
12
.validation a {color:#BADA55;text-decoration:underline}
13
.validation a:hover {color:#222;transition:all .5s ease-in-out}
14
 
15
.watch-info {
16
  margin:100px auto 50px;
17
  max-width:300px;
18
  font-family:sans-serif;
19
  color:#463527;
20
  line-height:1.5em
21
}
22
 
23
.visit a {
24
  display:block;
25
  text-transform:uppercase;
26
  letter-spacing:2px;
27
  margin:20px;
28
  color:#ab947d;
29
  text-decoration:none;
30
  border:1px solid #ab947d;
31
  padding:10px
32
}
33
 
34
.visit a:hover {color:#BADA55;filter:invert(40%)}
35
 
36
 
37
/* Case */
38
 
39
.watch-case-frame {margin:0 auto;width:290px}
40
41
.watch-top-lugs{
42
  width:240px;
43
  margin:0 auto -120px;
44
  clear:both;
45
  position:relative;
46
  z-index:3
47
}
48
 
49
.watch-left-lug{
50
  float:left;
51
  width:50px;
52
  height:100px;
53
  margin-top:-20px;
54
  border-top-left-radius:90%;
55
  background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 42%, #feebd1 100%) #e3c5a0;
56
  -webkit-clip-path:polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%);
57
  clip-path:polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%)
58
}
59
 
60
.watch-left-lug-in{
61
  float:left;
62
  width:50px;
63
  height:100px;
64
  margin-top:-10px;
65
  background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 32%, #feebd1 100%) #e3c5a0;
66
  -webkit-clip-path:polygon(0% 90%, 60% 30%, 100% 100%, 0% 100%);
67
  clip-path:polygon(0% 90%, 60% 30%, 100% 100%, 0% 100%);
68
  transform:rotate(-80deg)
69
}
70
 
71
.watch-right-lug{
72
  float:right;
73
  width:50px;
74
  height:100px;
75
  margin-top:-20px;
76
  border-top-right-radius:90%;
77
  background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 38%, #feebd1 100%) #e3c5a0;
78
  -webkit-clip-path:polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%);
79
  clip-path:polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%)
80
}
81
 
82
.watch-right-lug-in{
83
  float:right;
84
  width:50px;
85
  height:100px;
86
  margin-top:-10px;
87
  background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 38%, #feebd1 100%) #e3c5a0;
88
  -webkit-clip-path:polygon(0% 90%, 30% 30%, 100% 100%, 0% 100%);
89
  clip-path:polygon(0% 90%, 30% 30%, 100% 100%, 0% 100%);
90
  transform:rotate(90deg)
91
}
92
 
93
.watch-btm-lugs{  width:240px;position:relative;margin:-62px auto -40px;z-index:3}
94
.watch-left-lug-ft, .watch-right-lug-ft{width:50px;height:100px;border-bottom-right-radius:90%}
95
 
96
.watch-left-lug-ft{
97
  float:left;
98
  background:linear-gradient(#feebd1 0%, #e5a978 20%, #e5a978 30%, #a4643d 94%, #222 100%) #e3c5a0;
99
  -webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
100
  clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
101
  transform:scaleX(-1)
102
}
103
 
104
.watch-right-lug-ft{
105
  background:linear-gradient(#feebd1 0%, #e5a978 40%, #a4643d 94%, #222 100%) #e3c5a0;
106
  float:right;
107
  width:50px;
108
  height:100px;
109
  border-bottom-right-radius:90%;
110
  -webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
111
  clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%)
112
}
113
114
.watch-right-lug-ft-in{
115
  background:linear-gradient(#feebd1 0%, #e5a978 40%, #dab16c 72%, #d6b47f 100%) #e3c5a0;
116
  float:right;
117
  width:50px;
118
  height:110px;
119
  -webkit-clip-path:polygon(0% 0%, 70% 0%, 60% 55%, 0% 100%);
120
  clip-path:polygon(0% 0%, 70% 0%, 50% 75%, 0% 100%);
121
  transform:rotate(40deg)
122
}
123
 
124
.watch-left-lug-ft-in{
125
  background:linear-gradient(#feebd1 0%, #e5a978 40%, #dab16c 72%, #d6b47f 100%) #e3c5a0;
126
  float:right;
127
  width:50px;
128
  height:110px;
129
  -webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
130
  clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
131
  transform:rotate(40deg)
132
}
133
 
134
 
135
/*  dial */
136
 
137
@keyframes clockwise {100% {transform:rotate(360deg)}}
138
 
139
.dial {
140
  margin:55px auto 0;
141
  width:230px;
142
  height:230px;
143
  position:relative;
144
  border-radius:50%;
145
  z-index:4;
146
  box-shadow:0 0 0 3px  #111, 0 0 0 3px  #a4643d ,0 0 0 5px  #ebc18d, 0 0 0 9px  #dfb178, 0 0 0 14px  #dfb178,0 0 0 16px  #dfb178, 0 0 0 17px  #ebc18d, 0 0 0 19px #e3c5a0, 0 0 0 20px #e7af69, 0 0 0 22px #d99d51
147
}
148
 
149
.dial-edge{width:228px;height:228px;  border-radius:50%}
150
 
151
.dial-in{
152
  border-radius:50%;
153
  width:228px;
154
  height:228px;
155
  border:1px solid #fff;
156
  background:
157
  linear-gradient(66deg, transparent 49.5%, white 50%, transparent 50%),
158
  linear-gradient(72deg, transparent 49.5%, white 50%, transparent 50%),
159
  linear-gradient(78deg, transparent 49.5%, white 50%, transparent 50%),
160
  linear-gradient(84deg, transparent 49.5%, white 50%, transparent 50%),
161
  linear-gradient(90deg, transparent 49%, white 50%, transparent 50%),
162
  linear-gradient(96deg, transparent 49.5%, white 50%, transparent 50%),
163
  linear-gradient(102deg, transparent 49.5%, white 50%, transparent 50%),
164
  linear-gradient(108deg, transparent 49.5%, white 50%, transparent 50%),
165
  linear-gradient(114deg, transparent 49.5%, white 50%, transparent 50%),
166
  linear-gradient(120deg, transparent 49%, white 50%, transparent 50%),
167
  linear-gradient(126deg, transparent 49.5%, white 50%, transparent 50%),
168
  linear-gradient(132deg, transparent 49.5%, white 50%, transparent 50%),
169
  linear-gradient(138deg, transparent 49.5%, white 50%, transparent 50%),
170
  linear-gradient(144deg, transparent 49.5%, white 50%, transparent 50%),
171
  linear-gradient(150deg, transparent 49%, white 50%, transparent 50%),
172
  linear-gradient(156deg, transparent 49.5%, white 50%, transparent 50%),
173
  linear-gradient(162deg, transparent 49.5%, white 50%, transparent 50%),
174
  linear-gradient(168deg, transparent 49.5%, white 50%, transparent 50%),
175
  linear-gradient(174deg, transparent 49.5%, white 50%, transparent 50%),
176
  linear-gradient(180deg, transparent 49%, white 50%, transparent 50%),
177
  linear-gradient(186deg, transparent 49.5%, white 50%, transparent 50%),
178
  linear-gradient(192deg, transparent 49.5%, white 50%, transparent 50%),
179
  linear-gradient(198deg, transparent 49.5%, white 50%, transparent 50%),
180
  linear-gradient(204deg, transparent 49.5%, white 50%, transparent 50%),
181
  linear-gradient(210deg, transparent 49%, white 50%, transparent 50%),
182
  linear-gradient(216deg, transparent 49.5%, white 50%, transparent 50%),
183
  linear-gradient(222deg, transparent 49.5%, white 50%, transparent 50%),
184
  linear-gradient(228deg, transparent 49.5%, white 50%, transparent 50%),
185
  linear-gradient(234deg, transparent 49.5%, white 50%, transparent 50%),
186
  linear-gradient(240deg, transparent 49%, white 50%, transparent 50%),
187
  #222;
188
  z-index:4
189
}
190
 
191
.dial-center{
192
  width:208px;
193
  height:208px;
194
  margin-left:9px;
195
  margin-top:9px;
196
  border-radius:50%;
197
  border:1px solid #fff;
198
  background:#222;
199
  background:linear-gradient(30deg, #000 0%, #191919 28%, #333 54%, #000 100%) #141516
200
}
201
 
202
.case-shine {
203
  position:relative;
204
  height:240px;
205
  width:250px;
206
  margin-top:-415px;
207
  margin-bottom:-190px;
208
  margin-left:auto;
209
  margin-right:auto;
210
  border-radius:50%;
211
  transform:rotate(160deg);
212
  border-top:10px solid #fff;
213
  border-bottom:10px solid #fff;
214
  opacity:.8;
215
  z-index:20
216
}
217
 
218
.case-reflect {
219
  position:relative;
220
  z-index:21;
221
  width:240px;
222
  height:240px;
223
  margin:-260px auto 150px;
224
  border-radius:50%;
225
  background:none;
226
  opacity:.3;
227
  border-top:10px solid orange;
228
  border-bottom:10px solid orange;
229
  box-shadow: -2px -3px 3px rgba(255,255,255,1)
230
}
231
 
232
 
233
/* Hands  */
234
 
235
.time {
236
  width:220px;
237
  height:220px;
238
  position:relative;
239
  z-index:10;
240
  margin:-91px 0 0 -6px
241
}
242
 
243
.sec-needle {
244
  width:220px;
245
  height:220px;
246
  width:14px;
247
  margin:-211px auto;
248
  animation:clockwise 60s linear infinite;
249
}
250
 
251
.sec-t {
252
  width:2px;
253
  height:120px;
254
  margin:0 auto;
255
  background:linear-gradient(to top, #e3c5a0 0%, #d59442 100%) #e3c5a0
256
}
257
 
258
.sec-m {
259
  width:10px;
260
  height:70px;
261
  margin:-53px auto 0;
262
  -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
263
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
264
  background:linear-gradient(to top,#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #d59442
265
}
266
 
267
.sec-disk {
268
  width:14px;
269
  height:14px;
270
  margin:-34px auto 0;
271
  border-radius:50%;
272
  position:relative;
273
  background:radial-gradient(#e3c5a0 0%, #a4643d 4%,  #e3c5a0 30%, #d59442 30%, #d59442 50%, #e3c5a0 100%) #d59442
274
}
275
 
276
.sec-b {
277
  width:10px;
278
  height:6px;
279
  margin:20px auto 0;
280
  background:linear-gradient(#d59442 0%, #e3c5a0 50%, #e3c5a0 100%) #d59442;
281
  transform:rotate(-180deg);
282
  -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
283
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
284
}
285
 
286
.min-needle {
287
  width:201px;
288
  height:201px;
289
  position:relative;
290
  z-index:10;
291
  width:30px;
292
  margin:-224px auto 0;
293
  animation:clockwise 3600s linear infinite
294
}
295
 
296
.min-t{
297
  width:10px;
298
  height:106px;
299
  margin:0 10px;
300
  position:relative;
301
  z-index:10;
302
  -webkit-clip-path:polygon(50% 100%,
303
  30% 75%, 25% 60%,40% 25%, 50% 0%,60% 25%,
304
  75% 60%,70% 75%);
305
  clip-path:polygon(50% 100%,
306
  30% 75%, 25% 60%,40% 25%, 50% 0%,60% 25%,
307
  75% 60%,70% 75%);
308
  background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0
309
}
310
 
311
.min-disk {
312
  width:2px;
313
  height:2px;
314
  background:red;
315
  margin:-12px auto 0;
316
  border-radius:50%;
317
  position:relative;
318
  border:6px solid #e3c5a0
319
}
320
 
321
.hr-needle {
322
  width:40px;
323
  height:180px;
324
  width:30px;
325
  position: relative;
326
  z-index:1;
327
  margin: 34px auto;
328
  animation:clockwise 43200s linear infinite
329
}
330
 
331
.hr-t {
332
  width:14px;
333
  height:94px;
334
  margin:0 0 0 8px;
335
  background:linear-gradient(to left,#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
336
  -webkit-clip-path:polygon(50% 100%, 30% 75%, 25% 60%,40% 25%, 50% 8%,60% 25%, 75% 60%,70% 75%);
337
  clip-path:polygon(50% 100%, 30% 75%, 25% 60%,40% 25%, 50% 8%,60% 25%, 75% 60%,70% 75%)
338
}
339
 
340
.hr-disk {
341
  width:3px;
342
  height:3px;
343
  margin:-13px auto 0;
344
  border-radius:50%;
345
  position:relative;
346
  border:8px solid #d59442;
347
  position: relative;
348
  z-index:3
349
}
350
 
351
.hr-shadow {
352
  width:20px;
353
  height:20px;
354
  margin:-19px auto 0;
355
  border-radius:50%;
356
  background:#111;
357
  opacity:.7;
358
  filter:blur(7px);
359
  position: relative;
360
  z-index:1
361
}
362
 
363
 
364
/* Brand info  */
365
 
366
.watch-case-city, .watch-case-brand, .swiss-made  {text-transform:uppercase;font-family:sans-serif;color:#fff}
367
.watch-case-brand {padding-top:0;margin-top:10px;height:9px;font-size:8px;font-weight:300;text-shadow:0 1px 1px rgba(0,0,0,1)}
368
.watch-case-city {font-size:5px;letter-spacing:1px;padding-bottom:2px}
369
.swiss-made {font-size:2px;margin-top:26px}
370
 
371
 
372
/* Numerals */
373
 
374
.watch-numerals-top, .watch-numerals-mid, .numerals-btm {
375
  font-style:italic;
376
  position:relative;
377
  font-weight:bold;
378
  color:#eac18a;
379
  text-shadow:0 2px 2px rgba(0,0,0,.2);
380
  font-size:22px;
381
  z-index:9
382
}
383
 
384
.watch-numerals-top {width:126px;margin:auto;padding-top:24px;height:24px}
385
.watch-numerals-mid {width:198px;margin:0 auto -33px;height:28px}
386
.numerals-btm{width:100px;height:27px;margin:0 auto;}
387
.watch-numerals-eleven {width:14px;float:left;margin-top:-6px;margin-left:6px}
388
.watch-numerals-twelve {width:26px;float:left;margin-top:-20px;margin-left:30px}
389
.watch-numerals-one {width:14px;float:right;margin-top:-6px;margin-right:12px}
390
.watch-numerals-ten {width:14px;float:left;margin-left:-13px}
391
.watch-numerals-two {width:19px;float:right;margin-right:-13px}
392
.watch-numerals-seven {width:14px}
393
.watch-numerals-six {width:14px;margin: -10px auto 0}
394
.watch-numerals-five {width:14px;margin-left:89px;margin-top:-25px}
395
 
396
 
397
/* Chronographs */
398
 
399
.watch-chronos {width:190px;margin:-146px auto 78px;position:relative;z-index:2}
400
.chronos-l{float:left}
401
.chronos-r{float:right}
402
.chrono-left-in {position:relative;z-index:9;margin-top:-3px;margin-left:-3px;float:left}
403
.chrono-right-in {float:right;position:relative;z-index:9;margin-top:-3px;margin-right:-3px}
404
.chrono-left-in, .chrono-right-in {width:70px;height:70px;margin-bottom:-74px;border:1px solid #fff;border-radius:50%}
405
.chrono-l-t {position: relative; display:block;margin-top:2px;margin-left:3px}
406
#ch-r .chrono-l-t, #ch-r .chrono-l-b {margin-left:3px}
407
.chrono-l-t>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
408
.chrono-l-t span{font-size:10px;line-height:0.65; padding:0}
409
.chrono-l-t .w0 {transform: rotate(-1.15rad); width: 6px; height: 6px; left:9px; top: 16px}
410
.chrono-l-t .w1 {transform: rotate(-0.57rad); width: 3px; height: 6px; left:18px; top: 7px}
411
.chrono-l-t .w2 {transform: rotate(0rad); width: 6px; height: 6px; left:24px; top: 4px}
412
.chrono-l-t .w3 {transform: rotate(0.58rad); width: 3px; height: 6px; left:40px; top: 79px}
413
.chrono-l-t .w4 {transform: rotate(1.15rad); width: 6px; height: 6px; left:45px; top: 16px}
414
.chrono-l-b {position: relative; display: block;width:80px; height:80px;margin-top:2px;margin-left:2px}
415
.chrono-l-b >span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
416
.chrono-l-b  span{font-size:10px;line-height:0.65;padding:0px;}
417
.chrono-l-b .w0 { transform: rotate(7.38rad); width: 6px; height: 6px; left:2px; top: 37px}
418
.chrono-l-b .w1 {transform: rotate(6.9rad); width: 3px; height: 6px; left:12px; top: 47px}
419
.chrono-l-b .w2 {transform: rotate(6.42rad); width: 6px; height: 6px; left:23px; top: 51px}
420
.chrono-l-b .w3 {transform: rotate(5.93rad); width: 3px; height: 6px; left:38px; top: 50px}
421
.chrono-l-b .w4 {transform: rotate(5.45rad); width: 6px; height: 6px; left:47px; top: 43px}
422
                                                                                                                                                                                                
423
#ch-l {position:relative; display:block; width:64px; height:64px;color:#fff;border:1px dashed #fff;border-radius:50%;
424
box-shadow:
425
inset 0 0 0 1px #fff,
426
inset 0 0 0 2px #0f0f0f,
427
inset 0 0 0 3px #3d3d3d,
428
inset 0 0 0 4px #0f0f0f,
429
inset 0 0 0 5px #3d3d3d,
430
inset 0 0 0 6px #0f0f0f,
431
inset 0 0 0 7px #3d3d3d,
432
inset 0 0 0 8px #0f0f0f,
433
inset 0 0 0 9px #3d3d3d,
434
inset 0 0 0 10px #0f0f0f,
435
inset 0 0 0 11px #3d3d3d,
436
inset 0 0 0 12px #0f0f0f,
437
inset 0 0 0 13px #3d3d3d,
438
inset 0 0 0 14px #0f0f0f,
439
inset 0 0 0 15px #3d3d3d,
440
inset 0 0 0 16px #0f0f0f,
441
inset 0 0 0 17px #3d3d3d,
442
inset 0 0 0 18px #0f0f0f,
443
inset 0 0 0 19px #3d3d3d,
444
inset 0 0 0 20px #0f0f0f,
445
inset 0 0 0 21px #3d3d3d,
446
inset 0 0 0 22px #0f0f0f,
447
inset 0 0 0 23px #3d3d3d,
448
inset 0 0 0 24px #0f0f0f,
449
inset 0 0 0 25px #3d3d3d,
450
inset 0 0 0 26px #0f0f0f,
451
inset 0 0 0 27px #3d3d3d,
452
inset 0 0 0 28px #0f0f0f,
453
inset 0 0 0 29px #3d3d3d,
454
inset 0 0 0 30px #0f0f0f,
455
inset 0 0 0 31px #3d3d3d,
456
inset 0 0 0 32px #0f0f0f,
457
inset 0 0 0 33px #3d3d3d,
458
inset 0 0 0 34px #0f0f0f
459
}
460
 
461
#ch-r {position:relative;display:block;width:64px;height:64px;color:#fff;border:1px dashed #fff;border-radius:50%;
462
box-shadow:
463
inset 0 0 0 1px #fff,
464
inset 0 0 0 2px #0f0f0f,
465
inset 0 0 0 3px #3d3d3d,
466
inset 0 0 0 4px #0f0f0f,
467
inset 0 0 0 5px #3d3d3d,
468
inset 0 0 0 6px #0f0f0f,
469
inset 0 0 0 7px #3d3d3d,
470
inset 0 0 0 8px #0f0f0f,
471
inset 0 0 0 9px #3d3d3d,
472
inset 0 0 0 10px #0f0f0f,
473
inset 0 0 0 11px #3d3d3d,
474
inset 0 0 0 12px #0f0f0f,
475
inset 0 0 0 13px #3d3d3d,
476
inset 0 0 0 14px #0f0f0f,
477
inset 0 0 0 15px #3d3d3d,
478
inset 0 0 0 16px #0f0f0f,
479
inset 0 0 0 17px #3d3d3d,
480
inset 0 0 0 18px #0f0f0f,
481
inset 0 0 0 19px #3d3d3d,
482
inset 0 0 0 20px #0f0f0f,
483
inset 0 0 0 21px #3d3d3d,
484
inset 0 0 0 22px #0f0f0f,
485
inset 0 0 0 23px #3d3d3d,
486
inset 0 0 0 24px #0f0f0f,
487
inset 0 0 0 25px #3d3d3d,
488
inset 0 0 0 26px #0f0f0f,
489
inset 0 0 0 27px #3d3d3d,
490
inset 0 0 0 28px #0f0f0f,
491
inset 0 0 0 29px #3d3d3d,
492
inset 0 0 0 30px #0f0f0f,
493
inset 0 0 0 31px #3d3d3d,
494
inset 0 0 0 32px #0f0f0f,
495
inset 0 0 0 33px #3d3d3d,
496
inset 0 0 0 34px #0f0f0f
497
}            
498
 
499
.watch-chrono-disk {
500
  width:6px;
501
  height:6px;
502
  margin-left:-1px;
503
  border-radius:50%;
504
  background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0
505
}
506
 
507
.watch-chrono-hand {
508
  width:5px;
509
  height:30px;
510
  margin:auto;
511
  position:relative
512
}
513
 
514
.watch-chrono-hand-left {
515
  width:5px;
516
  margin-top:1px;
517
  margin-left:32px;
518
  height:70px;
519
}
520
 
521
.watch-chrono-hand-right {
522
  width:5px;
523
  margin-top:2px;
524
  margin-left:33px;
525
  height:70px;
526
}
527
 
528
.watch-chrono-hand-left.animate {animation:clockwise 60s linear infinite}
529
.watch-chrono-hand-right.animate {animation:clockwise 1800s linear infinite}
530
 
531
.watch-chrono-hand-btm {margin:-10px auto 0;width:5px}
532
 
533
.chrono-btm-hand-top{
534
  width:4px;
535
  height:15px;
536
  background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
537
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
538
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
539
}
540
 
541
.chrono-btm-hand-btm{
542
  width:4px;
543
  height:4px;
544
  transform:rotate(180deg);
545
  background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
546
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
547
  -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
548
}
549
 
550
.chrono-top-hand-btm{
551
  width:4px;
552
  height:35px;
553
  background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
554
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
555
  -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
556
  transform:rotate(180deg)
557
}
558
 
559
.chrono-top-hand-top{
560
  width:4px;
561
  height:15px;
562
  background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
563
  -webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
564
  clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
565
}
566
 
567
.side-btns{
568
  width:50px;
569
  height:200px;
570
  float:right;
571
  margin:-353px -10px -150px 0;
572
}
573
 
574
a#start-stop{
575
  display:block;
576
  width:40px;
577
  height:12px;
578
  margin-left:4px;
579
  margin-bottom:29px;
580
  position:relative;
581
  z-index:4;
582
  transform:rotate(66deg);
583
  border-top:2px solid #a4643d;
584
  border-top-left-radius:27%;
585
  border-top-right-radius:27%;
586
  background:#ebb88a;
587
  background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%), repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%), repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
588
  background-image:-webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),-webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
589
  box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
590
}
591
 
592
a#reset{
593
  width:40px;
594
  height:12px;
595
  margin-top:29px;
596
  margin-left:2px;
597
  position:relative;
598
  z-index:3;
599
  background:#ebb88a;
600
  border-top:2px solid #a4643d;
601
  border-top-left-radius:27%;
602
  border-top-right-radius:27%;
603
  transform:rotate(113deg);
604
  background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%), repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%), repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
605
  background-image:-webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%), -webkit-repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%), -webkit-repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
606
  box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
607
}
608
 
609
#start-stop, #reset{display:block}
610
 
611
.main-btn{
612
  width:30px;
613
  height:43px;
614
  padding-top:3px;
615
  margin-left:13px;
616
  position:relative;
617
  background:#ebb88a;
618
  border-right:2px solid #a4643d;
619
  border-bottom:1px solid #a4643d;
620
  border-radius:5px;
621
  box-shadow:inset 10px -10px 10px rgba(0,0,0,.1);
622
  background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%), repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0) 4%, hsla(0,0%,  0%,.03) 4.5%), repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
623
  box-shadow:inset 10px -10px 10px rgba(161,100,61,.6), inset 10px -10px 10px rgba(0,0,0,.1), inset  2px 4px 12px rgba(255,255,255,.7), inset  2px 3px 12px rgba(255,255,255,.4)
624
}
625
 
626
.main-btn-ridge{
627
  height:3px;
628
  margin:3px 1px;
629
  border-radius:3px;
630
  background:rgba(0,0,0,.2);
631
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.5)
632
}
633
 
634
.main-btn-ridge:nth-child(2n+0){
635
  height:4px;
636
  margin:4px 1px;
637
  border-radius:5px;
638
  background:rgba(0,0,0,.3);
639
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)
640
}
641
 
642
.main-btn-ridge:nth-child(3n+0){
643
  height:4px;
644
  margin:4px 1px;
645
  border-radius:5px;
646
  background:rgba(0,0,0,.4);
647
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)
648
 }
649
 
650
.btn-crest{
651
  height:40px;
652
  margin-top:-41px;
653
  margin-right:-6px;
654
  border-radius:30%;
655
  background:#fff;
656
  box-shadow:inset 1px 1px 1px rgba(0,0,0,.3),inset 11px 11px 11px rgba(255,255,255,.3);
657
  float:right;
658
  width:4px;
659
  border:1px solid #a4643d;
660
  background-image:repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%), repeating-linear-gradient(to left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%), repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
661
  box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
662
}
663
 
664
.btn-crest:after{
665
  content:"";
666
  float:right;
667
  width:3px;
668
  margin-top:2px;
669
  margin-right:-3px;
670
  height:35px;
671
  border-radius:15px;
672
  background:#ebb88a;
673
    border-top:1px solid #a4643d;
674
    border-bottom:1px solid #a4643d;
675
    border-left:1px solid #ebb88a;
676
    border-right:1px solid #a4643d;
677
    box-shadow:inset 1px 1px 1px rgba(0,0,0,.3),inset 11px 11px 11px rgba(255,255,255,.3);
678
    background-image: repeating-linear-gradient(to left, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%), repeating-linear-gradient(to left, hsla(0,0%, 0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%), repeating-linear-gradient(to left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%);
679
  box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset  2px 2px 2px rgba(255,255,255,.4)
680
}
681
 
682
 
683
/* Watch straps */
684
 
685
.watch-strap-bottom {
686
  width:147px;
687
  margin:15px auto 0;
688
  position:relative;
689
  border-radius:5px;
690
  background:linear-gradient(to bottom, #000000 10%, #213140 20%, #141516 100%) #141516;
691
  -webkit-clip-path:polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
692
  clip-path:polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
693
  z-index:2
694
}
695
 
696
.top-strap {transform:scaleY(-1);margin:auto}
697
 
698
.watch-strap-top-edge {
699
  width:117px;
700
  padding:10px 0;
701
  margin:0 auto;
702
  background:linear-gradient(to bottom, #000000 10%,#303135 60%,#141516 90%) #141516;
703
  border-radius:20px 20px 0 0
704
}
705
 
706
.watch-strap-btm-edge {
707
  width:117px;
708
  padding:10px 0;
709
  margin:0 auto 20px;
710
  position:relative;
711
  background:linear-gradient(to bottom, #141516 10%,#303135 40%,#000000 100%) #141516;
712
  border-radius:0 0 20px 20px;
713
  z-index:11
714
}
715
 
716
.watch-strap-top {
717
  width:165px;
718
  padding:60px 0;
719
  margin:0 auto;
720
  background:linear-gradient(to bottom, #141516 38%,#303135 90%,#000000 100%) #141516;
721
  border-radius:5px;
722
  -webkit-clip-path:polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
723
  clip-path:polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%)
724
}
725
726
.strap-stich-top-l {
727
  float:left;
728
  width:4px;
729
  height:80px;
730
  margin:0 15px;
731
  border-radius:5px;
732
  transform:rotate(-8deg);
733
  box-shadow:10px -10px 10px rgba(0,0,0,1)
734
}
735
 
736
.strap-stich-top-r {
737
  float:right;
738
  width:4px;
739
  height:80px;
740
  margin:0 15px;
741
  border-radius:5px;
742
  transform:rotate(8deg);
743
  box-shadow:-10px -10px 10px rgba(0,0,0,1)
744
}
745
 
746
.strap-stich-btm-l {
747
  float:left;
748
  width:4px;
749
  height:119px;
750
  margin:0 15px;
751
  border-radius:5px;
752
  transform:rotate(-8deg);
753
  box-shadow:10px -10px 10px rgba(0,0,0,1)
754
}
755
 
756
.strap-stich-btm-r {
757
  float:right;
758
  position:relative;
759
  width:4px;
760
  height:119px;
761
  margin:0 15px;
762
  border-radius:5px;
763
  transform:rotate(8deg);
764
  box-shadow:-10px -10px 10px rgba(0,0,0,1)
765
}
766
 
767
.stich-l, .stich-r{
768
  background:#555;
769
  width:2px;
770
  height:7px;
771
  margin:2px 0;
772
  border-top:2px solid rgba(0,0,0,.5);
773
  border-bottom:2px solid rgba(0,0,0,.5);
774
  border-radius:50px;
775
  opacity:.5
776
}
777
 
778
.stich-l {box-shadow:2px 3px 3px rgba(0,0,0,1), inset 2px 3px 3px rgba(0,0,0,.4)}
779
.stich-r {box-shadow:-2px -3px 3px rgba(0,0,0,1), inset 2px 3px 3px rgba(0,0,0,.4)}
780
.stich-r:nth-child(0n+1){transform: rotate(5deg)}
781
.stich-r:nth-child(0n+2){transform: rotate(1deg)}
782
.stich-r:nth-child(0n+3){transform: rotate(-1deg)}
783
.stich-r:nth-child(0n+4){transform: rotate(-1deg)}
784
.stich-r:nth-child(0n+5){transform: rotate(-1deg)}
785
.stich-r:nth-child(0n+6){transform: rotate(1deg)}
786
.stich-r:nth-child(0n+7){transform: rotate(2deg)}
787
.stich-r:nth-child(0n+8){transform: rotate(1deg)}
788
.stich-l:nth-child(0n+1){transform: rotate(-5deg)}
789
.stich-l:nth-child(0n+2){transform: rotate(1deg)}
790
.stich-l:nth-child(0n+3){transform: rotate(-1deg)}
791
.stich-l:nth-child(0n+4){transform: rotate(-1deg)}
792
.stich-l:nth-child(0n+5){transform: rotate(-1deg)}
793
.stich-l:nth-child(0n+6){transform: rotate(1deg)}
794
.stich-l:nth-child(0n+7){transform: rotate(2deg)}
795
.stich-l:nth-child(0n+8){transform: rotate(1deg)}
796
 
797
 
798
/* Watch shadow */
799
 
800
.watch-shadow {margin:-120px auto 150px;padding:30px;width:70px;position:relative;background:rgba(167, 128, 56, .5);filter:blur(10px);z-index:1}
 
JavaScript 
      // JS is  used to get the current time (modified from https://codepen.io/kowlor/pen/bdRzML) and trigger chronograph animations.
1
      // JS is  used to get the current time (modified from https://codepen.io/kowlor/pen/bdRzML) and trigger chronograph animations.
2
    
3
      function setTime() {
4
        var d = new Date;
5
    
6
        function ct(v) {
7
          return v * 360 / 60;
8
        };
9
    
10
        function ctm(v) {
11
          return v * 360 / 60 + 6 * ct(d.getSeconds()) / 360; // 1min = 6 deg
12
        };
13
    
14
        function cth(v) {
15
          return v * 360 / 12 + 30 * ct(d.getMinutes()) / 360; // 1h = 30 deg
16
        };
17
    
18
        document.getElementsByClassName('sec')[0].style.transform = 'rotateZ(' + ct(d.getSeconds()) + 'deg)';
19
        document.getElementsByClassName('min')[0].style.transform = 'rotateZ(' + ctm(d.getMinutes()) + 'deg)';
20
        document.getElementsByClassName('hr')[0].style.transform = 'rotateZ(' + cth(d.getHours()) + 'deg)';
21
      }
22
    
23
      document.getElementById('start-stop').onclick = function(e) {
24
        e.preventDefault();
25
        var elem = document.getElementsByClassName('stopwatch');
26
        var state = 'running' == elem[0].style.animationPlayState ? 'paused' : 'running';
27
        for (var i = 0; i < elem.length; i++) {
28
          elem[i].style.animationPlayState = state;
29
          if (-1 == elem[i].className.indexOf('animate')) {
30
            elem[i].className = elem[i].className + ' animate';
31
          }
32
        }
33
      };
34
    
35
      document.getElementById('reset').onclick = function(e) {
36
        e.preventDefault();
37
        var newone;
38
        var elem = document.getElementsByClassName('stopwatch');
39
        for (var i = 0; i < elem.length; i++) {
40
          newone = elem[i].cloneNode(true);
41
          elem[i].parentNode.replaceChild(newone, elem[i]);
42
        }
43
      };
44
    
45
      setTime();
46
 
47
 
 

CSS Patek Philippe 5170-R

CSSDeck G+