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

Qr code - 1st challange on frontmentor.io

Facundoโ€ข 40

@1991facundo

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


I could't make it the letters to look like in the guide you sent me. How can i do it properly?

Community feedback

Reuben๐Ÿ‘พโ€ข 560

@Rubylenshy

Posted

Hi @1991facundo ๐Ÿ‘‹, a very nice job you've done here. However, here are some suggestions on how your build-up should look exactly like the design:

  • I see that @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap'); is not placed in the first line of your stylesheet code. Move that code up to the first line if you may.
  • Change <div class="container"></div> to <main></main> tag as this will show that it is the main content of the webpage, do a similar thing to the <div class="attribution"></div>, change that to a <footer></footer> tag.

I hope this helps ๐Ÿ‘

Keep Coding @1991facundo

Marked as helpful

0

Facundoโ€ข 40

@1991facundo

Posted

@Rubylenshy Thank you very much for your help and advice!

0
Akram Adjabโ€ข 380

@akramAdjab

Posted

Hello @1991facundo, Congrats on completing this challenge

I've checked your solution and noticed some errors you made

  • Always use a very light shadow, don't use a dark shadow as it will make your user experience very bad.
  • Try to reduce the title's font-size this is also to create a great user experience

Hope my feedback was helpful ๐Ÿ™Œ๐Ÿป

Marked as helpful

0

Facundoโ€ข 40

@1991facundo

Posted

@akramAdjab Thanks for the feedback, it was helpful!

0
Akram Adjabโ€ข 380

@akramAdjab

Posted

@1991facundo my pleasure ๐Ÿ˜€

0
Eseogheneโ€ข 550

@EseAlli

Posted

Great job Facundo, you can change and make the text look like the guide by setting a font size the h1 tag.

.container h1{
 font-size: 1.5rem;
}

Marked as helpful

0

Facundoโ€ข 40

@1991facundo

Posted

@EseAlli Thanks for the advice, much appreciated!

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