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

Responsive QR Code webpage using HTML5, CSS3 utilities.

@Ethical-Saleem

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?

I am proud that I was able to finish the project without using basic HTML5 and CSS3 elements without the need of frameworks.

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

I didn't encounter any challenge.

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

I don't need help with any aspect of the project. I was able to create the project myself.

Community feedback

MikDra1 6,220

@MikDra1

Posted

If you want to make your card responsive with ease you can use this technique:

.card {
width: 90%;
max-width: 37.5rem;
}

On the smaller screens card will be 90% of the parent (here body), but as soon as the card will be 37.5rem (600px) it will lock with this size.

Also to put the card in the center I advise you to use this code snippet:

.container {
display: grid;
place-items: center;
}

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

Marked as helpful

0
Lylais 10

@Lylais

Posted

The final design looks great, but it would have been better to separate the css and the html into different files

0

@Ethical-Saleem

Posted

Thank you for the feedback. I thought to also separate the style but since it's just a single HTML page, I decided otherwise. @Lylais

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