* {
margin: 0;
padding: 0;
}
.main {
height: 600px;
width: 900px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -450px;
}
.top {
height: 275px;
width: 900px;
}
.empty {
height: 50px;
width: 900px;
}
.bottom {
height: 275px;
width: 900px;
}
.wrapper {
width: 25%;
height: 100%;
float: left;
}
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8 {
height: 200px;
width: 200px;
float: left;
position: relative;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
#div1 {
background: radial-gradient(circle, #FFF, #000);
background: -moz-radial-gradient(circle, #FFF, #000);
background: -o-radial-gradient(circle, #FFF, #000);
background: -webkit-radial-gradient(circle, #FFF, #000);
background: -ms-radial-gradient(circle, #FFF, #000);
}
#div4 {
background: radial-gradient(circle, #FFF 50%, #000 50%);
background: -moz-radial-gradient(circle, #FFF 50%, #000 50%);
background: -o-radial-gradient(circle, #FFF 50%, #000 50%);
background: -webkit-radial-gradient(circle, #FFF 50%, #000 50%);
background: -ms-radial-gradient(circle, #FFF 50%, #000 50%);
border-radius: 50%;
}
#div5 {
background: radial-gradient(right, circle, #FFF 60%, #000 40%);
background: -moz-radial-gradient(right, circle, #FFF 60%, #000 40%);
background: -o-radial-gradient(right, circle, #FFF 60%, #000 40%);
background: -webkit-radial-gradient(right, circle, #FFF 60%, #000 40%);
background: -ms-radial-gradient(right, circle, #FFF 60%, #000 40%);
border-radius: 50%;
}
#div6 {
background: radial-gradient(top, circle, #FFF 60%, #000 40%);
background: -moz-radial-gradient(top, circle, #FFF 60%, #000 40%);
background: -o-radial-gradient(top, circle, #FFF 60%, #000 40%);
background: -webkit-radial-gradient(top, circle, #FFF 60%, #000 40%);
background: -ms-radial-gradient(top, circle, #FFF 60%, #000 40%);
border-radius: 50%;
}
#div7 {
background: radial-gradient(bottom, circle, #FFF 60%, #000 40%);
background: -moz-radial-gradient(bottom, circle, #FFF 60%, #000 40%);
background: -o-radial-gradient(bottom, circle, #FFF 60%, #000 40%);
background: -webkit-radial-gradient(bottom, circle, #FFF 60%, #000 40%);
background: -ms-radial-gradient(bottom, circle, #FFF 60%, #000 40%);
border-radius: 50%;
}
#div8 {
background: radial-gradient(left, circle, #FFF 60%, #000 40%);
background: -moz-radial-gradient(left, circle, #FFF 60%, #000 40%);
background: -o-radial-gradient(left, circle, #FFF 60%, #000 40%);
background: -webkit-radial-gradient(left, circle, #FFF 60%, #000 40%);
background: -ms-radial-gradient(left, circle, #FFF 60%, #000 40%);
border-radius: 50%;
}
.letter {
text-align: center;
line-height: 200px;
color: #F00;
font-size: 68px;
font-weight: bold;
}