Responsive web design using CSS flexbox and SASS

Hey, awesome work on this one. Layout in general looks great.

Other already gave their feedbacks on this which is nice, just going to add some suggestions as well:

• Always have a main element to wrap the main content of your page. On this one, the .container should be using the main instead of div.
• On the .container instead of using width: 22rem use max-width: 22rem so that it will adapt to a small screen-width, because by using width you are setting a fixed size.
• footer should be placed on its own row in the markup and not inside the .container which is supposed to be a main. A typical structure of a site looks like:

<header />
<main />
<footer />

This way, all element that has content are inside their respective landmark elements.

• Vector image should be hidden since it is decorative only. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
• Also when using alt attribute, avoid using words that relates to "graphic" such as "illustration" and others. An img is already an image/graphic so no need to describe it as one.
• Music-icon should be hidden so use the method I mentioned above.
• Lastly, just maybe making the layout a bit bigger like the original and the interactive elements be bigger as well.

Aside from those, great work again on this one.

hello my dear friend ♥ your project need some work to get close as possible to main design

• it's better to know very good units in css when you use them i mean it's not neccessary to use em or rem or even px in "img" they should fill the parent size
• actually in define fonts for your project it's very good to define it in body not in "*" or universal selector and you have an invalid value in the font-family you set it's because the ( ",") between the main and the backup font;
• don't give padding to the main container of your component it's make the img get press in card if you want padding on your card content add them into one single tag with class name for example (card-content) and add padding to that tag

This looks pretty good. All I'd suggest is fixing the font-family issue