How to style multiple blocks of different colors in one single row and get what we call a color palette out of it?
In this tutorial I will show you how you can style multiple blocks of different colors and make a color palette using css property flexbox.
Fist we will start by creating a div container that will contain five divs with different colors.
This is how our html will look like
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
And this is the css code below
.container{
width:100%;
max-width:1000px;
height: 200px;
display: flex;
flex-direction:row;
justify-content:space-evenly;
}
.container > div{
width:calc(100%/5);
height:100%;
}
.container > div:nth-child(1){
Background:blue;
}
.container > div:nth-child(2){
Background:lightblue;
}
.container > div:nth-child(3){
Background:red;
}
.container > div:nth-child(4){
Background:lightred;
}
.container > div:nth-child(5){
Background:pink;
}
And that is how you create a css flexbox color palette guys :)
Top comments (0)