<div class="watch">
  <div class="band">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
  <div class="goldring">
    <div class="time">
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
      <div class="points"></div>
    </div>
    <div class="inner">
      <div class="handle"></div>
      <div class="handle_short"></div>
      <div class="handle_thin"></div>
      <div class="center">
      </div>

    </div>
    <div class="knob"></div>
  </div>
</div>
$t: transparent;
$bk: #fff;

@mixin for-phone-only {
  @media (max-width: 599px) {
    @content;
  }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) {
    @content;
  }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) {
    @content;
  }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) {
    @content;
  }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) {
    @content;
  }
}

@mixin on-circle($item-count, $circle-size, $item-size) {  
  position: relative;
  width:  $circle-size;
  height: $circle-size;
  border-radius: 50%;
  padding: 0; 
  list-style: none;
  
  > * {
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    margin: -($item-size / 2);
    width:  $item-size;
    height: $item-size;
  
    $angle: (360 / $item-count);
    $rot: 0;
 
    @for $i from 1 through $item-count {
      &:nth-of-type(#{$i}) {
        transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);
      }
 
      $rot: $rot + $angle;
    }
  }
}


body{
  font-size: 10px;
  // background-image: url("https://assets.codepen.io/2970881/GOLD-BLACK-SUNRAY-MENS-ACCESSORIES-ADIDAS-WATCHES-Z08-1604-00GDBKS_1.jpg"); 
  background-size: 500px;
  background-position: 51% -6%;
  // background-repeat: no-repeat;
   @include for-phone-only {
    font-size: 6px;
     background: #fff;
  }   
  .watch{
    width: 40em;
    height: 69em;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .band{
      .top{
        width: 26em;
        height: 5.93em;
        position: absolute;
        background:
$t        
          ;
        top: 27%;
        left: 18%;
        background-repeat: no-repeat;
        &:after{
          content: '';
          position: absolute;
          top: -10em;
          left: 50%;
          transform: translate(-50%,0);
        width: 18em;
        height: 15em;
          background: 
      linear-gradient(
        to bottom,
         rgba(#fff,.1) 48%, 
         $t 54%,  
    )
      50% 17.3% / 16.6em 15em,                
         linear-gradient(
         92deg,
         $bk 48%, 
         $t 54%,  
    )
      0% 0% / 1.7em 6.8em,            
         linear-gradient(
         -92deg,
         $bk 48%, 
         $t 54%,  
    )
      100% 0% / 1.7em 6.8em,
      linear-gradient(
         #333 48%, 
         #333 54%,  
    )
      50% 17.3% / 16.6em 15em,         
            ;
          background-repeat: no-repeat;
        }
        &:before{
        width: 26em;
        height: 5.93em;          
          content:'';
          background:         
         linear-gradient(
         -97deg,
         $bk 50%, 
         rgba(#333,.4) 52%,
         $t 53%,  
    )
      100% 17.3% / 4.6em 100%,               
       linear-gradient(
         97deg,
         $bk 50%,
         rgba(#333,.4) 52%,
         $t 53%,  
    )
      0% 17.3% / 4.6em 100%,
       linear-gradient(
         to right,
        rgba( #fff,.2),
         #EFD5B2, 
         rgba( #fff,.2),
    )
      0% 17.3% / 100% 100%,             
       linear-gradient(
         to bottom,
         #D2B394,
         #C7A582, 
    )
      0% 17.3% / 100% 100%,            
          rgba(#EDD3B0,1);
          position: absolute;
          top:-3em;
          background-repeat: no-repeat;
        }
      }
      .bottom{
        width: 26em;
        height: 8.3em;
        position: absolute;
        background:
red;        
          ;
        top: 54%;
        left: 18%;
        background-repeat: no-repeat;        &:after{
          content: '';
          position: absolute;
          top: 10em;
          left: 50%;
          transform: translate(-50%,0);
        width: 18em;
        height: 25em;
          background: 
    linear-gradient(
         -94deg,
         $t 48%, 
         $bk 54%,  
    )
      0% 100% / 1.7em 18em,
         linear-gradient(
         94deg,
         $t 48%, 
         $bk 54%,  
    )
      100% 100% / 1.7em 18em,
      linear-gradient(
        to bottom,
         rgba(#000,.2) 9%,
        rgba(#fff,.05) 12%, 
        $t,$t
    ) 50% 100% /100% 85%,                
      linear-gradient(
        to bottom,
         rgba(#000,.05) 9%,
        rgba(#808080,.1) 13%,
        rgba(#808080,.1) 60%,
         #000 ,  
    ) 50% 100% /100% 85%,            
      linear-gradient(
         #333 48%, 
         #333 54%,  
    ) 50% 100% /100% 85%,
// back part            
      linear-gradient(
        to right,
         rgba(#333,.2), 
        $t,$t,$t,
         rgba(#333,.2) ,  
    )
      50% 12% /14em 5em,              
      linear-gradient(
        to right,
         rgba(#8A6D5C,1), 
         #8A6D5C ,  
    )
      50% 12% /14em 5em,               
      linear-gradient(
        to bottom,
         rgba(#fff,1) 50%, 
         $t 51%,  
    )
      50% 12% / 16.6em 10em,         
            ;
          background-repeat: no-repeat;
        }
        &:before{
        width: 26em;
        height: 9.5em; 
          position: absolute;
          top:8em;
          content:'';
          background:         
         linear-gradient(
         97deg,
         $t 50%, 
         rgba(#333,.4) 52%,
         $bk 53%,  
    )
      100% 17.3% / 4.6em 100%,               
       linear-gradient(
         -97deg,
         $t 50%,
         rgba(#333,.4) 52%,
         $bk 53%,  
    )
      0% 17.3% / 4.6em 100%,
       linear-gradient(
         to right,
        rgba( #fff,.2),
         #EFD5B2, 
         rgba( #fff,.2),
    )
      0% 17.3% / 100% 100%,             
       linear-gradient(
         to bottom,
         #D2B394,
         #C7A582, 
    )
      0% 17.3% / 100% 100%,            
          rgba(#EDD3B0,1);
          background-repeat: no-repeat;                    

        }        
      }
    }
  }  
}
.goldring {
  z-index: 3;
  width: 35em;
  height: 35em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:   
        // #A47851
          linear-gradient(to bottom, 
          rgba(#A47851,.3), rgba(#AE8760,.7)),      
          linear-gradient(to bottom, 
          rgba(#fff,.3), rgba(#AE8760,.3)),    
          linear-gradient(to bottom, 
          rgba(#D0AA85,.4), rgba(#AE8760,.3)),
          linear-gradient(to bottom, 
          #ECCCA5, #ECCCA5),    
    ;

    &:before{
      content: '';
      border-radius: 50%;
  width: 32.5em;
  height: 32.5em;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
     background: 
    radial-gradient(
        circle at 70% 100% ,
        rgba(#fff, .04),   
       rgba(#131419, .2)
      ) 50% 50% / 100% 100%,        
    radial-gradient(      
        circle at 50% 50% ,
        rgba(#2A2C34, .4) 50%,   
       rgba(#000, .4) 70%,  
      $t
      ) 50% 50% / 100% 100%,       
    radial-gradient(      
        circle at 50% 50% ,
        rgba(#000, 1),   
       rgba(#28292F, 1),
      $t
      ) 50% 50% / 100% 100%, 
    radial-gradient(
        circle at 50% 50% ,
        rgba(#191C23, 1),   
       rgba(#191C23, 1),
      $t
      ) 50% 50% / 100% 100%,        
    ;
      position:absolute;
      background-repeat: no-repeat;
      }  
  &:after{
       content: '';
      width:1.4em;
      height: 5em;
      left: 102%;
      top: 51.4%;
      transform: translate(-50%,-50%);
      position:absolute;
      background-repeat: no-repeat;
  }
  .time{
    width: 32.5em;
    height: 32.5em;
    border-radius: 50%;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50% ,-50%);
      @include on-circle($item-count: 12, $circle-size: 32.5em, $item-size: .5em); 
    .points{
      width: .5em;
      height: .3em;
      border-radius: 50%;
      background: #DCC9B1;
      display: block;
    }
  }
  .time_lg{
    width: 30em;
    height: 30em;
    border-radius: 50%;
    position: absolute;
    top:-43%;
    left: 50%;

    transform: translate(-50% ,-50%);
   @include on-circle($item-count: 12, $circle-size: 28em, $item-size: 2em);
  }
  .inner{
   border: .3px solid #000;
   content: '';
    border-radius: 50%;
  width: 25em;
  height: 25em; 
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
     background:      
    // #322F2D
    radial-gradient(
        circle at 50% 90% ,
        rgba(#000, .5),   
       rgba(red, 0),
      $t
      ) 50% 50% / 100% 100%,        
    -webkit-radial-gradient(
    50% 50%,
    circle,
    rgba(darkgray,.1),
    rgba(#000,.1) 51%,
  )  50% 50% / 100% 100%, 
    radial-gradient(
        circle at 15% 0% ,
        rgba(#fff, .1),   
       rgba(#131419, 1)
      ) 50% 50% / 100% 100%,      
    radial-gradient(
        circle at 70% 0% ,
        rgba(#fff, .06),   
       rgba(#131419, 1)
      ) 50% 50% / 100% 100%,    
    radial-gradient(
        circle at 75% 0% ,
        rgba(#24252D, 1),   
       rgba(#131419, 1),
      $t
      ) 50% 50% / 100% 100%,
    ;
      position:absolute;
      background-repeat: no-repeat;
    .handle{
      animation: anim 8s infinite;
      width: .8em;
      height: 12em;
      position: absolute;
      top: 7em;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 15px;
      transform-origin: bottom;
      
      background: 
        
    linear-gradient(
        to right,
         rgba(#333,1), 
         rgba(#333,1) ,  
    )
      50% 100% /62% 60%,   
        
        
       rgba( #E3C7AA,1);
      box-shadow:         2px 4px 1px 2px #000;
      background-repeat: no-repeat;   
    }
    .center{
      width: 1.5em;
      height: 1.5em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      border-radius: 50%;
      background:   
        radial-gradient(
        circle at 50% ,
        rgba(#333, 1),   
       rgba(#333, 1)
      ) 50% 50% / 12% 12%,         
        radial-gradient(
        circle at 50% ,
        rgba(#D8B798, 1),   
       rgba(#D0A788, 1)
      ) 50% 50% / 50% 50%,        
        radial-gradient(
        circle at 50% ,
        rgba(#D8B798, 1),   
       rgba(#A98259, 1)
      ) 50% 50% / 70% 70%,      
        radial-gradient(
        circle at 50% ,
        rgba(#D0A788, 1),   
       rgba(#D0A788, 1)
      ) 50% 50% / 100% 100%, ;
      background-repeat: no-repeat;      
    }
    .handle_short{
      width: .8em;
      height: 8em;
      position: absolute;
      top: 66%;
      left: 50%;
      transform: translate(-50%,-50%) rotate(110deg);
      transform-origin: top;
      border-radius: 15px;
      background:     
      linear-gradient(
        to bottom,
         rgba(#333,1), 
         rgba(#333,1) ,  
    )
      50% 0% /.4em 90%,  
        
        
       rgba( #E3C7AA,1)
        ;
      box-shadow:         1px 1px 1px 2px rgba(#000,.6);      
      background-repeat: no-repeat;      
    }
    .handle_thin{
      width: .2em;
      height: 14em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform:  rotate(20deg);
      transform-origin: top;
      border-radius: 15px;
      background:     
      linear-gradient(
        to bottom,
         rgba(#fff,1), 
         rgba(#fff,1) ,  
    )
      50% 100% /.4em 20%,  
       rgba( #E3C7AA,1)
        ;
      box-shadow:         1px 1px 1px 2px rgba(#000,.6);      
      background-repeat: no-repeat;      
    }    
  }

  background-repeat: no-repeat;
}

.knob{
      top: 43.8%;
    left: 96.5%;
      width: 1.5em;
      height:5em;
      background:         
        linear-gradient(to bottom,
          rgba(#333,.4) 3%, #E6CBA0 6%,
          rgba(#FCF0DE,.9) 40%,
          #654429,rgba(#654429,.4), 
          rgba(#E6C499,.7) 50%,
          #D9AB78 60%,#D9AB78 63%,
          #E6C499, #D3A271, #977F66, rgba(#333,.3)
        ), 
        rgba(#FDF0E0,1);
      position: absolute;
      left: 100%;
      background-repeat: no-repeat;    
    &:before{
      content: '';
    width:2em;
    height: 5em;
      top: 0;
      left: -16%;
    background:     
   radial-gradient(50% 200% at 0% 50%, #C6A380 35%, #BE926F 50%, rgba($t, 0) 52%) 
   23.4% 18% / 5em 5em,   
    ;
    position:absolute;
    background-repeat: no-repeat;    
    }
  }
@keyframes anim {

  to {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.