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 component using HTML and CSS

marlar 50

@marlar-tz

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?

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

In this challenge , I learnt about front face rule in order to use desired google font for HTML element.For this solution , I added font file into the folder and pointed to that file in order to use that specific font.

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

Community feedback

@AkoToSiJeromeEh

Posted

Hi there! Great work out there! I noticed that the QR Card component is not vertically aligned, and I recommend adding CSS properties to the body or specific element , such as d-flex and its related properties. Additionally, it's important to include min-height or height for proper alignment. By adding this to the body properties, you can achieve centering of the QR Card component. . I hope this suggestion helps and works for you. Happy coding!

body {
  background-color: hsl(212, 45%, 89%);
  min-height: 100vh;   // add this
  display: flex;  // add this
  align-items: center;  // add this
  justify-content: center;  // add this
  flex-direction: column;  // add this

}
.container {
  width: 273px;
  align-content: center;
  margin: auto; // you can remove this
  text-align: center;
  padding: 15px;
  margin-top: 200px; // you can remove this
  background-color: hsl(0, 0%, 100%);
  border: 1px solid hsl(0, 0%, 100%);
  border-radius: 10px;
}

Marked as helpful

0

marlar 50

@marlar-tz

Posted

Thank you for your helpful suggestion. I truly appreciate your input and will certainly explore it. @AkoToSiJeromeEh

0

@AkoToSiJeromeEh

Posted

@marlar-tz welcome i hope suggestion helps

Marked as helpful

0
marlar 50

@marlar-tz

Posted

Wow .It really helps .Thanks again @AkoToSiJeromeEh

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