blogpreviewCard

Hi, @rajaab100

I looked over your solution and wanted to address your question about the border-radius:

• You’ve applied border-radius: 10px to the SVG, but it might not be visible as expected. To investigate this, use DevTools in your browser (open your HTML page, press F12). If you’re not familiar with DevTools, I recommend learning how to use it, as it’s an essential tool for front-end development.
• Assuming you’re comfortable with DevTools, inspect the SVG element. You’ll notice that the visible part of the SVG is actually smaller than the element’s full size. The border-radius is indeed applied, but it affects the outer edges of the SVG. To see this more clearly, try adding a background-color to the SVG. This will show you the actual rounded borders, revealing that the border-radius is working as intended. Working with SVGs can be tricky due to their unique rendering properties.

There are other issues with your page, but I hope this explanation helps you with the border-radius issue.

Also, I’m unable to access your repository for this solution. It may have been set to private or deleted.

Hi. You can put image into a div and add border-radius to the div.

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

Hope you found this comment helpful :)