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!
@heyitsgany I'm very grateful :) thank you i will make sure to do your advice next time.