Color variations test

by agib

HTML

<div class="container" id="color-one">
	<div>dette er en tekst</div>
	<div>Okay. Disse farvekombinationer er da ikke så værst? Lilla, okay, okay.</div>
</div>
<div class="container" id="color-two">
	<div>også en tekst her</div>
	<div>Dette er skam uddybende tekst. Og endnu mere info her.</div>
</div>

CSS

.container { 
    width: 180px;
    height: 180px;
    margin: 20px;
    margin-right: 0;
    float: left;
    color: White;
    font-family: Georgia;
    font-size: 14px;  
}

.container > * { 
    padding: 10px;
    box-sizing: border-box;
    line-height: 24px; 
}
.container > div:first-child {
    text-transform: uppercase;
    font-family: Arial;
}

#color-one > div:first-child {
    height: 25%;
    background-color: #543895;
}

#color-one > div:last-child {
    height: 75%;
    background-color: #7353be;
}

#color-two > div:first-child {
    height: 25%;
    background-color: #868a42;
}

#color-two > div:last-child {
    height: 75%;
    background-color: #9CA14D;
}