Not Responsive

👋 Hi Ibraheem!

I agree with all feedback that Jason has said. In addition to that, I recommend you, to join the Frontend Mentor slack to get help.

Also if you're not comfortable yet with responsive website, I recommend you to learn about it first and then go back and refactor this project.

😉 Keep learning!

As you've already mentioned, this website is not responsive. You'll need to use media queries to set the styling for mobile devices.

These are a few things to look into fixing with your design (although certainly not an exhaustive list).

• Make sure you're using landmark elements (such as main, footer, nav, section) instead of always using a div. (You have used these a class declarations, so you know where they need to be).
• Instead of pasting the code from the SVG images into the HTML, you can of course use an <img> tag to place the image. This should make your HTML more readable (however it doesn't break things if you don't do this).
• Following on from this, you have placed the background image into the HTML, instead of using CSS to place the background. My advice would be to set the background on the body using the background CSS property.
• Your CSS has very strict specificity. You normally don't need to use so many selectors to style an element. For example, you use ".container .card .body .about .details", where you could achieve the same styling just using the ".details" selector.

Keep working on it, and you'll get there!