2. feladat

Színek

by László Kovács

HTML

<div class="container">    
    <div class="square" id="Magenta"></div>
    <div class="square" id="White"></div>
    <div class="square" id="Yellow"></div>
    <div class="square" id="Orange"></div>
    <div class="square" id="Violet"></div>
    <div class="square" id="LightBlue"></div>
    <div class="square" id="DarkBlue"></div>
    <div class="square" id="Petroleum"></div>
    <div class="square" id="Green"></div>
    <div class="square" id="Black"></div>
    <div class="square" id="TelekomGray1"></div>
    <div class="square" id="TelekomGray2"></div>
    <div class="square" id="TelekomGray3"></div>
    <div class="square" id="TelekomGray4"></div>
    <div class="square" id="TelekomGray5"></div>
    <div class="square" id="TelekomGray6"></div>
    
</div>

CSS

.container {
    border: 1px solid black; 
    overflow: hidden;
}
     
.square {
    float: left;
    border: 1px solid black;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    margin: 5px;
}
.square:hover {border: 1px dashed black;}

#Magenta    { background: #E20074; }
#White  { background: #FFFFFF; }
#Yellow { background: #FDD167; }
#Orange { background: #EDA95A; }
#Violet { background: #9F4C97; }
#LightBlue { background: #64B9E4; }
#DarkBlue  { background: #427BAB; }
#Petroleum  { background: #408F9A; }
#Green  { background: #BABD5A; }
#Black  { background: #000000; }
#TelekomGray1  { background: #A4A4A4; }
#TelekomGray2  { background: #7C7C7C; }
#TelekomGray3  { background: #6C6C6C; } 
#TelekomGray4  { background: #EDEDED; }
#TelekomGray5  { background: #4B4B4B; }
#TelekomGray6  { background: #D0D0D0; }