Цвет

by pharma_nsk

HTML

<body>
<div class="block">
<header>Цвет</header>
<div class="color">
<div class="option"><div class="beige"></div></div>
<div class="option"><div class="white"></div></div>
<div class="option"><div class="lb"></div></div>
<div class="option"><div class="yel"></div></div>
<div class="option"><div class="green"></div></div>
<div class="option"><div class="br"></div></div>
<div class="option"><div class="red"></div></div>
<div class="option"><div class="or"></div></div>
<div class="option"><div class="pink"></div></div>
<div class="option"><div class="grey"></div></div>
<div class="option"><div class="blue"></div></div>
<div class="option"><div class="lilac"></div></div>
<div class="option"><div class="black"></div></div>
</div>
</div>
</body>

CSS

body {background-color:white;}
.block {display:block; height:200px; width:275px; margin:30px auto; border:1px solid #E8E8E8; border-radius:5px; box-shadow: 2px 2px 5px 0px rgba(153,153,153,1); padding:5px;}
header {border-radius:5px; background-color:#AB70DB; color:white; padding:5px; font-size:24px; font-family:sans-serif; }
.color {padding:10px;}
.option {display:inline-block; padding:2px; margin:1px; border:3px solid white;}
.option div {display:block; height:33px; width:33px;  border-right:1px solid rgba(255,255,255,.3); border-bottom:1px solid rgba(255,255,255,.3); box-shadow: 1px 1px 0px 1px rgba(194,194,194,.5); cursor: pointer;}
.option:hover {border:3px solid #AB70DB;}
.beige {background-color: #E7E8D5;}
.lb {background-color: #A7CBE8;}
.yel {background-color: yellow;}
.green {background-color: green;}
.br {background-color: brown;}
.red {background-color: red;}
.or {background-color:orange;}
.pink {background-color: pink;}
.grey {background-color: grey;}
.blue {background-color: blue;}
.lilac {background-color: #EB7FDE;}
.black {background-color: black;}