.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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.