<div class="hero">
<div class="watch-case-frame">
<div class="watch-strap-top-edge"></div>
<div class="watch-strap-bottom top-strap">
<div class="strap-stich-top-l">
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
</div>
<div class="strap-stich-top-r">
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
</div>
<div class="clear"></div>
</div>
<div class="watch-top-lugs">
<div class="watch-left-lug">
<div class="watch-left-lug-in"></div>
</div>
<div class="watch-right-lug">
<div class="watch-right-lug-in"></div>
</div>
<div class="clear"></div>
</div>
<div class="dial">
<div class="dial-edge">
<div class="dial-in">
<div class="dial-center">
<div class="watch-numerals-top">
<div class="watch-numerals-eleven">11</div>
<div class="watch-numerals-twelve">12</div>
<div class="watch-numerals-one">1</div>
<div class="clear"></div>
</div>
<div class="watch-numerals-mid">
<div class="watch-numerals-ten">10 </div>
<div class="watch-numerals-two">2</div>
<div class="clear"></div>
</div>
<div class="watch-case-brand">
Patek Philippe
</div>
<div class="watch-case-city">
Geneve
</div>
<div class="time">
<div class="hr">
<div class="hr-needle">
<div class="hr-t"></div>
<div class="hr-disk"></div>
<div class="hr-shadow"></div>
</div>
</div>
<div class="min">
<div class="min-needle">
<div class="min-t"></div>
<div class="min-disk"></div>
</div>
</div>
<div class="sec">
<div class="sec-needle">
<div class="sec-t"></div>
<div class="sec-m"></div>
<div class="sec-disk"></div>
<div class="sec-b"></div>
</div>
</div>
</div>
<div class="watch-chronos">
<div class="watch-chronos-hands">
<div class="chrono-left-in">
<div class="watch-chrono-hand-left stopwatch">
<div class="watch-chrono-hand">
<div class="chrono-top-hand-top"></div>
<div class="chrono-top-hand-btm"></div>
</div>
<div class="watch-chrono-disk"></div>
<div class="watch-chrono-hand-btm">
<div class="chrono-btm-hand-top"></div>
<div class="chrono-btm-hand-btm"></div>
</div>
</div>
</div>
<div class="chrono-right-in">
<div class="watch-chrono-hand-right stopwatch">
<div class="watch-chrono-hand">
<div class="chrono-top-hand-top"></div>
<div class="chrono-top-hand-btm"></div>
</div>
<div class="watch-chrono-disk"></div>
<div class="watch-chrono-hand-btm">
<div class="chrono-btm-hand-top"></div>
<div class="chrono-btm-hand-btm"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div id="ch-l" class="chronos-l">
<div class="chrono-l-t">
<span class="w0">50</span><span class="w1"> </span><span class="w2">60</span><span class="w3"> </span><span class="w4">10</span>
</div>
<div class="chrono-l-b">
<span class="w0">40</span><span class="w1"> </span><span class="w2">30</span><span class="w3"> </span><span class="w4">20</span>
</div>
</div>
<div id="ch-r" class="chronos-r">
<div class="chrono-l-t">
<span class="w0">25</span><span class="w1"> </span><span class="w2">30</span><span class="w3"> </span><span class="w4">5</span>
</div>
<div class="chrono-l-b">
<span class="w0">20</span><span class="w1"> </span><span class="w2">15</span><span class="w3"> </span><span class="w4">10</span>
</div>
</div>
</div>
<div class="numerals-btm">
<div class="numerals-btm-top">
<div class="watch-numerals-seven">7</div>
<div class="watch-numerals-five">5</div>
</div>
<div class="watch-numerals-six">6</div>
</div>
<div class="swiss-made">Swiss Made</div>
</div>
</div>
</div>
</div>
<div class="watch-btm-lugs">
<div class="watch-left-lug-ft">
<div class="watch-left-lug-ft-in"></div>
</div>
<div class="watch-right-lug-ft">
<div class="watch-right-lug-ft-in"></div>
</div>
<div class="clear"></div>
</div>
<div class="watch-strap-bottom">
<div class="strap-stich-btm-l">
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
<div class="stich-l"></div>
</div>
<div class="strap-stich-btm-r">
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
<div class="stich-r"></div>
</div>
<div class="clear"></div>
</div>
<div class="watch-strap-btm-edge"></div>
<div class="side-btns">
<a href="#" id="start-stop" class="chrono-top-btn" ></a>
<div class="main-btn">
<div class="main-btn-ridge"></div>
<div class="main-btn-ridge"></div>
<div class="main-btn-ridge"></div>
<div class="main-btn-ridge"></div>
<div class="main-btn-ridge"></div>
<div class="btn-crest"></div>
</div>
<a href="#" id="reset" class="chrono-btm-btn"></a>
</div>
<div class="case-shine"></div>
<div class="case-reflect"></div>
</div>
</div>
<div class="watch-shadow"></div>
<div class="watch-info">
<h1>Patek Philippe</h1>
<div class="reference">5170-<span class="variation">R</span> <span class="type">- Complications</span></div>
<div class="winding">Manual Winding</div>
<div class="validation">Pure {Valid} <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fvuild.com%2F5170r%2F">HTML</a> & <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>
<div class="watch-desc">
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.
<div class="visit"><a href="https://vuild.com/5170r-parts/">See Pieces</a></div>
<div class="visit"><a href="https://www.patek.com/en/collection/complications">Visit Patek</a></div>
</div>
</div>
/* Page styling/ reset */
body{text-align:center;padding:0;margin:0}
.hero{background:linear-gradient(#bf9056 0%, #d9b589 55%, #ebd8c0 69%, #e3c5a0 100%) #e3c5a0;padding:40px 0 60px;border-bottom:1px solid #bf9056}
h1 {text-transform:uppercase;margin:0 0 5px 0;color:#463527;font-weight:normal;font-size:1.6em}
.clear{clear:both}
.watch-desc {margin-bottom:90px;font-size:.8em}
.winding {text-transform:uppercase;font-size:.85em;letter-spacing:1px}
.type {text-transform:uppercase;letter-spacing:1px;margin-bottom:20px}
.reference {color:#ab947d}
.validation {color:#BADA55;margin-bottom:30px;font-size:.8em}
.validation a {color:#BADA55;text-decoration:underline}
.validation a:hover {color:#222;transition:all .5s ease-in-out}
.watch-info {
margin:100px auto 50px;
max-width:300px;
font-family:sans-serif;
color:#463527;
line-height:1.5em
}
.visit a {
display:block;
text-transform:uppercase;
letter-spacing:2px;
margin:20px;
color:#ab947d;
text-decoration:none;
border:1px solid #ab947d;
padding:10px
}
.visit a:hover {color:#BADA55;filter:invert(40%)}
/* Case */
.watch-case-frame {margin:0 auto;width:290px}
.watch-top-lugs{
width:240px;
margin:0 auto -120px;
clear:both;
position:relative;
z-index:3
}
.watch-left-lug{
float:left;
width:50px;
height:100px;
margin-top:-20px;
border-top-left-radius:90%;
background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 42%, #feebd1 100%) #e3c5a0;
-webkit-clip-path:polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%);
clip-path:polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%)
}
.watch-left-lug-in{
float:left;
width:50px;
height:100px;
margin-top:-10px;
background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 32%, #feebd1 100%) #e3c5a0;
-webkit-clip-path:polygon(0% 90%, 60% 30%, 100% 100%, 0% 100%);
clip-path:polygon(0% 90%, 60% 30%, 100% 100%, 0% 100%);
transform:rotate(-80deg)
}
.watch-right-lug{
float:right;
width:50px;
height:100px;
margin-top:-20px;
border-top-right-radius:90%;
background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 38%, #feebd1 100%) #e3c5a0;
-webkit-clip-path:polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%);
clip-path:polygon(0% 0%, 30% 0%, 100% 100%, 0% 100%)
}
.watch-right-lug-in{
float:right;
width:50px;
height:100px;
margin-top:-10px;
background:linear-gradient(#222 0%, #a4643d 4%, #e5a978 38%, #feebd1 100%) #e3c5a0;
-webkit-clip-path:polygon(0% 90%, 30% 30%, 100% 100%, 0% 100%);
clip-path:polygon(0% 90%, 30% 30%, 100% 100%, 0% 100%);
transform:rotate(90deg)
}
.watch-btm-lugs{ width:240px;position:relative;margin:-62px auto -40px;z-index:3}
.watch-left-lug-ft, .watch-right-lug-ft{width:50px;height:100px;border-bottom-right-radius:90%}
.watch-left-lug-ft{
float:left;
background:linear-gradient(#feebd1 0%, #e5a978 20%, #e5a978 30%, #a4643d 94%, #222 100%) #e3c5a0;
-webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
transform:scaleX(-1)
}
.watch-right-lug-ft{
background:linear-gradient(#feebd1 0%, #e5a978 40%, #a4643d 94%, #222 100%) #e3c5a0;
float:right;
width:50px;
height:100px;
border-bottom-right-radius:90%;
-webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%)
}
.watch-right-lug-ft-in{
background:linear-gradient(#feebd1 0%, #e5a978 40%, #dab16c 72%, #d6b47f 100%) #e3c5a0;
float:right;
width:50px;
height:110px;
-webkit-clip-path:polygon(0% 0%, 70% 0%, 60% 55%, 0% 100%);
clip-path:polygon(0% 0%, 70% 0%, 50% 75%, 0% 100%);
transform:rotate(40deg)
}
.watch-left-lug-ft-in{
background:linear-gradient(#feebd1 0%, #e5a978 40%, #dab16c 72%, #d6b47f 100%) #e3c5a0;
float:right;
width:50px;
height:110px;
-webkit-clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
clip-path:polygon(0% 0%, 100% 0%, 30% 100%, 0% 100%);
transform:rotate(40deg)
}
/* dial */
@keyframes clockwise {100% {transform:rotate(360deg)}}
.dial {
margin:55px auto 0;
width:230px;
height:230px;
position:relative;
border-radius:50%;
z-index:4;
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
}
.dial-edge{width:228px;height:228px; border-radius:50%}
.dial-in{
border-radius:50%;
width:228px;
height:228px;
border:1px solid #fff;
background:
linear-gradient(66deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(72deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(78deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(84deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(90deg, transparent 49%, white 50%, transparent 50%),
linear-gradient(96deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(102deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(108deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(114deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(120deg, transparent 49%, white 50%, transparent 50%),
linear-gradient(126deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(132deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(138deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(144deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(150deg, transparent 49%, white 50%, transparent 50%),
linear-gradient(156deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(162deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(168deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(174deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(180deg, transparent 49%, white 50%, transparent 50%),
linear-gradient(186deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(192deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(198deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(204deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(210deg, transparent 49%, white 50%, transparent 50%),
linear-gradient(216deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(222deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(228deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(234deg, transparent 49.5%, white 50%, transparent 50%),
linear-gradient(240deg, transparent 49%, white 50%, transparent 50%),
#222;
z-index:4
}
.dial-center{
width:208px;
height:208px;
margin-left:9px;
margin-top:9px;
border-radius:50%;
border:1px solid #fff;
background:#222;
background:linear-gradient(30deg, #000 0%, #191919 28%, #333 54%, #000 100%) #141516
}
.case-shine {
position:relative;
height:240px;
width:250px;
margin-top:-415px;
margin-bottom:-190px;
margin-left:auto;
margin-right:auto;
border-radius:50%;
transform:rotate(160deg);
border-top:10px solid #fff;
border-bottom:10px solid #fff;
opacity:.8;
z-index:20
}
.case-reflect {
position:relative;
z-index:21;
width:240px;
height:240px;
margin:-260px auto 150px;
border-radius:50%;
background:none;
opacity:.3;
border-top:10px solid orange;
border-bottom:10px solid orange;
box-shadow: -2px -3px 3px rgba(255,255,255,1)
}
/* Hands */
.time {
width:220px;
height:220px;
position:relative;
z-index:10;
margin:-91px 0 0 -6px
}
.sec-needle {
width:220px;
height:220px;
width:14px;
margin:-211px auto;
animation:clockwise 60s linear infinite;
}
.sec-t {
width:2px;
height:120px;
margin:0 auto;
background:linear-gradient(to top, #e3c5a0 0%, #d59442 100%) #e3c5a0
}
.sec-m {
width:10px;
height:70px;
margin:-53px auto 0;
-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
background:linear-gradient(to top,#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #d59442
}
.sec-disk {
width:14px;
height:14px;
margin:-34px auto 0;
border-radius:50%;
position:relative;
background:radial-gradient(#e3c5a0 0%, #a4643d 4%, #e3c5a0 30%, #d59442 30%, #d59442 50%, #e3c5a0 100%) #d59442
}
.sec-b {
width:10px;
height:6px;
margin:20px auto 0;
background:linear-gradient(#d59442 0%, #e3c5a0 50%, #e3c5a0 100%) #d59442;
transform:rotate(-180deg);
-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
}
.min-needle {
width:201px;
height:201px;
position:relative;
z-index:10;
width:30px;
margin:-224px auto 0;
animation:clockwise 3600s linear infinite
}
.min-t{
width:10px;
height:106px;
margin:0 10px;
position:relative;
z-index:10;
-webkit-clip-path:polygon(50% 100%,
30% 75%, 25% 60%,40% 25%, 50% 0%,60% 25%,
75% 60%,70% 75%);
clip-path:polygon(50% 100%,
30% 75%, 25% 60%,40% 25%, 50% 0%,60% 25%,
75% 60%,70% 75%);
background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0
}
.min-disk {
width:2px;
height:2px;
background:red;
margin:-12px auto 0;
border-radius:50%;
position:relative;
border:6px solid #e3c5a0
}
.hr-needle {
width:40px;
height:180px;
width:30px;
position: relative;
z-index:1;
margin: 34px auto;
animation:clockwise 43200s linear infinite
}
.hr-t {
width:14px;
height:94px;
margin:0 0 0 8px;
background:linear-gradient(to left,#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
-webkit-clip-path:polygon(50% 100%, 30% 75%, 25% 60%,40% 25%, 50% 8%,60% 25%, 75% 60%,70% 75%);
clip-path:polygon(50% 100%, 30% 75%, 25% 60%,40% 25%, 50% 8%,60% 25%, 75% 60%,70% 75%)
}
.hr-disk {
width:3px;
height:3px;
margin:-13px auto 0;
border-radius:50%;
position:relative;
border:8px solid #d59442;
position: relative;
z-index:3
}
.hr-shadow {
width:20px;
height:20px;
margin:-19px auto 0;
border-radius:50%;
background:#111;
opacity:.7;
filter:blur(7px);
position: relative;
z-index:1
}
/* Brand info */
.watch-case-city, .watch-case-brand, .swiss-made {text-transform:uppercase;font-family:sans-serif;color:#fff}
.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)}
.watch-case-city {font-size:5px;letter-spacing:1px;padding-bottom:2px}
.swiss-made {font-size:2px;margin-top:26px}
/* Numerals */
.watch-numerals-top, .watch-numerals-mid, .numerals-btm {
font-style:italic;
position:relative;
font-weight:bold;
color:#eac18a;
text-shadow:0 2px 2px rgba(0,0,0,.2);
font-size:22px;
z-index:9
}
.watch-numerals-top {width:126px;margin:auto;padding-top:24px;height:24px}
.watch-numerals-mid {width:198px;margin:0 auto -33px;height:28px}
.numerals-btm{width:100px;height:27px;margin:0 auto;}
.watch-numerals-eleven {width:14px;float:left;margin-top:-6px;margin-left:6px}
.watch-numerals-twelve {width:26px;float:left;margin-top:-20px;margin-left:30px}
.watch-numerals-one {width:14px;float:right;margin-top:-6px;margin-right:12px}
.watch-numerals-ten {width:14px;float:left;margin-left:-13px}
.watch-numerals-two {width:19px;float:right;margin-right:-13px}
.watch-numerals-seven {width:14px}
.watch-numerals-six {width:14px;margin: -10px auto 0}
.watch-numerals-five {width:14px;margin-left:89px;margin-top:-25px}
/* Chronographs */
.watch-chronos {width:190px;margin:-146px auto 78px;position:relative;z-index:2}
.chronos-l{float:left}
.chronos-r{float:right}
.chrono-left-in {position:relative;z-index:9;margin-top:-3px;margin-left:-3px;float:left}
.chrono-right-in {float:right;position:relative;z-index:9;margin-top:-3px;margin-right:-3px}
.chrono-left-in, .chrono-right-in {width:70px;height:70px;margin-bottom:-74px;border:1px solid #fff;border-radius:50%}
.chrono-l-t {position: relative; display:block;margin-top:2px;margin-left:3px}
#ch-r .chrono-l-t, #ch-r .chrono-l-b {margin-left:3px}
.chrono-l-t>span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
.chrono-l-t span{font-size:10px;line-height:0.65; padding:0}
.chrono-l-t .w0 {transform: rotate(-1.15rad); width: 6px; height: 6px; left:9px; top: 16px}
.chrono-l-t .w1 {transform: rotate(-0.57rad); width: 3px; height: 6px; left:18px; top: 7px}
.chrono-l-t .w2 {transform: rotate(0rad); width: 6px; height: 6px; left:24px; top: 4px}
.chrono-l-t .w3 {transform: rotate(0.58rad); width: 3px; height: 6px; left:40px; top: 79px}
.chrono-l-t .w4 {transform: rotate(1.15rad); width: 6px; height: 6px; left:45px; top: 16px}
.chrono-l-b {position: relative; display: block;width:80px; height:80px;margin-top:2px;margin-left:2px}
.chrono-l-b >span[class^=w]:nth-of-type(n+0){display:block; position:absolute;transform-origin:50% 100%}
.chrono-l-b span{font-size:10px;line-height:0.65;padding:0px;}
.chrono-l-b .w0 { transform: rotate(7.38rad); width: 6px; height: 6px; left:2px; top: 37px}
.chrono-l-b .w1 {transform: rotate(6.9rad); width: 3px; height: 6px; left:12px; top: 47px}
.chrono-l-b .w2 {transform: rotate(6.42rad); width: 6px; height: 6px; left:23px; top: 51px}
.chrono-l-b .w3 {transform: rotate(5.93rad); width: 3px; height: 6px; left:38px; top: 50px}
.chrono-l-b .w4 {transform: rotate(5.45rad); width: 6px; height: 6px; left:47px; top: 43px}
#ch-l {position:relative; display:block; width:64px; height:64px;color:#fff;border:1px dashed #fff;border-radius:50%;
box-shadow:
inset 0 0 0 1px #fff,
inset 0 0 0 2px #0f0f0f,
inset 0 0 0 3px #3d3d3d,
inset 0 0 0 4px #0f0f0f,
inset 0 0 0 5px #3d3d3d,
inset 0 0 0 6px #0f0f0f,
inset 0 0 0 7px #3d3d3d,
inset 0 0 0 8px #0f0f0f,
inset 0 0 0 9px #3d3d3d,
inset 0 0 0 10px #0f0f0f,
inset 0 0 0 11px #3d3d3d,
inset 0 0 0 12px #0f0f0f,
inset 0 0 0 13px #3d3d3d,
inset 0 0 0 14px #0f0f0f,
inset 0 0 0 15px #3d3d3d,
inset 0 0 0 16px #0f0f0f,
inset 0 0 0 17px #3d3d3d,
inset 0 0 0 18px #0f0f0f,
inset 0 0 0 19px #3d3d3d,
inset 0 0 0 20px #0f0f0f,
inset 0 0 0 21px #3d3d3d,
inset 0 0 0 22px #0f0f0f,
inset 0 0 0 23px #3d3d3d,
inset 0 0 0 24px #0f0f0f,
inset 0 0 0 25px #3d3d3d,
inset 0 0 0 26px #0f0f0f,
inset 0 0 0 27px #3d3d3d,
inset 0 0 0 28px #0f0f0f,
inset 0 0 0 29px #3d3d3d,
inset 0 0 0 30px #0f0f0f,
inset 0 0 0 31px #3d3d3d,
inset 0 0 0 32px #0f0f0f,
inset 0 0 0 33px #3d3d3d,
inset 0 0 0 34px #0f0f0f
}
#ch-r {position:relative;display:block;width:64px;height:64px;color:#fff;border:1px dashed #fff;border-radius:50%;
box-shadow:
inset 0 0 0 1px #fff,
inset 0 0 0 2px #0f0f0f,
inset 0 0 0 3px #3d3d3d,
inset 0 0 0 4px #0f0f0f,
inset 0 0 0 5px #3d3d3d,
inset 0 0 0 6px #0f0f0f,
inset 0 0 0 7px #3d3d3d,
inset 0 0 0 8px #0f0f0f,
inset 0 0 0 9px #3d3d3d,
inset 0 0 0 10px #0f0f0f,
inset 0 0 0 11px #3d3d3d,
inset 0 0 0 12px #0f0f0f,
inset 0 0 0 13px #3d3d3d,
inset 0 0 0 14px #0f0f0f,
inset 0 0 0 15px #3d3d3d,
inset 0 0 0 16px #0f0f0f,
inset 0 0 0 17px #3d3d3d,
inset 0 0 0 18px #0f0f0f,
inset 0 0 0 19px #3d3d3d,
inset 0 0 0 20px #0f0f0f,
inset 0 0 0 21px #3d3d3d,
inset 0 0 0 22px #0f0f0f,
inset 0 0 0 23px #3d3d3d,
inset 0 0 0 24px #0f0f0f,
inset 0 0 0 25px #3d3d3d,
inset 0 0 0 26px #0f0f0f,
inset 0 0 0 27px #3d3d3d,
inset 0 0 0 28px #0f0f0f,
inset 0 0 0 29px #3d3d3d,
inset 0 0 0 30px #0f0f0f,
inset 0 0 0 31px #3d3d3d,
inset 0 0 0 32px #0f0f0f,
inset 0 0 0 33px #3d3d3d,
inset 0 0 0 34px #0f0f0f
}
.watch-chrono-disk {
width:6px;
height:6px;
margin-left:-1px;
border-radius:50%;
background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0
}
.watch-chrono-hand {
width:5px;
height:30px;
margin:auto;
position:relative
}
.watch-chrono-hand-left {
width:5px;
margin-top:1px;
margin-left:32px;
height:70px;
}
.watch-chrono-hand-right {
width:5px;
margin-top:2px;
margin-left:33px;
height:70px;
}
.watch-chrono-hand-left.animate {animation:clockwise 60s linear infinite}
.watch-chrono-hand-right.animate {animation:clockwise 1800s linear infinite}
.watch-chrono-hand-btm {margin:-10px auto 0;width:5px}
.chrono-btm-hand-top{
width:4px;
height:15px;
background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}
.chrono-btm-hand-btm{
width:4px;
height:4px;
transform:rotate(180deg);
background:linear-gradient(#e3c5a0 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
}
.chrono-top-hand-btm{
width:4px;
height:35px;
background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
transform:rotate(180deg)
}
.chrono-top-hand-top{
width:4px;
height:15px;
background:linear-gradient(#d59442 0%, #d59442 50%, #e3c5a0 100%) #e3c5a0;
-webkit-clip-path:polygon(50% 0%, 0% 100%, 100% 100%);
clip-path:polygon(50% 0%, 0% 100%, 100% 100%)
}
.side-btns{
width:50px;
height:200px;
float:right;
margin:-353px -10px -150px 0;
}
a#start-stop{
display:block;
width:40px;
height:12px;
margin-left:4px;
margin-bottom:29px;
position:relative;
z-index:4;
transform:rotate(66deg);
border-top:2px solid #a4643d;
border-top-left-radius:27%;
border-top-right-radius:27%;
background:#ebb88a;
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%);
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%);
box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset 2px 2px 2px rgba(255,255,255,.4)
}
a#reset{
width:40px;
height:12px;
margin-top:29px;
margin-left:2px;
position:relative;
z-index:3;
background:#ebb88a;
border-top:2px solid #a4643d;
border-top-left-radius:27%;
border-top-right-radius:27%;
transform:rotate(113deg);
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%);
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%);
box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset 2px 2px 2px rgba(255,255,255,.4)
}
#start-stop, #reset{display:block}
.main-btn{
width:30px;
height:43px;
padding-top:3px;
margin-left:13px;
position:relative;
background:#ebb88a;
border-right:2px solid #a4643d;
border-bottom:1px solid #a4643d;
border-radius:5px;
box-shadow:inset 10px -10px 10px rgba(0,0,0,.1);
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%);
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)
}
.main-btn-ridge{
height:3px;
margin:3px 1px;
border-radius:3px;
background:rgba(0,0,0,.2);
box-shadow:inset 1px 1px 1px rgba(0,0,0,.5)
}
.main-btn-ridge:nth-child(2n+0){
height:4px;
margin:4px 1px;
border-radius:5px;
background:rgba(0,0,0,.3);
box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)
}
.main-btn-ridge:nth-child(3n+0){
height:4px;
margin:4px 1px;
border-radius:5px;
background:rgba(0,0,0,.4);
box-shadow:inset 1px 1px 1px rgba(0,0,0,.3)
}
.btn-crest{
height:40px;
margin-top:-41px;
margin-right:-6px;
border-radius:30%;
background:#fff;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.3),inset 11px 11px 11px rgba(255,255,255,.3);
float:right;
width:4px;
border:1px solid #a4643d;
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%);
box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset 2px 2px 2px rgba(255,255,255,.4)
}
.btn-crest:after{
content:"";
float:right;
width:3px;
margin-top:2px;
margin-right:-3px;
height:35px;
border-radius:15px;
background:#ebb88a;
border-top:1px solid #a4643d;
border-bottom:1px solid #a4643d;
border-left:1px solid #ebb88a;
border-right:1px solid #a4643d;
box-shadow:inset 1px 1px 1px rgba(0,0,0,.3),inset 11px 11px 11px rgba(255,255,255,.3);
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%);
box-shadow:inset -10px -10px 10px rgba(161,100,61,.6), inset 2px 2px 2px rgba(255,255,255,.4)
}
/* Watch straps */
.watch-strap-bottom {
width:147px;
margin:15px auto 0;
position:relative;
border-radius:5px;
background:linear-gradient(to bottom, #000000 10%, #213140 20%, #141516 100%) #141516;
-webkit-clip-path:polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
clip-path:polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
z-index:2
}
.top-strap {transform:scaleY(-1);margin:auto}
.watch-strap-top-edge {
width:117px;
padding:10px 0;
margin:0 auto;
background:linear-gradient(to bottom, #000000 10%,#303135 60%,#141516 90%) #141516;
border-radius:20px 20px 0 0
}
.watch-strap-btm-edge {
width:117px;
padding:10px 0;
margin:0 auto 20px;
position:relative;
background:linear-gradient(to bottom, #141516 10%,#303135 40%,#000000 100%) #141516;
border-radius:0 0 20px 20px;
z-index:11
}
.watch-strap-top {
width:165px;
padding:60px 0;
margin:0 auto;
background:linear-gradient(to bottom, #141516 38%,#303135 90%,#000000 100%) #141516;
border-radius:5px;
-webkit-clip-path:polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
clip-path:polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%)
}
.strap-stich-top-l {
float:left;
width:4px;
height:80px;
margin:0 15px;
border-radius:5px;
transform:rotate(-8deg);
box-shadow:10px -10px 10px rgba(0,0,0,1)
}
.strap-stich-top-r {
float:right;
width:4px;
height:80px;
margin:0 15px;
border-radius:5px;
transform:rotate(8deg);
box-shadow:-10px -10px 10px rgba(0,0,0,1)
}
.strap-stich-btm-l {
float:left;
width:4px;
height:119px;
margin:0 15px;
border-radius:5px;
transform:rotate(-8deg);
box-shadow:10px -10px 10px rgba(0,0,0,1)
}
.strap-stich-btm-r {
float:right;
position:relative;
width:4px;
height:119px;
margin:0 15px;
border-radius:5px;
transform:rotate(8deg);
box-shadow:-10px -10px 10px rgba(0,0,0,1)
}
.stich-l, .stich-r{
background:#555;
width:2px;
height:7px;
margin:2px 0;
border-top:2px solid rgba(0,0,0,.5);
border-bottom:2px solid rgba(0,0,0,.5);
border-radius:50px;
opacity:.5
}
.stich-l {box-shadow:2px 3px 3px rgba(0,0,0,1), inset 2px 3px 3px rgba(0,0,0,.4)}
.stich-r {box-shadow:-2px -3px 3px rgba(0,0,0,1), inset 2px 3px 3px rgba(0,0,0,.4)}
.stich-r:nth-child(0n+1){transform: rotate(5deg)}
.stich-r:nth-child(0n+2){transform: rotate(1deg)}
.stich-r:nth-child(0n+3){transform: rotate(-1deg)}
.stich-r:nth-child(0n+4){transform: rotate(-1deg)}
.stich-r:nth-child(0n+5){transform: rotate(-1deg)}
.stich-r:nth-child(0n+6){transform: rotate(1deg)}
.stich-r:nth-child(0n+7){transform: rotate(2deg)}
.stich-r:nth-child(0n+8){transform: rotate(1deg)}
.stich-l:nth-child(0n+1){transform: rotate(-5deg)}
.stich-l:nth-child(0n+2){transform: rotate(1deg)}
.stich-l:nth-child(0n+3){transform: rotate(-1deg)}
.stich-l:nth-child(0n+4){transform: rotate(-1deg)}
.stich-l:nth-child(0n+5){transform: rotate(-1deg)}
.stich-l:nth-child(0n+6){transform: rotate(1deg)}
.stich-l:nth-child(0n+7){transform: rotate(2deg)}
.stich-l:nth-child(0n+8){transform: rotate(1deg)}
/* Watch shadow */
.watch-shadow {margin:-120px auto 150px;padding:30px;width:70px;position:relative;background:rgba(167, 128, 56, .5);filter:blur(10px);z-index:1} // JS is used to get the current time (modified from https://codepen.io/kowlor/pen/bdRzML) and trigger chronograph animations.
function setTime() {
var d = new Date;
function ct(v) {
return v * 360 / 60;
};
function ctm(v) {
return v * 360 / 60 + 6 * ct(d.getSeconds()) / 360; // 1min = 6 deg
};
function cth(v) {
return v * 360 / 12 + 30 * ct(d.getMinutes()) / 360; // 1h = 30 deg
};
document.getElementsByClassName('sec')[0].style.transform = 'rotateZ(' + ct(d.getSeconds()) + 'deg)';
document.getElementsByClassName('min')[0].style.transform = 'rotateZ(' + ctm(d.getMinutes()) + 'deg)';
document.getElementsByClassName('hr')[0].style.transform = 'rotateZ(' + cth(d.getHours()) + 'deg)';
}
document.getElementById('start-stop').onclick = function(e) {
e.preventDefault();
var elem = document.getElementsByClassName('stopwatch');
var state = 'running' == elem[0].style.animationPlayState ? 'paused' : 'running';
for (var i = 0; i < elem.length; i++) {
elem[i].style.animationPlayState = state;
if (-1 == elem[i].className.indexOf('animate')) {
elem[i].className = elem[i].className + ' animate';
}
}
};
document.getElementById('reset').onclick = function(e) {
e.preventDefault();
var newone;
var elem = document.getElementsByClassName('stopwatch');
for (var i = 0; i < elem.length; i++) {
newone = elem[i].cloneNode(true);
elem[i].parentNode.replaceChild(newone, elem[i]);
}
};
setTime();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.