WAC Colors

by Koubenec

HTML

<div id="container">
<div id="color1">Color 1</div>
<div id="color2">Color 2</div>
<div id="color3">Color 3</div>
<div id="color4">Color 4</div>
<div id="color5">Color 5</div>
<div id="color6">Color 6</div>
<div id="color7">Color 7</div>
<div id="color8">Color 8</div>
<div id="color9">Color 9</div>
<div id="color10">Color 10</div>
<div id="color11">Color 11</div>
<div id="color12">Color 12</div>
<div id="color13">Color 13</div>
<div id="color14">Color 14</div>
<div id="color15">Color 15</div>
<div id="color16">Color 16</div>
<div id="color17">Color 17</div>
<div id="color18">Color 18</div>
<div id="color19">Color 19</div>
<div id="color20">Color 20</div>
<div id="color21">Color 21</div>
<div id="color22">Color 22</div>
<div id="color23">Color 23</div>
<div id="color24">Color 24</div>
<div id="color25">Color 25</div>
<div id="color26">Color 26</div>
<div id="color27">Color 27</div>
<div id="color28">Color 28</div>
<div id="color29">Color 29</div>
<div id="color30">Color 30</div>
<div id="color31">Color 31</div>
<div id="color32">Color 32</div>
<div id="color33">Color 33</div>
<div id="color34">Color 34</div>
<div id="color35">Color 35</div>
<div id="color36">Color 36</div>
<div id="color37">Color 37</div>
<div id="color38">Color 38</div>
<div id="color39">Color 39</div>
<div id="color40">Color 40</div>
</div>

CSS

#container {
    width: 100%;
    display: block;
    text-align: center;
    overflow: hidden;
    padding: 2.5px;
}

#color1 {
    width: 150px;
    height: 150px;
    background-color: #3B4859;
    color: #3B4859;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color1:hover {
    background-color: #3B4859;
    color: #fff;
}

#color2 {
    width: 150px;
    height: 150px;
    background-color: #6F87A6;
    color: #6F87A6;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color2:hover {
    background-color: #6F87A6;
    color: #fff;
}

#color3 {
    width: 150px;
    height: 150px;
    background-color: #84A4BF;
    color: #84A4BF;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color3:hover {
    background-color: #84A4BF;
    color: #fff;
}

#color4 {
    width: 150px;
    height: 150px;
    background-color: #9CBCD9;
    color: #9CBCD9;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color4:hover {
    background-color: #9CBCD9;
    color: #000000;
}

#color5 {
    width: 150px;
    height: 150px;
    background-color: #F0F2F2;
    color: #F0F2F2;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color5:hover {
    background-color: #F0F2F2;
    color: #000000;
}

#color6 {
    width: 150px;
    height: 150px;
    background-color: #594438;
    color: #594438;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color6:hover {
    background-color: #594438;
    color: #fff;
}

#color7 {
    width: 150px;
    height: 150px;
    background-color: #8C7568;
    color: #8C7568;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color7:hover {
    background-color: #8C7568;
    color: #fff;
}

#color8 {
    width: 150px;
    height: 150px;
    background-color: #BFAEA8;
    color: #BFAEA8;
    margin: 2.5px 2.5px 2.5px 2.5px;
    float: left;
}

#color8:hover {
    background-color: #BFAEA8;
    color: #000;
}

#color9 {
    width: 150px;
    height: 150px;
    background-color: #400101;
    color:...