@8NeoN8
Posted
The code does include semantic html but still wrapped inside divs, which is not necessary for every element due to the semantics part, but some can still be used inside a div for better control, like the <img>
One improvement that I can tell you is sizes, the position of elements is perfect, but the size of the card changes all, to help with this what I do is create a <img> that has the design image as source, make it position absolute, put on the top left corner, and decrease its opacity and set the z-index high so that it always stays visible, the images already come at the correct sizes, and then you can follow the design with correct dimensions.
example of the reference image:
<img class="reference" id="reference" src="./design/desktop-design.jpg">
then in css
.reference{
position: absolute;
top: 0;
left: 0;
z-index: 10;
opacity: 0.5;
}
That way the dimensions of the design will matchup better.
Another little detail is the card border and the learning label. the border is a little thicker than the original and you had a typo on the learning label missing the capitalization on the L, the rest of the solution looks pretty great as I said perfect positions just missing the right dimensions
