QR code using Flexbox

Community feedback

• 

  Ahbideen Yusuf•160

  @bravonoPosted over 1 year ago

  Hello David, nice work you have done here. There is only one thing I think you can change in your design. The height of the card has been set to 95vh. I think it is best for you not to set the height of the card at all. This means that the card will grow according to the number of text it contains.

  Also try to use semantic elements like article, section, main, etc. Instead of the generic div element. I hope this helps.

  You probably also forget to add a shadow. If you look at the example design very closely you will see that the card component has a really soft shadow. The property to set a shadow in CSS is box-shadow.

  I also suggest that you make a separate file for your CSS instead of putting it in the same HTML file. This make your project well organized and easy to manage.

  Marked as helpful

  1

  ---

  

  David K. Boateng•50

  @kbthe2Posted over 1 year ago

  @bravono thank you for the feedback. Will correct the height of the card and add the shadow as well. Will implement the rest of your suggestions in the next challenge I complete. Once again thank you

  1

  

  Ahbideen Yusuf•160

  @bravonoPosted over 1 year ago

  @kbthe2 I can see you have added the shadow. I want you to take it even further.

  Look at this example of the box-shadow property below. box-shadow: 0px 10px 10px hsla(0, 0%, 0%, 0.1);

  The first value 0px means that there should be no horizontal shadow

  The second value 10px means there should be vertical shadow. You can experiment with different values for different sizes.

  The third value is the softness of the shadow. Also, experiment with the values to get a good look at the effect.

  The last value is the color of the shadow set to hsla so that I can control the alpha. The original color is black and since the alpha is set to 0.1 it turns to light grey.

  I want you to play with all of these values to see how they really work.

  Marked as helpful

  0

  

  David K. Boateng•50

  @kbthe2Posted over 1 year ago

  @bravono Alright noted. Thanks for the lesson.

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. One thing you can fix

  • The height of the card is stretching from top to bottom, change height: 95vh; to height: auto;

  .card {
  background-color: hsl(0, 0%, 100%);
  height: 95vh; /* change this to auto */
  border-radius: 15px;
  padding: 18px;
  max-width: 360px;
  }
  

  1

  ---

  

  David K. Boateng•50

  @kbthe2Posted over 1 year ago

  @hitmorecode Thank you for the feedback. Will correct it 😀

  0