Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

html and css

@vinaygrewal

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


how to make picture round

and how to adjust size of a picture

Community feedback

@buraamaahmeda

Posted

hI you should add border-radius to your container and the image

Marked as helpful

0

@akshtt

Posted

You can add border radius and change the font to meet the expected output please refer to others solution to understand the where you are wrong and improve your project thanks

Marked as helpful

0

@hunchohoudini007

Posted

Hey, you should have used the border-radius attribute to provide a little curve to the container corners.

Marked as helpful

0

@zp021

Posted

Hi! Might be a small detail but I noticed that your font is not as per the challenge. This challenge used the Outfit font from google fonts, found here: https://fonts.google.com/specimen/Outfit

You can link it in your html file:

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">

Or import it in your css file: @import url('https://fonts.googleapis.com/css2 family=Outfit:wght@300;400;600&display=swap');

Hope this helps and happy coding 👍

Marked as helpful

0
Vanza Setia 27,795

@vanzasetia

Posted

Hi, Vinay! 👋

The repository URL is currently github.com. I recommend updating the URL to the repository of the project.

To make rounded corners on the image, you can use border-radius property to do that. I recommend reading the MDN documentation for the border-radius property to learn more about it.

Also, I suggest making the img as a block element and setting max-width: 100% to make it easier to work with img element.

That's it! I hope this helps!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord