@Mohammad-Moneer
Posted
Hello there, You made a good solution 👍 I noticed one thing that could be a small enhancement to your code. Currently, you have the <img> element directly inside the .card container with a border-radius applied directly to the image. This approach works well, but in my solution I wrapped the image in a separate container (div) to ensure consistent application of the border radius and provide greater flexibility for future styling adjustments. This approach also improves the readability and maintainability of the code. Here's a small example of how you could modify your code:
HTML:
<main> <div class="card"> <div class="card-image"> <img src="./images/image-qr-code.png" alt="QR Code"> </div> <div class="card-text"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </div> </div> </main>CSS: .card-image { overflow: hidden; border-radius: 10px; }
.card img { width: 100%; }
Again, great job on your project! I hope you find this suggestion helpful.
Marked as helpful
