QR code component using HTML and CSS

Hi Gabrielkyalo, I was seeing your solution. It is very good, that you have encouraged to share it and participate in this community. It will help you to improve your codes.

About this solution, I can tell you that it doesn't look very similar to the challenge design, I think you should have tried to make it more similar with all the details. For example in the "paddings", "font-sizes", colors. you even miss the "boxshadow" of the card.

Regarding the code, you should use semantic HTML, relative units. In addition, to use less lines of code, you can use the "shorthand" of the different attributes.

They are details, but they make the master. It is very good, that you are here, and that you have sent your solution.

Greetings.

Congratulations on completing your first challenge with Front End Mentor!

Your solution looks great. One quick tip if you don't mind, a lot of challenges here ask for the content to be centered vertically. The easiest way to do this would be to add the following CSS to your code:

body{
    height: 100vh;
    display: flex;
}

div.box{
    margin: auto;
}

Good luck, and happy coding.

Hey @gabrielkyalo, Congratulations!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

Improve the semantic by replacing the <div> used for box and using instead <section> is a better tag, remember that <div> doesn’t have any effective meaning is just a block elements, so for a big block of elements use semantic tags.

This is a good resource to understand more about semantic tags: https://www.w3schools.com/html/html5_semantic_elements.asp

You have use padding padding-top padding-bottom in your box class firstly understand if you are using padding then you do not have you padding-top padding-bottom padding-left padding-right

.box{
  padding: top right bottom left
}

if you use padding and put just one value then that value will be applied to all the side in the box

.box{
  padding : 1rem;  
   /// it will apply to all the side of the box
}

for the text just apply text-align: center

✌️ I hope this helps you and happy coding!