Dashboard

hi dear , Your app look very nice but i have some remarks :

• For icons in the background of cards i advice you to use "background-Image : url()" in the div like this : element { background-color: hsl(195, 74%, 62%); background-image: url(./images/icon-play.svg); background-repeat: no-repeat; background-position: 152px 3px; } in your style.css so you wont have to worry about z-index and overflow hidden dont hesitate to play around with background position value.

• Dear you put to much of div dear !!!

My first thought when I seen your issue is to resolve it using the z-index. Basically, z-index controls which element appears on top when you have two or more competing elements. For example, you have the tab and the item container overlapping each other. All you have to do is give the item container a higher z-index and it will appear on top and give the illusion that the images are cropped off. But in order to use z-index, you have to create a stacking context. In this case, you can create one using flex-box. So, all I did was making item-container a flex parent and the images were partially hidden. After that whatever element you want to appear on top all you have to do is give it a higher z-index value. This will work without providing a z-index value because it will defer to using the DOM order. In other words, if you have two elements with the same z-index value the one that comes later in your HTML comes out on top. In this case, .item-container comes after .tab div, therefore coming out on top. If you wanted the tab to come out on top you would just give it a higher z-index value. Another way you could have solved this is by setting a height on the .tab div and using overflow: hidden on it so when the image spills over the tab, it would get cropped off. If you want to learn more about z-index this is a great article: https://www.joshwcomeau.com/css/stacking-contexts/.

.item-container{
display: flex;
flex-direction: column;
}