5th Project - Stats Preview Card Component

A great challenge to practice responsive layouts

What I have learned:

1. difference between margin and padding

• Padding(padding is not collapsing) -Margin(is collapsing) - use when need to create space between different elements in container .item:not(:first-child) {margin-top: 0.5} or .item:not(:last-child) {margin-bottom: 0.5}

2. make image different colour

• use background colour property to the container where is image nested
• use mix-blend-mode: multiply to img tag

3. margin-top: auto

• if you use flexbox or grid and apply margin-top: auto it will separate element from the elements flow and make them responsive and on the bottom of the container

4. Do Not write in uppercase in HTML

• it might confuse screen readers
• use property text-transform instead