100Days css #1

				
					
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
	box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
	overflow: hidden;
  background: linear-gradient(to top right, #7054d4 20%, #aaf007 80%);
  color: #333;
	font-family: "Courier New", "Courier", sans-serif;;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.center {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.box{
	position: relative;
	width: 100px;
	height: 200px;
	margin: 120px 0 -60px 20px;
}
.one {
	position: absolute;
	top: 0;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}
.one-one {
	width: 20px;
	height: 40px;
	transform: rotate(0.14turn);
	z-index: 2;
	left: -16px;
}
.one-two {
	width: 24px;
	height: 100px;
	z-index: 8;
}

.zero {
	box-sizing: border-box;
	position: absolute;
	top: 0;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 24px solid #fff;
	box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.2);
}
.zero-one {
	z-index: 4;
	left: 70px;
}
.zero-two {
	right: 0;
	z-index: 6;
}
span {
	display: block;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;
}
.middle {
	font-size: 5.2em;
	line-height: 72px;
}
.last {
	font-size: 1.55em;
	line-height: 18px;
	letter-spacing: 0.01em;
}