All comments

• 

  Sérgio Faria• 70

  @serFar

  Submitted about 2 years ago

  What do you recommend to improve this code?

  

  Stats Preview Card

  4

  30

  

  101Amine• 260

  @101Amine

  Posted about 2 years ago

  Hello @serFar , congratulation on completing this challenge!

  1 - There's a way to center your container without using the position absolute and stuff, you can add .container { align-self: center; } and then add this to your body

  body {
         height: 100vh;
         display: flex;
         align-content: center;
         justify-content: center;
  }
  

  2 - Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. These units are better to make your website more accessible. REM does not just apply to font size, but all sizes as well.

  3 - If you want to add the same effect of the design for the image overlaying it with purple there's a shortcut that is by using mix-blend-mode with the mode multiply and with an opacity around opacity: 82%. but i don't think you can use it with the background-img:

  img {
  mix-blend-mode: multiply;
  opacity: 82%;}
  

  And just a last tip that was given to me too, add the correct size for the container max-width: 1110px to dont have it growing more than it should.

  I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  Samed• 10

  @SamedLepir

  Submitted about 2 years ago

  My first project here, any feedback is welcome! :)

  

  QR Code Challange

  4

  40

  

  101Amine• 260

  @101Amine

  Posted about 2 years ago

  • Hello @SamedLepir, congratulation on completing this challenge!

  1 - The image doesn't show because u'll need to add a dot before the image path, './images/..'

  2 - I think it would be much better to just use the img tag directly <img src='..' alt='..' />

  3 - And as Mr @Hyron mentioned in one of his comments, instead of using margin to center the div you can use flexbox

  body {
      background-color: hsl(212, 46%, 89%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Hope this was helpful for you, happy coding

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Solomon Adegboyega• 10

  @solomonade1

  Submitted about 2 years ago

  Please check out my first challenge and let me know what I need to improve on

  

  Responsive QR code Page using HTML and CSS

  2

  20

  

  101Amine• 260

  @101Amine

  Posted about 2 years ago

  👨‍💻 Hello @solomonade1, Congratulations on completing this challenge!

  • Good work, you just need to decrease the fonts a little bit and add more padding to make it look better, In the p tag p { padding-block: 1rem; }

  • Use relative units as rem or em instead of px to improve your performance, because a pixel is not responsive and that's why it's better to use REM

  Hope that was helpful for you, have a good day

  0

  This comment has received 1 replyShow
• 

  101Amine• 260

  @101Amine

  Submitted about 2 years ago

  

  Stats preview using HTML & CSS

  2

  20

  

  101Amine• 260

  @101Amine

  Posted about 2 years ago

  I've actually struggled hard how to get image to look like that, with the purple layout.

  I would love if someone knows how to do it with css, I've tried mix-blend-mode : multiply but it just made it almost completely invisible.

  Thanks for that challenge it was pretty interesting, see you in the next one!

  0