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 Display Page

Srivatsan 60

@srivatsan-droid

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


What are you most proud of, and what would you do differently next time?

Since its my first Project Learnt how to create a website according to the requirement given and also styling is difficult part which took most of my time so my plan is to improvise in styling next time

What challenges did you encounter, and how did you overcome them?

First challenge is i was not able to get the box under which the image and the rest of the text goes into so used field set at first and then by styling itself i tried to come up with the solution Next Thing is alignment according to the design provided was tough so in this case tried adding padding at first with different outcome of number but then used margin property and justify content in css

What specific areas of your project would you like help with?

i need help in the design part where i need to understand how can reduce the size of the box and come up with the exact match of the design and also how to add border at which place any clue to identify so it can be useful for me next time when i am trying something new

Community feedback

@akashmishrahaha

Posted

Take your time mate! You got it.

Marked as helpful

0

Srivatsan 60

@srivatsan-droid

Posted

@akashmishrahaha Can you suggest or recommend some ways to improvise my styling

0

@akashmishrahaha

Posted

In my opinion, try using flexbox, create a main div and inside that use

<div> for image <div> for para1 <div> for para2 and then place flex on main div. Or you can try this: https://github.com/akashmishrahaha/FrontendMentor Hope that helps!

@srivatsan-droid

0
Uche Ofatu 260

@Macnelson9

Posted

Hey there! Congratulations on your completion of this challenge! I see your QR code image isn't displaying, I myself encountered this same issue too. What you need to do is to change the file path inside of your html that you are hosting the page from.

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