@rahmadsubakti
Posted
Congratulations on finishing this challenge.
In your code, i saw that your code contains three containers with the class name container1
container2
container3
. You can improve this by replacing that three class with the generic class container
(or whatever your name prefer) so you don't have to write it twice and three another class for background color. Here's how you do it:
.container {
width: 40%;
border-radius: 5px 0 0 5px;
display: flex;
flex-direction: column;
padding: 25px;
gap: 25px;
}
.bg-orange {
background-color: var(--Bright-orange);
}
.bg-dark-cyan {
background-color: var(--Dark-cyan);
}
.bg-very-dark-cyan {
background-color: var(--Very-dark-cyan);
}
Here's the example in the html file:
<div class="container bg-orange">
<!--Your children component-->
</div>
<div class="container bg-dark-cyan">
<!--Your children component-->
</div>
<div class="container bg-very-dark-cyan">
<!--Your children component-->
</div>
Sorry for my bad english and wording. Have fun coding :)
Marked as helpful
@TheTreeveloper
Posted
Wow, I really appreciate the feedback, Rahmad. I'm surely going to apply this in my next project now. Thank you so much!@rahmadsubakti