.wrapper
  .shadow
  .watch
    .loop-end.band
    .face
      .top-attatch.attatch
      .bottom-attatch.attatch
      .bevel
        .screen
          .center
            .time.
              4:24
            .date.
              WED, JUL 15
    .top-band.band
      .stitches
    .bottom-band.band
      .stitches
View Compiled
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
$black: black;
$brown: #953302;
$white: rgb(200, 200, 200);
$screen: rgb(25, 25, 25);
$font: $white;

*,
*:before,
*:after {
  box-sizing: border-box;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  background: #3498DB;
  overflow: hidden;
  position: relative;
}

.watch {
  position: relative;
  margin: auto;
  
  animation: up-down 5s ease infinite;
}

.face {
  height: 175px;
  width: 150px;
  background: $black;
  display: flex;
  position: relative;
  border-radius: 10px;
  
  .attatch {
    position: absolute;
    width: 85%;
    height: 20px;
    background: rgb(25, 25, 25);
    left: 7.5%;
    border-radius: 100%;
    
    &:before {
      content: '';
      position: absolute;
      height: 25px;
      width: 25px;
      background: #3498DB;
      border-radius: 100%;
    }
    
    &:after {
      content: '';
      position: absolute;
      height: 25px;
      width: 25px;
      background: #3498DB;
      border-radius: 100%;
    }
  }
  
  .top-attatch {
    top: -15px;
    background: rgb(35, 35, 35);
    
    &:before {
      top: -10px;
      left: -10px;
    }
    
    &:after {
      top: -10px;
      right: -10px;
    }
  }
  
  .bottom-attatch {
    bottom: -15px;
    
    &:before {
      bottom: -10px;
      left: -10px;
    }
    
    &:after {
      bottom: -10px;
      right: -10px;
    }
  }
  
  .bevel {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    background: $black;
    border-radius: 10px;
    border: 3px solid rgb(25, 25, 25);
  }
  
  .screen {
    height: 75%;
    width: 85%;
    background: $screen;
    margin: auto;
    display: flex;
    
    .center {
      margin: auto;
    }
    
    .time,
    .date {
      color: $font;
      text-transform: uppercase;
      font-family: Roboto, Helvetica, Arial, 'sans-serif';
    }
    
    .time {
      font-size: 38px;
    }
    
    .date {
      font-size: 10px;
      font-weight: 300;
    }
  }
}

.band {
  width: 60%;
  height: 10px;
  background: $brown;
  position: absolute;
  border-radius: 1px;
  
  .stitches {
    width: 90%;
    outline: 2px dashed $white;
    height: 0;
    position: absolute;
    left: 5%;
  }
  
  &.top-band {
    top: -20px;
    left: 20%;
  }
  
  &.bottom-band {
    bottom: -20px;
    left: 20%;
    
    .stitches {
      bottom: 0;
    }
  }
}

.loop-end {
  top: -20px;
  left: 20%;
  height: 50px;
  border-radius: 200%;
  transform: rotate(90deg);
  background: darken($brown, 5%);
}

.shadow {
  height: 150px;
  width: 150px;
  position: absolute;
  bottom: 20%;
  background: #2980B9;
  border-radius: 100%;
  left: 50%;
  transform: translateX(-50%) rotateX(80deg);
  filter: blur(5px);
  transform-origin: center center;
  
  animation: grow 5s ease infinite;
}

@keyframes up-down {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes grow {
  0% {
    transform: scale(1) translateX(-50%) rotateX(80deg);
  }
  50% {
    transform: scale(1.1) translateX(-50%) rotateX(80deg);
  }
  100% {
    transform: scale(1) translateX(-50%) rotateX(80deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.